ユーザーの視線を惹きつける、訴求効果の高い画像の使い方

Smashing Magazineのエントリーから、画像を使ってユーザーの視線を惹きつけて、印象に残るメッセージを伝えるウェブサイトを紹介します。

Vivid Imagery In Modern Web Design
上記サイトでは、他にも例を掲載しています。

各サイトの解説は、簡単な超意訳です。

Komodomedia
ウェブデザインで大切なものの一つに、視覚的に魅力的であることがあげられます。
カラースキーム・タイポグラフィ・ホワイトスペースが絶妙なバランスで使用され、さらに画像が大きな相乗効果を生み出しています。

Mark Jardine
ユーザーの注意を惹きつける画像を使用する場合、画像の数を少なくするのは非常に効果的です。このサイトでは１つのイラスト画像しか使用していませんが、ギターの少年はギターがとてもうまく見えて、そのイラストは印象に残ります。

3000k | Develop + Grow
目に飛び込むような鮮明なイメージを使用すると、ユーザーにメッセージを伝えやすく、視線を集めることができます。このサイトでは人の手に苗木を持たせ、「成長(grow）」を印象づけています。テキストのみではなく画像を使用することでより印象に残ります。

Eric Benoit
タグラインの内容をより効果的にユーザーに伝えるための画像の使い方の例です。オレンジの画像はタグライン「squeeze」にかけて使用しています。このオレンジの画像は、ユーザーがページを見た瞬間、目に入り、強い印象を与えます。

Idea Scale
ブランディングの効果を高める例です。電球は創造やアイデアを、植物は成長やライフを想起させ、タグラインを補完します。

DoxReady
サイトの訴求ポイントを画像で表現した例です。
手とストップウォッチの画像は、タグライン「時間とお金を節約しましょう」を補完します。ユーザーがテキストを読む前に、画像はタグラインの要点を強調します。

Orange Label
印象に残る効果的な画像の使い方の１つにセクシーな画像を使用する方法があります。
このサイトを見た多くの男性は、水着の女性の画像に注目するでしょう。これはタグライン「私達は何が顧客を惹きつけるか知っています」を補完し、実際にそれが可能であるということを証明します。

No Milk Today
背景の使い方の例です。
気を散らすようなイメージを背景全体に使用し、ページのカラーやスタイルにフィットさせています。そして、ロゴ「No Milk Today」の周りだけ背景を変え、ユーザーの目を惹きつけます。

KAVOON
ライトとシャドウを巧みに使用すると、非常に効果的です。
暗い背景に強いライトを使用するとユーザーの視線を集めます。

ShoeGuru
大きい画像を使用した例です。
テキストを最小限にし、ユーザーの印象を強くします。もし画像やテキストが多かったら、これほど強い印象を与えないでしょう。

RedChilli
カラーはユーザーのデザインの認識に大きな影響を与えます。
このサイトでは強烈な赤が使用されて、鮮明なイメージを与えています。
カラフルなイメージを使用する時は、性別・年齢などにより好みがあるのに注意してください。