バナーを作成する際に配置に迷って手が止まって時間がかかってしまう。そんな事ありませんか？私は学びたての頃によくありました。１つのバナーを作成するのに迷って迷って半日近くかかることもありました。
そんな方の為に、バナーデザインで迷った時の基本レイアウトを５選紹介します。それぞれの使ったイメージや、なぜこのレイアウトが良いのか、使われているのかなどの解説もいたします。
1.「広告バナー型」レイアウト
広告バナーのレイアウトで、もっとも多く使われていると言われている形です。まずはこのレイアウト通りにコンテンツを当てはめていくだけでいい感じに仕上がります。
情報が多い場合にまとまりの良いバナーができるので、初心者の方は意識して配置してみてください。
レイアウトの効果
Z型レイアウト：左上から右端、右端から左下、左下から右下にユーザーの視点が移動するのを利用したレイアウトのこと。バナーやWebサイトで多用される。
広告バナー型は、人間の視線の動き「Z型」になぞられて配置されています。よって情報が見やすく・分かりやすいレイアウトになっています。
最も見られるのは最初と最後なので、見てほしいキャッチコピーやロゴ、アクションを促すような情報が配置されています。その他の情報はZの導線上に配置します。
使用例
正方形のバナーととても相性がいい気がします。メインに見せたいものを上部、ボタンやブランド名を下部に大きくとり、中に写真とテキストを合わせていく形です。
Z型の視線誘導は基本中の基本です。基本4原則とともに絶対に覚えておきましょう。
▼デザインの基本4原則はこちらから解説しています▼
2.分割スタイル「縦割り」レイアウト
情報を右と左に分けて配置するレイアウトです。別記事の写真の上に配置するテクニックでも紹介したレイアウト方法です。写真とテキストで分けたり、2つのコンテンツを左右に置く使い方があります。
正方形や横長のレイアウトで使われる印象です。
レイアウトの効果
情報がキレイに分割されているので、視認性・可読性が高いのがいいところです。人物や商品の写真は特に、このレイアウトが優れています。
使用例
正方形バナーだけでなく、横長のバナーとの相性も良さそうです。写真や画像に文字を少しだけ重ねるのもオシャレにみせるポイントですね。これについては別記事で解説しています。
3.分割スタイル「横割り」レイアウト
情報を上と下に分けて配置するレイアウトです。上に写真、下にテキストのパターンが多く使われています。その他にもコンテンツを3つに分けて、キャッチフレーズ・写真・テキストでまとめると情報がスッと入ってきやすいバナーになります。
レイアウトの効果
F型レイアウト：左上か⇒ 右上 ⇒ 左下 ⇒ 右下 ⇒ さらに下に移動していく。 重要な情報や目立たせたいものをページ上部や左側に配置することで、読者の注意を引きやすくします
使用例
どのバナーも情報が見やすく・分かりやすいレイアウトになっています。メインコピーとヴィジュアル（画像・写真）とにかくこの２点のみを目立たせたい場合に使われます。
4.「グリッド」レイアウト
全てのコンテンツを四角の中に収めることで、スッキリとまとまったバナーに仕上がります。沢山の写真をギャラリー風に見せることができるレイアウトです。
レイアウトの効果
縦割りレイアウトを応用したレイアウト・バランスが取りやすく、並べるだけでオシャレに見えるレイアウトになります。サイズを変えてみたり、余白感を統一したりするとより目を引くデザインになります。
使用例
文字を真ん中に配置して、周りに写真や画像を配置するといい感じのレイアウトになります。沢山の視覚的情報を見せたい場合に使います。
1番右はパンフレットのデザインで縦割りレイアウトと合わせて配置してあります。
因みにウェブサイトのレイアウトには種類があります。こちらの記事を確認して覚えておきましょう！
▼8つの代表的なWebサイトレイアウトはこちらから▼
5.分割スタイル「斜め割り」レイアウト
「縦割り」「横割り」の応用でさらにコンテンツを斜めにしたレイアウトです。斜めにすると、躍動感やアクティブな印象、スピード感を与えることができますので一工夫で印象が変わります。
文字だけ・背景だけを斜めにしても、その効果は発揮されます。斜めにする文字は太字で大きく目立つように配置がポイントです。
レイアウトの効果
F型レイアウトの応用系。一部の要素を斜めにすることで情報の強弱がつけられて、目を引くデザインになります。
使用例
斜めに配置した文字はまず最初に目につき、その先に視線がいきます。
単調なバナーだなと感じたら斜めにしてみるのがオススメ。その際は文字を目立たせることを意識するとより目を引くデザインになります。
デザインを本格に学びたいと思った方は
Webデザイン習得には色々な方法があり、特に独学よりもスクールに入って短期間で要点を覚えて、現場でという形が最短距離です。私もデザインスクール出身ですが、現役のデザイナーが講師じやなかったので古いスキルを学んで終わりで、結局現場で苦労して学びなおしました。
まずは無料説明会を開催している現役の技術が学べるスクールで検討してみてください！
▼おススメのスクール▼
デザスタの強み
- 現役の講師によるフルマンツーマンの授業
- 講師の方が現役のため古い技術ではなく新しいノウハウを学ぶことができる。
- 少人数制のマンツーマンのため手厚いサポート
- 初心者の方も安心して受講できるフォロー体制
- 何度でも理解できるまで個別に質問OK
- 授業以外でも講師と個別にZoomができる
- デザインやコーディング以外にSEOなど200本以上の動画コンテンツが見放題。
- 場所を選ばず参加できるオンライン型学習
- 短期間でWebデザインを習得し自身のポートフォリオが作れるように!!
