WebサイトやSNSなど、インターネット上で頻繁に見かける広告バナーは、自社のサービスや商品を宣伝するのに非常に効果的です。しかし、実際に自分で作成しようと思うと、どこから始めればよいか迷われる方も少なくないでしょう。

この記事では、広告バナー作成を検討されている方々に向けて、内容の決定方法からデザインに至るまで、広告バナーの制作過程をわかりやすく丁寧にご説明いたします。

そもそも、広告バナーとは？

広告バナーとは？

「banner」という英単語は、日本語では「旗」という意味を持ち、広告や宣伝用の「垂れ幕」や「横断幕」といった意味でも用いられています。
Web上でのバナー広告は、リンク付きの画像としてWebサイト上に配置され、道端に設置される「のぼり旗」のような役割を果たします。インターネット上で自社のサービスや商品を多くの人々に知ってもらうための重要な手段となっています。

広告バナーの目的

広告バナーの主な目的は、リンク先のページへユーザーを誘導することにあります。バナー広告は、Webサイトを訪れる人々に対して、関心を持ってもらいたいコンテンツを効果的にアピールするための手段です。しかし、インターネット上には無数の情報があふれているため、自社の広告バナーにユーザーの注目を引くことが重要です。

広告バナーに注目を集めるためには、単に目立つ位置に広告バナーを配置するだけでなく、グラフィックデザインやキャッチコピーを巧みに活用し、瞬時にユーザーの関心を惹きつける広告バナーを作成することが求められます。

広告バナーのサイズ

広告バナーのサイズや形状には様々な種類がありますが、他社のウェブサイトに広告を設置する際には、そのウェブサイトが定める特定のサイズ基準に従う必要があります。

たとえば、Instagramのストーリー機能で使用される広告バナーのサイズは、「1080ピクセル × 1920ピクセル」と定められています。
広告を掲載する際には、指定されたサイズに合わせて効果的な広告バナーをデザインすることが重要です。

広告バナー作成のポイント

広告バナーの作り方の具体的な解説の前に、広告バナーを作成する際に意識するべきポイントを4つご紹介します。

文字は必要最低限に

広告バナーの目的は、「クリックを促しリンク先のページに誘導する」ことです。 バナーという限られたスペースでは、文字をたくさん使って表現するのは逆効果になりかねません。 より詳細な情報は、リンク先のページでも伝えることができます。 広告バナーで使用する文言は、簡潔な言葉でクリックを促すようなものにすることを心がけましょう。

デザインやトーンは揃える

広告バナーを作成する際には、掲載されるWebサイトのイメージや、バナーのリンク先となるページのイメージと、ある程度統一感を持たせることが重要です。
目を引く配色を使うことが効果的な場合もありますが、デザインがあまりにも出稿先のサイトやリンク先ページから離れていると、ユーザーが混乱する原因となることがあります。
広告バナーは、目を引くと同時に、信頼感を提供するデザインが求められます。

写真とテキストのコントラストははっきりと

広告バナーの作成において、伝えたいイメージに適した写真やイラストを使うことは、非常に効果的です。しかし、写真をそのまま使用するだけではテキストの可読性が損なわれる可能性があります。
そのため、写真とテキストのコントラストをしっかりと確保することが重要です。
テキストの可読性を高めるための方法としては、テキストの背後に枠を設ける、ドロップシャドウなどの視覚的な装飾を加える、写真をぼかす、または写真の明度を下げるなどが効果的です。

視線の動き方を意識

バナーのレイアウトを考えるときには、ユーザーの視線の動きを意識しましょう。 情報がバナーの中に点在していると、ユーザーがそのバナーから情報を読み取るのに時間がかかり、バナーの効果が低下します。 ユーザーの視線移動を意識し、情報はまとまりを持たせて配置するようにしましょう。

以下に、人間の視線の動き方について4タイプご紹介します。

グーテンベルク・ダイヤグラム

「グーテンベルク・ダイヤグラム」とは、同種の均等に配置された情報を処理する際の一般的な視線の動きを示したものです。この法則によると、均等に配置された情報の中で、人の視線は左上から右下に向かう傾向があり、特に右上と左下の領域は注意を引きにくいとされています。

つまり、重要な情報を右上や左下に配置してしまうと、その情報が読み飛ばされる可能性が高まります。したがって、バナー上で特に注目してもらいたい情報やキャッチコピーは、左上または右下の領域に配置するのが効果的です。

Z型

テキストや画像が混在している、あるいはユーザーが全体の概要を把握しようとしている際には、人間の視線の動きはZ型パターンを取ることが一般的です。このパターンでは、視線は「左上→右上→左下→右下」という順で移動します。

このZ型の視線の動きを活用すると、バナーの四隅、特に視線が最も長く留まる可能性が高い左上と右下の領域に重要な情報を配置するのが効果的です。
例えば、左上にはキャッチコピーや主要なメッセージを配置し、右下には行動を促すCTA（Call To Action）ボタンを配置することが多くあります。

F型

テキストが主体で、ユーザーが丁寧に情報を読み取ろうとする場合、視線の動きは通常F型パターンを取ります。このパターンは、Webサイトやブログのコンテンツなどでよく見られる視線の動き方です。ユーザーはページの左上を起点に、右に向かって視線をスライドさせ、また左から右へという動きを繰り返しながら下へと移動していきます。

このF型パターンでは、視線が最初に留まる上部、または最後に到達する下部に重要な情報を配置することが効果的です。

N型

N型の視線の動きは、日本語の縦書きテキストが多用される雑誌、新聞、漫画などで特に見られます。このパターンでは、ユーザーの視線は「右上→右下→左上→左下」という順序で動きます。

N型の性質はZ型パターンに似ており、視線のスタート地点である右上と、最後に目が留まる左下が、特にユーザーの注意を引くことができるポイントとなります。

視線移動のまとめ

広告バナーのデザインを考える際には、ユーザーの視線が通常、上から下、そして左から右へと動く傾向があることを意識しましょう。この自然な視線の流れを利用して、情報を適切に配置することが、より効果的なバナー作成につながります。

広告バナーの作り方　内容編

ターゲットを想定する

広告バナーを作成する際には、まずどのような人にバナーを見てもらいたいかを具体的にイメージすることが重要です。ターゲット範囲の広すぎる広告バナーは、伝えたい内容が不明瞭になり、広告の効果が低下する可能性があります。

ターゲット層を決定するには、年齢、性別、居住地、社会経済的ステータス、ライフスタイルなどさまざまな要素を考慮する必要があります。
ターゲット層を決定した後、そのニーズや関心についての理解を深め、広告バナーを見た際にターゲット層はどのように感じるのかを考えながら、興味を引きそうなキャッチコピーやデザイン要素を活用して、バナーを作成しましょう。

入れたい要素を整理する

ターゲット層が決定したら、次はバナーに掲載する内容について考えます。
最初に、バナーで伝えたい情報をすべてリストアップしてみましょう。 バナーに載せる情報としては、以下のような要素が考えられます。

• 写真

• ロゴやイラスト

• バナーの大まかな配色

• 説明の文章

要素の書き出しが終了した後、それぞれの要素に優先順位を付けます。
バナーに表示できる情報量には限りがあるため、全ての要素を詰め込むのではなく、適切に情報の取捨選択を行うことも必要です。
優先順位を付けることによって、最も重要なメッセージを際立たせ、より効果的なバナーを作成することができます。

キャッチコピーを決める

キャッチコピーは、バナー作成において重要な要素の一つです。伝えたいメッセージを簡潔かつ明瞭に伝えることが求められます。

広告バナーの作り方　デザイン編

広告バナーのサイズ・形を決める

先に記載した通り、バナーを出す場所によってはサイズや形が決まっている場合があります。 そのため、レイアウトを始める前に広告バナーのサイズや形を先に決定することが重要です。そうすることで、広告バナーの作成後に大幅なデザインの修正が必要になるという事態を防ぐことができます。

レイアウトイメージを作成する

バナーに掲載する要素やサイズ・形状を決定したら、次は要素のレイアウトを考えましょう。このとき適切なレイアウトが思いつかない場合は、レイアウトパターンを活用して作成するのも良い方法です。

レイアウトを考える際に活用できる効果的なパターンをいくつかご紹介します。

標準型

標準型デザインは、キャッチコピー、テキスト、写真、CTA（Call To Action）ボタンなどをバランス良く配置したものです。このデザインは、一般的な人間の視線の動きであるZ型パターンに従っており、インターネット上でよく見られるバナーの多くがこのデザインを採用しています。デザイン初心者にとっても取り組みやすい形式です。

ただし、標準型のデザインは少し情報量が多くなる傾向があります。そのため、最も注目を集める可能性が高い左上と右下の2箇所に重要な情報を配置することが肝心です。左上にはユーザーの注意を引くキャッチコピーを、右下にはCTAボタンなどの行動を促す要素を配置すると良いでしょう。

分割型

分割型は、写真やイメージとテキストを分けて配置するデザインです。このデザインでは、テキストの可読性を高め、全体にすっきりとした印象を与えることが可能になります。
特に、キャッチコピーを目立たせつつ、商品画像も魅力的に見せたい場合に適しています。

縦分割、横分割、斜め分割、複数の領域に分割するなど、分割方法はいくつかあります。どの分割方法を選ぶかは、使用したい写真のサイズや縦横比によって適切なもの選びましょう。例えば、ビルや塔など縦長の被写体を使用する場合は、縦分割がより効果的です。

イメージメイン型

イメージメイン型のバナーデザインは、バナー全体にビジュアルイメージを配置し、商品の写真などを目立たせることができます。このデザインは、見た目に強いインパクトを持つ商品やサービスの広告に特に有効です。

ただし、イメージメイン型では、説明用のテキストの量を最小限に抑える必要があります。テキストは必要最低限にとどめ、イメージの魅力を最大限に引き出すことを意識して視認性を損なわないよう注意が必要です。

写真にテキストが被って視認性が低下する場合、テキストの背景に枠を設ける、ドロップシャドウを追加する、または写真の明度を下げるなどのテクニックを用いて、写真とテキスト間のコントラストを強調することが効果的です。

モノクロで実際に要素を配置する

レイアウトの基本的な構成が決定したら、実際に要素を配置していきます。
この段階では、フォントや色などの細部にこだわらず、まずは全体の配置を決めることが重要です。細かいデザインの調整は、全体のレイアウトが固まった後に行うことをお勧めします。
先に決めた優先順位に基づいてテキストやイラストなどのサイズを調整します。バナーの見やすさや伝えたいメッセージが明確に伝わるかを確認しながら進めましょう。

色・フォントなど細部を調整する

最後に、バナーデザインの細部を決定していきます。

色は、バナーの主要な写真やイラスト、ブランドのカラー、さらにはクリック後に表示されるページの配色などに合わせて選ぶと効果的です。配色に迷う場合は使用する色を2〜3色程度に限定すると、バナーのデザインをすっきりと整え、ごちゃごちゃした印象を避けることができます。

次に、テキストに使用するフォントの選定も重要です。
フォントはバナーの全体的な印象に大きく影響するため、先に決めたターゲット層を考慮しながら適切なフォントを選ぶことが重要です。フォントの種類も2〜3種類に限定し、バナーの読みやすさを損なわないようにしましょう。

まとめ

この記事では、広告バナーの作成方法を、内容の決め方からデザインまで詳しくご紹介しました。インターネット上で広告を掲載することが一般的になり、Web上には多くの広告バナーが存在しています。このような環境の中で、ユーザーの注意を引くことができる広告バナーの作成が非常に重要です。