menu

コントラストやトーン&マナーを工夫してさらに効果を高める、バナー作成のコツ

制作

動画などさまざまなメディアが発達した今でも、Webサイトにおけるバナーの重要性に変わりはありません。必要以上に時間をかけず効果的なバナーを作成するためには、まずレイアウトと配色を切り離して考え、情報は優先度の高い順に左上から配置。文字数はレスポンシブデザインなども考慮して、できるだけ少なく抑えるのが大切なポイントです。

さらにそれらに加えて、文字と背景のコントラストや、デザイン、ランディングページとの整合性などを工夫することによって、さらに効果の高いバナーを作成することができます。具体的なポイントをご紹介します。

・コントラストでユーザーの目を引きつける
ユーザーの目を引きつけるためには、文字と背景のコントラストも大切です。濃淡やカラーの組み合わせによって文字情報とビジュアルの両方が引き立つようにするのが基本です。実際制作する際はいくつかのパターンを作成して、ABテストなどを行うのもいいかもしれません。

・掲載ページのデザインやブランドイメージとの相性にも注意
バナー作成で意外と見落とされがちなのが、バナーを掲載するWebページのデザインやブランドイメージとの相性です。バナーに盛り込む情報やデザインをいくら工夫しても、それがWebページなかで埋もれしまえばクリック率は低下しますし、企業イメージと合わないバナーはユーザーに混乱を与えます。

企業のイメージ戦略で成功しているといわれるコカ・コーラや無印良品のWebサイトでは、バナーとWebサイトのデザインに一貫して整合性を持たせ、さらにブランドイメージに合った文言や情報をバナーに盛り込むことで、ユーザーにインパクトと安心感の両方を与えています。バナーの制作にあたっては、こうしたWebサイトを参考にしてみるのもいいかもしれません。

・ランディングページと整合性を持たせる
バナー制作ではデザインやキャッチコピーだけでなく、ランディングページとの整合性も大切な要素です。申し込み・予約ページなどへ誘導するバナーの場合、リンク先ページのユーザーの目に付きやすい箇所に申し込み・予約ボタンを配置する必要があります。

またバナーのトーン&マナーとランディングページのデザインがあまりにも異なる場合は、ユーザーに混乱させて離脱を招くだけでなく、企業への信頼感という点でも大きなマイナスになるので注意が必要です。

Web制作に関するご依頼、ご相談、お見積はこちら

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

対策の「数」からコンテンツの「質」への価値転換

顕在ターゲット層を取り込む「リマーケティング広告」

関連記事

  1. 短時間で効果的なバナーを作成するために押さえておきたい3つのポイ…

    インターネット黎明期から業種・目的を問わずあらゆるWebサイトで使われてきたバナー。動画やSNSをは…

  2. 無料素材とあわせて動画コンテンツ作成に活用したい、無料編集ツール…

    コストを抑えて動画コンテンツの制作・公開するために、動画素材の無料ダウンロードサイトとあわせて使いた…

  3. 表示速度を0.1秒改善して売上1%アップ?フラットデザインの具体…

    スマートフォンやSNSの普及によってコミュニケーションのスピードが速まり、キュレーションサイトやHo…

  4. EFO(入力フォーム最適化)に役立つ、無料で使えるjQueryプ…

    ECサイトだけでなく、会員登録やアンケート、問い合わせなど、多くのWebサイトに設置されている入力フ…

  5. Webページの目的に合わせて意識したい「ジャンプ率」とは?

    スクロールに合わせて時間差でコンテンツが表示されるパララックスデザインなど、常に進化し続けているWe…

  6. Webサイトのプランニングに活用できる「マインドマップ」(前編)…

    ユーザービリティ向上やコンバージョン率改善など、Webサイト制作の目的はさまざまです。目的を実現する…

  7. 時間による変化やこだわりの制作過程を数十秒で見せる、タイムラプス…

    インフォグラフィックと並んで、よりスピーディーに分かりやすく情報を伝えるWebマーケティングの手法と…

  8. 有力キュレーションマガジンも導入。スマホの動画視聴にマッチしたタ…

    バーチャルリアリティ(VR)やオーグメンテッドリアリティ(AR)と並び、新しい動画コンテンツのトレン…

PICKUP

PAGE TOP