menu

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

制作

インターネット黎明期から業種・目的を問わずあらゆるWebサイトで使われてきたバナー。動画やSNSをはじめ、さまざまなメディアやコミュニケーションツールが普及した現在でも、多くの企業のWebサイトではバナーからの流入・遷移のシェアが依然として高く、その重要性に変わりはありません。

文字と画像を組み合わせたバナーは動画などと比較すればシンプルで情報量も限られますが、シンプルだからこそ的確に情報を伝えるためにはレイアントやデザインの工夫が大切になります。

いい加減に制作・公開されたバナーはユーザーの誤解を招き、ブランディングの面でマイナス効果を生むことも少なくありません。また、バナーは情報量が限られるがゆえに訴求ポイントを絞り込めず、制作に思わぬ時間がかかってしまうこともあります。

必要以上に時間をかけず効果的なバナーを作成するにはどんな点に気をつければ良いのでしょうか? 具体的なポイントをご紹介します。

・配色とレイアウトを別々に考える
まず押さえておきたいのが、バナーの配色とレイアウトを切り離して考えること。配色とレイアウトを同時に決めようとすると組み合わせが無数になり、何度も修正を重ねて制作が滞る大きな原因になります。最初は単色でレイアウトを決め、その後で訴求ポイントに沿って配色を決めていきましょう。

・情報は伝えたい順に左上から右下へ
インタネットユーザーの多くはまずWebページの画面左上に注目し、それから右下へ視線が流れていきます。これはヒートマップやアイトラッキングによる多くのテストでも実証されており、スマートフォンの場合でも基本的に変わりありません。

バナーを作成する際は盛り込みたい情報を洗い出したうえで、優先順位の高い順に左上から配置していくのがポイントです。そうすることで重要度の高い情報からユーザーに印象づけられるようになります。

・少ない文字数で商品やサービスの強みを強調
文字数の多すぎるバナーは雑多な印象を与えてクリックされにくくなるだけでなく、安っぽさが強調されて企業のイメージに悪影響をもたらすこともあります。また、レスポンシブデザインを採用したサイトでは、大きさ・配置によっては文字がつぶれてしまうことがあるため、バナーの文字数はできる限り抑えたいものです。

少ない文字数でユーザーを引きつけるためには、販売実績や口コミ、レビュー評価点など具体的な数値を活用するのが効果的です。

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

小野 良勝 代表取締役

投稿一覧

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

ひと目で分かるコンテンツが成果を分ける「Facebook広告」

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

関連記事

  1. ファイルをコンパクトにして表示速度をUP。JavaScript/…

    スマートフォンやタブレットの普及によってコミュニケーションのスピードが早まるなか、Webページに表示…

  2. マンネリ化したWebデザインから脱却したい時は注目。心理学におけ…

    制作したWebページの効果が伸び悩んでいる時や、何となくマンネリ化した印象を拭えない時などは、行動心…

  3. アイコンとあわせてフラットデザインに活用したい無料フォント&ベク…

    Webサイトにフラットデザインを取り入れる際は、アイコンのデザインやレイアウト、文字情報の配置に気を…

  4. 画像のクオリティにこだわりたい場合の選択肢。意外と知られていない…

    Webサイトやソーシャルメディアで使われる画像の多くは、JPEGやGIF形式です。その一方、自分で写…

  5. Webサイトをより洗練された印象に。海外のWebサイトで人気の合…

    「合字」とは2つ以上の文字を組み合わせて1つの文字として表現したもの。例えば、「AND」を「&」と表…

  6. 認知科学によって利便性を追求。Googleが推奨する「マテリアル…

    無料でダウンロードできるアイコンやフォント、ベクター素材などを上手く利用しながらデザインやレイアウト…

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

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

  8. Photoshopの編集作業をより快適にする、ショートカットキー…

    メインの画像編集ソフトとしてPhotoshopを使っている場合、初期設定のカスタマイズとあわせて使い…

PICKUP

PAGE TOP