バナーを作成する際に配置に迷って手が止まって時間がかかってしまう。そんな事ありませんか？私は学びたての頃によくありました。１つのバナーを作成するのに迷って迷って半日近くかかることもありました。懐かしい・・・・
そんな方の為に、バナーデザインで迷った時の基本レイアウトを５選紹介します。それぞれの使ったイメージや、なぜこのレイアウトが良いのか、使われているのかなどの解説もいたします。
1.「広告バナー型」レイアウト
広告バナーのレイアウトで、もっとも多く使われていると言われている形です。まずはこのレイアウト通りにコンテンツを当てはめていくだけでいい感じに仕上がります。
情報が多い場合にまとまりの良いバナーができるので、初心者の方は意識して配置してみてください。
レイアウトの効果
Z型レイアウト：左上から右端、右端から左下、左下から右下にユーザーの視点が移動するのを利用したレイアウトのこと。バナーやWebサイトで多用される。
広告バナー型は、人間の視線の動き「Z型」になぞられて配置されています。よって情報が見やすく・分かりやすいレイアウトになっています。
最も見られるのは最初と最後なので、見てほしいキャッチコピーやロゴ、アクションを促すような情報が配置されています。その他の情報はZの導線上に配置します。
使用例
正方形のバナーととても相性がいい気がします。メインに見せたいものを上部、ボタンやブランド名を下部に大きくとり、中に写真とテキストを合わせていく形です。
2.分割スタイル「縦割り」レイアウト
情報を右と左に分けて配置するレイアウトです。別記事の写真の上に配置するテクニックでも紹介したレイアウト方法です。写真とテキストで分けたり、2つのコンテンツを左右に置く使い方があります。
正方形や横長のレイアウトで使われる印象です。
レイアウトの効果
情報がキレイに分割されているので、視認性・可読性が高いのがいいところです。人物や商品の写真は特に、このレイアウトが優れています。
使用例
正方形バナーだけでなく、横長のバナーとの相性も良さそうです。写真や画像に文字を少しだけ重ねるのもオシャレにみせるポイントですね。これについては別記事で解説しています。
3.分割スタイル「横割り」レイアウト
情報を上と下に分けて配置するレイアウトです。上に写真、下にテキストのパターンが多く使われています。その他にもコンテンツを3つに分けて、キャッチフレーズ・写真・テキストでまとめると情報がスッと入ってきやすいバナーになります。
レイアウトの効果
F型レイアウト：左上か⇒ 右上 ⇒ 左下 ⇒ 右下 ⇒ さらに下に移動していく。 重要な情報や目立たせたいものをページ上部や左側に配置することで、読者の注意を引きやすくします
使用例
どのバナーも情報が見やすく・分かりやすいレイアウトになっています。メインコピーとヴィジュアル（画像・写真）とにかくこの２点のみを目立たせたい場合に使われます。
4.「グリッド」レイアウト
全てのコンテンツを四角の中に収めることで、スッキリとまとまったバナーに仕上がります。沢山の写真をギャラリー風に見せることができるレイアウトです。
レイアウトの効果
縦割りレイアウトを応用したレイアウト・バランスが取りやすく、並べるだけでオシャレに見えるレイアウトになります。サイズを変えてみたり、余白感を統一したりするとより目を引くデザインになります。
使用例
文字を真ん中に配置して、周りに写真や画像を配置するといい感じのレイアウトになります。沢山の視覚的情報を見せたい場合に使います。
1番右はパンフレットのデザインで縦割りレイアウトと合わせて配置してあります。
5.分割スタイル「斜め割り」レイアウト
「縦割り」「横割り」の応用でさらにコンテンツを斜めにしたレイアウトです。斜めにすると、躍動感やアクティブな印象、スピード感を与えることができますので一工夫で印象が変わります。
文字だけ・背景だけを斜めにしても、その効果は発揮されます。斜めにする文字は太字で大きく目立つように配置がポイントです。
レイアウトの効果
F型レイアウトの応用系。一部の要素を斜めにすることで情報の強弱がつけられて、目を引くデザインになります。
使用例
斜めに配置した文字はまず最初に目につき、その先に視線がいきます。
単調なバナーだなと感じたら斜めにしてみるのがオススメ。その際は文字のジャンプ率を意識するとより目を引くデザインになります。
▼文字のジャンプ率については以下の記事を参照▼
まずは「Canva」でバナーを作ってみよう
▼デザイナーおススメツール▼
Aiarty Image Enhancerは画像・写真・イラストなどを高画質化・拡大できるAIツールです。 画像の細部まで美しく再現できます。
