写真や文字の優先順位

家具の広告バナー制作を請け負ったとします。
製品特徴は若者向け。与件としてはシンプルに「アクセス数を増やす」で良いでしょう。

広告バナーを作る際に最低限必要な要素は「文字」と「写真」です。文字と写真の優先順位は、製品の内容により異なります。 製品の形状・デザインを見せたい場合や、目を引く写真を見せたい場合は写真が優先されますが、 多くは文字を読ませ写真はそれを補足するものという考えが多いでしょう。

広告バナーに使う、最初の用意するものとしては以上のようなものです。
これらを優先順位にそって配置してみましょう。

1. ロゴは左右上部に配置するのが一般的です。
2. キャッチコピーはリードコピーより優先順位が高いので、配置も上部になります。

次に文字のサイズを変更します。

1. リードコピーは「読んでくれたら幸い」程度に考えます。キャッチコピーに惹かれて読んでみようと思う人以外、ほとんどの人は読みません。
2. このバナーは「チェア」を探している人向けなので、キャッチコピーは「チェアの選び方」を大きくしました。

要素が優先順位に沿って枠の中に収まれば、配置はひとまず完了です。

基本的に人間の目線は左上から開始され、右下に流れていくのが自然です。
このように余白があることで 目線の流れ や 優先順位を伝える 事ができます。
余白は「ホワイトスペース」とも呼ばれます。

余白がない一番右の例では画面に色や形がいっぱいに入っており余裕がありません。
そのせいで立体感がなくなり要素の優先順位があいまいになっています。

余白のある写真を使ったり文字の大きさを調整し、余白を作っていきましょう。余白がない写真の場合はトリミングを変えたり、 余分な部分を消すような修正作業が必要になります。

目を引くための「アイキャッチ」を作ります。アイキャッチとは一番最初に目に入る要素のことです。
目線の流れの最初の起点を作る作業です。この段階で、要素に対するおおよその色調を決めていきます。

目線は、大きいものから小さいものへ、同じ形どうし、同じ色どうし、濃い色から薄い色へ、と移動する習性があります。 下の図形の目線はどうなるでしょうか？

おそらくこのような目線になると思います。

目線の法則（上から下、左から右）から外れた誘導も可能となります。
矢印の先（目線の先）に重要な要素を配置すれば、思い通りに誘導することができます。

バナーは以下のような考えの過程でデザインされていきます。

1. 最初に目に飛び込ませたい要素を大きくし色を、椅子の脚の色を濃くした色に変えておきます。
2. 上部に有るけどメインではない要素の色を薄くして背景に溶け込ませます。
3. 文字の組み方（レイアウト）を変更し、真ん中に余白を作り、椅子への目線を邪魔しないようにします。

目を細めて観察すると、目線の流れを追うことができます。

ユーザーはゆっくりバナーの内容を読んでくれるわけではありません。 多くのコンテンツの中からバナーを認知してもらえる時間は0.1秒以下でしょう。
その限られた時間のなかで、「チェア」という言葉と「椅子の写真」を認知してもらえたらこのデザインは合格だといえます。
これで椅子が欲しいなと思っているユーザーであれば、内容を読んでくれる可能性が広がりました。

ただ文字と画像を並べただけでは平坦な印象で目に止まりません。画像の中で立体感を出し 読みやすさ・目に留まる箇所 を意図的に作ってあげると機能を果たすようになります。

なじませたり立体感を出しながら、まず「見れる」状態まで持っていき、上長にデザインを確認しましょう。

バリエーションとしては以下のように展開することができるでしょう。写真を変えることが可能な場合はよりデザインの幅が広がりますね。