バナーデザイン

良いバナーデザイン~基本の3つの条件とは~


バナーのデザインは、商品や企業ブランドやバナーの「目的」などによって変わるので一概にこれが良いデザインだという正解はありません。

でも良いバナーにはいくつかの共通点があります。
それはずばり、『わかりやすさ 』 です。
良いバナーの条件として共通しているのがこのわかりやすさです。

わかりやすさの3つのポイント

その1:テキスト量は少なく

【テキスト】
× 文字がごちゃごちゃ多め
〇 少ないテキスト 

『端的に言いたいことを伝える 』
『 短い言葉で刺さるコピー 』
を考えることがポイントです。

バナー内にあれも入れたい、これも入れたいとなり、
結果、狭いスペースの中が文字だらけになってしまい、
わかりづらいバナーになってしまうのはNGです。

限られたスペース内で、いかに伝わるコピーを考えるかが重要です。

<文言を決めるときのポイント>

  • 訴求軸を決める(訴求したいことはできるだけ1~2つに絞る)
  • 長い文章は避ける
  • 文章より箇条書き
  • 同じ意味の文言は省く

例)


どうしても文言が多くなってしまう場合は、
なるべく読みやすくするように、デザインでカバーします。

  • 文字の色やあしらいを考える
    (枠線、ドロップシャドウなどをうまく使ってなるべく読みやすく)
  • 文字の背景を考える
    (デザインによっては背景にマーカーや付箋や飾り枠などを使って読みやすく)
  • 文字のレイアウトを考える
    (目線を考えてばらばらと配置するよりまとめて配置 など)

このあたりは全体のデザインのバランスなどによるところが大きいので、
デザイナーの腕の見せ所でもあります。

その2:わかりやすい画像

【画像】
× 何の画像かよく分からない(何の広告かわからない)
〇 パッと見て何のバナーかわかる

抽象的な画像より、パッと見ただけで何の画像かわかる画像が良いです。

  • サプリメントなら、サプリメントのパッケージ+そのサプリに関連する写真
  • 化粧品バナーなら、商品ボトル写真や、女性の肌のお手入れしている画像
  • 引っ越しやなら、引っ越しトラックや作業員
  • 旅行なら、飛行機や旅先の写真や宿の写真
  • 介護関係なら、介護している画像、介護施設の写真
  • クリニックなら、白衣や病院の画像
  • 不動産なら、マンションや一戸建てなどの住宅写真

 など、 画像を見ただけでどんな業種のバナーかわかることも大切です。


画像だけではわかりずらい業種(種類)の場合は…

例えば、

  • 求人広告
  • 何かのキャンペーン
  • 物ではないサービス(通信、保険、配信サービス)

など他にもあると思いますが、画像でそのもののサービスを伝えにくい内容の場合は、「テキスト」の表現の仕方が重要となります。

キーとなる言葉を目立たせて、
文字で何のバナーかすぐにわかることが重要です。

その3:すっきりとしたレイアウト

【レイアウト】
× 文字が所々にばらばらに配置
〇 文字、画像をすっきりとまとめて配置


わかりすいバナーレイアウトは、文言などのテキスト情報はある程度まとまっている方が読みやすいので、ばらばらと四方八方にテキストを散りばめるのではなく、 ある程度まとめてレイアウトするようにします。

そうすることによって無駄な視線の動きがなく、すっと文字が入りやすくなります。

また画像ですが、バナー内の要素が多くなる場合は、要素と写真などの画像がかぶり過ぎるとお互いが見づらくなり何のバナーかわかりにくくなるので、 画像の数を減らして「写真」と「テキスト」がそれぞれわかるように意識してレイアウトします。

まとめ

良いバナーの3条件

まとめると良いバナーの3条件は、下記になります。

その1:テキスト量はなるべく少なく
その2:わかりやすい画像
その3:すっきりとしたレイアウト

バナーを作成する際や、バナー作成を外注する際には、是非このポイントを意識してみてください。


バナーデザインの参考サイト集めました

バナーのデザインを考えるときに参考になる、バナーデザインのリンク集を集めました。

サイズ別、カラー別、業種別、テイスト別など、絞り込んで探すことができ、とても便利です。

社内でデザインのすり合わせをする際、外部にバナー依頼をする際など、言葉のみで希望のデザインを伝えてしまうと抽象的な表現になりやすいため、人よってはイメージに誤差が生まれてしまう場合があります。思い描いていたイメージを言葉で伝えることは思っていた以上に難しい場合があります。

参考デザインとしてURLを提示することでイメージの共有がしやすくお勧めです。



Retrobanner レトロバナー

http://retrobanner.net/別ウインドウリンク

  • サイズ、色、業種、テイストなどから探すことができます。
    バナーをクリックすると、そのバナーで使われている色も抽出することができます。

blog_img1



BANNER LINKS バナーリンクス

http://nonamedesign.info/banner/別ウインドウリンク
サイズ、カテゴリー、カラーなどから探すことができます。

blog_img2



バナーデザインアーカイブ

http://banner.keizine.net/別ウインドウリンク

  • サイズ、色、業種などから探すことができます。
  • バナーをクリックすると、下に同じサイズのバナーがランダムで表示されます。

blog_img3



BANNER MATOME

http://bannermatome.com/別ウインドウリンク

  • 業種別に加え、表現別に探すこともできます。

blog_img4

 

見やすいくて使いやすいバナーデザインのまとめサイトをご紹介しました。


一度の沢山のバナーデザインを比較して見れるのが良い所です。
同じジャンルのバナー、色使い、レイアウトなどデザインの参考になる部分が沢山あります。

眺めているだけでも楽しく、新たな発見もありデザインの勉強にもなります。
是非参考にしてみてください。