初心者にもできるバナーの作り方や成果を出すポイントを詳しく解説
作り方より先に知っておきたいバナーのサイズ
バナーを作る前に、どのようなサイズがあるのか確認しておく必要があります。
バナーのサイズは、掲載メディアなどによってある程度決まっていることが多いため、目的に合わせて適切なサイズで作成しましょう。
LINEヤフーの調査によると、近年のインターネット利用環境は、スマートフォンの利用者が全体の約90％、スマートフォンのみの利用者は53％と最多を維持しています。
このデータからも分かる通り、現代のバナー制作においては、スマートフォン画面での視認性を最優先にしたサイズ設計が大前提となっています。
バナーサイズの例と特徴は下表のとおりです。
サイズ | 特徴 |
|---|---|
728×90 | タブレット向けに最適化されたページでも使用可能 |
468×60 | 728×90が収まりきらないスペースに適した形式 |
300×600 | 大きなスペースを活用した視覚効果の高い形式 |
336×280 | パソコン、スマホで見られる形式 |
300×250 | 正方形に近く、写真、画像と相性がよい |
320×50 | 大型スマートフォン画面のページ末尾に適した形式 |
320×100 | 320×50 や 300×250 の代わりに使用できるモバイル向け |
参照：LINEヤフー株式会社「【LINEリサーチ】〈調査報告〉インターネットの利用環境 定点調査（2025年上期）」
参照：Google Adsense「広告サイズに関するガイド」
また、バナー広告については下記記事で詳しく紹介もしています。ぜひご覧ください。
初心者にもわかりやすいバナーの作り方
デザイン初心者も作成しやすいバナーの作り方を、以下の8つの手順に分けて解説します。
- 目的・ターゲットを明確にする
- デザインイメージをリサーチする
- 要素を書き出す
- レイアウトイメージのラフを書き出す
- 画像などの素材を準備する
- 白黒でレイアウトを作成する
- カラーを決める
- 実際のサイズで最終チェックする
手順1.目的・ターゲットを明確にする
まずは、目的やターゲットを明確化することが必要です。
認知拡大やCV獲得など広告の目的はさまざまで、ターゲットの年代や好みによっても効果的なデザインや配色が変わります。
目的やターゲットが曖昧なままバナーを作りはじめると、ユーザーへ効果的にアプローチできない可能性があります。
そのため、バナーを目にしたユーザーが、瞬間的にどのような商品・サービスなのか、メリットは何かなど、イメージしやすいデザインを目指します。
具体的には、以下の点について明確にしておくとよいでしょう。
Why（何を伝えたいのか） | 広告の目的 |
|---|---|
Who（誰に届けたいのか） | ターゲット |
What（何を） | 商品・サービス・メッセージ |
How（どのように） | 狙い・コンセプト |
When（いつ） | 時期・期間 |
Where（どこで） | 媒体・配信先 |
How Much（いくらで） | 価格 |
成果が期待できるバナー広告を作成するために、誰に何を伝えるかバナーの方向性をしっかりと整理しておきましょう。
手順2.デザインイメージをリサーチする
制作する商材の過去のバナーや、競合他社のデザインを調べるなど、事前にデザインイメージをリサーチしておくことも必要です。たとえば、子ども向けのサービスなら丸みのあるフォントやポップな色を使用しているなど、商材に合わせたデザインの方向性や共通点を見つけられます。
また遷移先のページとイメージが大きく異なると、ユーザーが違和感を覚えて離脱する可能性が高くなります。遷移先のページにも必ず目を通したうえで、デザインを考えることが大切です。
手順3.要素を書き出す
目的やターゲットが決まったら、バナーを構成する要素をすべて書き出します。具体例として、以下のような要素が挙げられます。
- キャッチコピー
- 訴求する商品・サービス
- ロゴ
- CTA（アクションボタン）
要素を洗い出したら、ターゲットに伝えたい情報の優先順位を決めましょう。優先順位を決めると、どの部分を強調すべきかが明確になり、デザインを進めやすくなります。
手順4.レイアウトイメージのラフを書き出す
デザイン初心者が制作する場合、レイアウトイメージを手書きしておくと効率的です。いきなり作業を始めるとイメージがうまく具体化できず、レイアウトに悩む時間がかかりすぎる場合があります。
作成サイズを想定して、優先順位をもとに文字サイズに強弱をつけながら、まずはざっくりと手書きで構成要素を配置してラフを作ってみましょう。
全体像や必要な要素が視覚化できると修正点も把握しやすく、その後の作業もスムーズに進行しやすくなります。
手順5.画像などの素材を準備する
ツールを使用してバナー制作に入る前に、手書きのレイアウトイメージをもとに必要な画像などの素材を準備しておきます。
作成途中で足りない素材を探すと効率が悪く、思うように作業が進まない可能性があります。メインビジュアルや装飾素材などは、事前に集めておくとよいでしょう。必要な素材を準備し、制作段階では配置するだけにしておくほうが、より効率的です。
手順6.白黒でレイアウトを作成する
必要な素材がそろったら、実際にレイアウトを白黒で作成します。白黒でレイアウトすることで視認性を確認でき、文字サイズやテキストの配置、見にくいところはないかなど、改善するポイントをみつけやすくなります。
その際、ターゲットが好むようなフォントを選び、読みやすく伝わりやすい字間や行間などに整えておくことも大切です。
手順7.カラーを決める
白黒のバナーで視認性を確認し、問題がなければカラーを選択します。カラーを選ぶ際は、ブランドカラーや広告の目的に合わせて配色を決定するのが一般的です。
カラーによって大きく印象が変わるため、表現したいイメージを想定して選ぶことが必要です。たとえば、色の与える心理的イメージとして、温かみや明るいイメージなら暖色系、かっこよさやスマートさを出したいなら寒色系が効果的とされています。
また、使用する色は3〜4色ほどに抑えると、まとまりやすくなります。カラーを選び、バナーを作成できたら、全体的なバランスを見ながら最終調整を行いましょう。
手順8.実際のサイズで最終チェックする
最終調整ができたら、最後に実際のサイズでチェックすることも大切です。
画像の作成中は拡大、縮小しながら作業を進めることが多いため、実際のサイズでチェックすると修正点が見つかる場合もあります。修正点があれば再度調整し、より効果的なデザインを目指しましょう。
目立つバナーを作るコツ
ここで、ターゲットに刺さる目立つバナーを作るための主なコツを5つ紹介します。
- 興味を引くキャッチコピーを考える
- 情報を必要最小限に絞る
- 人物写真が目立つように大きく配置する
- 文字にメリハリをつけてレイアウトする
- 数字を大きく配置する
興味を引くキャッチコピーを考える
ターゲットにインパクトや共感を与えられるような、簡潔で伝わりやすい言葉をキャッチコピーとしてデザインに取り入れると効果的です。
キャッチコピーを考える際は、以下の点などを意識するとよいでしょう。
- 端的にまとめる
- ベネフィットを入れる
バナーのスペースは限られているため、ひと目で内容を理解できることが大切です。商品やサービスで得られる効果を伝えることで、潜在的な願望の実現や悩み解決などの恩恵が受けられると、ターゲットにイメージさせられます。
情報を必要最小限に絞る
ひと目で情報が伝わりやすいように、できるだけ情報量を絞ったシンプルなデザインを心がけましょう。
目立たせようと情報を詰め込みすぎると、逆に内容が伝わりにくくスルーされやすいため注意が必要です。
文字や装飾が本当に必要なのかを見極め、伝えたいポイントを整理して、ユーザーが魅力的に感じるような刺さるバナーを目指します。
人物写真が目立つように大きく配置する
人物写真を使用する際は、大きめに配置するほうが、より目を引きやすくなります。
基本的に小さいスペースに配置するため、人物の全身を入れようとすると写真素材が小さく、目立ちにくくなりがちです。また文字と人物写真をきっちり分けてレイアウトすることも、インパクトが薄いバナーになりやすいため避けたほうがよいでしょう。
切り抜いた写真と、目を引く背景を組み合わせるのも効果的です。またデザインにもよりますが、人物がこちらを見ているカメラ目線の写真のほうが、目線をそらした人物写真より目立ちやすい傾向にあります。
文字にメリハリをつけてレイアウトする
ターゲットに伝えたい情報を目立たせるために、文字にメリハリをつけてレイアウトすることも効果的な方法です。
あらかじめ優先順位をつけて重要なポイントや伝えたいことがパッと目に入るよう、他の情報より文字を大きくレイアウトします。
例えば、先頭の言葉やキーワードのみを大きくしたり、色を変えたりするといった工夫をすれば、目を引きやすいバナーを作成できます。
強調したい言葉に点や線を用いたり、一文字ずつ丸や四角で囲むなどの方法も視認性を上げられるテクニックです。
数字を大きく配置する
数字だけを大きく配置することで、金額などの情報が見やすくなります。セールやキャンペーンなど、価格や期間を大きく伝えたい場合は、他の文字と差をつけることが必要です。
例えば、「50％OFF」などの割引率や、ユーザーにとってメリットとなる情報を大きく目立たせるとユーザーの興味を引きやすいでしょう。
成果を出すバナー作成のポイント
次に、成果を出すためのバナーを作るポイントを以下の観点から解説します。
- トンマナ（トーン＆マナー）を統一する
- 文字の可読性を高める
- 余白のバランスに気をつける
- 目線の流れを考慮したレイアウトにする
- メインビジュアルの画像にこだわる
1.トンマナ（トーン＆マナー）を統一する
バナーのデザインとリンク先のWebページのデザインは、トンマナ（トーン＆マナー）を統一することが必要です。トンマナとは、デザインイメージの統一性・一貫性を保つためのルールのことです。
バナーデザインとリンク先ページのデザインイメージが違いすぎると、バナーをクリックしたユーザーが違和感を覚え、すぐに離脱してしまうリスクがあります。
具体的には、以下のような要素をチェックしてトンマナをそろえます。
- 企業をイメージさせるカラー
- ターゲットに合わせたフォント
- 世界観が伝わる画像
これらのデザインやスタイルに一貫性をもたせることで、統一感が出やすくなるでしょう。
2.文字の可読性を高める
バナーは一瞬でユーザーに情報を伝える必要があるため、文字の可読性を高めることが大切です。
写真と文字のコントラストが曖昧だとユーザーが読みにくいと感じてしまい、ページ離脱につながる可能性があります。
可読性を高めるためのコツとして、主に以下が挙げられます。
- 写真の余白に文字をのせる
- 文字のうしろに背景色をつける
- 文字に縁取りする
- 写真と文字の明るさに差をつける
デザインを工夫し、可読性をアップできれば視覚的に訴えられるため、ユーザーに一目で必要な情報を伝えられます。
3.余白のバランスに気をつける
刺さるバナーデザインにするためには、意図的に適度な余白を作ることも必要です。余白を作ることで、情報を強調したり視認性を高めたりする効果が期待できます。
デザイン初心者の場合、余白があると情報を詰め込みがちですが、スペースが限られたバナーですべての情報を伝える必要はありません。詳細な情報はリンク先のページで読んでもらい、バナーは最低限伝えたいポイントに絞ると効果的です。
余白は高級感やシンプルなイメージを与えたいときにも役立ちます。余白をうまく取り入れることで、ユーザーの興味を引くバナー広告に仕上がるでしょう。
4.目線の流れを考慮したレイアウトにする
読みやすいバナーを作るために、ユーザーの目線の流れに沿ったレイアウトにするのも効果的です。基本的にユーザーの目線の流れは左上から右下へ向かい、Z型に移動するといわれています。
Z型のパターンでは、最初に注目する左上に優先順位の高い重要な情報を配置し、右上→左下→右下と重要度を下げていきます。そのうえで最後に目線が止まる右下には、ユーザーのアクションを促すCTAなどを配置しましょう。
目線の動きに沿ったデザインはユーザーに内容が伝わりやすく、クリック率のアップが見込めます。
5.メインビジュアルの画像にこだわる
メインビジュアルはバナー全体のイメージを決める要素であり、とくにユーザーの印象に残りやすいため、適切な画像選びが重要なポイントです。サイズや画質のよさはもちろん、使用するライセンスがクリアになっているかどうかも、しっかり確認しておく必要があります。
商品やサービスとイメージがマッチしているか、広告効果が期待できるかどうかを見極めて選ぶことが大切です。
引きの強いビジュアルインパクトでクリック率アップを狙いたいなら、タレントを起用するのも一つの手です。通常ならコストがかかりがちですが、定額料金でタレントを起用できるタレントサブスクを利用することで、コストを抑えられます。
▼お役立ち資料のご紹介「1ヶ月~利用可能、新発想のタレント起用」
バナーを作成できるツール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を使い慣れている方には、選択肢の一つになるでしょう。
作り方のコツを習得して効果的なバナーで顧客獲得につなげよう
作り方のコツをふまえたうえで取り組めば、初心者でもバナーを作成できます。成果を出すためには、わかりやすいレイアウトや引きの強いメインビジュアルを選ぶことが大切です。
また、目立たせるために派手な配色を選ぶのではなく、瞬間的に内容を理解しやすいシンプルなデザインかつターゲットの興味を引く画像を選ぶことが大切です。
ユーザーの興味を引くメインビジュアルを選びたいなら、タレント素材の活用が効果的です。
IPプラットフォームのSkettt（スケット）なら、5,000名以上のタレントの中からご希望に合わせたタレント活用の提案、クリエイティブの制作まで一気通貫で任せることができます。
さらに最短で契約期間1か月から利用可能というメリットもありますので、ぜひお気軽にお問合せください。
この記事を書いた人
このライターの記事一覧を見る
Skettt Column編集部
IPを活用したマーケティング戦略を中心に、企業・ブランドの時代に合ったプロモーション手法について、情報を発信しています。
この記事は参考になりましたか？
この記事は参考になりましたか？
この記事をシェアする
