バナーの基本的なレイアウトとは？バナーを作る時のコツなどもご紹介

インターネット上で特定のページへの遷移を促したり、商品・サービスに関する情報を発信したりしたい場合は、バナーの配置が効果的です。バナーのレイアウト・デザインを意識し、見た人が興味を抱くようなバナーを作成すれば、集客数やCV数の増加が期待できるでしょう。
本記事では、バナーの基本的なレイアウトについて解説します。バナーを作る時のコツなども紹介するので、バナーを作る際の参考にしてください。

バナーの基本的なレイアウト

バナーをデザインする際は、以下のようなレイアウトがよく使われています。

• 広告バナー型
• 縦割り型
• 横割り型
• 斜め割り型
• グリッド型

多くの人の目を引くようなバナーをデザインするためには、レイアウトは非常に大切な要素です。それぞれのレイアウトについて、どのような特徴があるのか詳しく見ていきましょう。

広告バナー型

広告バナー型は、バナーレイアウトの中でも特に採用されやすい王道のレイアウトです。バナーの最初と最後（上と下）がテキスト部分になっており、この部分にキャッチコピーや期間、ロゴなどを配置します。バナーでよく見られる部分は最初と最後です。そのため、最初と最後に重要なものを配置します。バナー中央には、商品・サービスの説明や写真を配置するとよいでしょう。

広告バナー型は、「Z型」の視線の動きに基づいたレイアウトです。そのため、人間にとって見やすく、わかりやすいレイアウトとなっています。全体的にまとまりの良いデザインになるので、情報が多い場合でも使いやすいレイアウトといえるでしょう。

縦割り型

縦割り型は、バナーを2つのセクションに分け、情報を右と左に配置するレイアウトです。写真とテキストで分ける手法が一般的ですが、2つのコンテンツを左右に配置する場合もあります。

縦割り型のメリットは、視認性・可読性が高い点です。情報を右と左に配置するというシンプルなレイアウトですが、シンプルゆえに情報が綺麗に分割されており、見やすさと理解しやすさを両立できています。写真とテキストの情報をバランス良く伝えたい場合は、縦割り型を採用するとよいでしょう。人物や商品の写真を使い場合は、特にこちらのレイアウトがおすすめです。

横割り型

横割り型は、情報を上と下に分けて配置するレイアウトです。「F型」の視線の動きに基づいたレイアウトとなっており、可読性が高いというメリットがあります。バナーは下側よりも上側のほうが見られやすいため、写真とテキストのうち、よりアピールしたい情報を上側に配置するのがおすすめです。

横割り型は、基本的には写真とテキストの2つのコンテンツで構成され、3つ目のコンテンツとしてキャッチコピーを配置する場合もあります。コンテンツを3つに分ければ、より情報を受け取りやすくなるでしょう。

斜め割り型

斜め割り型は、コンテンツを縦割り型や横割り型のように分けたうえで、斜めに配置するレイアウトです。コンテンツを斜めにすることでバナーに躍動感が生まれ、勢いやスピード感などを表現できるようになります。バナーを見た人の視線は斜めにした文字や写真に沿って動いていくため、視線が到達する先にアピールしたい情報を置いておくと効果的です。

コンテンツ全体を斜めにするのではなく、文字のみ・写真のみを斜めにしても十分に効果は発揮されます。商品やサービスに合わせて適した配置を選択し、バナーを作成するとよいでしょう。

グリッド型

グリッド型は、テキストや写真などを格子状に配置するレイアウトです。すべてのコンテンツが四角い枠の中に収まり、全体的にすっきりとしたデザインのバナーに仕上がります。各要素の区切りがはっきりとしているため、情報が多くても内容が伝わりやすい点もメリットです。

基本的には正方形のタイルで構成されますが、その中に長方形のタイルを織り交ぜて変化をつけると、ありきたりなデザインから脱却できます。また、バランスの取れたレイアウトであるため、デザイナーではない方でも良質なバナーを作成しやすいです。情報を配置するパターンを決めて余白感を統一すれば、よりハイクオリティなバナーを作成できるでしょう。

効果的なバナーを作るために意識したいレイアウト・デザイン

多くの人に見てもらえるような効果的なバナーを作成したいなら、以下のようなレイアウト・デザインを意識するとよいでしょう。

• 人間の視線の動きに合わせたデザインにする
• テキストの助詞・単位を小さくする
• 与えたいイメージに合わせてフォントや色を工夫する
• LPと内容や雰囲気の齟齬がないように気をつける

それぞれのポイントについて、詳しく解説します。

人間の視線の動きに合わせたデザインにする

バナーのような視覚情報を発信するコンテンツは、闇雲に情報を配置してもあまり効果がありません。人間の視線の動きを理解し、視線の動きに合わせた配置を意識することで、情報が伝わりやすくなります。

人間の視線の動きでよく挙げられるのは、以下の3パターンです。

• Z型
• F型
• N型

それぞれのパターンについて、詳しく見ていきましょう。

Z型

Z型は、視線が左上から右下へ「Z字」を描くように移動するパターンです。文字が横書きであり、かつ全体の情報を把握させたい場合によく使われます。最初に目に入る左上にしっかり伝えたい情報を配置し、右下にはバナーを見た人の行動を促す情報（資料請求や商品詳細などのボタン）を配置すると、効果的なバナーとなるでしょう。

バナーはもちろんのこと、Webサイトのトップページや雑誌などさまざまなシーンで用いられる手法です。レイアウトに迷ったら、Z型の動きを意識することをおすすめします。

F型

F型は、左から右への視線移動を下に向かって繰り返していくパターンです。情報量、特にテキスト量が多い場合によく用いられます。そのため、バナーよりもブログやニュースサイトなどで用いられることが多い手法です。

情報量が多いF型の配置は、下に行くほどあまり読まれなくなってしまう可能性があります。重要な情報を左上に配置するとともに、情報を詰め込みすぎないように意識しましょう。

N型

N型は、「N字」を描くように右上から左下へ視線移動するパターンです。右から左に視点が移動していくため、文字が縦書きの場合に用いられます。バナーは文字が横書きの場合が多く、N型の視線移動を用いる機会は少ないです。キャッチコピーやテキストを縦書きにして差別化を図りたい場合に、効果が期待できます。

バナーに独自性を付与すれば視覚的に魅力のあるデザインに仕上がり、見た人の興味を引くバナーを作成できるでしょう。

テキストの助詞・単位を小さくする

人の目線は、大きいものから小さいものへ、太いものから細いものへと移動します。この性質を利用して、情報の優先順位を決めることが可能です。商品名やキャッチコピーなどアピールしたい情報は大きく太い文字で表示し、助詞や単位は小さくすることでバナーデザインにメリハリをつけられます。

特に情報量が多い場合は、情報の優先順位を明確にしておきましょう。設定した優先順位に応じてテキストサイズを調整していけば、より効果的なバナーを作成できます。

与えたいイメージに合わせてフォントや色を工夫する

どのような色・フォントを採用するのかによって、人に与える印象は異なります。商品・サービスのイメージに合わせてフォントや色を工夫すれば、デザイン性と視認性のバランスが良いバナーを作成することが可能です。

フォントを選ぶ際は、明朝体やゴシック体を基本にしつつ、イメージに合ったものを選びましょう。デザイン性が強いフォントの場合、インパクトは強いですが、可読性が低くなってしまう可能性があります。

色は、キーカラー・サブカラー・アクセントカラーの3色が基本です。色を多く使ってしまうと、強くアピールしたい部分が目立ちづらくなってしまいます。

LPと内容や雰囲気の齟齬がないように気をつける

バナーを作成する際は、LPとの整合性にも気を配りましょう。LPは、バナーから遷移してきた人が閲覧するページです。バナーとLPで内容や雰囲気が異なっていると、違和感を抱いてしまうかもしれません。

バナーに商品・サービスのイメージを取り入れ、LPと内容や雰囲気の齟齬がないように考慮すれば、遷移先での離脱が発生しづらくなり、理想的なマーケティング効果を得られます。どれだけ優れたバナーを作成したとしても、それがCV数につながらなければ意味がないため、最終的なCVに結びつくような雰囲気のバナーを作成するようにしましょう。

まとめ

バナーを作成する際は、レイアウトやフォント、デザインなどにさまざまな選択肢が存在します。商品・サービスの雰囲気に合ったレイアウトやフォントを採用すれば、集客数やCV数の向上が期待できる上質なバナーを作成できるでしょう。

バナーデザインの基本やコツを把握すれば、自信をもってバナーを作成できるようになります。今回紹介した内容をしっかりと押さえて、高いマーケティング成果が期待できるバナーを作成してみてください。

新規開拓から商談獲得までを支援するメールマーケティングサービス「配配メール」では、作成したバナーをWebサイト上に表示させる「ポップアップ機能」を提供しています。

専門的な知識がなくともバナー素材さえあれば、だれでも簡単に設定できます。

また、バナーを表示させるタイミングも柔軟に設定できるので、Webサイトの閲覧を阻害せずにプロモーションができるので、ご興味のある方は以下より詳細をご確認ください。

関連記事はこちら配配メールのポップアップ機能とは？