【基本編】プロのデザイナーによる広告バナーの作り方徹底解説！

本記事は、メディックスのクリエイティブ制作部隊である B-SOKU （ビーソク）のメンバーが執筆しています。

バナーをデザインしようと思っても、何を意識して作ればよいか分からず、イマイチなバナーが出来上がってしまうことはありませんか？

例えば……

見られやすい構成／配置ってあるの？
色ってどうやって決めるの？
あしらいをつける時のポイントって？

など、疑問がたくさんあると思います。
そんな初心者デザイナーさん向けに、バナーのデザイン方法を事例をもとに解説します！

バナーの種類

バナーには様々な種類がありますが、基本的には静止画バナーと動画バナーの2種類に大別されます。

静止画バナー

シンプルな画像形式のバナーで、掲載媒体によって様々なサイズや規定があります。
複数の静止画バナーを組み合わせてスライド形式で表示する「カルーセルバナー」は、多くの情報を入れ込むことができるため、人気のフォーマットの1つです。

動画バナー

動画を使用したバナーで、動きや音声を使って視覚・聴覚の両方に訴求できるバナー形式です。
インパクトがある一方、制作時間や制作費用が静止画バナーよりもかなりかかるため、計画的に設計・制作する必要があります。

バナー制作ツール

次に、バナーを作る際によく利用される制作ツールを紹介します。

Adobe Illustrator／Photoshop

プロのデザイナーは、この2つを使用することが圧倒的に多いです。
Photoshopのみ、Illustrotorのみの使用でも制作できますが、個人的には、illustratorでイラストや装飾などを作り、それを含めたパーツをPhotoshopに配置してデザインを組む、という作り方がおすすめです。

Canva／AdobeExpress

Adobeなどの有料ツールを購入しなくても、最近ではCanvaやAdobeExpressなど、無料で使用できるツールでも十分にバナーの作成が可能です。
特にCanvaは、無料ツールの中でも素材やテンプレートが豊富で、デザイン制作に慣れていなくても使いやすいインターフェースでおすすめです。

バナーの基本構成

バナー作りに不可欠な、4つの構成要素を紹介します。

メインコピー

バナーのコピーにおいて、最も重要な要素です。
スクロールをしながら一瞬で通り過ぎるユーザの目を止めるために、端的で魅力的なコピーである必要があります。

サブコピー

メインコピーに興味をもって広告を閲覧したユーザに、さらに興味を持たせるための補足情報を与える役割を持つコピーです。

CTA

バナー広告におけるCTAとは、「Call to Action（行動喚起）」の略で、ユーザに次の行動を促すための要素です。
「詳細を見る」「購入する」など具体的な指示を入れたり、「限定」「残りわずか」などすぐに行動することに対するメリット（オファー）を伝えることも有効です。

写真やイラスト

バナーに使用する画像やイラストは、バナーを魅力的にするために重要です。
コピーの内容を補完することはもちろん、商品のイメージを端的に伝えたり、とにかくインパクトのある写真を使ってユーザの目を惹きつけたりする使用方法もあります。

コピーの考え方

バナーに入れるコピー（訴求）の考え方は様々ありますが、ここでは手軽な方法を1つ紹介します。

それは、①「ターゲットの悩み・期待」に対して、②「商品の特徴・メリットがどう応えるのか」を考えることです。

例えば、次のような冷凍宅配おかずのコピーを考えるとします。（商品はダミーです）

「忙しくて料理をする時間がとれない」という悩み（①）を持っている人に対して、この冷凍宅配おかずがあれば、レンジで温めるだけですぐに美味しい食事がとれる（②）というアプローチが1つ考えられます。

これをベースに、「レンジで温めるだけですぐに美味しい食事ができる」という商品の特徴・メリットを「メインコピー」に採用するのです。

ほかにも、料理が苦手で美味しく作る自信のない人や、家族のために健康的な食事を出したい人など、ユーザの抱える悩みに対応する商品のメリットは何かを考えることで、訴求ポイントを見つけることができます。

また、コピーを作成する際は、「カッコいい」よりも「わかりやすい」コピーであることが重要です。
ユーザーがバナーを見て一瞬で、「自分事化」できるコピーを目指しましょう。

レイアウトの種類

バナーはポスター等に比べてサイズが小さく、目に留まる時間も短いですが、基本的なレイアウトは他の広告形式と同様で、次の4つの基本形（Z型・F型・N型・自由形）がベースになります。

ユーザがスマートフォンで閲覧するWebサイトやアプリは、基本的にはF型（左から右への視線移動で下に向かっていく）で制作されています。

そのため、スマートフォン向けのWebサイトや、アプリ内に表示される可能性が高いバナー広告の場合、ユーザの目線を妨げないZ型、またはF型のレイアウトを推奨します。

バナーの作成手順

実際にバナーを作成する手順を解説します。バナー作成には、大きく分けて次の3つの工程があります。

1. コピーなどの情報を整理し、作成サイズに落とし込む

バナーの構成要素であるコピーや使用素材（イラストや写真）など、デザインに必要な情報を整理して、各要素のレイアウトをざっくりと決めます。
レイアウトを決めるためのラフは、色を付けず白黒で作成して問題ないです。

2. レイアウトや配置が決まったら、トンマナを決める

トンマナとは、トーン（tone）とマナー（manner）を略した言葉で、デザインや文言などに一貫性を持たせるルールを指します。

本来はレイアウトやコピーにも影響する言葉ですが、今回は色味やフォントなど、デザイン上のトンマナに限定して解説します。

トンマナは、性別・年代・業界・ターゲットなど、様々な要素から決めることができます。

・業界から決める場合、業界のイメージを言葉で表し、そこから色味を連想するという方法があります。 例えば、人材系（保育士）の場合、次のような連想ができます。

▼「保育士」＝子供・優しい・笑顔など
〇：パステルカラー・カラフル・ピンク・オレンジ・水色…
✕：白黒・渋い色味

・ターゲットから決める場合、先ほど例に挙げた冷凍宅配おかずのターゲットが次だとします。

ターゲットの条件から、次のようなトンマナをイメージできます。

◆画像 → 自分が理想としている美味しそうな料理の写真
◆色 → 健康・美味しさを彷彿とさせる暖色系の色
◆フォント → 忙しい中でも端的にコピーを伝えられる視認性の高いゴシック体

困ったときは、同じ業界の他社のバナーを参考にするのも良いでしょう。
一例ですが、次のようなプラットフォームやサンプルサイトを使うことが多いです。

Pinterest
BANNER LIBRARY
Bannnner.com

3. 細かいあしらいを加える

最後に、背景を調整したりアイコンを選定したり、細部に手を加えて完成です！

しっかり土台を作って大枠を固めてから、細かい調整を行いデザインしていくという流れが定石です。

【事例で解説】バナーの作り方

実際に、バナーの作成手順①～③でバナーを作成する方法を、制作事例をもとに解説します。（バナーはダミー）
それぞれの工程で、デザイナーが意識しているポイントも記載しているため、ご参考ください。

■事例 1

①今回の構成は「F型」のレイアウトにし、コピーとあらかじめ用意された画像素材の配置を決めます。

バナーサイズが1080×1080の正方形であるため、メインコピーは上部に配置し、注目されやすいようにしています。

👉 ポイント

• テキスト要素は簡潔に
  今回、コピーは指定がありますが、1から作る際は、メインコピーは15文字以内、サブコピーは補足的な位置づけで考えることを意識しましょう。
  ユーザが実際に広告バナーを見る時間はコンマ何秒とも言われていて、その短い時間で伝えたいことをすべてを見てもらうことは難しいため、テキスト情報は簡潔にまとめることが大切です。

• オファーはフッターに集約することが多い！
  画像やテキストなどの要素が多いと、情報が散らかり、本当に伝えたいことが分かりにくくなってしまいます。
  特に、ユーザがクリックするかどうかの決め手となるオファー（特典やメリット）は一箇所に集約することが重要で、今回のようにフッターに配置することが多いです。また、オファーは、「申し込み特典」や「割引」など、引きの強い表現が多いですが、メインコピーより目立つと訴求がぶれてしまうため、注意が必要です。
  オファーをメインコピーの次に目立つよう意識することで、ユーザが「メインコピーで広告に興味を持つ → オファーによる特典やメリットに惹かれる」といった流れを作ることができ、CTRを高められる可能性があります。

• 数字はジャンプ率を付けて視線誘導！
  今回の場合、「1,500円」という価格を強調したいため、フォントサイズを「通常価格」や「50%OFF」より大きくすることで、メリハリを付けて読みやすくしています。

②ターゲット情報をもとに、デザインの方向性決めを行います。

今回は、デザインのトンマナに指定があるため、指定カラーをメインに配色し、フォントはゴシック体を使用して視認性を意識しています。
サブコピーを手書きフォントにすることで抜け感を出し、メインコピーとのメリハリをつけました。

👉 ポイント

• 暖色は視認性が高い
  暖色は、意識しなくても自然と目に入ってくる〝誘目性〟の高い色で、人の注意をひく色味です。
  メインコピーを暖色にするか寒色にするか悩んだときに、暖色にしておくと視認性があがり目に留まりやすいデザインになります！
• 手書きフォントを使うと垢抜けデザインに！
  ちょっとしたサブコピーに手書きフォントを使用すると、一気に抜け感が出てプロっぽいデザインになります。

③最後に、細かい部分のあしらい調整を行い完成です。

👉 ポイント

• 要素が多い時の装飾は少なめに
  テキストや画像などの要素が多い場合、情報を分かりやすく伝えるために、装飾は控えめにして飾り過ぎないようにすることがポイントです。

■事例 2

①素材もトンマナも指定がなく、自由に作成するパターンです。デザイナーの腕が試される上に悩むパターンですね……。

この場合も、基本的な考え方は同じです。まずは、コピーなどの情報をもとに、簡単に構成を考えましょう。

横長バナーの場合、「Z型」の構成でデザインすることが一般的です。
左にコピー、右に写真を置くことで、視線の流れがスムーズになり、読みやすいデザインのバナーになります。

②ラフをもとに、「保育士」でイメージする言葉から、フォントや色を連想し、調整します。
ターゲットをより明確にするため、保育士の女性と園児である子どもの後ろ姿を素材として選定しました。

👉 ポイント

• フォントを変えるだけでデザイン性UP！
  同じゴシック体でも、少しデザイン性のあるものにするなど、工夫を加えると垢抜けたデザインになります。
  文字の太さなどの可読性と、デザイン性を兼ね備えたフォントを使用することが重要です。
  商品やサービスのイメージや、デザインのトンマナに合わせて、ゴシック体か明朝体を選択しましょう。

• グラデーションで視認性を高める
  テキストを置く位置に明るめのグラデーションを置くことで、背景と文字の間に明確なコントラストを作り、視認性を高めることができます。
  写真の主役を邪魔せず、テキストにも注目させたい場合、グラデーションを使うことで画像と文字が分離しすぎずになじんで見えます。

③最後に、「子供」や「保育園」というイメージに合う、風船やお花などのあしらいを追加し、賑やかで明るい雰囲気に調整して完成です。

■事例 3

①事例1と同じく、左から右への視線移動が下に向かって動いていく「F型」のレイアウトで、メインコピーを上部に配置しました。

②今回の場合、素材の指定がないため、「保険」や「お金」のイメージと関連性の高いイラストを選定しました。

また、「インパクトのあるデザインにしたい」という要望があったため、イラストの後ろにコピーを大きく配置し、背景の一部にすることで目立たせています。

👉 ポイント

• 文字を背景のように使う
  写真やイラストの後ろにコピーを大きく配置すると、インパクトのあるデザインになります。
  商品や人物を目立たせたいときにも向いている構図です。
• フリーイラストの色味に合わせる
  イラスト・テキスト・背景の色味が合っていないと、全体としての統一感がまったくない印象になります。
  トンマナが指定されていない場合、写真やイラストなどの色味を参考にすると、まとまりが出ます。迷ったときは、素材の色を参考にしましょう。
  また、色を多用するのもNGです。3色程に抑えることでまとまりのある印象になります。

③空いているスペースにお金のイラストを散りばめたり、リアクションのあしらいを入れたりすることで、よりインパクトのあるデザインに仕上げました。

👉 ポイント

• 色で背景をエリア分けする
  背景色に変化をつけてエリアを分割することで、スムーズな視線誘導が実現します。
  加えて、メリハリや奥行きが生まれるので、全体の印象が深まります。

本記事を参考にバナーを作ってみたけど、なんだかイマイチ… どこを修正すべきか分からない！という方は次の記事もご参考ください。
よくあるイマイチなバナーの原因と、実際の添削事例を紹介しています。

「イマイチなバナー」はもう卒業！？ 現役ディレクターによる、バナーデザイン添削事例8選！

まとめ

いかがでしたでしょうか。
本記事ではバナーを作成する基本的な手順について、事例をもとに解説しました。
紹介した事例以外にも、多くの手法や流行のデザインがあるため、次の【応用編】記事でご紹介する予定です！

また、広告バナーは1度作成して終わりではなく、より良い効果を求めて継続的に新たなバナーを作成し、改善につなげていくことが前提です。

PDCAを回し、効果的なクリエイティブの作り方を掴めるよう、本記事で解説した基本をしっかりと押さえておきましょう。

【関連記事】

【セミナーレポート】 Web広告の効果を高める本質的なクリエイティブPDCA戦略とは？

最後に

バナーの効果改善から制作まで、まるっと任せたい！ そんなあなたへ
ちょっとの工夫でバナーの効果が変わることは分かったけれど、

「どうせなら具体的なバナーの改善提案から、新たなバナーの新規提案までお願いしたい」
「なんならバナー制作も併せてやってほしい」

とお考えのインハウスご担当者様に朗報です！

アドクリエイティブ制作専門部隊「B-SOKU（ビーソク）」なら、豊富な広告運用の経験・媒体トレンドの知見を基にした、効果の出るクリエイティブ（バナー静止画、動画、LP）のご提案から制作までを一気通貫でお任せいただけます！

「制作リソースが足りなくて悩んでいる」「インハウスでLPを作っているけれど、なかなか効果がでない」「業界ごとの勝ちパターンやトレンドがわからない」

――そういったお悩みをお持ちの方は、ぜひお気軽に私たちにご相談ください。