ヒーローイメージで印象を大きく変える10のデザイン事例
ヒーローイメージを使ったWebサイトのデザイン手法を事例を元に紹介しています。より印象に残るWebデザインにする際にヒーローイメージは有効な手段です。ユーザーの記憶にも残りやすいデザインを作るヒントを得られるはずです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。
本記事は、UI/UXデザイナーのNick Babich氏によって投稿されました。
あなたのWebページを訪問したユーザーは、何らかの反応を示すでしょう。 ユーザーの反応は、肯定的であれ否定的であれ、大部分は彼らが何を見るかによって決定されます。 視覚はおそらく人間の最も優れた感覚であるため、ヒーローイメージは、ユーザーの関心を引く最も手っ取り早い方法の1つといえます。
大胆で、グラフィックを使用した、メッセージ性の強い画像は、ユーザーの関心を引きます。 ヒーローイメージすぐにユーザーを惹き込み、ミニマリストデザインのアプリやWebサイトにおいて完璧な中心的存在となるでしょう。
ヒーローイメージは単なる美しい画像以上の存在です。それは強力なコミュニケーションツールです。この記事では、ヒーローイメージの使用に関するヒントをいくつか紹介します。
1. Webサイトの内容と関連性を持たせる
ヒーローイメージは導入として考えてください。ヒーローイメージはユーザーに、Webサイトの他の部分に何を期待できるかを連想させるものです。ヒーローイメージの目的は、あなたのWebサイトが何であるか、また伝えたいアイデアは何であるかを、瞬時に訪問者に伝えます。
ヒーローイメージがWebサイトのコンテンツの意図を上手く伝えていない場合、ユーザーに役立つものにはなりません。かえって画面上の貴重なスペースを無駄に使い、ときには混乱の原因にさえなります。画像がブランドや製品に対する先入観に合わないと、ユーザーは混乱します。
悪い画像選択の代表的な例、誰もがこの画像（上記参照）が銀行ローンに関連することに気づくとは限りません。
画像選びは妥協してはいけません。あなたが創造しようとしているキャンペーン、テーマ、目的に合うものを選んでください。上記のLunet Eyewearのヒーローイメージを見てください。Webサイトのメッセージを明確に伝えています。画像のコンテンツはブランドを表しているのです。
製品の宣伝または販売のためにWebサイトを使用している場合、ヒーローイメージの利点を活かすことができるはずです。
製品のコンテクストに合うヒーローイメージを使用してください。そして、製品の外観だけでなく、実際の設定で製品がどのように機能するかを示しましょう。
製品を販売する最良の方法は、商品それ自身に販売させることです。ヒーローイメージは製品のメリットのデモを行うことができます。
デジタル製品やサービスについても同様です。互換性のあるデバイス上でのスクリーンショットのモックアップを作成し、あなたのアプリやサービスの使用感を人々に伝えましょう。
Slackは、ヒーローイメージとしてアプリのインターフェースを採用しています。
もちろん、ヒーローイメージのデザインと選択は難しいことです。そこで、Angie Schottmuller氏はヒーローイメージの判断基準として、7つのポイントで構成されるフレームワークを作成しました。
- キーワードの関連性
画像はターゲットキーワードを視覚化できているでしょうか？
- 目的の明確さ
画像はWebサイトのメッセージを明確に伝えていますか？
- デザインのサポート
画像は行動喚起（Call To Action）を促すためにページフローをシームレスにサポートしていますか？
- 信頼性
画像はあなたのブランドを信頼感のあるものとして表現していますか？
- 付加価値
画像は関連性を高めたり、ユーザーにとってのメリットを示していますか？
- 望みの感情
イメージは、あなたがユーザーに望むアクションを引き起こさせる感情を描写していますか？
- 主人公としての顧客
顧客は製品を購入したら主人公になれるということを描写していますか？
2. 画像を中心的存在にする
ヒーローイメージは、少ない情報を伝えるには完璧な環境です。 はっきりと目立つものがよいでしょう。 ユーザーはWebサイトに訪問する度に立ち止まって眺めることになるでしょう。
しかし、画像ですべてを伝える必要があるという意味ではありません。 むしろ画像は、関連性を持たせた方法で、メッセージを視覚的に強化することが必要なのです。
3. 感情的に説得力のある画像を選択する
デザインにも感情を組み込むべきです。 感情的な影響を与え、インスピレーションを生み出し、あなたがユーザーに望む感情を高めるような画像を選択するべきです。
結局のところ、人々が重要な意思決定をするときに、しばしば感情は理性を上回ります。 肯定的な感情を刺激することによって、ユーザーとのつながりを構築することができます。
4. 読み込みとレンダリングは可能な限り早くする
ヒーローイメージは重要な設計要素なので、素早くレンダリングする必要があります。残念なことにヒーローイメージの多くのデザインは、HID（ヒーローイメージ遅延）という現象に悩まされています。これは主に、スクリプトやCSSのスタイルシートによって読み込みがブロックされることが原因です。
デザイナーは、ヒーローイメージがいつ表示されるかに焦点を当てる必要があります。しかし、これは想像以上に厄介です。モダンブラウザでは、いつコンテンツが表示可能になるかを知るためのフックがありません。
1つの簡単な例は「インラインスクリプトタイマー」であり、これは時間を記録し、imgタグの直後に置かれるものです。コードは次のようになります。
<img src="hero.jpg" onload="performance.mark('hero1')">
<script>performance.mark('hero2')</script>
このコードはUser Timing APIを利用しており、Steve氏の作成したテストページでどのように動作するかを見ることができます。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
5. 高解像度の画像を使用する
画像は、ピクセル化（画像が粗くなり個々の画素が見えること）したりぼやけて表示されるべきではありません。
低画質の画像ほど悪いものはありません。ヒーローイメージは、画像がすべてであり、第一印象が重要になります。そのため高画質の画像を使用しましょう。
重要なヒーローイメージの場合、要素とsrcset属性やsizes属性を使用して、さまざまな画像のバリエーションを提供することが重要です。
低画質の画像 vs. 適正にサイズ調整された画像
6. 異なる画面サイズを考慮する
画像は、ディスプレイやプラットフォームに合わせて適切なサイズにしてください。すべてのデバイスに合わせて画像を最適化します。これは、小さなデバイスでは、大きな画像をサイズ変更（リサイズ）またはより小さな画像と交換することです。
レスポンシブデザインのWebサイトの開発者は、たとえモダンなWebサイトの場合でも、さまざまなデバイスに合う最適な画像解像度を選択することに苦労します。
すべての画面解像度とデバイスに対して、1つの画像では足りないことは明らかです。Webサイトは、すべての異なるデバイスにおいて、またすべての異なる解像度、ピクセル密度、向きにおいて完璧に表示されるように適応しなければなりません。レスポンシブWebサイトを構築する際、開発者が直面する主な課題の1つは、メディア（特に画像）の管理、操作、配信です。幸い、この問題の解決策があります。
レスポンシブブレークポイントジェネレーターは、画像のブレークポイントをインタラクティブに生成するのに役立つ、無料のオープンソースのWebツールです。
レスポンスブレークポイントジェネレーターは、複数のサイズの画像を管理するのに役立ち、レスポンシブデザイン画像のブレークポイントをインタラクティブに生成できます。
7. 行動喚起（Call To Action）を強調する
デザインの主役はヒーローイメージにするとしても、行動喚起（Call To Action、以降CTA）などの要素も含める必要があります。
ただし、CTAはヒーローイメージと競合させるべきではありません。色は強調のために非常に重要です。CTAのボタンは他の要素よりも明るい色で目立つようにするべきです。
CTAのボタンの視覚的な重みは、ヒーローイメージと均斉がとれるようにしましょう。
ぼかし効果を行動喚起（CTA）にテストする
ぼかし効果を使用して、ページの視覚的階層をテストしましょう。ぼかし効果のテストは、ユーザーの視線が本当にあなたの思惑通りに移動するかを実験する手助けとなる、簡単なテクニックです。
必要な手順は、Webサイトのスクリーンショットを撮り、Adobe XDでオブジェクトのぼかし効果を適用することです。
例として、以下のCharity WaterのWebページを見てください。ページのぼやけたバージョンでは、どの要素が目立っているように見えますか？その印象をあなたが気に入らなければ、戻って修正しましょう。
ぼかし効果のテストは、デザインの焦点と視覚的階層を明らかにするテクニックです。
8. コントラストをデザインする
画像の上にあるタイポグラフィが読みやすいか確認してください。太文字で読みやすくて画像と調和する、しかし画像から独立して目立つようなタイプフェイスを選択してください。
画像の上にテキストを配置する予定の場合、画像の主要部分が見えて、認識可能であることを確認してください。
オーバーレイ
おそらく最も簡単な方法は、シンプルなテキストを画像の上に直接置くことです。ただし、テキストと画像のコントラストが十分でない場合は、画像全体に半透明色のオーバーレイを加えると効果的です。
Outlinesは、カラーオーバーレイを使用しています。
ブランドカラーを使用すれば、ヒーローイメージを向上させることができます。既存の製品やブランドのデザインをしている場合は、特定の色がすでにそれらに関連付けられている可能性が高いでしょう。
原色を特定し、それを画像の前面に表示してみましょう。
Cliqueのヒーローイメージは、アプリの青いインターフェースの色調と合っています。
スクリム（scrim）
あるいは、スクリムを使用してテキストにコントラストを追加することもできます。スクリムは、オーバーレイされたテキストをより読みやすく柔らかい印象にするために使用される、半透明のレイヤーです。
不透明度の値はコンテキストに依存します。
デザインに応じてグラデーションの不透明度を選択します。一部のヒーローイメージには、以下に表示される画像のように暗めの60％のグラデーションが必要です。
9. 実際の人物画像を使用する
人物画像を使用することは、ユーザーの関心を引くのに非常に効果的な方法です。私たち人間は、人物の顔を見ると彼らとつながっているように感じ、単に商品を買っているような気分にはなりません。しかし多くの企業のWebサイトで、「信頼を築く」ための偽善的な印象の人物画像が使用されていることは、残念です。
ユーザビリティテストでは、純粋に装飾的な画像（以下に示すような）がデザインに価値付加を与えることは滅多になく、ユーザー体験を向上させるというより、むしろ逆効果であると示されています。
したがって、笑顔で無難な印象のビジネスパーソンの画像を理由もなく使用するのは避けてください。
不自然な画像は、浅はかで偽善的な印象をユーザに残します。
実践上役に立つルールは、あなたのアプリやWebサイトのキャラクターのイメージに合う人物の高品質の画像を使用することです。画像は、商品、企業文化の本物を表現したものでなければなりません。
以下にいくつかのヒントがあります。
- 混雑したショットの画像は避けてください。主役となる被写体が1つの写真を使用します。
- 本物のストーリー性を持つ画像を追求してください。興味深い活動をしている人々の写真を撮ってください。製品がある場合、人々がその製品を使用している写真を撮ることも検討してください。
10. ヒューマンタッチな（人間的な触れ合いの感じられる）イラスト
ヒーローイメージは単なるビジュアルです。あらゆる種類の画像を利用することができます。イラストは人気の高い選択肢になりつつあり、時には写真よりも個性豊かな表現が可能です。
イラストは、画像のコンテンツとテクニックによる詳細なデザインの両方を、より制御できます。ユニークなイラストを使用すると、他のサービスと差別化され、より良いブランドの知名度を高めることができるでしょう。
Dropboxは、簡単に理解できるイラストを使用してメッセージを明確に示し、複雑なアイデアを伝えます。
イラストは想像力に訴えかけ、見る人との間に強いつながりを確立します。
イラストが機能するためには、容易に認識可能なものでなければならず、それが伝える情報は見る人が異なるとしても同じ様に解釈されるものでなければならないのです。
複数のイラストを使用する場合、一貫性がなければなりません。ソースが同じであるように、つまり同じ人がイラストを描いたように、見えるようにしましょう。
結論
クオリティが高く、見るのが楽しく、コンテンツと上手く機能する限り、ヒーローイメージは素晴らしい選択肢です。この技巧を最大限に活用するには、十分なコントラストとCTAのある設計にしましょう。
また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを作ることが可能です。
独学に限界を感じている場合はご検討ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
