キャンペーンバナー作成の参考に！プレゼント企画にもピッタリのテンプレート56選
プロがデザインしたキャンペーンバナー用のテンプレートと、デザインのコツを紹介します。
キャンペーンを多くの人に知ってもらい、参加してもらうためには、キャンペーンの内容や魅力を効果的に伝えるバナーが重要です。 しかし、バナーはチラシやランディングページと比べてスペースが小さいことがほとんど。
そのため、必要な情報を過不足なく入れ、人の行動を促せるようなデザインをするにはコツが要ります。
そこでこの記事では、効果的なバナーデザインの参考として、デザインのプロが作成したキャンペーンバナー用のテンプレートを紹介します。 さらに、「Adobe Express」を使って、テンプレートからカンタンにキャンペーンバナーを作る方法も解説します。
Adobe Expressは、デザイン初心者の方でもカンタンに操作ができる無料のデザインツールです。 IllustratorやPhotoshopといった、プロ御用達のツールを提供しているアドビが開発しているので、直感的に使えてデザインがしやすいだけでなく、豊富な素材を使えるのが特長です。
Adobe Expressを活用して、効果的なキャンペーンバナーを制作しましょう。
キャンペーンバナー作成に活かせる！プロが作ったテンプレート56選
まずは、キャンペーン用のバナーをデザインする際に、参考になるテンプレートを紹介します。
無料のAdobe Expressを使えば、どのテンプレートも直接編集して、オリジナルのバナーにアレンジできます。 気になるテンプレートがあれば、ぜひクリックして使ってみてください。
ここでは、大きく以下の3つの切り口でテンプレートを紹介します。 作りたいバナーのイメージに合うものを探してみましょう。
- 季節で選ぶ
- キャンペーン内容で選ぶ
- 業種で選ぶ
1．季節で選ぶ
季節感のあるバナーにすることで、期間限定の特別感を演出して、キャンペーンへの興味関心を高められます。 また、「毎年冬にはキャンペーンを実施する」「四半期に一度、キャンペーンを実施する」といったように、キャンペーン自体をシリーズ化しやすくなるというメリットもあります。
春
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
夏
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
秋
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
冬
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
2．キャンペーン内容で選ぶ
キャンペーンの内容にマッチするバナーのデザインで、キャンペーンの魅力や参加のメリットをわかりやすく伝えましょう。 プレゼントや特典の内容をしっかり目立たせることで、バナーをクリックしてもらいやすくなります。
プレゼントキャンペーン
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
セール・割引キャンペーン
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
ポイント還元・ポイントアップキャンペーン
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
3．業種で選ぶ
それぞれの業種で使いやすいテンプレートを選べば、魅力的なキャンペーンバナーをカンタンに作成できます。 テンプレートのデザインや画像をカスタマイズしたり、自前の画像を追加したりして、オリジナリティーあふれるバナーデザインに仕上げましょう。
化粧品・コスメ
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
食品
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
旅行
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
ファッション・アパレル
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
不動産・住宅
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
塾
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
ゲーム
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Animated
(true, false, all) true or false will limit to animated only or static only.
Premium
(true, false, all) true or false will limit to premium only or free only.
Adobe Expressを使ったキャンペーンバナーの作り方
ここからは、Adobe Expressのテンプレートを使って、キャンペーン用バナーを作る手順を解説します。
無料のデザインツール「Adobe Express」を使えば、バナー制作の経験がない方でもキャンペーン用バナーをカンタンに作成できます。 ここではPCでの手順をご紹介しますが、Adobe Expressのアプリを使ってスマホで作ることも可能です。
【iPhone・iOS用】アプリをダウンロードする
【Android用】アプリをダウンロードする
【手順1】Adobe Expressにログインし、テンプレートを選ぶ
おもちのGoogleアカウントやSNSアカウント、メールアドレスを使ってAdobe Expressに無料ログインしてください。 登録は30秒ほどで完了します。
ログイン後、トップページ上部の検索ボックスで「キャンペーン」や「バナー」と検索すると、キャンペーンに活用しやすいテンプレートが一覧で表示されます。
画面左側の「フィルター」を使って、イメージに近いテイストのテンプレートに絞り込むこともできます。 イメージに合うテンプレートが見つかったら、クリックして編集画面に移動しましょう。
【手順2】キャンペーン名や日付などを変更する
まずは、キャンペーンに関するテキスト情報を編集してみましょう。
キャンペーン名や実施期間などのテキストを編集したい場合は、タイトルのテキストボックスを選択したまま、直接文字を打ち変えれば変更できます。テキストの位置を変更したい場合は、テキストボックスを動かして調整しましょう。
テキストを選択した状態で、ツールバーから使いやすいフォントを選べます。 オススメのフォントも表示されるため、参考にしてみましょう。
文字色もカンタンに変更できます。 テキストを選択したのち「塗り」をクリックし、カラーパレットやカスタムから色を選んだり、スポイトツールで画面上の色を選択したりして変更しましょう。
今回は、各テキストの内容やフォントのほか、一部の文字色と位置を変更してみました。
【手順3】画像を挿入する
自社商品の画像や、自分で用意したイラスト素材などを使いたい場合は、「メディア」を選択し画面左上の「デバイスからアップロード」をクリックすると、PC内に保存した画像をアップロードして使用できます。 Adobe Express内の画像素材を利用したい場合は、検索窓に探したい素材のキーワードを入力してみましょう。
使いたい画像をクリックすると、自動で画像が挿入されます。
アップロードした画像の背景を削除して、切り抜き画像にするのもカンタンです。 画像を選択して、ツールバーで「背景を削除」をクリックするだけで、あっという間に切り抜き画像ができあがります。
今回は、左右に人物画像2点と、キャンペーン期間に矢印のアイコンを加えました。
【手順4】背景を変更する
次に、背景画像を変更してみましょう。 背景画像の変更方法はいくつかありますが、今回は「置換」で変更します。 テンプレートの背景画像をクリックしたのち、画面左上の「置換」アイコンをクリックします。
画面左上の「デバイスからアップロード」をクリックすると、PC内に保存した画像をアップロードして使用できます。AdobeStock内の素材を背景画像として使いたい場合は、画面左側に表示される画像から好きなものを選んでクリックしましょう。
検索窓で、目的に合った画像も探せます。
今回は、検索窓へ「夏」と入力し、イメージに合う画像を選びました。画面左下の「置換」をクリックすると、自動で背景が変更されます。
ほかにも、左側の「デザイン素材」や「メディア」からイメージにあった素材を挿入し、選択したのち、ツールバーで「ページ背景を置き換え」をクリックすると、自動で背景が変更されます。 背景画像でバナーの印象がガラリと変わるため、いろいろな素材を試してみるのもよいでしょう。
【手順5】図形の色を変更する
バナー内にある図形の色を変更するには、図形を選択して、画面左側の「塗り」をクリックしましょう。 「おすすめ」「ページテーマ」「別のカラーを追加」から色を選べるほか、スポイトツールで画面上の色を取ることも可能です。
今回は、スポイトツールを使って、丸い図形の色を、その下の紙袋と同じ赤色に変更しました。 合わせて、キャンペーン期間の地色を白に変更しました。
【手順6】ダウンロードする
キャンペーン用バナーが完成したら、画面右上の「ダウンロード」をクリックし、ファイル形式を選んで画像をダウンロードしましょう。 ファイル形式は、PNG・JPG・PDFの3種類から選べます。
画面右上の「共有」をクリックすると、作成したデザインをリンクで共有したり、共同で編集したりもできます。
デザイン案で迷った場合もリンクを共有すれば、Adobe Express上でコメントをもらったり、一緒に編集したりしながらデザインを調整できるため、デザインデータを何度もやり取りする手間がありません。 スムーズにキャンペーンのバナーデザインを作成できるため、ぜひお試しください。
効果的なキャンペーンバナーをデザインするための6つのコツ
キャンペーン用バナーをデザインするコツを知っておくと、より自信を持ってテンプレートをアレンジできます。 「バナーを作ってみたけれど、イマイチしっくりこない」
そう感じた場合も、以下で紹介するコツに沿って見直して、デザインを調整してみましょう。もちろん、テンプレートを使わずに自分でイチからバナーを作る際にも役立ちますので、ぜひ参考にしてください。
【コツ1】キャッチコピーはシンプルにわかりやすく表現する
キャッチコピーには、そのキャンペーンを通じてユーザーが得られるものやメリットを明確に書くようにします。 また、ユーザーがひと目で内容を理解できるよう、シンプルでわかりやすいキャッチコピーを考えましょう。
書かなくても意味が通じる部分であれば、積極的に削って簡略化することで、端的で理解しやすいキャッチコピーを作りやすくなります。
例：「商品券をプレゼントします！」 → 「商品券プレゼント！ 」
【コツ2】注目してほしい部分が目立つよう、要素にメリハリを付ける
キャンペーンに限らず、バナーはサイズが限られているため、伝えたい情報の優先度を決め、注目してほしい部分をきちんと目立たせることが重要です。 特に重要なテキストがより読みやすくなるよう、以下のような工夫をするとよいでしょう。
- フォントサイズや太さを変える
- 背景とのコントラストを強くする
- テキストまわりに余白を取る
特にサイズが小さいバナーの場合、文字サイズも小さくなります。 そのようなときは、文字の背景にべた塗りの図形を置いたり、文字に枠や影を付けたりすると、小さな文字でも読みやすくなります。
また、限られたスペースの中で複数のフォントを使用すると、注目すべきポイントがわかりづらくなったり、統一感がなくチグハグな印象を与えてしまったりします。 そのため、使用するフォントは2、3種類に抑えましょう。
【コツ3】イメージに合った画像を選ぶ
画面上にたくさんのコンテンツが表示されるなかで、文字だけでイメージや情報を伝え、バナーを目立たせるのは困難です。
目的やイメージに合った画像を使うことで、伝えたい印象や必要な情報を補完でき、より記憶に残りやすいキャンペーンのバナーが作成できます。
キャンペーンで訴求したい商品やサービスをイメージさせる画像のほか、例えば、季節感を演出したい場合には、以下のようなあしらいを入れてもよいでしょう。
春・・・桜、若葉、チューリップ、たんぽぽ、小鳥、蝶、入学式
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Premium
(true, false, all) true or false will limit to premium only or free only.
夏・・・海、ひまわり、スイカ、かき氷、花火、風鈴、ボーダー
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Premium
(true, false, all) true or false will limit to premium only or free only.
秋・・・紅葉、木の実、月、ブドウ、柿、梨、カボチャ、リス、読書
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Premium
(true, false, all) true or false will limit to premium only or free only.
冬・・・雪だるま、サンタクロース、ツリー、門松、鏡餅、スキー、鍋
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Premium
(true, false, all) true or false will limit to premium only or free only.
なお、限られたスペースを有効活用するには、画像と文字を重ねるのも一つの手です。
バナーの背景全体に画像を配置する場合、情報が多すぎないシンプルな画像を選ぶと、画像上の文字が見やすくなります。
【コツ4】デザインの4原則を意識する
キャンペーン用バナーのレイアウトを考えるときは、以下の「デザインの4原則」を意識すると、情報がスッキリとまとまり、見た目が洗練されます。
作成したバナーデザインが「なんとなく間延びしている」「わかりづらい」と感じる場合、この4原則に沿って調整するだけで、グッと良くなることがあります。
1. 近接：関連する情報は近づけて、情報のまとまりをわかりやすく見せる
（例：余白を使って情報のグループが一目でわかるようになっているか）
2. 整列：要素を揃えて、統一感を持たせ読みやすくする
（例：文字や要素が中央寄せ、または左寄せなどに統一されているか）
3. 反復：要素や特徴を繰り返して、デザインに一貫性を持たせる
（例：同じ要素は同じ色やフォントで揃えて見やすくなっているか）
4. 対比：情報の優先度に合わせて強弱を付けて、視線を引きつける
（例：目立たせたい情報が大きく、目を引くデザインになっているか）
【コツ5】内容に合わせた視認性の高い配色を選ぶ
キャンペーンのバナーは、一瞬で書いてあることがパッと理解でき、クリックしてみようと思ってもらうことが重要です。 視認性や可読性の悪い配色は避け、バナーの内容が見やすく読みやすい色の組み合わせを選びましょう。
また、それぞれのカラーが持つ印象は異なります。 キャンペーンバナーの配色が、キャンペーン内容やブランドイメージと合っているかどうかを確認して使用しましょう。
特に、キャンペーンのバナーとリンク先の雰囲気や配色が異なりすぎると、ユーザーが「間違ったサイトに移動してしまった」と勘違いする可能性があります。 バナーの配色は、インパクトやわかりやすさ、ブランドイメージとのバランスを上手に取りながら、選定しましょう。
以下は、それぞれのカラーが持つ主なイメージです。
赤
情熱や強さを感じさせる色。とても目立つため、注意を促したり、購買意欲を高めたりするのにも効果的で、セール色としてよく使われます。
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Premium
(true, false, all) true or false will limit to premium only or free only.
黄
明るくポジティブなイメージの色。食べ物を美味しく見せる色でもあります。注意を引く色なので、赤と組み合わせることでよりセール感を強調します。
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Premium
(true, false, all) true or false will limit to premium only or free only.
青
冷たさや涼しさを感じさせる色。白と組み合わせることで、より爽やかさや清潔感を演出します。信頼感や安心感を与える色でもあります。
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Premium
(true, false, all) true or false will limit to premium only or free only.
緑
自然を想起させ、落ち着きやリラックス感を与える色。目にやさしく、見る人に安心・安全なイメージを感じさせます。
Collection ID
(To pull in manually curated templates if needed)
Orientation
(Horizontal/Vertical)
Width
(Full, Std, sixcols)
Limit
(number of templates to load each pagination. Min. 5)
Sort
Most Viewed
Rare & Original
Newest to Oldest
Oldest to Newest
Premium
(true, false, all) true or false will limit to premium only or free only.
【コツ6】掲載先でどのように見えるのかを想定する
バナーの掲載先に合わせて、よりクリックしてもらいやすいデザインを考えましょう。
例えば、特定のメディアサイトへキャンペーンのバナーを掲載する場合、モノトーンでスタイリッシュなサイトに、カラフルでポップなバナーが表示されると、違和感が生まれ、かえってバナーがクリックされづらくなることがあります。 サイトに訪れたユーザーが自然とクリックしたくなるような、サイトに溶け込むデザインを意識するのがオススメです。
一方、SNSにキャンペーンのバナーを掲載する場合は、膨大な投稿や広告コンテンツの中で興味を持ってもらえるよう、目を引くデザインを意識することも重要です。 各SNSのユーザー特性を理解し、関心を寄せてもらえるようなデザインを選びましょう。
また、SNS広告の場合は、縦長、横長、正方形など種類によって見え方が異なります。サイズやアスペクト比（縦横比）をよく確認し、掲載先での見え方をシミュレーションしておくとよいでしょう。
Adobe Expressでバナーを制作し、キャンペーンを成功させましょう
キャンペーン用バナーは、いわばキャンペーンの「のぼり旗」です。 様々なWebコンテンツの中でしっかり目に留まり、思わずクリックしたくなる魅力的なバナーがあれば、多くの人にキャンペーンを知ってもらい、参加者を増やせます。
Adobe Expressなら、プロがデザインしたキャンペーンバナーのテンプレートや画像素材が豊富に用意されているため、カスタマイズするだけでカンタンに目を引くバナーが作れます。
無料のデザインツール「Adobe Express」を使って、効果的なキャンペーン用バナーを作成し、ぜひキャンペーンを成功させましょう。
Adobe Expressで今すぐキャンペーンバナーを作成する
（執筆：ウェブライダー）