バナーの基本的なレイアウトとは?バナーを作る時のコツなどもご紹介
![バナーの基本的なレイアウトとは?バナーを作る時のコツなどもご紹介](/asset/images/column/marketing/20240502_main.webp)
インターネット上で特定のページへの遷移を促したり、商品・サービスに関する情報を発信したりしたい場合は、バナーの配置が効果的です。バナーのレイアウト・デザインを意識し、見た人が興味を抱くようなバナーを作成すれば、集客数や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サイトの閲覧を阻害せずにプロモーションができるので、ご興味のある方は以下より詳細をご確認ください。
関連記事はこちら配配メールのポップアップ機能とは?
「配配メール」は、企業の集客・販促活動に携わる方のメールマーケティング業務を支援するサービスです。
シンプルな配信操作、見やすい成果指標レポート、メールの反応による見込み客の可視化、サイト来訪通知といった機能によりメールマーケティングの実践をサポートします。
また、機能の提供だけではなく、ナレッジ提供や個社の運用に踏み込んだ手厚いアフターフォローにより、お客様の販促の成功に向け伴走します。
メール配信の初心者から本格的なメールマーケティングの実践を目指している方まで、どなたでも安心してお使いいただけるサービスとして、お客様に長く愛され、98%の継続利用率を維持しています。
記事執筆者紹介
人気記事
- 【2024年最新】メールの一斉送信を効率化するメール配信ソフト12選!活用方法も紹介 2024年08月07日
- 一斉送信メールのマナーとは?複数送信のBCC・CCの使い分けを解説 2024年08月23日
- メルマガとは?5分で基本知識から効果的な配信方法がわかる基礎講座 2024年04月05日