1. まとめトップ

【バナー製作の参考に!】意外と悩む、728×90の横長バナーのレイアウトデザインまとめ

バナーといえば300×250などの四角いものが多いですが、悩むのは"ビッグバナー"と呼ばれる横長サイズへのリサイズ。そんな時に役に立つバナーレイアウトをまとめてみました。

更新日: 2016年03月14日

5 お気に入り 18314 view
お気に入り追加

この記事は私がまとめました

9ueさん

意外と悩む横長バナー

728×90などの横長バナーは癖があるので、案外レイアウトに悩むことも。

正方形バナーとの違い

四角いバナーであれば、一度にバナーの全体を見せることができる。
しかしこの横長バナーの場合、バナー全体の内容を一度に見せることは難しいため、全体に重要な情報をちりばめるよりも、どこか一点にアイキャッチを設けることが望ましい。

視線の動きを考慮しよう

当然の事ではありますが、日本語の横書きの記述は左から右。ページ内に書かれているテキストの多くがそうであり、視点のリズムは左を起点に流れるのが基本です。

人間の視線は、一般的に「左→右」に流れるといわれています。つまり、一番最初に目がいく「左端」にアイキャッチを持たせることで、バナー全体を読んでくれる可能性が高まります。

左にタイトル、右にイメージビジュアル

左にタイトル、右にイメージビジュアルの王道パターン。
余計な情報がなく、とても分かりやすい。
横長バナーはどうしても端まで読まれないことが多いので、このぐらいでちょうどいいのかも。

左にキャッチコピー、右に補足説明

左にアイキャッチとなるコピーを配置し、右に補足的な要素を置くパターン。
コピーが面白いほど目を引きやすいが
インパクトがあり過ぎると「で、何のバナーだっけ?」という状態になる可能性も...。

左にキャッチコピー、右にコンバージョンエリア

左にキャッチコピー、右にコンバージョンエリアを持ってくるパターン。
横長バナーの場合、アイキャッチエリアと一番アピールしたいテキストを離してしまうのは
リスキーなので、上手に視線誘導を促したいところ。

左に情報をコンパクトにまとめ、サービスロゴを右に

左にタイトルなどの情報をまとめ、右にサービスロゴを置いたパターン。
読み飛ばされる可能性のある右側に、いさぎよくサービスロゴを配置しているので
すっきりしていて読みやすい。

中央にメインテキストを配置

テキストを中央に置き、関連性のある画像をまわりに敷くパターン。
言葉で説明するよりも、世界観を伝えたい場合に有効。

1 2 3