もう迷わない！バナーの勝ちレイアウト4選とポイントを解説

2023.08.29　2023.08.30

バナーをデザインする際に、人間の視線の動き方やフォント、配色などをしっかりと反映させることで視認性が上がり、情報がユーザーに伝わりやすくなります。今回は、バナーの勝ちレイアウトとバナーをデザインする際のポイントを解説していきます。

バナーデザインの基本
バナーレイアウト4選
バナーレイアウトのポイント
まとめ

バナーデザインの基本

人間が受ける情報の8割を占めているのが視覚です。人間の視線の動き方やフォント、配色などをしっかりと理解し反映させることでより情報がユーザーに伝わりやすくなります。

人間の視線の動き

人間の視線の動きを理解するとバナーのデザインを構築しやすくなります。

Z型

バナーデザインにおいて一番用いられているのがこのZ型の視線誘導です。Z型は、下記の図のようにユーザーの視線が左上から右下までZ字のように移動するパターンのことです。最終的な視線の先に資料請求などのCTAボタンを置くことでユーザーの行動を促すことができます。

N型

N型はユーザーの視線が下記の図のように、右上から左下までN字のように移動するパターンのことです。漫画を読む際や、縦書きのものを読む際によく見られる視線の動きとなっています。バナーデザインは横書きが主流なのでこの視線誘導はあまり見られないかもしれませんが、縦書きのキャッチコピーなどを利用する際に効果的です。

F型

F型は、下記の図のようにユーザーの視線が左上から右下、左下というように分岐した視線の動きのことを言います。記事やウェブサイトなどといった文章量の多いものを見る際に多い視線の動きとなっています。下の方に視線が行くにつれて内容があまり読まれなくなってしまう可能性が高くなってしまうのでバナーデザインに用いる際は情報を詰め込みすぎず、簡潔に読みやすくするようにしましょう。

太→細、大→小

上記で紹介したZ・N・F型以外に、太→細、大→小という視線の動きがあります。「タイトルから本文」のように、太く大きいものから細く小さいものへと視線が移動します。バナーデザインでは一番伝えたいメインコピーを大きくし、補足説明などはメインコピーよりも小さくすることでデザインにメリハリをつけることができます。

バナーの雰囲気に合わせたフォント選び

フォントによって人に与える印象は異なります。例えば、太字の角ゴシック体であれば力強い印象、細字の丸ゴシックであれば優しい印象を与えます。商品やサービスのイメージに合わせてフォントを変えるようにしましょう。しかし1つのデザインのバナーの中にたくさんのフォントを使用してしまうと視認性が低く、ごちゃごちゃとした印象を与えてしまうので多くて2つまでに絞る事をお勧めします。

バナーのイメージに合った色を選ぶ

色の印象

フォント同様、色にも印象があります。赤やオレンジといった暖色には元気・ポジティブといった明るい印象を受けますが、青やグレーといった寒色には落ち着いたイメージや少しネガティブな印象を受けることが多いです。さらに黒×黄といった組み合わせからなる警戒色など、色によって与えられる印象は多く存在します。商品イメージや訴求内容と色の与える印象を加味しながら、バナーでの配色を決めることが重要です。色選びに迷った場合、ベースカラー(背景)＋メインカラー＋アクセントカラー(メインカラーの補色)の3色にすると決めやすくなります。

色を使うのは3色まで

色を多く使いすぎてしまうと、大きさや細さ・視線誘導を意識したデザインにしても一番伝えたい部分やアピールしたい部分が目立たなくなってしまいます。ベースカラー・メインカラー・アクセントカラーの3色にまとめることで強調する部分もわかりやすく、ユーザーにアピールしやすくなります。

印象に残ったクリエイティブを参考にする

人間の視線の動きやフォント・色の与える印象を意識するだけではデザインのイメージが湧かない…という方もいらっしゃるのではないでしょうか。そのような場合は印象に残ったクリエイティブを参考にする事をおススメします。バナー広告がたくさんある中で印象に残っているクリエイティブは、フォントの配置や配色などバランスが整っていて視認性が高く、バナーデザインの参考になります。