高品質なバナーデザインの基本！クリック率を高める作成のコツは？

更新日：2020年12月25日発注カテゴリ：ホームページ制作・デザイン

ホームページに欠かせないバナー。季節ごとのキャンペーンや新製品、一押し商品の情報など、コーポレートサイトや店舗サイト、ECサイトを運営している方ならその重要性はよくご存知でしょう。しかし、デザインの基本を理解していなければ、せっかくバナーを作成してもその効果は限定的です。「クリック率を高めるには？」「どうやってデザインしたら？」バナー作成に悩みを抱える方も少なくないのではないでしょうか？そんな企業・店舗担当者の方に向け、バナーデザインの基本、クリック率を高めるバナー作成のコツを解説するとともに、バナーデザインの参考になるサイトも紹介していきます。

ホームページ制作・デザインに対応できる業者を一覧から探す

ホームページ制作・デザインの相談をする

バナーとは？

バナー（Banner）とは、ホームページに貼られた「お知らせ・広告へのリンク付き画像」のことです。インターネットを閲覧していると種類のさまざまなバナーを目にしますが、大きくは自社ホームページに貼って、自社キャンペーン・商品ページに誘導する「サイト用バナー」、ポータルサイトなどの広告枠に自社ページへの誘導バナーを出稿する「広告バナー」の2種類に分類できます。

本来のバナーは「横断幕」「のぼり」といった意味ですが、実店舗が店頭に宣伝のぼりを立てて集客するように、インターネット環境での会社・店舗であるホームページに立てて、集客するための宣伝のぼりが「バナー」なのだといえるでしょう。

バナーに定型サイズはある？

実店舗に設置するのぼりを含め、チラシ・ポスターなどの印刷物には、ある程度決められた「定型サイズ」というものが存在します。

実際、Google AdSenseなどの広告配信プラットフォームに「広告バナー」を出稿する際は、用意されたいくつかの定型サイズに合わせてバナーを作成する必要があります。大小いくつかの広告枠が用意されている「新聞・雑誌」がイメージしやすいかもしれません。

ただし、自社ホームページへの掲載を前提した「サイト用バナー」であれば、どんなサイズで作成しようが問題ありません。バナーといえば横長をイメージする方が多いかもしれませんが、ページを縦断する縦長のバナーを作成しても構わないのです。

デザインが決め手！バナーの役割

バナーの役割は、目的とするリンクへ「ユーザーを誘導する」ことです。もう少し深く考えてみましょう。実店舗が「宣伝のぼり＝バナー」を立てるのは、自分の店舗を知っている顧客にアピールするだけではありません。

宣伝のぼりを立てることで、通りすがりの潜在顧客に「店舗が存在する」という事実を「注意喚起」させるのが最大の目的です。

しかし、ただ注意喚起するだけでは「来店」というコンバージョンにつながりません。注意喚起した潜在顧客に「来店＝コンバージョン」してもらうためには、宣伝のぼりの内容を見て「自分のことだ」と思わせなければならないのです。

これがバナーの持つ最大の役割です。それでは、潜在顧客にバナーを一目見て「自分のことだ」と思わせるために必要な要素はなにか？それこそがバナーデザインといえるでしょう。

バナーデザインの基本・手順

基本的に「リンク付き画像」であるバナーは、PhotoshopやIllustratorなどのフォトレタッチ・グラフィックソフトの操作ができれば作成可能です。

しかし、ただ単に感性に従ってデザインしているだけでは、バナーの目的である「注意喚起」、役割である「コンバージョン」は望めません。バナーデザインの基本を押さえながら、手順に従って作成する必要があるでしょう。簡単に解説していきます。

バナーの目的・掲載メディア

まずは、バナーの目的である「注意喚起」の内容を明確にし、バナーをどのメディアに掲載するのかを確認します。バナーを活用して達成したい「コンバージョン」は、企業・店舗によって異なります。

キャンペーンのお知らせなのか、一押し商品の購買なのか、バナーをクリックしたユーザーに「なにをして欲しいのか？」を具体化するのが重要です。

また、どのようなバナーデザインを採用するかは、掲載するメディアによっても異なります。たとえば、地味な宣伝のぼりを繁華街に立てても目立たないかもしれませんが、住宅街にハデな宣伝のぼりを立てると違和感を与えてしまいます。

場所によっては大きな宣伝のぼりが立てられないこともあるでしょう。サイズ・掲載場所も含め、作成するバナーをイメージしておかなければなりません。

バナーのターゲット

ユーザーに「自分のことだ」と感じてもらうバナーデザインを作成するには、明確なターゲットを設定し、ターゲットがどのような行動を起こすのかを予測しておくのが基本です。

「東京近郊に親と同居する20代前半の女性、一人暮らしするためマンションを探しているが、家賃8万円以内で安全が確保された物件を探している」など、できる限り具体的なターゲット像を想定するのが重要。

もし、自分自身がターゲットだったら、ニーズを満たすためにどんな行動をするか？を予測しておくのも肝心です。

画像素材・キャッチコピー

目的・掲載メディアを踏まえたバナーデザインのイメージ、ターゲット像が具体化できれば、それを具現化するための素材を集めていきます。メインビジュアルとなる画像素材はもちろん、ユーザーに訴求するキャッチコピー、サブコピー、会社・店舗ロゴなど、考えられるものはすべて用意しておきましょう。

ラフデザイン

素材が集まれば、すぐにでもPCでバナーデザイン・レイアウトに取りかかりたいところではありますが、あまりおすすめできません。それぞれの素材の強さに引っ張られて、効果的なレイアウトを検討しにくいからです。

PCの作業に取りかかる前に、手書きのラフデザインでレイアウト案をいくつか作成しておくといいでしょう。ポイントになるのは「左上から右下」という人の視線を意識し、重要な要素の並べ方を工夫することです。

カラー決定・仕上げ

レイアウトが固まったら、イメージ通りになるように素材を並べて微調整を繰り返し、バナーデザインを完成させていきます。このときに重要になるのが「カラーの選択」です。

どのような色を選択するかで、バナー単体のイメージがガラリと変わってしまうのはもちろん、掲載メディア、遷移先のメディアとイメージがかけ離れていれば、ユーザーに違和感を与えてしまう可能性があるからです。さまざまな要素のバランスを考慮に入れ、バナーデザインを仕上げていくのが重要です。

バナーデザインに動きを加えたい時は？

バナーの基本は「リンク付き画像」ですが、GIF画像を使ったアニメーション、CSSを使った切り替わる画像など、近年では「動きのある」バナーも珍しくありません。それでは、動きのあるバナーを作成するにはどうすべきでしょう？

簡単なGIFアニメ程度であれば、Photoshopで自作するのも可能ですが、画質を落とさずにファイルサイズを圧縮するには、それなりのスキル・経験が必要です。CSSを使ったバナーデザインであれば、いわゆるデザイナー・プログラマーレベルのスキルが必要です。

こうしたケースでは、素直にホームページ制作会社に依頼するのがおすすめです。もちろん、デザインに自信が持てない方であれば、一般的なバナーデザインを依頼するのもいいでしょう。しっかりとしたヒアリングで、自社ニーズを理解してくれる優秀なホームページ制作会社であれば、効果的で高品質なバナーを素早く作成してくれます。

クリックしたくなるバナーデザインのコツは？

ここまでで、バナーデザインの基本を解説してきました。要素を押さえて作成するだけでも、バナーの効果は大きく異なってくるでしょう。それでは、ユーザーがより「クリックしたくなる」バナーデザインに仕上げるには、どのようなことに気を付ければいいのでしょう？「わかりやすく」「シンプルに」が基本です。

テキストは少なく！訴求力は高く！

キャンペーン、商品プロモーションなど、広告目的が中心になるバナーでは、あれもこれもと情報を詰め込みたくなりがちです。ホームページやブログであればそれでもいいかもしれませんが、スペースの限られたバナーでは、情報がゴチャゴチャして焦点がぼやけてしまいます。

限られたスペースでユーザーにアピールするバナーでは、「少ない文字数で訴求力の高い」テキスト・コピーを考案するのが重要です。ポイントになるのは「いいたいことを絞り込む」「箇条書き」「同じ意味の文章は削除」です。

見ただけでわかる画像

訴求力の高いバナーデザインにするには、写真・画像の選定も重要です。ユーザーが一目見て「どんなバナーなのか」がわかるような画像を選定すべきでしょう。たとえば、不動産系のバナーなら、マンションの写真・部屋の見取り図など、ユーザーが一目見て「部屋探しなんだな」と理解できる必要があります。

レイアウトに気を配る

「左上から右下」というレイアウトの基本は紹介しましたが、重要度の高い順に素材を並べただけでは、ユーザーに「伝わらないバナー」になってしまいます。

ユーザーにわかりやすい「すっきりとしたレイアウト」になるよう、工夫しなければなりません。「テキスト情報はある程度まとめて配置」「写真・画像とテキストのかぶりに注意」を意識しておくだけでイメージは変わります。

フォント・サイズ・字詰め

バナーデザインを印象的に仕上げるには、フォントの使い方も工夫する必要があります。まずは、バナーのイメージを左右するフォントの種類です。

一般的には、落ち着いた雰囲気を重視するなら「明朝体」、ハデなイメージを狙うなら「ゴシック体」が選ばれる傾向にありますが、狙いに応じてフォントの種類を選ぶこと、使うのは選んだフォントに統一することが重要です。

伝えたい要素の重要度に応じてフォントサイズを変えるのもデザインの基本ですが、さまざまなサイズが混在するのは雑多な印象を与えてしまう要因です。フォントサイズは重要度に応じて3サイズ程度にとどめ、字間がバラバラにならないよう字詰めにも気を配っておく必要があります。

バナーデザインの参考にしたいサイトを紹介

作成の手順、コンバージョンを高めるコツを含め、バナーデザインの基本をある程度理解できたのではないでしょうか？しかし、なによりも「どんなバナーデザインにすればいいのか？具体的なイメージがわかない」という方も少なくないかもしれません。

そんな方の参考になるよう、さまざまなバナーデザインが掲載されているまとめサイトを、いくつか紹介しておきましょう。

Banner Matome

2万本以上のバナーデザインを集めたサイト。業種別・表現別に検索できます。

バナーデザインギャラリー

バナーの投稿サイト。バナーの色別、国内・海外の地域別に検索できます。

retrobanner

レトロバナー

1万以上のバナーデザインを集めたサイト。サイズ別にバナーを検索できます。

まとめ

高品質なバナーを作成するデザインの基本、クリック率を高めるためのバナーデザインのコツを中心に、デザインに悩む企業・店舗担当者の方が参考にできる、バナーデザイン検索サイトも紹介してきました。

バナーならではのポイントを押さえ、ターゲットを想定しながら作成すれば、ユーザーがクリックしたくなるバナーを作成できる可能性が高まります。

しかし、バナーに限らず、デザインには正解がないのも事実です。効果を高めるバナーを作成したいのであれば、プロのデザイナーに任せるのも方法でしょう。

『比較ビズ』なら、必要事項を入力する2分程度の手間があれば、優良なホームページ制作会社をスピーディーに探せます。複数のホームページ制作会社に無料で相談できるのもポイントです。是非、利用してみてください。

ホームページ制作・デザインに対応できる業者を一覧から探す

ホームページ制作・デザインの相談をする

比較ビズへ掲載した受注者インタビュー

比較ビズで仕事を受けるために掲載した受注者様のインタビュー記事となります。受注者としての掲載をご希望の方は「資料請求フォーム」よりお問い合わせください。

インタビューの一覧を見る

ホームページ制作・デザインの案件一覧

ホームページ制作・デザインのお見積り案件の一覧です。このような案件に対応したい場合は「資料請求フォーム」よりお問い合わせください。

東京都

新着案件人気案件ホームページデザイン・制作の見積もり依頼

Web制作会社・システム開発会社 > ホームページ制作・デザイン

【相談内容】弊社はマンション大規模修繕がメインの建築会社です。主な顧客が大手不動産管理会社であった為、HPは手作りで事足りていました。この度、不動産業も弊業することとなり良い機会なのでHPをリニュ …

総額予算50万円まで (02/13まで)
東京都

新着案件ホームページデザイン・制作の見積もり依頼

Web制作会社・システム開発会社 > ホームページ制作・デザイン

【案件進行状況】企画中【最終発注者】自社【検討基準】品質重視【作成するホームページの種類】企業・店舗サイト営業用サイト【対象となるお客さんの層】全般

総額予算予算上限なし (01/31まで)
神奈川県

新着案件ホームページデザイン・制作の見積もり依頼

Web制作会社・システム開発会社 > ホームページ制作・デザイン

【最終発注者】自社【検討基準】価格重視【作成するホームページの種類】企業・店舗サイト【対象となるお客さんの層】全般

総額予算10万円まで (02/11まで)