効果的なバナーデザインを作成するコツは？注意点や参考サイト4選を紹介

効果的なバナーデザインを作成するコツ9選

効果的なバナーデザインを作成するコツは以下の9つです。

バナーはどのようなユーザーにどのようなアクションを起こしてほしいのかを考え、目的から逆算して作成することが重要です。作成するときはいきなり作り込むのではなく、まずは要素の洗い出しと手書きのラフスケッチから始めましょう。

バナーで発信したい情報には優先順位をつけ、最も伝えたい情報に絞ることでユーザーがより詳細な情報に興味を持ちやすくなります。色の心理効果やキャッチコピーの活用・CTAボタンの設置もユーザーに興味を持ってもらえるバナーデザインを作成するうえで効果的です。

1. バナー作成の目的から逆算してデザインする

ゴールやターゲットを明確にすることで、ゴールから逆算して必要なアクションやとるべき戦略のアイデアが生まれます。デザインの方向性が定まり効果的なデザインが生まれやすくなるため、年齢や性別などの仮想の人物像（ペルソナ）やとってほしい行動を考えましょう。

デザインは与えたい印象に最適なものにすることが大切です。フォントや色彩心理などにより印象を強めることで、ターゲットへの訴求効果が高まりやすくなります。

作成する際は「かわいい」「高級感」などのデザインの曖昧なイメージのすりあわせも行いましょう。はっきりした方向性を決めてから、決めた方向性に適した要素を組みあわせると作りやすいです。

2. まずは入れたい要素を何も考えずに並べてみる

入れたい要素をとりあえず並べて、先に配置を考えましょう。サイズや配置のバランスを整えるために、バナーの構成要素の全体像を把握したほうがよいためです。

万が一要素の入れ忘れが起きた場合、後から追加できません。要素の洗い出しを先に行うことでレイアウトを組み直す手間を省けるため、必要な要素や入れたい文言はとにかく書き出しましょう。

3. デザインは手書きでラフに描くところから始める

いきなりデザインを組み立てるのは難しいため、手書きで「絵」にしてみるとよいでしょう。手書きで書く際は細かい部分まで作り込む必要がないため、デザイン全体のイメージがクリアになります。

ある程度デザインができたら、色をつけずにモノクロで作成しましょう。先にモノクロで配置を決めることで、情報を整理しやすくなります。

はじめからフルカラーで作成すると、色彩の印象に左右されやすくなるでしょう。配色を考え込んでしまい要素をうまく配置できないだけではなく「色に左右されてデザイン作成→色を変更」の繰り返しになり効率がよくありません。

4. 発信したい情報の優先順位をつける

発信したい情報に優先順位をつけて、文字の大きさや強調したいものを決めましょう。「どのようなページを見ているときに、どのようなきっかけでバナーを押したくなるか」自分なりのストーリーを考えながら優先順位をつけるとよいです。

すべての情報を強調すると、結果的に何も目立たなくなります。優先順位がなくすべての情報が強調されていると、目に留めてもらえないバナーになるため注意が必要です。

バナーに入れる情報はできるだけ絞って簡潔にすることがポイントになります。バナーを見て興味をもってもらい、リンク先で詳細を解説するのが基本のため、バナーだけですべての情報を網羅しないようにしましょう。

5. ユーザーにとって読みやすく印象に残りやすいフォントを検討する

読みやすいフォントや色使いを考えましょう。遠目から見た場合の読みやすさや、可読性を重視して大きさやウェイト・組み方を変えることが効果的です。

可読性だけではなく、読み間違えないための「判読性」や視線を誘導するための「誘目性」も意識してフォントを選ぶとよいでしょう。読みにくくなると読者に伝わりにくくなり、クリック率が下がってしまいます。バナーが目立つかどうかよりも読みやすさを意識しましょう。

フォントが変わるだけでデザイン全体の印象度が変わります。書体の種類によって伝えられるムードや感情などが異なるでしょう。場にあわないフォントはデザイン全体のバランスを崩してしまいます。

6. 色の心理的な効果を活用する

色には人の心理に働きかける効果がたくさんあり、単純な印象効果だけではなく、五感に直接作用する役割があります。色によって味や温度・重さや大きさなどの印象が変わるため、色彩心理を活用しましょう。

色が与える印象や心理効果の例として、赤は「情熱・明るさ」青は「知的・誠実」白は「純粋・清潔」などの印象を与えます。どのような効果を与えたいかで色のバランスを考えましょう。バランスよく配色することで与えるイメージが変わります。

7. クリック率向上のため「CTAボタン」を設置する

CTAは「Call to Action」の略で、広告を見たユーザーに行動を起こしてもらうこと、すなわち行動喚起のことです。

CTAボタンには「目立たせる」「よりバナーを押したくする」「動作予測がつく」などの効果があります。CTAボタンを目立たせることで「つい押したくなる」バナーを作成できます。

CTAボタンをつけることでクリック率が上がるケースが多いです。ボタンの文言を「詳しくはこちら」や「今すぐ登録」などの「行動してほしいこと」にすることでクリック率が上がります。配置はZ型の「人の視線の動き」を意識して、バナーの右下がおすすめです。

8. 目を惹く「キャッチコピー」を考える

キャッチコピー1つでクリック率が変わります。簡潔で伝わりやすい言葉を用いて具体的数値・実績・限定感・人気の高さをアピールしましょう。

「誰に書くか」「何を書くか」「どう書くか」を考慮することが大切です。「誰に書くか」を考えてターゲットを明確にし、ベネフィット重視のために「何を書くか」を考え、心理効果を参考に「どう書くか」を検討しましょう。

9. 基本的なレイアウトを理解する

縦・横の分割や整列・近接などの基本的なレイアウトの理解は、重要なポイントの1つです。縦や横に分割することで可読性が高まり、情報を受け取りやすくなります。

要素を見えない線で揃えたり関連した情報を近くに配置したりすることで、デザインに統一感が生まれ情報を理解しやすくなるでしょう。

背景画像と文字のコントラストを強めたり余白を活用したりすることも効果的です。背景を目立たせない、もしくは文字を装飾で目立たせる工夫を施しましょう。余白を活用することで、画像と文字がお互いに引き立ちインパクトも出せます。

バナーデザインの「やってはいけない！」6つの注意点

バナーデザインのNGポイント・注意点は以下の6つです。

ユーザーの目を惹きたいからといって、あまりにも情報を詰め込みすぎるのはよくありません。盛り込む情報は本当に伝えたいものだけに絞り、余白も活用して効果的なデザインを作成しましょう。

画像や文字の印象が悪いと、バナーデザイン全体の印象も悪くなってしまいます。画質の粗い画像やイメージにあわない画像の使用は避けることがベターです。文字も読みやすさを重視し、画像と文字のコントラストに気をつけましょう。

1. 画像と文字のコントラストが弱い

画像と文字のコントラストが弱いと、パッと見たときに内容がわかりにくくなります。不安や煩わしさを与えてしまい、ページの離脱につながりかねません。

写真に対して文字のコントラストを強め「見づらい」「わからない」にならないように注意しましょう。写真にフィルターや透過効果を適用することによって文字のコントラストが強まります。

2. 余白をつい埋めてしまう

余白を余ったスペースだと思い、何かしらの文字や画像で埋めることもやりがちなNGポイントの1つです。デザインに清潔感や洗練された印象を与えられるため、余白はうまく活用しましょう。

余白を活用することでデザイン全体の構成で特定の場所に注目が集まり、単に文字を大きくしたり色をつけたりするよりも目立ちます。

3. ありったけの情報を詰め込んでしまう

入れたい情報があるからといって詰め込んでしまうと、ごちゃごちゃした印象になります。情報量が多いとイメージが散らばってしまい、見る側が疲れてしまうことも考えられるでしょう。

結果的に伝えたい情報を伝えられなくなるため、伝えたい情報を適切に入れることが大切です。必要最低限のテキストだけを盛り込むことで、テキストがもつ意味が際立ちインパクトを与えられます。

4. 画像と文字のイメージが合わない

画像と文字のイメージにギャップがあると、結果的に伝わりにくくなります。画像の内容と文字のイメージがあわないと不協和が生まれ、見る人を混乱させ期待を裏切ることになりかねません。

直感的に内容を理解してもらえるように、画像と文字の組みあわせはできるだけイメージがあうものを考えましょう。

5. 使用する画像の画質が悪い

使用する画像の画質が悪すぎると、完成度が低く見えます。全体のデザインがよくても写真が悪いとデザインが台無しになり、見た目がよくないだけではなくブランドや店舗のイメージダウンにもつながりかねません。

ネットショップ用だからといって、サイズの小さい画像を使うのはNGです。小さすぎる画像を無理に引き伸ばすことはせず、作成したいバナーの大きさにあわせた画像サイズのものを使用しましょう。

6. 画像の印象が強すぎて文字が目立たない

画像の印象が強すぎると、文字が目立たなくなります。あまりにもさまざまなものが写りこんでいる写真が背景に使われていると文字が読みにくく、最悪の場合文字が潰れてしまう可能性が高いです。

文字が目立たないと結果的に伝えたいことを表現できないため、画像と文字のバランスに気をつけましょう。色合いや画像の内容などが、適切なものの利用が大切です。

大きな余白やぼかしのある画像がよいですが、どうしても背景が複雑な画像を使用したい場合は半透明なテキストボックスや背景透過を使用しましょう。

バナーデザインの参考サイト4選

バナーデザインの参考サイトは以下の4つです。

バナーデザインに特化したサイトだけではなく、アイデアや作り方が検索結果に表示されるものもあります。どのサイトも掲載されているデザインのクオリティが高く、参考になるでしょう。

バナーの絞り込み検索ができるため、自身が作成しているものに類似したバナーを検索できます。自身の目的や得たい情報にあわせてサイトを使い分けるとよいでしょう。

Bannner.com

Bannnner.comはさまざまなバナーデザインを紹介しており、なかでもディスプレイ広告系のバナーの掲載数が多いです。サイズや業種・カラーなど約70種類の検索カテゴリーがあり、探したいバナーを簡単に見つけられます。

1度に多くのバナーデザインを見られるため、カテゴリーを問わずバナーを確認したい方におすすめです。

BANNER LIBRARY

BANNER LIBRARYはSNSで配信されているバナー広告やECサイトの特集バナーなど、4,000点以上のバナーを掲載しています。他サイトに比べておしゃれなバナーが多く、各バナーについているハッシュタグでの絞り込み検索が可能です。

カテゴリーが細かく分類されているため、検索がしやすい特徴もあります。テイストを絞った表示もできるため、雰囲気や制作後のイメージでバナーを探したい方におすすめです。

バナー広場

バナー広場は、LP制作を行っている株式会社ラヴィゴットが運営しているサイトです。国内最大級のバナー参考サイトの1つで、10,000点以上のバナーが掲載されています。

サイズや要素による詳細な絞り込み検索が可能なため、現在制作しているバナーと同じ条件のものを探したい方におすすめです。

Pinterest

Pinterestはグローバル展開の画像共有サイトで、国内外を問わずさまざまな国のバナーデザインが投稿されています。自分の好みにあわせて参考画像を収集でき、気に入ったものや参考にしたいものは自分の「ピン」として保存できるのが特徴です。

バナーデザインの参考画像だけではなく、アイデアや作り方も検索結果に表示されます。実際にデザイナーがアウトプットの場として使用しており、クオリティの高いデザインが多く集まりやすい点も特徴です。

まとめ

バナーデザインを作成する際は、作成の目的から逆算してデザインし、要素の洗い出しとラフスケッチから始めてください。バナー内の情報量が多かったり画像と文字のバランスが悪かったりすると、見栄えだけではなくブランドや店舗のイメージも損なわれるおそれがあります。作成するときは画像と文字の使い方やバランス・情報の詰め込みすぎに注意しましょう。

比較ビズは、多数の広告デザイン制作会社の中から自社にぴったりの相談相手を探せる無料の比較サイトです。必要な情報を入力することで、全国各地の広告デザイン制作会社を比較できます。バナーデザイン制作でお悩みの方は、ぜひ1度比較ビズを利用してください。

監修者のコメント

tenicom合同会社

代表者　新井田　禎治

鎌倉・藤沢を拠点にWEBに関わる支援を行っているtenicom合同会社の代表。WEBプログラマー、WEBディレクターを経て5年前に起業。現在は神奈川県の中小企業様を中心にWEBまわりを支援中。tenicomでは、「コンテンツの力で、Businessを支援」というキャッチコピーをもとにメディア事業の他、WEBサイト制作を安価に試せるサービスを展開中。

詳しく見る

ECがとても多くなった昨今ですが、ECに呼び込むには大手ショッピングモールに出店する以外では広告を使う必要があります。また、最近のバナー制作ではPCに加えスマホも意識する必要があります。

スマートフォンの場合には、下に下にスクロールしていったり、全面に浮き出てきたりなど、色々な表示方法がありますが、基本的にはユーザーは広告を見たくはありません。その事を意識して、タップしてみたくなるような、もっと詳しく知りたくなるようなバナーにする必要があります。

つまりサイトを訪れる人の多くは、バナーの中のテキストどころかバナー自体を目には入っても頭の中で「あぁ、広告か閉じるにはどうしたら？」と内容を見る気はない、そう認識してシンプルにインパクト重視で作成する必要があります。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。