視線の動き方の傾向を踏まえて、バナーでよく使われる王道のレイアウトについて確認していきましょう。
縦並び型
視線は上から下に動きやすい」ということで、要素を縦に並べたレイアウトです。
Z型やF型の視線の動きにもマッチしています。
- 情報量（テキスト量）が少ない
- 伝えたい要素がシンプル
- ひとつの要素を強く押し出したい
- シンプル・高級感・お洒落な印象を与えたい
場合に相性が良いです。
要素を縦に並べていくと、中央を軸にした配置が基本となります。
両端が「整列」されているのもポイントです。
コピーに動きを足した応用編です。
レイアウト的には一番強調しているのがハンバーガーですが、コピーに動きをつけて目に入りやすくなるのと同時に、バナー全体にメリハリが出ています。
このように、一部分をあえて整列から飛び出すというのはよくある手法ではあります。
※整列が意識されていないデザインは視線誘導的にもNGなので注意してくださいね。
縦並び+分割型
このレイアウトでは、コピーを強調したい時や情報量が多い時でもスムーズに情報を伝えやすいです。
これもまたZ型やF型も視点の動きにマッチしやすいです。
コピーの視認性を高めることができるので広告用のバナーでもよく使われているレイアウトです。
バナー制作では、「クリックしてもらうこと」が目的となります。このバナーをクリックした先に何があるのかイメージできないと、ユーザーは行動をおこしてくれないのでそこを意識したデザインを制作していきましょう！
分割型
]
写真やイメージ素材を強調しつつ、すっきり見せたい場合には上記のレイアウトがはまります。
バナーの縦サイズ目一杯つかって配置できるので、素材が縦長のときもしっかりと見せることができます。
まとめ
レイアウトを分析しながらデザインを見てみよう！
今回紹介したレイアウトはベーシックなものになるので、勿論実際には様々なレイアウトのバナーが存在します。
様々なバナーを見ながらレイアウトについて言語化してみてください。その際に、視線がどう流れていきそうかもイメージしてみましょう。
コメント