【デザイン初心者向け】バナーレイアウトの定番パターン【基本編】

駆け出しWebデザイナーが最初に通る関門といえば、バナー制作ですよね。

限られたスペースに必要な情報を盛り込んで、美しくデザインするのって難しいな～と思ったことありませんか？

そんな時に知っていると役立つのが、バナーでよく使われるデザインレイアウトです。

それぞれ違うように見えるバナーも、実は同じレイアウトを使っていたというのはよくある話です。

今回は、バナー制作に役立つレイアウトパターンを、厳選して5つご紹介します。

迷ったらコレ！王道パターンの広告バナー型

バナーレイアウトで最も多く使われている王道パターンが広告バナー型です。
この形に当てはめるだけで、まとまりの良いデザインにあるので、情報が多い場合でも使いやすいレイアウトになります。

広告バナー型は、人間の視線の動き「Z型」に沿っているので、情報が見やすく、分かりやすいデザインに仕上げることができます。

バナーの中で最も見られるのは最初と最後（左上と右下）なので、そこに見てほしいキャッチコピーやロゴ、アクションを促すような情報を配置すると良いでしょう。

視認性の高い縦割り型

情報を右と左に分けて配置するデザインが、縦割り型レイアウトです。
このパターンは、情報がきれいに分割されるので視認性・可読性が高いのが特長です。

人物や商品の写真を使う場合は、このレイアウトパターンが優れています。
Z型の視線誘導をベースにしながらも、面積の大きい写真にも目が行くので、写真とキャッチコピーを同時に認識してもらいやすくなります。

また、コンテンツを左右に配置できる縦割り型のデザインは、情報を比較させる場合にも効果的です。

世界観を演出しやすい横割り型

情報を上と下に分けて配置するデザインが、横割り型レイアウトです。
このパターンは、イメージカットを主役にして世界観を表現しやすいのが特長です。

コンテンツを3つに分けて、キャッチコピー・写真・テキストでまとめると、情報がスッと入ってきやすいバナーにまとまります。

横割り型のレイアウトは、人間の視線の動き「F型」に沿っているので、テキスト情報が読みやすいデザインに仕上がります。

バナーの中で最も見られるのは最上部なので、見てほしいのがキャッチコピーなのかビジュアルかで、どちらを先に配置するかを決めると良いでしょう。

スタイリッシュで躍動感のある斜め割り型

コンテンツを斜めに配置するデザインが、斜め割り型レイアウトです。
斜めにするとデザインに動きが出るので、躍動感やスタイリッシュさ、元気な印象を与えます。

斜めにした文字や背景などに沿って視線が動くので、目線の先に見せたい情報を置くことで、意図的に誘導するといったデザインにまとめることもできるでしょう。

また、コンテンツがハッキリと分かれるので、キャッチコピーや写真を強く印象付けることができます。

複数の写真をスッキリと見せるグリッド型

情報をブロックで分けて配置するデザインが、グリッド型です。
全てのコンテンツを四角の中に収めることで、スッキリとまとまったデザインに仕上がります。

情報が多くてもハッキリと分かれて整理されているので、内容がわかりやすく、バランスの取りやすいのが特長です。
デザイン初心者さんでも扱いやすいレイアウトと言えるでしょう。

写真を多く使う場合に適しているので、アパレルのバナーなどに多く使われています。
入れるコンテンツの配置のパターンを決めて、余白感を統一すると、よりクオリティの高いデザインに。

まとめ：迷った時こそ基本が大事

今回は、デザイン初心者さん必見のバナー制作に役立つレイアウトパターンについて、基本の5つをご紹介しました。

WebサイトやSNSで目にするバナー広告をじっくり観察すると、この5パターンのどれかに当てはまっていることがほとんどだと思います。

基本のレイアウトパターンを知っているだけで、デザイン制作の効率がUPすること間違いなし！
迷った時こそ、王道パターンを思い出してみましょう。

広告バナーとしてだけでなく、ブログのアイキャッチ画像やYouTubeのサムネイル、Instagram投稿などにも使えるテクニックなので、ぜひ参考にしてみてくださいね。

 　InstagramでもデザインTIPS発信中！