初心者にもできるバナーの作り方や成果を出すポイントを詳しく解説

作り方より先に知っておきたいバナーのサイズ

バナーを作る前に、どのようなサイズがあるのか確認しておく必要があります。

バナーのサイズは、掲載メディアなどによってある程度決まっていることが多いため、目的に合わせて適切なサイズで作成しましょう。

LINEヤフーの調査によると、近年のインターネット利用環境は、スマートフォンの利用者が全体の約91％、スマートフォンのみの利用者は54％と増加傾向です。そのため、スマートフォン画面で見やすいサイズを選択するのが主流となりつつあります。

バナーサイズの例と特徴は下表のとおりです。

参照：LINEヤフー「〈調査報告〉インターネットの利用環境 定点調査（2023年下期）」
参照：Google Adsense「広告サイズに関するガイド」

初心者にもわかりやすいバナーの作り方

デザイン初心者も作成しやすいバナーの作り方を、以下の8つの手順に分けて解説します。

1. 目的・ターゲットを明確にする
2. デザインイメージをリサーチする
3. 要素を書き出す
4. レイアウトイメージのラフを書き出す
5. 画像などの素材を準備する
6. 白黒でレイアウトを作成する
7. カラーを決める
8. 実際のサイズで最終チェックする

手順1.目的・ターゲットを明確にする

まずは、目的やターゲットを明確化することが必要です。

認知拡大やCV獲得など広告の目的はさまざまで、ターゲットの年代や好みによっても効果的なデザインや配色が変わります。

目的やターゲットが曖昧なままバナーを作りはじめると、ユーザーへ効果的にアプローチできない可能性があります。

明確にしておきたい項目の例は、以下のとおりです。

• 自社商品・サービスの訴求したいポイント
• ターゲットの属性（年代や性別、職業など）
• ターゲットの抱えている悩み

成果が期待できるバナー広告を作成するために、誰に何を伝えるかバナーの方向性をしっかりと整理しておきましょう。

手順2.デザインイメージをリサーチする

制作する商材の過去のバナーや、競合他社のデザインを調べるなど、事前にデザインイメージをリサーチしておくことも必要です。たとえば、子ども向けのサービスなら丸みのあるフォントやポップな色を使用しているなど、商材に合わせたデザインの方向性や共通点を見つけられます。

また遷移先のページとイメージが大きく異なると、ユーザーが違和感を覚えて離脱する可能性が高くなります。遷移先のページにも必ず目を通したうえで、デザインを考えることが大切です。

手順3.要素を書き出す

目的やターゲットが決まったら、バナーを構成する要素をすべて書き出します。具体例として、以下のような要素が挙げられます。

• キャッチコピー
• 訴求する商品・サービス
• ロゴ
• CTA（アクションボタン）

要素を洗い出したら、ターゲットに伝えたい優先順位を決めましょう。優先順位を決めると、どの部分を強調すべきかが明確になり、デザインを進めやすくなります。

手順4.レイアウトイメージのラフを書き出す

デザイン初心者が制作する場合、レイアウトイメージを手書きしておくと効率的です。いきなり作業を始めるとイメージがうまく具体化できず、レイアウトに悩む時間がかかりすぎる場合があります。

作成サイズを想定して、優先順位をもとに文字サイズに強弱をつけながら、まずはざっくりと手書きで構成要素を配置してラフを作ってみましょう。

全体像や必要な要素が視覚化できると修正点も把握しやすく、その後の作業もスムーズに進行しやすくなります。

手順5.画像などの素材を準備する

ツールを使用してバナー制作に入る前に、手書きのレイアウトイメージをもとに必要な画像などの素材を準備しておきます。

作成途中で足りない素材を探すと効率が悪く、思うように作業が進まない可能性があります。メインビジュアルや装飾素材などは、事前に集めておくとよいでしょう。必要な素材を準備し、制作段階では配置するだけにしておくほうが、より効率的です。

手順6.白黒でレイアウトを作成する

必要な素材がそろったら、実際にレイアウトを白黒で作成します。白黒でレイアウトすることで視認性を確認でき、文字サイズやテキストの配置、見にくいところはないかなど、改善するポイントをみつけやすくなります。

その際、ターゲットが好むようなフォントを選び、読みやすく伝わりやすい字間や行間などに整えておくことも大切です。

手順7.カラーを決める

白黒のバナーで視認性を確認し、問題がなければカラーを選択します。カラーを選ぶ際は、ブランドカラーや広告の目的に合わせて配色を決定するのが一般的です。

カラーによって大きく印象が変わるため、表現したいイメージを想定して選ぶことが必要です。たとえば、色の与える心理的イメージとして、温かみや明るいイメージなら暖色系、かっこよさやスマートさを出したいなら寒色系が効果的とされています。

また、使用する色は3〜4色ほどに抑えると、まとまりやすくなります。カラーを選び、バナーを作成できたら、全体的なバランスを見ながら最終調整を行いましょう。

手順8.実際のサイズで最終チェックする

最終調整ができたら、最後に実際のサイズでチェックすることも大切です。

画像の作成中は拡大、縮小しながら作業を進めることが多いため、実際のサイズでチェックすると修正点が見つかる場合もあります。修正点があれば再度調整し、より効果的なデザインを目指しましょう。

成果を出すバナー作成のポイント

成果を出すためのバナーを作るポイントを、以下の観点から解説します。

1. トンマナ（トーン＆マナー）を統一する
2. 文字の可読性を高める
3. 余白のバランスに気をつける
4. 目線の流れを考慮したレイアウトにする
5. メインビジュアルの画像にこだわる

1.トンマナ（トーン＆マナー）を統一する

バナーのデザインとリンク先のWebページのデザインは、トンマナ（トーン＆マナー）を統一することが必要です。トンマナとは、デザインイメージの統一性・一貫性を保つためのルールのことです。

バナーデザインとリンク先ページのデザインイメージが違いすぎると、バナーをクリックしたユーザーが違和感を覚え、すぐに離脱してしまうリスクがあります。

具体的には、以下のような要素をチェックしてトンマナをそろえます。

• 企業をイメージさせるカラー
• ターゲットに合わせたフォント
• 世界観が伝わる画像

これらのデザインやスタイルに一貫性をもたせることで、統一感が出やすくなるでしょう。

2.文字の可読性を高める

バナーは一瞬でユーザーに情報を伝える必要があるため、文字の可読性を高めることが大切です。

写真と文字のコントラストが曖昧だとユーザーが読みにくいと感じてしまい、ページ離脱につながる可能性があります。

可読性を高めるためのコツとして、主に以下が挙げられます。

• 写真の余白に文字をのせる
• 文字のうしろに背景色をつける
• 文字に縁取りする
• 写真と文字の明るさに差をつける

デザインを工夫し、可読性をアップできれば視覚的に訴えられるため、ユーザーに一目で必要な情報を伝えられます。

3.余白のバランスに気をつける

刺さるバナーデザインにするためには、意図的に適度な余白を作ることも必要です。余白を作ることで、情報を強調したり視認性を高めたりする効果が期待できます。

デザイン初心者の場合、余白があると情報を詰め込みがちですが、スペースが限られたバナーですべての情報を伝える必要はありません。詳細な情報はリンク先のページで読んでもらい、バナーは最低限伝えたいポイントに絞ると効果的です。

余白は高級感やシンプルなイメージを与えたいときにも役立ちます。余白をうまく取り入れることで、ユーザーの興味を引くバナー広告に仕上がるでしょう。

4.目線の流れを考慮したレイアウトにする

読みやすいバナーを作るために、ユーザーの目線の流れに沿ったレイアウトにするのも効果的です。基本的にユーザーの目線の流れは左上から右下へ向かい、Z型に移動するといわれています。

Z型のパターンでは、最初に注目する左上に優先順位の高い重要な情報を配置し、右上→左下→右下と重要度を下げていきます。そのうえで最後に目線が止まる右下には、ユーザーのアクションを促すCTAなどを配置しましょう。

目線の動きに沿ったデザインはユーザーに内容が伝わりやすく、クリック率のアップが見込めます。

5.メインビジュアルの画像にこだわる

メインビジュアルはバナー全体のイメージを決める要素であり、とくにユーザーの印象に残りやすいため、適切な画像選びが重要なポイントです。サイズや画質のよさはもちろん、使用するライセンスがクリアになっているかどうかも、しっかり確認しておく必要があります。

商品やサービスとイメージがマッチしているか、広告効果が期待できるかどうかを見極めて選ぶことが大切です。

引きの強いビジュアルインパクトでクリック率アップを狙いたいなら、タレントを起用するのも一つの手です。通常ならコストがかかりがちですが、定額料金でタレントを起用できるタレントサブスクを利用することで、コストを抑えられます。

主要タレントサブスクの比較表やタレントを広告起用する効果については、こちらの記事で詳しく解説しています。

バナーを作成できるツール3選

バナー作成の際に使えるツールとして、以下の3つが挙げられます。

• 無料で作成できるアプリ「Canva（キャンバ）」
• 高機能ツール「Illustrator / Photoshop（イラストレーター / フォトショップ）」
• プレゼンテーションソフト「PowerPoint（パワーポイント）」

3つのツールの特徴について紹介します。

無料で作成できるアプリ「Canva（キャンバ）」

Canvaは、無料でバナー作成できるオンラインデザインツールです。豊富なテンプレートが用意されているため、より手軽にバナーを作成したい初心者向きのツールといえます。

ブラウザだけでなく、スマホアプリも利用可能なうえ、無料素材や1億点以上の写真、イラストなどを備えています。LPやWebサイトのトーンに合わせてバナーを作成したいときにも、好みの色からテンプレートを選択できるため便利です。

高機能ツール「Illustrator / Photoshop（イラストレーター / フォトショップ）」

IllustratorとPhotoshopは、Adobe社が手がけるプロも愛用する高機能ツールです。

Illustratorは、図、イラストの作成や、テキストと画像を組み合わせたレイアウトの作成に適したグラフィックツールです。

一方のPhotoshopは画像を編集するためのツールで、写真の色調整や加工、Web向け画像の作成を得意としています。

どちらも本格的なデザイン作成ができ、バナーだけでなくチラシや名刺作成など幅広くデザイン業務に対応したい場合に活躍します。

プレゼンテーションソフト「PowerPoint（パワーポイント）」

MicrosoftのプレゼンテーションソフトであるPowerPointも、バナーを作成できるツールです。主に、会議で使用する提案資料などの作成に使用されます。

作成したいバナーのサイズに合わせてサイズ変更し、資料を作成する要領で写真や文字、イラストなどを配置したうえで画像として保存します。

デザイン性を重視するのであれば、IllustratorやPhotoshopのほうが適しているといえます。とはいえ、普段の業務でPowerPointを使い慣れている方には、選択肢の一つになるでしょう。

作り方のコツを習得して効果的なバナーで顧客獲得につなげよう

作り方のコツをふまえたうえで取り組めば、初心者でもバナーを作成できます。成果を出すためには、わかりやすいレイアウトや引きの強いメインビジュアルを選ぶことが大切です。