「ノンデザイナーがデザインを作る」第4回はバナーデザインをテーマにお送りします。
第3回のロゴデザインについて、いかがでしたでしょうか。ロゴは一見するとシンプルでパッと作れてしまえそうなものも多くあります。しかし、その背景には様々な戦略やテクニック、何よりロゴが表すもののストーリーが込められています。
知名度のあるサービスになると、ロゴ変更に数百、数千もの案を募ることも珍しくありません。いきなり本格的なロゴ制作は難しいですが、この記事を読んでいるあなたが、いつかロゴデザインに携わっていたらうれしく思います。
1.Webデザインとは?-アート、グラフィックとの違い
2.ノンデザイナーがデザインする際の考え方
3.これだけでプロっぽいデザインに!デザインの原則
4.“意味のある”ロゴデザイン
5.これだけ抑えれば大丈夫!広告バナーのデザイン
6.ノンデザイナー向け広告バナーデザインツール
7.Webサイトの構造とレイアウト
8.Webサイト制作に必要な知識
9.デザイナーのための広告・マーケティングの基礎知識
今回は、ノンデザイナーが携わる機会の多いバナーデザインについて解説します。
バナーデザインはロゴに比べると難易度は高くありませんが、携わる機会が多いうえ、広告出稿を通して良し悪しが明確に出ます。広告成果は企業の売り上げに直結するため、かなりプレッシャーがかかるデザイン業務かもしれません。
しかし、明確に良し悪しが出るということは、デザイナーにとって非常にありがたいことです。有名なデザイナーも新人の頃はバナーを作りまくっていた、という話も珍しくありません。
本記事では、バナーデザインを作る際に、これだけ抑えれば大丈夫といった項目をまとめました。広告バナーのデザインを理解して、実践に生かしていきましょう。
広告バナーとは
バナーは、英語で旗の種類を指します。もともとバナーは、帯状の広告画像が宣伝用の垂れ幕に似ていることから「Web広告=バナー」と呼ばれるようになりました。
バナーの役割は「商品やサービス、サイトの宣伝」です。バナーという名の通り、「のぼり（旗）」の役割を持ちます。あるサイトを訪れたユーザーが、自分の商品やサービス、サイトの最初の接点となる部分がバナーです。
バナーデザインが悪いと、「のぼり（旗）」の役割を果たしません。バナーはクリックされて初めて意味を持ちます。ノンデザイナーがバナーを作る際は、クリックしたくなるデザインを意識してください。「ダサい」「デザイン品質が低い」といわれようと、バナーはクリックされたら正解です。
バナーの作り方 考える編
バナー作りの90%が事前準備にあります。何も準備せずにデザインを作っても、誰もバナーをクリックしてくれません。前述した通り、バナーはクリックされて初めて意味を持ちます。ここでは、バナー作りで考えるべきことをまとめました。
- ターゲット
- 情報
- ジャンル
- レイアウト
- 文字
- キャッチコピー
- 写真、イラスト
- 色
- 用途と役割
「うわっ！多い……」そう考えるのも無理はありません。バナーは、誰かのサイトに掲載される広告です。ユーザーは何らかの目的をもってそのサイトを訪れています。すでに目的のある方に寄り道させるのは至難の技といえます。
だからこそ、しっかりと考えた上で広告バナーを作りましょう。
バナーのターゲットを考える
バナーには、必ずターゲットが存在します。明確なターゲットに適したデザインでなければ、バナーの存在意義はありません。
まずは、「誰に届けたいのか？」この点を明確にしましょう。ターゲットは、細かければ細かいほど良いです。出身地から年齢、性格、趣味や特技など、ペルソナと呼ばれる架空の人物設定を明確にしてください。
バナーに載せる情報を考える
デザインを作り始める前に、バナーに載せる情報をすべて洗い出しましょう。この段階では、どれを載せようとかは考えなくて良いです。とにかく情報に漏れがないようにまとめてください。
- 会社名・サイト名・サービス名・商品名
- キャッチコピー
- キャンペーン場所
- キャンペーン内容
- キャンペーン時期 など
続いて、載せる情報に優先順位をつけます。上記を例にした場合、1：キャンペーン内容、2：キャンペーン時期、3：キャッチコピー、4：キャンペーン場所、5：会社名・サイト名・サービス名・商品名という形がよさそうです。
キャンペーン内容は、バナーにとって重要です。相手へのメリットを簡単に提示しましょう。続いて、キャンペーン時期でいつまで続くのか、キャッチコピーでわかりやすい訴求、場所や名称は後回しで構いません。（バナーの遷移先はLPや自社サイトである場合が多いので、あえて明示する必要はありません。また名称も遷移先で確認できます。）
バナーの形式・レイアウトを考える
バナーの利用用途は多岐にわたります。それぞれ大きさが違うため、形式にあったサイズを使いましょう。例えば、クライアントがいる場合は指定の形式、自社で利用する場合は、バナーの利用目的から適切なサイズを選びましょう。Google広告のバナーサイズは全部で20種類もあります。全部作成するのは現実的ではないため、インプレッション数の多い主要5サイズを作成することが一般的です。
サイズが決まったらレイアウトを考えましょう。レイアウトには、縦・横分割、中央配置、余白などさまざまな種類があります。いきなりパソコン上でレイアウトするのは難しいため、まずは手書きで簡単に決めてください。
バナーに載せる文字を考える
バナーを構成する要素の中でも、文字は重要な役割を持ちます。優れたバナーの多くは文字の魅せ方がうまく、それが写真やイラストと調和し目を引きます。一方、よくないバナーは文字を軽視しているケースが多いです。
文字を考える上で重要なのがフォント選びです。一般的にフォントは、繊細で女性的な明朝体と、力強く男性的なゴシック体に分かれます。先ほど決めたバナーのターゲットや商品・サービスの性質、キャンペーン内容に応じてフォントを選びましょう。
例えば、女性がターゲットの場合は明朝体を使うことが多いですが、スーパーのチラシは主婦層がメインターゲットでありながら太めのゴシック体が基本です。これは、スーパーというサービスの性質、特価やセールといったキャンペーン内容から、ゴシック体のほうがマッチするためです。
次に情報の優先順位に応じて文字の大きさを決めていきます。後は文字の優先順位に応じて装飾したり、字間や行間を変えたりして調整します。
この辺りは、一朝一夕でできるものではないため、優れたバナーを参考にするなどして対策してください。
優れたバナーデザインは、様々なギャラリーサイトで見ることができます。「広告バナーデザインのギャラリーサイト5選」をぜひご覧ください。
バナーの文字デザインについては、こちらの「【デザインの基礎】文字フォントの重要性と基礎知識、テクニック」が参考になります。
キャッチコピーを考える
キャッチコピーは、バナーのメインコンテンツです。バナーの中でもっとも伝えたいことを、短くわかりやすく伝えましょう。
私がキャッチコピーを作る際は、まず誰かを想定します。その誰かは、できるだけ近くにいる具体的な人が多いです。
例えば、働く女性がターゲットなら空想の人物ではなく、友達を想像してください。そして、その友達に伝えるコピーを考えます。「あの子の悩みは何だろう？」「あの子だったらどんなコピーに興味を持つだろう？」このように考えていきます。
続いて、その子に対してベネフィットを提示します。ベネフィットとは「利益」や「恩恵」のこと。キャッチコピーを考える際にメリットを重視する方は多いですが、大切なのはベネフィットです。
メリットはあくまで特徴や売りの部分なので、相手の心を動かすところまでに至りません。一方、ベネフィットは相手にとっての利益を提示するため、キャッチコピーがハマれば、バナーをクリックしてもらいやすいです。
バナーのキャッチコピーでは、メリットをではなくベネフィットを重視しましょう。
最後にターゲット、ベネフィットを用いて作ったキャッチコピーが本当いいものか？を知るため、「（相手に）考えさせるコピーか？」「（相手に）反応させるコピーか？」「（相手に）拡散させるコピーか？」がクリアできているか確認しましょう。
良いキャッチコピーは、いずれかの要素を含んでいます。出来上がったキャッチコピーの答え合わせのような形で検証してください。
キャッチコピーの具体的なテクニックは下記の記事で紹介しています。合わせてご覧ください。
男性に刺さるキャッチコピーのテクニック3+4
女性脳を意識したキャッチコピーの作り方
写真・イラストを考える
キャッチコピーが目に入ったあと、印象を左右するのは写真やイラストです。文字だけの構成で問題ない場合もありますが、基本的に写真、またはイラストを入れておくと、ぱっと見の印象を強められます。
写真やイラストを入れる場合は、他の要素と被らないように注意してください。特に、キャッチコピーを含めた文字が見えづらくなると本末転倒です。とはいっても、バナーはサイズが小さいので、基本的に文字が被ります。そこで、色味や大きさをコントロールして被らないよう調整しましょう。
また写真やイラストは解像度も重要です。画質の悪い写真やイラストは、クリックする気が起きません。できるだけ高解像度のものを使用してください。
バナーに使う色を考える
バナーの色はターゲットを考えて決めます。色のイメージは、訴求に大きな効果があるので、できるだけターゲットに近いものを選びましょう。例えば、寒色系の色合いなら男性向け、暖色系の色合いなら女性向け、原色に近い色なら子供向けになります。
もちろん、ターゲットだけではなく商品・サービスやキャンペーン内容にも影響されます。「激安」という言葉を男性向けだからという理由で青くするのはよくありません。
色はそれぞれ意味を持っており、赤には力強さや情熱が、青には清潔や爽やかといったイメージがあります。
基本的には、バナークリック後に移動するサイトをもとに色を決めれば問題ないでしょう。そのサイトもターゲットや商品・サービスの内容によって、適切な色使いがされているはずです。
バナーの利用用途や役割を理解する
最後に、デザイナー目線だと忘れがちですが、バナーは何らかの利用目的(多くの場合は広告バナー)があるということです。
バナーは何らかの形で広告出稿され、ランディングページに遷移するまでが仕事です。つまり、どんな広告手法で出稿されるのかも理解しておく必要があります。
例えば、バナー広告といっても様々な物があります。
- グループ企業・サービスのリンクとして利用
- パートナー企業のサイトに純広告として掲載
- SNS広告として利用
- Googleディスプレイ広告で利用
- YouTubeのディスプレイ広告枠で利用
- 特定のサイトを狙って広告出稿
などなど。もちろんこれだけではありません。スマホで見られることが多いのか、PCで見られることが多いのかも広告手法によって変わります。仕事中に見られるのか、プライベートな時間に見られるのか、Twitterを漠然と眺めているときに目に入るのか。それぞれ求められる役割は異なります。
効果的なバナーデザインは、デザインのことだけでなく、マーケティングのことも考えられています。簡単ではありませんが、バナーデザインを作る際は、どういった目的で利用されるのか、どのようにユーザーに届くのかまで意識しましょう。
バナーの作り方 見直し編
バナーづくりを終えたら見直しが肝心です。ここで各項目を確認することで、よりよいバナーが完成します。
パッと見でベネフィットが伝わるか？
バナーを客観的に評価する場合、まずは1日寝かせましょう。そして、次の日の自分がぱっと見て、ベネフィットが伝わるか確認してください。本来ならターゲットに確認してもらった方がいいですが、いつもそばにいるとは限らないので自分で確認しましょう。
1日置いて評価することで、客観的な目線でバナーを見られます。1日も時間が空けられない場合は、別の仕事、または帰宅後に確認してください。くれぐれも作ってすぐに評価しないようにしましょう。
モノクロにしてもわかりやすいか？
バナー制作中に、一度モノクロにすると全体のコントラストがわかりやすくなります。ここでメリハリが付いていないと、カラー付きにした際に全体がぼやけて見えるケースが多いです。一旦、モノクロにしてわかりやすいか確認しましょう。
色を使いすぎていないか？
配色の基本は、「ベースカラー 70%」「メインカラー 25%」「アクセントカラー 5%」です。この割合を維持すればまとまったデザインができます。色を使いすぎると要点が伝わりにくくなります。できるだけ配色の基本を抑えたデザインにしてください。
文字は読みやすいか？
文字の判読性は、大きさやフォント、装飾、字間・行間、背景などで決まります。バナーが完成したあとは、こうした要素を微妙に調整して見やすいように工夫しましょう。必ず前のデータは残し、比較しながら決めてください。
情報を詰め込みすぎていないか？
バナーに掲載する情報は詰め込みすぎないようにしましょう。事前に情報を洗い出し、優先順位をつけておけば、情報過多になることはありません。完成後に情報が多いと感じた場合は、改めて情報を精査し、適切な優先順位を決めてください。
写真・イラストの画質は悪くないか？
バナーの各項目をどれだけこだわっても、写真やイラストの画質が悪いとクオリティが下がります。できるだけ高解像度の写真やイラストを用意し、あらゆる環境で見やすいように工夫してください。
LPとの統一性・親和性はあるか？
バナーには別サイトへ誘導するという目的があります。その際、誘導先とデザインテイストが違うバナーの場合、遷移したユーザーが困惑します。基本的にバナーとサイトやLPは統一性を持たせてください。できるだけ近いトンマナやテイストでデザインしましょう。
広告バナーデザインの基本まとめ
第5回では、バナーデザインの基本を解説しました。一見難しそうな広告バナーですが、正しい順序で作れば、誰でも優れたデザインが完成します。
バナーデザインの最大の魅力は、やはり広告を通じて良し悪しが明確になる点です。何はともあれ作ってみてください。広告出稿の結果を見れば、そのバナーが良かったのか、悪かったのかが明確になります。数パターン試して一番良かったものをベースにまた数パターン作って…というPDCAサイクルを繰り返せば、必ずいいバナーデザインに行きつきます。
第6回では、そんな「バナーデザイン作成を支援するツール」を紹介していきます。多くのノンデザイナーはデザインに関するツールを持っていないことが多いですが、バナーデザインは広告成果に応じて何種類も作成する必要があります。できるだけ多くのPDCAサイクルを素早く回すことで、より効果が上がるバナーデザインを見つけましょう。
1.Webデザインとは?-アート、グラフィックとの違い
2.ノンデザイナーがデザインする際の考え方
3.これだけでプロっぽいデザインに!デザインの原則
4.“意味のある”ロゴデザイン
5.これだけ抑えれば大丈夫!広告バナーのデザイン
6.ノンデザイナー向け広告バナーデザインツール
7.Webサイトの構造とレイアウト
8.Webサイト制作に必要な知識
9.デザイナーのための広告・マーケティングの基礎知識
