ヒーローイメージをデザインするための10のヒント。大きい以外に何が必要？

連載

エクスペリエンスデザインの基礎知識

サイトを訪問したユーザーは、そこで何らかの反応を示します。反応が肯定的であれ否定的であれ、それは主に彼らが目にしたもので決まります。視覚は人間の一番の感覚です。訪問者の注意を惹き付けるには、ヒーローイメージはもっとも手早い方法のひとつです。大胆で生き生きとした、そして意図的に配置された画像は、ユーザーを惹きこみ、ミニマリズムのアプリやWebサイトに最適な相性の手法です。

ヒーローイメージは、単に見た目の良いだけの画像ではなく、強力なコミュニケーションツールにもなります。
この記事では、ヒーローイメージを使うヒントをいくつか紹介します。

1．意味を持たせる

ヒーローイメージは自己紹介のようなものです。ユーザーに、このサイトには何が期待できるのかを予期させます。ヒーローイメージの役割は、訪問者に即座にWebサイトの内容と目的を伝えることです。もし、ヒーローイメージがWebサイトのコンテンツを正しく表現しないのなら、ユーザーにとっては無価値です。画面の貴重な場所を無駄にするだけでなく、混乱の原因になるかもしれません。製品のブランドイメージに一致しない画像の使用は、容易にユーザーを困惑させるでしょう。

画像選びを誤った分かりやすい例 – この画像が銀行ローンに関連すると、すべての人に理解できるだろうか？

写真の選択には拘りましょう。つくろうとしている体験のテーマや目的に合った物を選びましょう。Lunet Eyewearのヒーローイメージを見てください。サイトのメッセージを明確に伝えています。画像は、ブランド表現そのものです。

製品の宣伝や販売を目的としたサイトに使うなら、ヒーローイメージは製品の利点を表すべきです。製品の外観の紹介だけでなく、実際の状況での使われ方を示す画像の使用を考慮しましょう。

製品自身に売り込みさせるのは最適な手段。ヒーローイメージで製品の利点を明示する

デジタル製品やサービスについても同様です。動作するデバイス上のスクリーンショットを使い、アプリやサービスから何が期待できそうかを示しましょう。

Slackはヒーローイメージにアプリのインターフェースのスクリーンショットを使用している

もちろん、ヒーローイメージを選び、デザインするのは簡単ではありません。そこで、判断基準となるガイドを使って、作業を簡素化します。アンジー・ショットミューラーは、ヒーローイメージを判断するための7つのポイントを提案しています。

2．画像は屋台骨

ヒーローイメージは一番伝えたい情報の容器として最適です。何か特別で抜き出たものを用意して、サイトを訪れるたびに、ユーザーが目に留めて意識するようにしたいところです。しかし、画像がすべてを語る必要はありません。メッセージを、デザインに適した方法で視覚的に強化すればよいのです。

(画像: Breitling)

3. 感情に訴える画像を選ぶ

デザインはその中に感情を宿すべきです。画像が感情に訴えることで、想像力をかきたてたり、植えつけたい感情を強化します。人が重要な決定をするときは、しばしば感情が論理を上回ります。肯定的な感情は、ユーザーを取り込むのに適した雰囲気を作るよい刺激になります。

(画像: Coca-Cola)

(画像: Adobe)

4. 読み込みと表示を可能な限り早く

ヒーローイメージは重要なデザイン要素ですから、すばやく表示されるべきです。残念ながら、多くのヒーローイメージを使用するサイトが、スクリプトやスタイルシートなどに起因する理由で、表示の遅れを起こしています。

デザイナーは、ヒーローイメージが表示さえるまでの時間に注意するべきです。しかし、いまのところブラウザーはコンテンツが表示可能になったことを知らせる手段を提供しません。そこで、Steve Soudersは彼の著書“Hero Image Custom Metrics”で、ヒーローイメージが配置されるページに、その表示にかかった時間を計るための計測手段を追加するよう提唱しています。

下の簡単な例は、インラインのスクリプトのタイマーを呼び出します。imgタグの直後に置かれ、時間を記録します。

<img src=”hero.jpg” onload=”performance.mark(‘hero1’)”>
<script>performance.mark(‘hero2’)</script>

このコードはUser Timing APIの特性を利用しています。どのように動作するかは、スティーブのテストページをご覧ください。

5. 高解像度の画像だけ使用する

画像は、ぎざぎざしていたりボケていてはなりません。サイズが大きくて低品質な画像ほど悪いものはありません。ヒーローイメージの手法を使うなら、画像がすべてであり、初見の印象が勝負です。そのためにも、高品質の画像を用意しましょう。

品質を落とした画像と適切な品質の画像

6. 異なる画面サイズに配慮する

すべての画面とプラットフォームに適切に画像が表示されるよう配慮しましょう。小さな画面のために画像のリサイズや切り抜きを行う必要があったとしても、画像をすべてのデバイスのために最適化します。

ひとつの画像がすべての解像度の画面とデバイスに十分でないことは明らかです。表示されるデバイスの解像度や向きに関係なく、サイトがきちんと表示されるようにつくるのは厄介ですが、ありがたいことに、この問題には助けがあります。Responsive Breakpoints Generatorは、画像の大きさ分けを支援する、無償のオープンソースWebツールです。

Responsive Breakpoints Generatorは、複数サイズの画像の管理の役に立つ

7. アクションにつながる要素を強調する

ヒーローイメージは中心的な要素ですが、アクションにつなげることを目的として、他に重要な要素をページに含めることもあります。その際、アクション要素を、画像と競合させてはなりません。強調するためには、色がとても重要です。アクションボタンは、通常よりも明るく輝くようにしましょう。

ボタンの視覚的な比重は、大き目の画像サイズに合ったものにする

画像をぼかして、アクションにつながるかテストする

ページの視覚的な階層をテストするために、ぼかし効果を使いましょう。ぼかしによるテストは、ユーザーの目を注目させたい場所に集められるか試すのに役立つ簡単なテクニックです。するべきことは、サイトのスクリーンショットを取って、Adobe XDを使ってぼかし効果を適用するだけです。ぼかしたページでは、どの要素が目立っているでしょうか？もし目に入ったものが気に入らなければ、デザインに戻って修正しましょう。

ぼかしテストは、デザインの視覚的な階層を調べるテクニック

8. コントラストをはっきりとデザインする

画像の上の文字がはっきり読めるようにデザインしましょう。画像と調和し、太くて読みやすく、背景から目立つ字体を選びます。画像と重ねる場合は、画像の主要な箇所が隠れたり分かりにくくなったりしないように注意します。

オーバーレイ

画像上に直接テキストを配置するのは最も簡単な方法です。しかし、画像とテキストのコントラストが不十分なときは、画像全体に半透明の色を重ねた上にテキストを配置してみましょう。

Outlinesは色を画像に重ねている

ヒーローイメージを強化する目的でブランドの色を使うことがあります。製品やブランドページをデザインしているなら、既にブランド色に関係する色が選ばれていることでしょう。画像の上にメインの色を重ねてみましょう。

Cliqueのヒーローイメージは、アプリ画面の青を多く使っている

スクリム

別の方法は、スクリムの手法を使ってテキストにコントラストを追加することです。スクリムは、画像に重ねる半透明のグラデーションです。

透明度の値はコンテキストに依存する。 (画像: Material Design)

グラデーションの透明度は、環境に応じて選択します。下のようなヒーローイメージであれば、暗めのグラデーションが求められるでしょう。（この例では60%）

(画像: Material Design)

このようなテクニックを実装する実践的なアドバイスが、CSS-Tricsの記事“Design Considerations: Text on Images”に紹介されています。

9. リアルな人物を見せる

人物の写真の使用は、ユーザーを惹き付けるのにとても効果的です。人の顔を見ると、私達はその人とのつながりを感じ、そのため、単に製品を購入しているだけのように感じません。しかし、多くの企業サイトが、信頼を構築するために採用した偽善的な写真の使いすぎを批判されています。

ユーザビリティテストが示しているのは、単純に（下の画像の様な）装飾的な写真が、デザインに価値を追加することはまれで、むしろ、しばしばユーザー体験を害する効果を持つことです。従って、特に理由も無く微笑んでいる一般的なビジネスパーソンの画像は避けるべきなのです。

お飾りの画像は、浅はかで信頼できない印象をユーザーに与える

ごく大雑把な目安として言えるのは、アプリやサイトの特性に合った人の写真を使うことです。画像は、製品、会社、文化を誠実に表現するものであるべきです。

(画像: Daniella Draper)

(Image: The Renovator)

以下はいくつかのヒントです：

10. パーソナルな雰囲気のイラストの使用を検討する

ヒーローイメージはビジュアル要素に過ぎません。どんな種類の画像でも目的に合う可能性があります。イラストレーションは、写真よりもパーソナリティを持つ画像として急速に広まっています。画像のコンテンツや詳細の処理の自由度は、イラストレーションの方が高くなります。専用にあつらえたユニークなイラストレーションを使えば、たくさんのサイトの中から目立たせて、より良くブランドを想起させることもできるでしょう。

Dropboxは理解の容易なイラストにより、複雑なアイデアを明確に伝えている

イラストは想像力に訴え 訪問者と強い個人的な結びつきを成立させる。 (画像: Basecamp)

機能させるために、イラストレーションは簡単に理解可能でなければなりません。また、異なるユーザーが見ても、伝えたい情報は同じように理解されなければなりません。複数のイラストを使用する場合には、見た目の一貫性、つまり、同じ人が書いたものであるかような共通するテイストを持たせることが重要です。

終わりに

高品質で、見た目に興味深く、コンテンツと一致している限り、ヒーローイメージは、すばらしい選択肢です。十分なコントラストと、明確なアクションへの誘導をデザインすることが、この手法の成果をもっとも高めるポイントです。

※ この記事はWhen Large Isn’t Large Enough: Designing With Hero Images（著者:Nick Babich）の抄訳です