バナー広告の改善に！CTRを上げるクリエイティブ事例20選
バナー広告のデザインは、クリック率を上げる上で非常に重要です。20個のバナーのクリエイティブを事例として紹介しているので、デザインの参考になるはずです。ECサイトのセール情報、アプリのインストールなど様々な広告に役立つでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Canva Design Schoolのブログ記事を了解を得て日本語翻訳し掲載した記事になります。
なお本記事は、デザイナーであるMaria Jose氏によって投稿されました。
この記事は、効果的なバナー広告をデザインしてクリック率を上げる方法について書いています。
インターネット広告の1つとして登場したバナーは、現在、テキスト広告と同じくらい嫌われてブロックされている存在です。しかしバナーは、オンライン広告の今後の展望において、重要な役割を担っています。
効果的なバナーをデザインするには、視覚的なインパクトを持たせることが鍵となります。大切なのは、いかに視線を早く集められるかです。
この記事では、バナー作成に役立つ20のデザイン例をご紹介します。
01. ロゴにスポットライトを当てる
ロゴやマークを美しくデザインして、バナー広告の中央の前面に配置しましょう。この例では、Omiseというロゴを効果的に目立たせています。
02. フラットデザイン
フラットなイラストレーションには、どのようなバナーも活気づかせる効果があります。
上のAlex Collins氏による例では、テクスチャ素材も使われていますが、もしテクスチャ素材があなたの好みでなければ、完全なフラットデザインにするのもいいでしょう。
なお、Canvaのライブラリには、豊富なイラストレーションのオプションが備わっています。
テンプレートにオプションを追加したり、1つの機能でデザインしたフラットデザインをカスタマイズすることも可能です。
03. ブラー（ぼかし）を使う
ブラー（ぼかし）の効果は、インターフェースのデザインに使われることが多いですが、バナーにも活用できます。
上の例のように、ブラーには、見出しやロゴを引き立てる効果があります。また、奥行き感を与える効果もあります。
04. グリッドを使う
グリッドデザインによって、デザインプロセスを効率化できます。
グリッドの設定には数分しかかかりませんが、全体のデザインプロセスにおいて多くの時間を節約できるのです。
また、グリッドデザインのレイアウトは複雑である必要はありません。良い画像を、シンプルに一列に並べるだけで十分なことも多いのです。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
05. 単色のカラーパレットを試す
単色のカラースキームは退屈だと思っていませんか？
次の例は、アースデイ（地球の日）にちなんで、茶色の色相でデザインされたバナーです。躍動感のある、楽しそうなデザインになっていて、決して退屈ではありません。
1つの色相だけを使ったカラーバリエーションにしたくなければ、複数の色相のカラーバリエーションを作成して、それらを組み合わせるのもいいでしょう。
06. 文字を積み重ねる
文字を活かしたレイアウトは、ユーザーの視線を誘導するのに役立ちます。CTA（Call To Action 、コールトゥアクション）を目立たせるには、その上に文字を積み重ねたデザインにしてみてください。
ユーザーの視線は文字を辿って、CTAに行き着くはずです。
文字を積み重ねたデザインは、文字セットやスタイルを統一すると、かえって退屈なデザインになってしまいます。
異なる文字セットやスタイルを組み合わせて、変化をつけた方が効果的です。
07. 大胆な、コントラストの強い色を試す
コントラストの強い色の組合わせにするには、色相環において補色となる色同士を選ぶのが1つの方法です。
また、赤と紫など、通常はありそうもないような色同士を組み合わせるのも効果的です。補色となる色同士ではありませんが、コントラストを生むことができます。
08. カラーオーバーレイを使う
カラーオーバーレイは、画像を効果的にスタイライズする方法の1つです。
カラーオーバーレイには、1つのシェード、または2つ以上の色を使うと良いでしょう。同一色のデザインにする必要はありません。次の例では、グラデーションオーバーレイが使われています。
また白い色のキャッチコピーの文字は、カラーオーバーレイの上に配置すると、ひときわ目立つ傾向があります。
カラーオーバーレイに複数の色を使う場合には、キャッチコピーの文字が十分目立っているか確認しましょう。
09. 手書き風の文字を使う
手書き風の文字は、表現力豊かで魅力的です。
また異なるツールを使い分ければ、異なる風合いを表現できます。ツールを賢く選択しましょう。
10. パタンを使う
クリスマスなどの特別な休日や季節のデザインに、遊び心のあるパタンを取り入れてみましょう。
普段使っているデザインの一部（画像など）をパタンと入れ替えてレイアウトを作成すれば、テンプレートとして使うこともできます。
基本的な図形を使って、遊び心のあるパタンを作ることもできます。次の例は、基本的な立体図形を組み合わせたものですが、アウトラインは自然な仕上がりです。
11. 文字が主役のデザインにする
バナー広告に画像を使わない場合には、文字のみを使って人目を引くような構図にしましょう。どのコンテンツを一番上に配置するかを決定して、それが最初にユーザーの目に付くようなスタイルにしましょう。
J. Crewのバナーは、セールの広告として上手くデザインされています。
12. 言葉で説明するよりも、見せる（Show, don’t tell）
製品を言葉で説明するには、数多くの方法があります。
しかし顧客は製品を見なければ、購入しようとは思わないでしょう。製品の美しい画像を主役にしたバナーをデザインして、製品の質の高さをアピールしましょう。
もっとも、キャッチコピーの文字を全て消去するべきというわけではありません。次の例では、キャッチコピーの文字も取り入れながら、美味しそうなケーキをバナー広告の主役の要素にしています。
13. テンプレートで時間を節約する
同じような種類のバナーを何度も作成する場合もあるでしょう。
例えばセールのバナー広告を作成することが多い場合、その都度新しいデザインを考えるとしたら大変です。あなたがよく作成するバナーの種類を特定して、そのテンプレートを作成しましょう。
Madewellのバナーは、枠線で囲まれた素材を使った、遊び心のあるデザインです。
枠線で囲まれた素材はテンプレートの作成において幅広く役立ちます。既存のデザインの一部を変えるだけで、雰囲気をがらりと変えることができます。
下の例は、クリスマス柄の背景の上に、枠線で囲まれた素材を重ねて、素早く作成したバナーです。
14. CTAを目立たせる
CTAに明るい色を使うだけでは十分ではありません。
ユーザーのアクションを促すような要素を作成しましょう。リンクがあるとユーザーに気づかせるには、CTAをボタン要素として作成するか、アンダーラインを加えましょう。また、CTAに適したラベルを加えて、シンプルな言葉を使いましょう。1語か2語だけでも十分です。
バナーの作成においては、配置やビジュアルヒエラルキーを考えることも重要です。
ユーザーをCTAに誘導するには、CTAがレイアウトの背景に埋もれてしまわないように注意しましょう。また、他のデザイン要素も上手く活用しましょう。
あなたがビジュアルヒエラルキーについてまだ学習中であれば、既製のテンプレートを使うのも1つの手です。
15. 人目を引く色を使う
ユーザーの注目を集める効果の高い色を選ぶには、バナーのコンテキストを考える必要があります。
例えば、Facebookのバナーを作成する場合、企業カラーの青色の色相を使うとしたら、それがどんなに明るい色であるとしても目立たないのです。このコンテキストにおいては、明るいオレンジ色を使う方が効果的です。
また、ただ明るい色相を取り入れるだけでは十分ではありません。人目を引く色を、バナーの中の小さな一部分にしか使わないのは良くありません。
上の例のように、より広範囲に明るい色相を使ってみてください。
16. 良質なフォトグラフィーを選ぶ
最高のクオリティを有する画像を選ぶべきです。
また、クオリティが高いだけではなくて、どのようなサイズにしても読みやすくて見やすい画像を選びましょう。
バナーのキャッチコピーと相性が良く、バナーのメッセージを効果的に伝えられるような画像を選ぶべきです。
もし複数のオプションで悩んだ場合には、その中のどのバナーが一番良いかを決めるために、いくつかのバリエーションを試作してみましょう。
17. グラデーションを使う
近年、グラデーションは人気が非常に高いようです。
印刷物にも、デジタルメディアにも、ユーザーインターフェースにも、よく使われています。モノトーンカラーのグラデーションもあれば、複数の色相を組み合わせたグラデーションもあります。
グラデーションを使うと、魅力的な背景を作成することができます。画像の上に重ねて、グラデーションフィルターとして使う方法もあります。
グラデーションを作るには、1色を使って色の強度を変える方法や、2色の遷移で表現する方法があります。
18. テクスチャ素材を使う
テクスチャ素材は背景によく使われています。
しかし他にもさまざまな使い方があります。文字要素を塗りつぶしたり、デザイン要素として使ったり、画像のフィルターとして使うことさえ可能です。
テクスチャ素材の背景の中に、コンテンツが埋もれてしまわないように注意しましょう。
背景が乱雑でごちゃごちゃしていると、テキストは読みにくくなります。次の例では、コンテンツを読みやすくするために、テキストに目立つ色を使っています。
19. シェイプ（図形）を使う
シェイプは、非常に重要なデザインの要素です。テクスチャ素材やイラストレーションを作成するために使ったり、そのまま装飾として使うことも可能です。
上の例では、シェイプをさまざまな目的で使っています。
ピンク色のシェイプは、関心を引くために利用しています。その他のシェイプは、キャッチコピーの文字を構造的にデザインするために使っています。
20. 見出しを太い文字にする
細い文字で埋め尽くされたバナーは、読みづらいものです。
見出しは短くシンプルに、サイズを大きくすることで、可読性が高まります。このことを念頭において、キャッチコピーの文字をデザインしましょう。
例えばセールのバナーを作成するときには、（1）セールが開催中であることをユーザーが知ることができて、（2）割引率がユーザーの目に魅力的に映るようなデザインにしましょう。
これら（1）（2）の情報については、大きく太い文字を使い、ユーザーがWebサイト内で迷子にならないようにしましょう。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。バナー作成、サイト全体のデザインなどデザイナーとして活躍したい方はぜひご覧ください！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
