東大阪のフリーランスウェブデザイナー、坂本典子のブログです。

私的「目につくバナー」の考察

イラスト:目につくバナー

すっかり春めいてまいりました。陽気に誘われて外出する機会も増え、移動中にスマートフォンを見ることも多くなってきていますが、基本的に普段のお仕事は、家の中でデスクトップPCを見ている状況が多い坂本です。
日常的にネットを見ていると、ごくまれに目について仕方がないバナーに出会うことがあり、そんな時にはついついデザイナー視点で「目につく、気になる要素」を考えてしまったり。

そんな私の目に止まったバナーを、2年ほど前からPinteretのボードにひっそりと集めていたりします。今回はその中でも特に印象に残ったものについて考察を書いてみたいと思います。

そもそもバナーの役割とは?

バナーのもつ本来の役割は、やっぱりサイトユーザーに興味をもってクリックしてもらうこと。ユーザーはもともと他のニュースやコンテンツを見ている訳ですから、その人の気をひくためには、視覚に訴えなければならないので、「目立つ」ということはとても大切な要素だと考えています。

ターゲットを考える

バナーは広告であり、その商品なりサービスを必要としている人に訴えかける必要があるので、ターゲットの設定が重要です。 今回集めたバナーは、デザイナー目線というフィルターがかかった状態ですが、坂本典子というひとりの人間の目に止まったということなので、ターゲット像は比較的私と同じカテゴリーの人になるのではないかと考えられます。

  • 40代
  • 女性
  • 既婚
  • 専門職
  • 子供なし DINKS
  • 収入…高くないです

化粧品とかアパレルなど、いかにもっていう感じですね(^^;)

ステンドグラスのような「セパレート」が効く



まず一番はじめはYahoo BBのフレッツ光のバナーです。この派手さ、印象の強さはすごいと思います。
ベタ塗りで表現された金額の数字、赤と青と黄色の配色のコントラスト、フラットシャドウの陰影の付け方など、目立つことを最優先にデザインされているのがよく分かります。
高彩度の色を生かすために黒い輪郭線で色をセパレートしていて、ステンドグラスのような効果を出しています。

モノクロ写真で商品を魅せる



次はダイソンの掃除機のバナーです。
ダイソンはすでにブランドが広く認知されているので、「シンプルなコピー」と「掃除機の写真」だけで狙ったターゲットに訴えかける力を持っていると推測。ダイソンブランドに憧れている主婦に、ただダイソンを見せてあげればいいのです。

たくさん情報がつまったカラフルなニュースサイトの中では、このようなモノトーンの写真がかえって目立ちます。「さらに詳しく」というボタンのみに、有彩色である黄色を使っているのもポイントです。

立体感と手描き感で目立たせる



次は化粧品、Dr.シーラボのバナー。この手のスキンケア化粧品の広告って本当によく見るのですが(つまり競合がめちゃめちゃ多い!)Dr.シーラボはメディカルコスメの先駆けということもあり、ブランドが広く認知されていると思われます。30〜40代の女性なら誰もが1回は使ったことがあったり広告を目にしてきているので、あえて商品写真ではなくても「あ、シーラボだ!」って分かってもらえるのですね。そこで「6つとももらえるの!?」のお得感あるコピーが効いてくるし、手描きの文字やイラストが印象に残るのです。

また注目したいのは過剰なぐらいのドロップシャドウ。私が普段Webサイトのデザインをする時には、ここまで影の色を濃くするとダサくなっちゃうので絶対にしないのですが、広告だとこのぐらいのわざとらしい影が目立つし効果的だったりします。「ダサさが効く」という広告ならではのセオリーですね。

補色の配色とハズシの手書き感



最後は通販会社、ディノスのバナー。ディノスの家具って、個人的には他の競合カタログ通販と比べてちょっと割高な印象があるのですが、このバナーでは手描きPOP風の書体がお得感を演出していて面白いですね。

そして目を引く赤と緑の補色の配色。赤と緑って原色同士を隣接させると色覚異常の方には判別しにくいので、デザインをするときは注意が必要なのですが、このバナーでは間に白に近い淡い緑を使っているので、判別しやすく配慮されていると思います。

色覚バリアフリー|伝わるデザイン

発注するときのポイント

バナーはお金をかけて広告を出す時に作られることが多いので、本当に重要な役割を担っていますよね。 そんな失敗できないバナーなのですが、発注する機会のある方は、以下のポイントを考えて発注するといいんじゃないでしょうか。

  • ターゲット(バナーを見てほしい人)はどんな人か。
  • その人がどんな状況でバナーを見ているか。
  • その人にとって興味を引く写真(イラスト)かどうか。
  • バナーの文字がちゃんと読めるかどうか。
  • 商品やサービスの利点が端的に伝わる文章かどうか。

まとめ

今回紹介した私が集めたバナーは、最初に書いたように「デザイナーフィルター」がかかった状態です。また私は日常的にデスクトップPCで作業をしていますので、スマートフォンでの表示だと上記の様に感じないかもしれませんし、もっと別のバナーを選んだかもしれません。

それでも、バナー広告はしっかりと見てみると奥が深くて面白いので、今後も気が向いたときにゆるく集めていきたいな〜と思っています。


投稿者