バナー広告の作り方【初心者向け完全ガイド】企画から入稿まで徹底解説

この記事でわかること

• バナー広告制作の全体フロー 5つのステップで迷わず進められる
• 企画段階で決めるべきこと 目的、ターゲット、掲載媒体の整理
• デザイン制作の具体的なコツ レイアウト、配色、フォント選びの基本
• 入稿前のチェックリスト ミスを防ぐプロのセルフレビュー手法
• よくある失敗と対策 初心者が陥りがちなミスを回避する方法

---

はじめに - 正直に言うと、最初は私もバナーが作れなかった

「バナー広告を作ってほしいと言われたけど、何から始めればいいか分からない」

「とりあえずPhotoshopを開いてみたけど、手が止まってしまった」

これ、私が新人デザイナーだった頃の話です。

最初のバナー制作を任されたとき、見よう見まねでPhotoshopを開いて、参考サイトで見つけた「良さそうな」バナーを真似しようとしました。結果は惨敗。3時間かけて作ったバナーは上司に「何を伝えたいの？」と言われてボツに。

今なら分かります。いきなりツールを開くこと自体が間違いだったんです。

バナー制作で本当に大事なのは、Photoshopのスキルじゃない。「誰に」「何を」「どう伝えるか」を決めてから手を動かすこと。この順序さえ守れば、デザイン未経験でも成果の出るバナーは作れます。

この記事では、私が失敗から学んだバナー制作の正しい手順を、企画から入稿まで5つのステップで解説します。

---

バナー広告制作の全体像 - 5ステップ

まず、バナー制作の全体像を把握しましょう。

重要なポイント Step 1の「企画・準備」を疎かにすると、見た目は良くても成果が出ないバナーになってしまいます。全体の工数でいえば、企画に30%、デザインに40%、レビュー・入稿に30%が理想的な配分です。

各ステップの所要時間目安（初心者の場合）

---

バナー広告とは？基礎知識を押さえる

バナー広告の役割

バナー広告とは、Webサイトやアプリ上に表示される画像形式の広告です。

バナー広告が果たす3つの役割

バナー広告の種類

---

Step 1: 企画・準備フェーズ【最重要】

バナー制作で最も重要なのは、実はこの企画フェーズです。ここでの準備がバナーの成果を8割決めると言っても過言ではありません。

1-1. 目的を明確にする

まず、このバナーで何を達成したいのかを明確にしましょう。

目的の種類と適したアプローチ

目的設定のチェックリスト

• このバナーの最終ゴールは何か？（購入、資料請求、認知など）
• 成功を測る指標（KPI）は何か？
• 達成したい数値目標はあるか？

1-2. ターゲットを定義する

誰に向けたバナーなのかを明確にします。ターゲットが曖昧だと、誰にも刺さらないバナーになってしまいます。

ターゲット定義シート

ペルソナ例

「32歳女性、都内在住の会社員。平日は忙しく、スキンケアに時間をかけられない。最近、肌の乾燥が気になり始め、時短でも効果のあるスキンケア商品を探している。購入前にInstagramで口コミをチェックする習慣がある」

このレベルまでターゲットを具体化すると、「どんなコピーが刺さるか」「どんなビジュアルが響くか」が見えてきます。

1-3. 掲載媒体とサイズを確認する

バナーを掲載する媒体によって、推奨サイズや規定が異なります。制作前に必ず確認しましょう。

主要媒体のサイズ一覧

詳細はこちら バナーサイズ一覧【完全版】

1-4. 素材を集める

バナー制作に必要な素材を事前に集めておくことで、制作がスムーズに進みます。

必要な素材チェックリスト

---

Step 2: 構成・ラフ作成フェーズ

素材が揃ったら、バナーの構成を考えます。いきなりデザインツールを開くのではなく、まず紙やホワイトボードでラフを描くことをおすすめします。

2-1. 情報の優先順位を決める

バナーに入れたい情報をすべてリストアップし、優先順位をつけます。

情報優先度の決め方

重要な原則 限られたスペースにすべてを詰め込むことはできません。優先度の低い情報は思い切ってカットし、ランディングページに任せましょう。

2-2. レイアウトパターンを選ぶ

バナーの基本的なレイアウトパターンを知っておくと、構成が考えやすくなります。

代表的なレイアウトパターン

レイアウト参考例

上下分割型の典型例。商品画像を下に、テキストを上に配置することで、情報が整理されて伝わりやすくなっています。

2-3. 視線誘導を設計する

人の視線の動きを意識したレイアウトにすると、情報が自然に伝わります。

視線誘導の基本パターン

理想的な視線の流れ

キャッチコピー → 商品画像 → 補足情報 → CTAボタン

---

Step 3: デザイン制作フェーズ

構成が決まったら、いよいよデザインツールで制作します。

3-1. 使用するデザインツール

主なバナー制作ツール比較

初心者へのおすすめ FigmaまたはCanvaから始めるのがおすすめです。テンプレートを参考にしながら、デザインの感覚を身につけられます。

3-2. 配色の基本ルール

バナーの配色は、視認性と印象を大きく左右します。これは私が何度も痛感してきたことです。

60-30-10の法則

配色の実例

このバナーは60-30-10の法則が綺麗に適用されています。背景の白がメイン、商品画像とテキストがサブ、アクセントカラーでCTAが際立っています。

業種別おすすめ配色

詳細はこちら バナー配色の基本と効果的な色の組み合わせ

3-3. フォント選びのポイント

フォントはバナーの印象を決める重要な要素です。

フォント選びの3原則

避けるべきフォント選び

• ❌ 極端に細いフォント（視認性低下）
• ❌ 装飾的すぎるフォント（読みにくい）
• ❌ 3種類以上のフォント混在（統一感がなくなる）

3-4. CTAボタンのデザイン

CTA（Call To Action）は、ユーザーにクリックを促す最後の一押しです。

正直に言うと、初心者の頃はCTAボタンを「なんとなく」つけていました。でも、CTAの色を変えただけでCTRが1.5倍になった経験から、その重要性を痛感しています。

効果的なCTAボタンの4条件

CTAが目立つバナーの実例

このバナーはCTAボタンが背景と明確なコントラストを持ち、視線が自然にボタンへ誘導されます。

CTAの文言パターン

---

Step 4: レビュー・修正フェーズ

デザインが完成したら、入稿前にしっかりレビューしましょう。ここでのチェックがミスを防ぎます。

4-1. セルフチェックリスト

コンテンツ面

• 誤字脱字はないか
• 価格・日付などの数字は正確か
• 訴求ポイントは明確か
• CTAは分かりやすいか

デザイン面

• テキストは読みやすいか（サイズ、コントラスト）
• 色のコントラストは十分か
• 重要な要素が目立っているか
• ブランドガイドラインに沿っているか
• 余白は適切か

技術面

• サイズは規定通りか
• ファイル形式は正しいか（JPG、PNG、GIF）
• ファイルサイズは規定内か（多くの媒体で150KB以下）
• 必須要素（ロゴなど）は含まれているか

4-2. 3秒ルールでテストする

バナーを3秒だけ見て、以下の質問に答えられるかテストします。

• 何の広告か分かったか？
• 誰向けの広告か分かったか？
• どうすればいいか（CTA）分かったか？

3秒で理解できなければ、情報を整理するか、優先順位を見直す必要があります。

4-3. 第三者レビュー

可能であれば、ターゲットに近い人に見てもらいましょう。

レビューで確認すべきこと

• クリックしたくなるか？
• 何の広告か一目で分かるか？
• 分かりにくい部分はあるか？
• ブランドのイメージと合っているか？

---

Step 5: 入稿・運用フェーズ

5-1. 入稿データの準備

媒体ごとの入稿規定を確認し、データを準備します。

一般的な入稿規定

入稿前の最終チェック

• すべてのサイズが揃っているか
• ファイル名は分かりやすいか
• 圧縮しても画質は問題ないか

5-2. A/Bテストの準備

1種類だけでなく、複数パターンのバナーを用意してA/Bテストを行うことをおすすめします。

テストすべき要素の優先順位

詳細はこちら バナー広告A/Bテスト完全ガイド

---

よくある失敗と対策

ここからは、私自身が経験した（そして今でも時々やってしまう）失敗パターンを紹介します。反面教師にしてください。

失敗1: 情報を詰め込みすぎ

症状 あれもこれも伝えたくて、文字だらけのバナーになってしまう

これ、私が最初に作ったバナーそのものです。「せっかくの広告枠だから、商品の良さを全部伝えなきゃ」と思って、特徴を5つも6つも詰め込んだ結果、誰にも読まれないバナーが完成しました。

原因 「せっかくだから全部伝えたい」という心理

対策

• ✅ 伝えたいことを1つに絞る
• ✅ 詳細はランディングページに任せる
• ✅ 優先度の低い情報は思い切って削除

目安 バナー内のテキストは20〜30文字以内が理想

シンプルで効果的なバナーの参考例を見る

失敗2: 目的とデザインのミスマッチ

症状 おしゃれなデザインなのにクリックされない

原因 「見た目の良さ」を優先し、目的を忘れている

対策

• ✅ 「見た目の良さ」より**「成果」を優先**
• ✅ ターゲットが求めているものを表現する
• ✅ 過去の成果が出たバナーを参考にする

失敗3: CTAが目立たない

症状 どこをクリックすればいいか分からない

原因 CTAボタンが背景に埋もれている、サイズが小さい

対策

• ✅ CTAボタンを補色や高コントラストの色にする
• ✅ ボタンの周りに余白を十分に取る
• ✅ 「詳しく見る」など行動を促す文言を使う

失敗4: ターゲットを意識していない

症状 誰に向けた広告か分からない

原因 Step 1のターゲット定義を省略している

対策

• ✅ 制作前に必ずターゲットを言語化する
• ✅ ターゲットに近い人に事前レビューしてもらう
• ✅ ターゲットが使う言葉遣い・ビジュアルを選ぶ

失敗5: 媒体規定を確認していない

症状 入稿時にサイズやファイルサイズでリジェクトされる

原因 制作後に規定を確認している

対策

• ✅ 制作前に必ず媒体規定を確認
• ✅ テンプレートを用意してサイズミスを防ぐ
• ✅ ファイルサイズは余裕を持って調整

---

効率化のためのTips

テンプレートを作っておく

よく使うサイズ・レイアウトのテンプレートをFigmaやPhotoshopで作成しておくと、次回以降の制作がスムーズになります。

テンプレートに含めるべき要素

• 各サイズのアートボード
• ガイドライン（余白、セーフゾーン）
• よく使うロゴのデータ
• ブランドカラーのスウォッチ

チェックリストを習慣化する

毎回同じチェックリストを使うことで、ミスを防ぎ、品質を安定させられます。

参考事例をストックしておく

良いと思ったバナーは、随時ストックしておきましょう。バナー図鑑のお気に入り機能や、Pinterestなどを活用すると便利です。

---

バナー制作に役立つ無料リソース

初心者がバナー制作を始める際に役立つ無料リソースをまとめました。

無料デザインツール

無料フォント

バナーにおすすめの無料日本語フォント

• Noto Sans JP - 可読性が高く万能
• M PLUS 1p - モダンでスタイリッシュ
• Zen Kaku Gothic - 柔らかい印象
• Klee One - 手書き風で親しみやすい

無料素材サイト

配色ツール

---

まとめ - バナー制作5ステップの振り返り

バナー広告の作り方を5つのステップで解説しました。

初めは時間がかかるかもしれませんが、このフローを繰り返すことで、効率よく成果の出るバナーが作れるようになります。

---

よくある質問（FAQ）

Qバナー制作の費用相場はどのくらい？

A バナー制作の費用は、依頼先や仕様によって大きく異なります。

自作の場合は、デザインツール代（無料〜月額2,000円程度）のみで済みます。

Qバナー制作は外注すべき？自作すべき？

A 以下の判断基準を参考にしてください。

自作がおすすめのケース

• 予算が限られている
• A/Bテストで頻繁にバナーを差し替えたい
• シンプルなバナーで十分
• 社内にデザインの基礎知識がある人がいる

外注がおすすめのケース

• 高品質なビジュアルが必要（ブランディング目的）
• 制作に割ける時間がない
• デザインスキルがまったくない
• 大量のバナーが必要

Qデザイン未経験でもバナーは作れる？

A はい、作れます。 ただし、以下のアプローチをおすすめします。

1. テンプレートから始める - CanvaやFigmaのテンプレートをベースにカスタマイズ
2. ルールを守る - 配色は3色以内、フォントは2種類以内など基本ルールを徹底
3. 参考事例を真似る - 良いバナーの構成をトレースして学ぶ
4. シンプルに作る - 凝ったデザインより、シンプルで伝わるデザインを目指す

最初は時間がかかりますが、5〜10枚作るうちにコツが掴めてきます。

Qスマホだけでバナーは作れる？

A 簡易的なバナーなら作成可能です。

スマホ対応のデザインツール

• Canva（アプリ） - 最もおすすめ、機能充実
• Adobe Express（アプリ） - テンプレート豊富
• Phonto - テキスト追加に特化

ただし、細かい調整や複雑なデザインにはPC版ツールの方が効率的です。急ぎの簡易バナーや、SNS用の画像作成にはスマホでも十分対応できます。

Q著作権で気をつけることは？

A バナー制作で特に注意すべき著作権のポイントは以下の通りです。

安全な素材の選び方

• 有料ストックフォト（Shutterstock、Adobe Stockなど）を利用
• 無料素材は必ずライセンスを確認
• 不安な場合は素材サイトの利用規約を再確認

---