デザイナーじゃなくても大丈夫！キャンペーンバナー制作のコツ
キャンペーンバナーとは、キャンペーンの告知の際に使われる画像のことを指します。デジタル媒体がメインとなった現代において、サイト内やSNSなどに表示される画像はキャンペーンの成功に欠かせない重要なデザインの1つです。バナー画像はテキストや文字リンクと違って視覚的な印象を残しやすく、最近では誰でもカンタンにクリエイティブな画像が作れる無料ツールの登場や生成AIの一般化に伴って、工夫を凝らしたデザインの様々なバナー画像が存在しています。
この記事では、そんなキャンペーンバナーを制作することになった（デザイナーではなく）キャンペーン担当者の方向けに、作成前に押さえておくべきポイントを踏まえ、簡単に効果的なキャンペーンバナーをデザインするコツをご紹介していきます。
キャンペーンバナーの基本的な作り方
キャンペーンバナーのターゲット設定
デザインを作る前に、まずはキャンペーンのバナーを誰に見てもらうのか？ということを決めないと制作は始まりません。基本的に、ターゲットとなる人が親近感を覚える、自分事化してとらえてもらえることがキャンペーンバナー制作の重要なポイントです。ターゲットの設定はそこまで細かく作りこむ必要はありませんが「性別・年代・職業・ライフステージ・悩み・接触媒体」あたりは決めておきましょう。
| 性別 | 男性、女性 |
| 年代 | 10代、20代、30代、40代、50代、60代以上 |
| 職業 | 学生、フリーター、会社員、主婦、引退後 etc |
| ライフステージ | 学生で実家暮らし、大学生で一人暮らし、結婚して二人暮らし、子育て中、子供が自立済み etc |
| キャンペーン主催社との関係 | 企業名・ブランドを知らない、企業名・ブランドを知っているが使用したことはない etc |
| 接触媒体 | 自社サイト、X（旧：Twitter）、Instagram、 |
たとえば、女子高生に向けたキャンペーンバナーのメインビジュアルにはスーツを着た男性ではなく”THE青春”のような学生の画像をデザインに使うべきですし、高齢者の方向けのキャンペーンバナーのメインビジュアルであれば孫に近い年齢の子供を採用したデザインのほうがクリック率が上がるでしょう。
もちろんターゲットの設定は画像の選定だけに必要なわけではありません。デザイン全体のトンマナや文字のサイズなどにもターゲットに関する考慮が必要です。高齢者の方は小さい文字が読みにくかったりするので文字サイズを大きくする必要が出てきたり、職業に合わせて伝わりやすい言葉があるはずです。担当者が内製で作成するとなるとデザインの細かいところまで考えるのは難しいですが、どんなデザイン・要素・文章がターゲットに刺さるのかを考えてバナー画像を制作しましょう。
キャンペーンバナーを制作する前にしておく準備
手を動かしてキャンペーンバナーを作成する前に、いくつか揃えておかなければいけない要素があります。あらかじめ情報を揃えてから作業を開始することで手戻りが少なくなり、結果的に時間短縮にもつながるので、すべて揃えてからバナー画像のデザインを始めましょう。
『作成するバナーサイズ』
掲載する媒体によって必要な画像のサイズは異なります。サイズの種類だけ展開する必要があるので、自分で作るときには時間に余裕をもって、外部に委託する場合などは予算に組み込んでおく必要があります。参考までに本記事後半に必要なサイズ一覧を記載しているのでご確認ください。
『記載するキャッチコピー』
キャンペーンの内容を端的に説明し、バナー画像を思わずクリックしたくなるようなキャッチコピーを準備しておきましょう。あらかじめターゲットをきちんと設定しておくことで、刺さるキャッチコピーを考えやすくなります。割引なのかプレゼントなのか、どんな得があるキャンペーンなのかを端的に伝えましょう。
『使用するカラーパレット』
色は第一印象を左右する重要な要素です。キャンペーンバナーに使用する色は3~5色程度が理想ですが、キャンペーンサイトの色味と合わせることが必要です。バナー画像をクリックしたら全然違うカラーリングのサイトに遷移したとなると、消費者にとってはノイズになってしまうので統一感を持たせましょう。
『掲載する画像』
キャンペーンバナーのデザインの大部分を占めることになるのが画像です。春や夏といった季節や、旅行や住宅などの該当するカテゴリの素材を使って、ターゲットにとってこのキャンペーンが何に関係するキャンペーンなのか？が伝わる画像を選択しましょう。最近ではMidjourneyやimageFXといった生成AIで想像に近い画像が出力できるようになっているので、おススメです。
『使用するフォント』
色と同じですが、キャンペーンに関連するデザインは全て同じ系統のカラーを使用するのと併せて、フォントも統一しておきましょう。地味な要素ですが、キャンペーンバナーとキャンペーンサイトのフォントが異なると意外と気になるものです。キャンペーンデザイン全体のトンマナは併せられるところは全て合わせましょう。
キャンペーンバナーのクリック率を上げるための工夫ポイント
キャンペーンバナーの存在目的はクリックされることにあります。ここからはキャンペーンバナーのデザインを作成するにあたって、クリック率を高めるための工夫についてご紹介します。コツを知っておくことでより魅力的なデザインのキャンペーンバナーを作ることができるようになります。
工夫①：配置
まずは各要素の配置です。関連する情報や内容はブロックで固めるようにしましょう。すべての要素が均一の間隔で並んであるよりも、メリハリをもって配置されているデザインのほうが見ている人にとって情報がつかみやすくなります。
また、要素を揃えるというのも重要です。文字や画像が左に寄せられているのか、右に寄せられているのか、中央に揃っているのか、など統一感を持たせた方が綺麗に見えます。もちろん、セオリーを崩した美しいデザインも存在しますが、デザイナーに依頼せず内製で何とかするという状況ではセオリー通りの配置が一番無難です。
工夫②：キャッチコピー
キャンペーンバナーのキャッチコピーはできるだけシンプルにしましょう。そのキャンペーンを通じてユーザーが得られるものやメリットがすぐにわかるようになっていることが必要です。まずは実施しているキャンペーンの内容を文章にし、そこから不要な部分を削っていく作業をお勧めします。書かなくても通じることは全て削り、端的でターゲットが理解しやすいキャッチコピーを作りましょう。
また、キャンペーンバナーという制約があるのであまり長いキャッチコピーを書くことも難しいです。10文字以内でまとめられるように意識しましょう。他の企業が出しているSNS広告や電車内の広告などを参考にしてみるのも良いと思います。
工夫③：配色の工夫
キャンペーンバナーを見てもらえるシーンは一瞬です。SNSであればX（旧Twitter）のタイムラインをスーっと移動している瞬間にちらっと映るようなことをイメージして下さい。その瞬間にキャンペーンの内容を大まかにでも伝える必要があるのですが、そこで重要なのが配色です。
目立つ色・見えやすさというのは「誘目性」「視認性」「識別性」「可読性」の４つが影響します。
| 誘目性 | 人が自然に見てしまう、目立つ＆注意を促される度合い。例えば「赤＝危険」や「黄色＝注意」などの暖色系は誘目性が高い色です。色の持つ生理的な心理効果の働きが影響しています。 |
| 視認性 | 遠くから見た時に、見つけやすいことを「視認性が高い」と言います。視認性は周囲の色によって異なります。明度差や色相差など「対比関係」にある組み合わせの色が見つけやすく、「黄色と黒」「赤と白」のような組み合わせです。 |
| 識別性 | 区別のしやすさの度合。例えばスポーツの「敵・味方」、企業カラー等の差別化に色を使うと効果的です。色は形よりも先に認識されるので、色を上手に使うことは「伝えたいこと」を多くの人に認知してもらうための効果的となります。例えば、全く同じデザインでもイタリアの配色とフランスの配色で与える情報が全く違ってきます。 |
| 可読性 | 文字や図形の読みやすさ、内容の理解のしやすさです。明度差や色相差があるほど可読性が高いと言えますが、あまりに極端だとハレーション（目がちかちかする）が起こってしまうので、間に白やグレーなどの無彩色を入れることで緩和させることも手段の一つです。 |
上記を参考にいろいろ工夫できる配色ですが、バナーに使用する色はかならずブランドカラーやキャンペーンサイトの色味と合わせるようにしましょう。
無料で使えるバナー作成ツール
Canva
非デザイナーの無料デザインツールといえばCanvaですね。Canvaは、誰でも簡単にデザインが楽しめるオンラインツールです。デザインの経験がない方でも、使いやすいインターフェースと豊富なテンプレートを利用することで、プロフェッショナルな仕上がりのデザインを短時間で作成できます。選べるテンプレートや素材が豊富に揃っているため、最初からゼロから作る必要はありません。ドラッグ＆ドロップ操作で写真やテキストを簡単に配置でき、色やフォントの変更も直感的に行えます。有料プランもありますが、無料の範囲内でも十分使用可能です。Canvaを使えば、ちょっとしたアイデアがあっという間に形になります。デザイン初心者でも安心して始められるツールです。
Adobe Express
Adobe Expressは、誰でも簡単に美しいデザインが作成できるオンラインツールです。デザインスキルがない方でも、豊富なテンプレートと直感的な操作で、短時間でプロフェッショナルなデザインを仕上げられます。Adobe製品ならではのクオリティでキャンペーンバナーを作成することができます。素材のドラッグ＆ドロップやテキストの変更も簡単で、初心者でもすぐに使いこなせる設計になっています。さらに、無料プランでも十分な機能が揃っており、誰でも手軽に高品質なデザインを楽しめます。Adobeの豊富な素材リソースを活かし、クオリティを追求したデザインを作りたい方に最適なツールです。
参考：キャンペーンバナーの画像サイズ
キャンペーンバナーは掲載する媒体に合わせて複数サイズのデザインを制作しておく必要があります。ここでは参考までに各媒体で必要なバナー画像のサイズをご紹介します。すべてを揃える必要はありませんが、準備しておいた方が様々な媒体に出しやすくなります。
ディスプレイ広告
| 横長 | 728px × 90px |
| 横長 | 320px × 50px |
| 横長 | 300px × 250px |
| 縦長 | 300px × 600px |
| 縦長 | 160px × 600px |
X(旧：Twitter）
| スクエア（正方形） | 800px × 800px |
| スクエア（正方形） | 1200px × 1200px |
| 横長（1.91:1） | 800px × 418px |
| 横長（1.91:1） | 1200px × 628px |
| スクエア（正方形） | 1080px × 1080px |
| 縦長（4:5） | 1080px × 1350px |
| 縦長（9:16） | 1080px × 1920px |
| 横長（1.91:1） | 1200px × 628px |
| 横長（16:9） | 1920px × 1080px |
| スクエア（正方形） | 1080px × 1080px |
| 縦長（4:5） | 1080px × 1350px |
| 縦長（9:16） | 1080px × 1920px |
| 横長（1.91:1） | 1200px × 628px |
| 横長（16:9） | 1920px × 1080px |
バナー制作もおまかせ！コプロシステムのキャンペーン事務局サービス
デザイン制作支援サービス
様々なツールが開発され、デザインテンプレートも公開されている現代では誰でもカンタンにキャンペーンバナーのデザインを制作することができるようになりました。しかし、やはりプロのデザイナーが作成したデザインとは明確に差がでることも事実です。
キャンペーン事務局ではキャンペーンバナーの制作もサービスの1つとして承っております。弊社コプロシステムが提供するキャンペーン事務局では、デジタル専任のデザイナーが在籍しているのでハイクオリティで効果の高いバナーデザインを作成することが可能。キャンペーン実施の効果を最大化させることを目指しております。
また、デジタルとは違い、印刷工程が必要な店頭POPやチラシといった紙ものデザインの制作も対応可能です。一枚からでも承っておりますので、是非お気軽にご相談ください
＜画像：CTA＞
キャンペーンの企画からお任せ
もちろん、デジタル・紙ものデザインの制作業務にとどまらず、コプロシステムのキャンペーン事務局サービスでは20年以上に渡ってキャンペーンに関するあらゆる業務を承っております。キャンペーンの企画から応募受付・抽選、問合せ事務局による対応や賞品の発送まで、ワンストップで対応しております。「キャンペーンをやることになったけどどこから手を付ければいいかわからない…」「キャンペーン業務のせいで他の仕事に全然手が付けられない…」といったお悩みをお持ちの方はぜひお気軽にご相談ください。
＜画像：CTA＞
