高い画像作成ソフトやツールを使っても、これが分からないと先へ進めません。

しかし、バナーは面積が小さい範囲内のデザインとなるため、レイアウトパターンが限られてきます。

パターンを押さえておくと、写真や色を変えるだけで応用できるので簡単です。

では早速、よく見かける3つの基本パターンをご紹介します。

全面写真レイアウト

商品写真などをバナーサイズ全体に敷くパターンのレイアウトです。

見せたい物（この場合は化粧品）を中心をさけて左右どちらかに少し寄せ、できた余白にアイキャッチを配置します。（この場合は「春の新色登場」の丸い部分）

メインのコピーは上か下に横突き通しで配置します。

素材写真に左右されるのでうまくいく場合と難しい場合がありますが、写真、アイキャッチ、コピーの3点のバランスをとるだけで決まるので、シンプルにまとめやすいレイアウトです。

上下分割レイアウト

この場合は下の黒い部分にあたりますが、上下のどこかでばっつりと写真とコピーのエリアを分断するレイアウトパターンです。

ハーフハーフで分けるとダサいので、どちらかに比重を持たせましょう。サンプルの様に1行で収まるようにしたり、1:2などが分かりやすいです。

分割したそれぞれの範囲内および全体のバランスをとるようにするのがポイントです。

バナーを見る人の視線は、左上から右下に向かって動くので、「こちら」などのアクションにつながるボタン的要素は右下に置くとおさまりが良いです。

左右分割レイアウト

左側に写真を配置してビジュアル的な訴求をし、右側にコピーやアクション要素を配置するレイアウトです。

縦長のバナーにはあまり向いていません。