- おしゃれで効果も高いバナーはどう作る？Canvaを使ってみよう！
おしゃれで効果も高いバナーはどう作る？Canvaを使ってみよう！
「おしゃれなバナーを作りたいけど、参考にできるサイトを教えて欲しい」 「おしゃれなバナーって、実際のところ効果も高いものなの？」
インターネット上でよく見かけるバナー広告は、ディスプレイ広告とも呼ばれ、主に画像や動画などを掲載して宣伝広告を行います。バナー広告を見た人が広告の枠内をクリックすることで、目的のウェブページへと誘導される仕組みで、クリックされた回数や、商品やサービスが購入された数（コンバージョン）で広告の効果を測ることができます。
実は、目を引くおしゃれなバナーを作れば必ずクリックしてもらえるとは限りません。確かにおしゃれ感のあるセンスの良いバナーはついクリックしてしまう人が多いのも事実ですが、それだけでは商品やサービスが売れるとは限らないのです。
そこで、この記事では、
- おしゃれなバナーを作成するために参考にしたいサイト5選
- 「おしゃれなバナー」と言われるための4つの鉄則
- おしゃれなだけではダメ？バナーの基礎知識
- Canvaを使えばおしゃれで高い効果のバナーが簡単に作れる4つの理由
この4つについてくわしくご紹介していきます。
おしゃれであり、かつ広告としての効果もしっかり出すことができるバナーを作れるようにしましょう。
1. おしゃれなバナーを作成するために参考にしたいサイト5選
まずは、既存のおしゃれなバナーのデザインを大量に取集したまとめサイトをご紹介します。国内が中心ですが、国外のバナーが検索できるサイトもご紹介します。
サイトの特徴も合わせてご紹介します。さまざまなキーワードで検索し絞ってみることで、欲しいと思っていたデザイン見本にできるバナーにたどり着けますので、検索の方法が多めに用意されているサイトがおすすめです。
1-1. 【国内】Banner Matome
Banner Matomeは、 掲載数が2万超とボリュームがあり、
- 色別
- 業種別
- 表現別
で検索することができます。
トップ画面
色別／「青・水色バナー」の検索結果
業種別／「サプリバナー」の検索結果
表現別／「立体風バナー」の検索結果
Canvaで人気のバナーデザインテンプレート トップ10
ここで、Canvaを日本でご利用いただいている方たちが最も使っているバナーテンプレートのトップ10を紹介します。おしゃれなバナーからかわいいバナーまで、人気のテンプレートから自分オリジナルのバナーを作ることができます。お気に入りのテンプレートがありましたら、クリックすればすぐにCanvaで自分だけのおしゃれなバナーがデザインできます。
1位. カーネーション背景のラグジュアリーなバナー
母の日のメッセージにも使えるカーネーション背景のラグジュアリーなバナー。背景写真とテキストを変えれば簡単にオリジナルバナーのデザインに変更できます。
2位. サーモンピンクベースのかわいいバナー
手書き風のピンク背景とかわいい花のイラストでポップな印象のバナーです。
3位. シンプルでクリーンな印象のバナー
時計とノートパソコンの写真を使ったシンプルなバナーです。
4位. 猫がテーマのキャッチーなバナー
動物の写真を使ったかわいいデザインのバナーテンプレートです。
5位. ヨットの写真で爽やかなイメージのバナー
青基調のヨットの写真と白い円を活用してとても爽やかな印象のバナーデザインです。
6位. フルーツの写真が印象的なバナーデザイン
カラフルなフルーツの写真を大胆に使ってキャッチー雰囲気のバナーテンプレートです。
7位. サーモンピンクのリーフモチーフ背景でまとめられた印象のバナー
サーモンピンクとベージュの2色で落ち着いたイメージでかわいい印象を残せるバナーです。
8位. 夜景写真を使ったクールな印象の不動産系バナー
夜景写真がかっこいいクールな印象の不動産系バナーです。
9位. アートな雰囲気のバナーテンプレート
ぼやけたカラーの背景が印象的なアートエキシビションに使えるバナーテンプレートです。
10位. オイルペインティング背景のカラフルなバナー
オイルペインティング背景を使ってカラフルに表現されたバナーテンプレートです。
1-2. 【国内】Retrobanner
Retrobannerは、サイズやカテゴリで検索できるようになっています。
右上のメニューアイコン（三本線）から、
- サイズ
- 色
- 業種
- テイスト
の4つのカテゴリから選んでください。
トップ画面
サイズ／300×250で検索した結果の一例
色／グリーンで検索した結果の一例
業種／住宅・生活で検索した結果の一例
テイスト／シンプル・クールで検索した結果の一例
1-3. 【国内】Facebook広告集めました。
Facebook広告集めました。は、Facebookに特化してバナーを収集したサイトです。Facebookを中心にバナーの出稿を考えている場合などに参考にできます。
カテゴリーでのみ、検索することができます。
トップ画面
カテゴリー／コミュニティで検索した結果の一例
1-4. 【海外】MOAT
MOATは、海外のサイトで、ブランド名で検索する仕組みです。ブランドによっては1万件近く画像のストックがあります。
検索した際に画面右上にRelated（関連するブランド等）が表示されるので、同じ業種等での検索がしやすいというメリットがあります。
トップ画面
「Apple Watch」で検索した結果
1-5. 【国内／海外】Pinterest（ピンタレスト）
Pinterest（ピンタレスト）は、ピンボード風に使える画像共有サイトです。グローバル展開しているので、国内海外問わず、さまざまな国のバナーデザインを見ることができます。
自分自身のボードを持ち、検索して気に入った画像があれば、ピックアップしてコレクションしていきます。自分の画像をアップロードすることも可能ですが、インスタグラムと違い、SNS的に他人と交流する機能はなく、デザイナーなどが自身のデザインの参考にするためのアイデアストックに活用していることが多いサイトです。
アプリ（Google PlayApp Store） もあり、スマートフォンやタブレット利用もできます。
トップ画面
「バナーデザイン おしゃれ」で検索した結果
2. 「おしゃれなバナー」と言われるための4つの鉄則
「おしゃれなバナー」と言われるための4つの鉄則をご紹介します。普段なにげなく「おしゃれ」という言葉を使ってしまいますが、バナーのような小型の広告の場合はどういったバナーが「おしゃれなバナー」なのかを明確するため、ここでは具体的に分析して解説します。
- 画像のクオリティが高い
- 配色のセンスが高い
- フォント（文字）の使い方が上手（題材に適したフォントを使用）
- 伝えたいことがはっきりと伝わるデザイン
バナー作成をする際に、クライアントから「おしゃれ感を出して欲しい」といった依頼を受けることもあるかもしれません。この章を読むことで、おしゃれなバナーとはどういうものかが明確にわかるので、バナー制作時にも自信を持って作成せすることができるようになるでしょう。
2-1. 画像のクオリティが高い/h3> おしゃれなバナーは画像のクオリティが高いことが鉄則のひとつです。画像のクオリティは、顧客の購入意欲を左右するからです。
ただセンス良く見える画像を入れればいいわけではありません。たとえば、食に関する商品や飲食店の集客バナーであれば、「おいしそう！食べてみたい！」とバナーを見た人に思わせるような「シズル感（五感を刺激する感覚）」が必要です。
最近のスマートフォンのカメラ機能は格段に高くなっていますが、SNSにアップするような感覚で撮影して、フィルターアプリで加工した程度ではクオリティが高い画像とは言えません。光の加減や色味の加減ひとつで、画像から受ける印象は変わります。
シズル感を出すことは難しく、高度なテクニックが必要なので、商品撮影のプロに撮影をお願いすることも検討しましょう。
2-2. 配色のセンスが高い
おしゃれなバナーは配色センスが高いです。配色はあらゆるデザインの基本と言っても良いほど、デザインの良し悪しを決定づける重要な要素のひとつだからです。
著名なグラフィックデザイナーであれば、配色だけで「あのデザイナーの作品だ」とわかるほど個性を出すことができる配色ですが、バナー等小型のセールスプロモーション用広告の配色は、デザイナーの個性を出すというよりも、顧客の興味・関心を引いてクリック率を高めることを重要視した配色を考える必要があります。
配色のセンスを高めるには、色彩についての基本的な知識（色相、明度、彩度等）を身につけ、1章でご紹介したような「バナーまとめサイト」を定期的に見たりして研究し、「目を肥やす」ことも心がけましょう。
2-3. フォント（文字）の使い方が上手（題材に適したフォントを使用）
おしゃれなバナーはフォント（文字）の使い方が上手です。各フォントにはそれぞれ与える印象があり、その印象と商品やサービスとのマッチングが上手なので、おしゃれに見えるのです。
デザインの初心者は、扱う商品やサービスのイメージから、明朝体かゴシック体を選ぶのが基本です。フォントの太さもイメージに大きく影響しますので、デザイン作成時にフォントの太さをいろいろ試して、一番商品イメージにマッチしたフォントを選ぶようにするのがコツです。
ここで簡単にフォントが与える印象をご紹介します。
明朝体
明朝体は横画が細く、縦画が太いという特徴があります。与える印象は「上品」「女性的」「大人っぽさ」「やわらかさ」「知的」などで、どちらかというと和風のイメージです。
細い明朝体は、特に上品さや知性的な感じを与えます。一般的な太さの明朝体は、生真面目さを感じさせます。極太の明朝体の中には、人気のアニメに使用されてから有名になったものもあります。使うのであれば、アニメを連想させるポップなイメージを商品に感じさせたい場合に効果的でしょう。
ゴシック体
ゴシック体の特徴は、太いマジックで書いたような感じで、縦画、横画とも太さに違いがないことです。与える印象は「強さ」「男性的」「はっきり・くっきり」「親しみやすさ」「楽しい」など。
パッと目に入りやすいので、遠くからでもよく見えるように大型のポスターや看板などによく使われます。どちらかというと洋風なイメージになります。
細いゴシック体であれば、おしゃれ感を出すことが十分できます。太いゴシック体は、フォントの大きさが小さくなると潰れて読みづらくなるので、サイズの小さいバナー広告などに使う場合は太さに気をつけて使いましょう。
丸ゴシック体
丸ゴシック体は、ゴシック体をベースにして、全体に丸くアレンジした書体です。縦横の太さは均等ですが、画の先端や角が丸くなっています。与える印象はゴシック体よりも、「やわらかさ」「丸み」などが強調されます。
公共施設、工事現場などの標識で見かけることが多く、視認性の高さとともに、丸ゴシック体を使うことで注意事項などの硬さを感じさせる内容をソフトに伝えられる効果を使っていると言えます。
女性らしさ、子供っぽさを感じさせることもできるので、商品によっては上手に使えばおしゃれ感を出すことができますが、幼稚なイメージにもなりやすいので気をつけて使いたい書体です。
行書体
行書体は、毛筆で書かれたようなタッチが取り入れられた書体で和風のイメージが強くなり、伝統的で古めかしい印象を与えます。
和を感じさせる商品・サービスの場合なら上手に取り入れることで「優雅な感じ」や「高貴な感じ」を醸し出すことができますが、慎重に使わないと古ぼけた印象になります。
デザイン書体
厳密に明朝体やゴシック体に分けることができないような、デザイン性が高く個性的なフォントをデザイン書体と呼びます。
有名なデザイン書体には、ポップ体や手書きフォント等があり、遊び心やおもしろさを表現したい時に使われます。個性的なフォントが多く、与えるイメージもフォントによって大きく変わるので、使う際には細心の注意が必要です。上手に取り入れないと商品やサービスのイメージをぶち壊してしまうこともあるので、デザインの初心者は手を出さないほうが無難です。
2-4. 伝えたいことがはっきりと伝わるデザイン
おしゃれなバナーは、伝えたいことがはっきりと伝わるデザインになっています。どのような広告であっても「おしゃれ感」を出すためには情報が精査され整理整頓されたデザインにする必要があるからです。
伝えたいことがたくさんあるうえ、整理されずにゴチャゴチャと小さいスペース内に入っていたら、それだけで「おしゃれなバナー」とは言えませんよね。
情報が精査されたうえ、きれいに整理整頓されていれば、伝えたいことが顧客の目にしっかりと目に留まるようになるので、必然的におしゃれなバナーは伝えたいことがはっきり伝わるデザインとなるのです。
3. おしゃれなだけではダメ？バナーの基礎知識
記事の冒頭でもご紹介しましたが、おしゃれでセンスがいいだけでは、バナーとして失格です。興味を持ってもらい、クリックを促進し、商品やサービスを購入してもらえなければ、バナー広告として意味がありません。
そこで、ここでは、バナーの基礎知識をご紹介します。
おしゃれでセンスが良いバナーでありながら、確実にコンバージョンを獲得できるバナーは作れます。しっかりと基礎を学んでおきましょう。
3-1. バナー広告の役割と目的を知っておく
バナー広告の役割と目的を知っておくようにしましょう。バナーはサイズが小さいこともあって、役割や目的を軽視してしまいがちですが、バナー（banner）のもともとの意味は、「旗」「横断幕」であり、《人目を引いて興味や関心を持たせる》という重要な目的があるのです。
そのほかにも主な役割は3つあります。
- 幅広いユーザーに対して興味を持ってもらうウェブのバナー広告は、ポータルサイトや商品に関連するサイト、ブログ等に掲載することにより、幅広い層の目に入るようにして、興味や関心を持ってもらう役割があります。
たとえば化粧品であれば、女性向けファッション雑誌のウェブサイトにバナー広告を掲載し、認知度を高めたりします。
- 潜在顧客を掘り起こすすでに顧客になっている人ではなく、これまで商品やサービスを知らなかった層に対して、興味を持ってもらえるようなバナーを作成して、潜在顧客を掘り起こすこともバナー広告の役割です。
- クリックを促して、別サイトに誘導を行うバナー広告の重要な役割は、クリックを促して、別に用意してあるメインのサイトに誘導を行うことです。
バナー広告は誘導のためのひとつの「仕掛け」であり、別サイトに誘導してからが、実際に商品を購入してもらう本番とも言えますが、バナー広告がどれだけ、目にした人の興味や関心を強く引きつけることができるかにも商品の売り上げはかかっています。どれだけ見た目がきれいでおしゃれなバナーを作っても、クリックしてもらえなければ意味はないのです。
3-2. バナー広告作成で絶対外してはいけない4つのポイント
バナー広告を作成する際に、絶対に外してはいけない主な4つのポイントをご紹介します。
- 掲載する情報を絞る
- 一番目立たせたい情報をひとつに決める
- 「目を惹く」「クリックを促す」ためのデザインの工夫（色選び・画像選び）
- 大きさが違うバナーを複数作成する場合はデザインに統一感を持たせる
バナーはサイズが限られており伝えられる情報も限られるので、ポイントを外して作成してしまうと本来の目的や役割を果たすことができなくなってしまいます。必ずこの4つのポイントを守っているかをチェックするようにしましょう。
3-2-1. 掲載する情報を絞る
バナーに掲載したい情報を洗い出してから、絞り込みを行うようにしてください。情報を入れ過ぎたバナーは、訴えたいことが明確に伝わりづらいからです。
いきなりデザイン作成に取り組むのではなく、まず最初にメモなどに掲載したい情報を書き出します。
- キャッチコピー……10文字程度vサブコピー…………20文字程度
- キャンペーン期間や締め切りの告知コピー
- 会社やブランドのロゴ
- 写真やイラスト（メインビジュアル）
等、とりあえず入れたいと考えている全てを書き出してみましょう。できれば簡単に図を描き、どこに何を入れるか仮で決めると、情報の取捨選択がしやすくなります。
複数のサイズのバナーを同時に作る場合は、一番小さいサイズのバナーに入れる情報量を決めてから、大きなバナーに入れる情報量を調節すると統一感が出ます。
3-2-2. 一番目立たせたい情報をひとつに決める
一番目立たせたい情報（メインの訴求ポイント）をひとつに決めましょう。バナーはサイズが小さいので、メリハリをつけないと、ゴチャゴチャした見づらいバナーになってしまうからです。
訴求ポイントはさまざまありますが、例として
- 価格の安さ（割引セール等の告知など）
- 期間限定や個数限定
- サービスの一押しメリットを前面に押し出す
- 新発売の商品の場合、画像をメインにして、とにかく興味を持ってもらう
などがあります。
メインの訴求ポイントを決めるための重要なポイントとなるのはターゲット設定です。
「誰にでも当てはまるように見えるバナーは、誰にも選ばれない（クリックしてもらえない）」からです。「このバナーは、まさに自分のために作られたバナーだ」と見た人に思ってもらえるように、ターゲットを細かく絞ってから、ターゲットに一番訴えかける情報は何なのかを考えて、メインにするようにしましょう。
3-2-3. 「目を惹く」「クリックを促す」ためのデザインの工夫（色選び・画像選び） パッと目を惹き、思わずクリックさせてしまうようなデザインの工夫が必要です。膨大な情報量のウェブページの中には、たくさんの競合とも呼べるバナー広告が掲載されており、工夫を凝らさなければ、目に留めてもらうことはできず、埋もれてしまうからです。
ときどき、ギョッとするようなショッキングな画像を掲載して、目を引くようなバナー広告を見かけることがありますが、必ずしもクリックを促すとは言えません。見た人によっては不快感を感じさせることにもなり、クレームを入れられてしまうことも考えられるからです。
できれば、「おいしそう！食べてみたい！」「（スキンケア商品を持った画像の）女優さんの肌がとてもきれい！私もこんな肌になりたい！」とか「かわいい！欲しい！」といった感じで、バナーを目にした人がポジティブな感情を抱き、商品やサービスに対してもポジティブな感情を抱いてもらえるようなデザインをすることを心がけてください。
ついクリックしてしまいたくなるGIFアニメ（複数の静止画をコマ送りで表示し、動画のように見せる画像）を配置して、競合のバナーに差をつけたりするのも有効です。
3-2-4. 大きさが違うバナーを複数作成する場合はデザインに統一感を持たせる
ウェブのバナー広告の場合、大きさの違うバナーを複数作成することがありますが、デザインに統一感を持たせることを忘れないようにしましょう。
ネットを利用している人は、さまざまなサイトをサーフィンするように利用しているので、Aのサイトで見かけたバナーとBのサイトで見かけたバナーでデザインが違っていると、同じ商品とはわからなくなってしまうこともあるからです。
有名ブランドのロゴやマークは、厳密に色や大きさの使用規定があるのが普通です。バナーのデザインに統一感を出すことによってブランド感を出すことができ、商品の認知度も高めることができます。
4. Canvaを使えばおしゃれで高い効果のバナーが簡単に作れる4つの理由
- そのまま使える！おしゃれなバナーのテンプレートが多数揃っている
- 画像の加工も速攻でできる！操作がとても簡単にできる
- 無料で使えるフォントは88種類！文字組みも簡単にできる
- 作成したバナーは自宅ですぐプリントできる
Canvaは無料で利用でき、パソコンだけでなく、スマートフォン、タブレットからも利用が可能。アプリをGoogle Play,App Store からダウンロードすれば、移動の電車の中でもバナーを作成したり、修正したりすることが可能になります。
4-1. そのまま使える！おしゃれなバナーのテンプレートが多数揃っている
そのまま使用することができる、完成形のバナーテンプレートが豊富に揃っています。デザインをどうしようか迷っているときには、プロが作成したテンプレートを眺めるだけでもアイデア出しの参考にできます。
気に入ったテンプレートが見つかったら、文字や画像を入れ替えるだけで、バナーを完成させることができます。
バナー広告で検索した結果の一例
4-2. 画像の加工も速攻でできる！操作がとても簡単にできる
画像を加工することも簡単にできます。たとえば、画像の色味の調整は、19種類のフィルタから好みの色合いを選べばOK。インスタグラムやスマホの写真加工アプリを使い慣れている方であれば、同じような手順でできるので、すぐに覚えられます。
画像の切り抜きや反転することもできますし、写真だけでなくイラストやロゴマークなどもテンプレートとして揃っているので、少し加工するだけで、オリジナルのロゴマークを作ることもできます。
4-3. 無料で使えるフォントは88種類！文字組みも簡単にできる
テンプレートに使われている文字は、好みのフォントに入れ替えることができます。現在は、88種類の文字が利用可能となっています。
画像上部のアイコンをクリックすれば、文字の色を変えたり、太くしたり、文字を揃えたりすることも簡単操作でできます。（一部有料のものもあります）
文字組み（違うフォントを組み合わせてデザインすること）は初心者にはむずかしく、悩んでしまうことも多いはず。
左サイドバーの「テキスト」を選択すると、フォントの組み合わせのテンプレートが選べるようになるので、好みの組み合わせを選べば、すぐにバランスの良い文字組みが完了します。
4-4. 作成したバナーは自宅ですぐプリントできる
作成したバナーは自宅のプリンターですぐにプリントできます。ウェブ用に作成したバナーをシールにしたり、店舗内ディスプレイ用と貼り出したいという場合あるかもしれません。そういったケースでも、簡単に試し刷りをすることができ、紙で印刷した場合の色味などを確認することができます。
プリントの手順は以下のようになります。
- デザインが完成したバナーをいったんダウンロードします。ダウンロードするには、右上の「ダウンロード」ボタンをクリックします。
- 下方に選択肢が出てくるので、印刷する場合は「PDF」を選択します。（ダウンロードファイルはさまざまな形式が選択できます。）
- ダウンロードしたファイルを開いて、ご自宅のプリンターの設定を調整して印刷します。
- 印刷の倍率は「100%」に設定してください。
まとめ
おしゃれなバナーを作るためにも、ご紹介したバナーのまとめサイト等を利用して、たくさんのバナーを見て研究するようにしてください。
最後に「おしゃれなバナー」と言われるための4つの鉄則を復習しておきましょう。
- 画像のクオリティが高い
- 配色のセンスが高い
- フォント（文字）の使い方が上手（題材に適したフォントを使用）
- 伝えたいことがはっきりと伝わるデザイン
4つの全てを叶えたいのであれば、ぜひCanva（新しいタブまたはウィンドウで開く）を使ってみてください。簡単に使いこなせるのに、ハイクオリティのバナーが作れることに感動するはずです。既存のテンプレートを眺めるだけでもアイデアの参考にできますので、ぜひこの機会にアカウント登録をすることをおすすめします。
この記事で紹介しきれないサービスはこちらで紹介されています！
こちらのバナー関連記事もおすすめです
