バナー作成に必要なコツ全部まとめ解説してみた
web広告の運用担当者は色々な問題抱えてます。特に今悩みで大きいのはクリエイティブではないでしょうか？
ここでは広告やデザインを知らない人が、自分で作成するのに必要な知識を全部詰め込みました。実際作ろうにもマーケティング参考サイトや書籍も載せていますので理解を深めたい人は掘り下げてみてください。
配信ターゲットをしっかり決める。
広告はサービスや商品に興味を持ってもらう一つの手段です。バナーのような限られたスペースで、一瞬の出会いで何を伝えたいのかは重要です。
バナー広告を作る際は次の二点を考えます。
- 広告は適したユーザー…ターゲット選定
- 適した広告…クリエイティブ
【参照ページ】
Web広告の成功法則_広告の設計と運用改善https://www.slideshare.net/kazushiroh/web-66138450
ターゲット設定
まずはターゲット像を細かく分析していきます。上記の参照記事でもありましたが、ターゲットを考える際の要点は次のとおりです。
ターゲティングの設計：一番魅力に感じて貰える人を考える。
- 現在ユーザーの課題・広告で悩みを言い当てる
- 理想の未来・未来を強く思い描かせる
- ハードル・広告で心配を取っ払う
広告を見ることで、どんな感情を持ってもらい、どんな行動を起こさせるか目標を選定します。
では前段の設定ができたところから、実際にクリエイティブ作成をスタートさせましょう
とりあえず何も考えずに要素を全部並べる
要素というのは広告に載せる情報です。
テキスト、図形、画像など載せるべきものをすべて載せます。余分なものはあとから消しますのでまずは必要なものをアウトプットしてみましょう。
まずクリエイティブ作成にはツールが必要ですが、Photoshopやイラストレーターをつかうのは技術も時間もお金もかかります。なので使わずに便利なウェブサービスを使います。このサービスはパワポ感覚でデザインが作れるので誰でも簡単にできます。テンプレートもたくさんあるので使ってみるといいですね。もちろん無料。
優先順位を決める
そこから何を伝えなければならないのか、優先順位を決めていきます。大事な視点は次の2つです。
- 大事天秤…何を伝えることが大事か※1
- スポットライト…アピールするべき箇所を強調※1
- キャッチコピー…「端的に！」
どの部分を伝えるとユーザーの感情に変化があるのか。何を聞くとユーザーが思わず行動するのか。そういった観点で「大事天秤」と「スポットライト」を駆使してバナーの訴求イメージを決めます。訴求の内容に優先順位をつけたら、次にビジュアルを選んでいきます。
メインビジュアルを決める
伝えたいメッセージに合わせて選びます。訴求ポイントを考えると必要な写真イメージが浮かぶと思います。メッセージ性ををさらに強くするためにどんなイメージを選ぶのか考えましょう。イラストや写真は非言語コミュニケーションですから、見せるイメージと訴求の内容がずれないようにします。
【写真を選ぶ注意事項】
- 感じる写真と読む写真、メッセージに合わせて選ぶ※1
- 版権などに注意
私はイメージ探すときにここを多用しています。
検索でイメージを探せるので短時間で見つけることができます。そしてフリー素材なのがいいです。
適切なレイアウトを選ぶ
次に配置が必要な要素とメインイメージを考慮してレイアウトを考えます。
ここでも何を伝えたいのかが大切になります。
伝えたいテキストやイメージがしっかり読み取れるレイアウトにします。伝えたい文字が見えずらければせっかくのバナーも台無しですからね。
手書きでラフを描いてみる
ここまで来るとデザインはイメージできてると思います。改めて頭の中のイメージとずれてないか書き出してみましょう。書き出すときのポイントは
連想力が大事です。言葉のイメージ、写真のイメージ、を連想させてどうやったら伝わりやすいかを考えます。※1
ここからはパソコンでの作業に戻ります。
まずはモノクロで組んでみる！
なぜかというと色にデザインが引っ張られてしまいます。そうすると本来伝えたかった内容とずれてきます。なので形を決めるためにまずはモノクロ、グレースケールで作業します。またデザインと彩色を分けることで作業スピードが格段に上がります。
モノクロデザインを考える際はフォントも合わせて考えたてみましょう。この時に考えてほしいのは「訴求をどういう声色で伝えるか」を考えます。
- バナー擬人化してみる：書体→声色※1
というような形です。私なりのフォントの可読性を高める要素
- 文字の大きさを変える→声の大きさ
- ウェイト（太字）を変える→野太い声
- 組み方を変える→話しかけ方
- アクセントをつける→強いイントネーション
それではデザインと字体が決まったら、色つけをしていきます。
カラーにする
色は見た目の感情を伝える大事な部分です。
どんな色にどんな効果があるのか、組み合わせ方はどうすればいいのか考えます。ここではポイントだけお伝えしていきます。
色を調整する順序：色相を決める→明度→彩度→仕上げ調整※1
【色調整のポイント】
- 馴染みのいい配色にするには色相、明度、トーン何か一つでも揃える。
- 引き締めたいときは正反対の色を少し加える。
- 繊細なニュアンスを出すにはちょっとした違いの色を使う。
- 色が多いときは赤と青を抑える
- 自然色は黄色に近いものを明るく、青に近いものを暗く
- 人工的な色は黄色は暗く、青は明るく。
また、色はおおよそ3色に抑えます。そしてべースカラー：75%、メインカラー：25%、アクセントカラー：5%のWEB配色の基本の比率で設定すると良い配色になります。
色についてどんな色を組み合わせるか悩んだらこっちの記事を見ていきましょう。すごい参考になりますよ。
カラー配色で迷わない！シーン別配色見本32パターンhttp://www.hp-stylelink.com/news/2013/07/20130708.php
全体を整える
ここまでくればほぼ完成です。最後に微調整を繰り返します。神は細部に宿ると言いますが、最後までこだわり抜いたクリエイティブはしっかりと成果を出してくれます。最後まで抜けの無いようにやりきりましょう。
最後に予備情報。
バナーサイズについてです。実はウェブ広告媒体（Google、Yahoo他DSPなど）毎に出せるバナーサイズに違いがあります。でもそれを一個づつ作るのはかなりの種類になってしまいます。なので共用して使える7つのサイズを作りましょう。
最低限必要なバナーサイズ
300×250
336×280
728×90
160×600
468×60
320×50（スマホ）
320×100（スマホ）
上記7個を抑えておけば良いです。
クリエイティブは事業成長の一手段
私自身企業のweb担当としてGDNやYDNを運用して、代理店とのやり取りをしています。そこで出て来る課題は似たようなもので、最終的にクリエイティブに行き着きます。星の数ほどあるweb情報から注意を引いて、ユーザーにクリックしてもらうには必要な施策になります。ただクリエイティブはあくまで施策の一つに過ぎません。Web担当として必要なのは事業課題をWebで解決することです。私自身作っているとついつい熱中してしまうのですが、工数管理には気をつけましょう。効率的な作成スキルをつける事が収益増加につながりますよ！
※参考図書です。
初心者はまずこの本を読んでおけば、デザインに必要なことがわかると思います。レビューも良い本なので見てみてください。
