バナーについて

こんにちは、実習が今日入れてあと3日しかないと今知った尾崎です!

本日はバナーのお話し。

バナー(Banner)ってご存知ですか?直訳すると「旗・のぼり」って意味なのですが、Webの世界でもよく聞く単語です。

ではWebの世界のバナー(Banner)がどういうものかと言いますと、
「バナー (banner) はウェブページ上で他のウェブサイトを紹介する役割をもつ画像(アイコンの一種)のこと。 本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。(wikipedia)」だそうです。要するに「ウェブページ上にある『のぼり』」のようなものです。
のぼり」はご存じでしょうか?よくお店の軒先なんかではためいているアレです。

▼コレです

この「のぼり」には単純に「そこにお店があると認知してもらう効果」があります。看板だけだと目に留まらないこともありますが、のぼりはいやがおうにも目に留まりますよね。
もしその「のぼり」に魅力的な商品写真などがあれば、外観だけでは伝わらない魅力をお客様に伝えることができ、「集客力」に繋がるかもしれませんね。

WEBの場合、認知してもらうだけではダメです。バナーはお店の入り口に当たるもの。つまりクリックされないと意味がありません。制作に際してルールはありませんが、一目で魅力が伝わらないとクリックしてもらえず素通りされてしまう可能性が高いです。そうならないように文言(テキスト)や写真といった要素を効果的にレイアウトする必要があるわけです。

バナーのレイアウトについて

バナーには様々なレイアウトがありますが、「誰に何をどう伝えたいか」によってある程度の形が見えてきます。より高い成果を出すためには、各企業の商品やサービスがもつ魅力を最大限に伝える事ができるバナーを作る必要があります。

では、実際にどういうレイアウトがあるのか見ていきましょう。

複数商品や豊富なカラーバリエーションが一目でわかる「バリエーション型レイアウト」

写真を横に並べるレイアウト

複数の商品や色違いの商品がある時に効果的なレイアウトです。テキストで「○○種類」と記載することも大事ですが、パッと見で理解できる点が強み。半面、商品の画像が小さくなってしまう弱点も。

写真を敷き詰めるレイアウト

写真をグリッドに並べることで強いインパクトを与えます。メインコンテンツにギャラリーを採用しているサイトなどにも見られるレイアウトですね。

見た目で勝負!「写真メイン型レイアウト」

インパクトある商品や、食品などは視覚に訴えるレイアウトがオススメ。しかし、テキストが少なくなってしまうので、多くの情報を伝えるのは難しいです。

 

写真メイン型レイアウトの変形型その1「縦に分割するレイアウト」

写真とテキストのエリアを縦に分割して配置するレイアウト。スッキリ綺麗な印象になります。

写真メイン型レイアウトの変形型その2「横に分割するレイアウト」

視覚的なメリハリがついてインパクトあるレイアウト。

バナー作りは難しい

上で紹介したモノの他にも要素を斜めに配置したり、全体をモノクロで統一したり、ロゴとテキストのみで構成したレイアウトなどもあります。それらを複合することで、より魅力的なバナーを作ることも可能です。

まとめ

レイアウトだけでなく、可視性・判読性・可読性などを考慮して、「誰に何をどう伝えたいか」を考え抜いて、要素がぎゅっと詰め込んだモノがバナーなのです。小さいけれどとても奥深く、知れば知る程難しくて面白いです。ほんと面白い!

新しいバナーを1から作るのは難しい事ですが、自分が作ったバナーで売り上げが劇的に上がるかも!?って考えたらワクワクしますよね!そんなバナーをたくさん作れるように日々勉強です!