バナーの意味を考えたことはありますか？
バナーはウェブサイト内の至る所に設置されていますね。
これって、なんの意味があって置かれているのでしょうか。
まず、バナー（banner）を翻訳すると旗、横断幕、のぼりという意味があります。
コンビニなどお店の前を通ると、よくのぼりが立ててありますね。
季節限定のスイーツだったり、イベントの告知だったり様々ですが、目的はお店の前を通った人に少しでも中へ入って来てもらうためです。
もしのぼりがなければ、季節限定のスイーツがあることも、イベントが開催されていることもわかりません。
ウェブサイトに関しても同じです。もしバナーがなければ、店について検索するか、知人にサイトのURLを教えてもらわない限りサイトにたどり着くことはできません。
しかしバナーがあれば、そのバナーの画像や文字に興味を持った人（サイト自体知らなかった人）もたどり着くことができ、新規顧客ゲットのチャンスになりますね。
ではクリックしてもらえるバナーとは一体どのようなものなのでしょうか？
バナーは大体が小さな画像です。デザイナーならバナーくらいささっと作れるでしょ？と思われがちですが、決まったサイズの中に伝えたい要素をわかりやすく入れることはとても難しいことなのです。
ギラギラした色やデカデカとした文字でバナーを目立たせることは簡単ですが、目立つ＝クリックされるとは必ずしもイコールではありません。それに最近はインターネットを使う人の目も肥えてきているので、あまりにも広告だとわかるバナーは逆にクリックされません。
私たちデザイナーがバナーを作る時に気をつけることは、限られた枠の中に決められた文字や画像を収めつつ、どれだけ魅力的に仕上げられるかが大切になってきます。
バナーの作り方
それでは早速バナーの作り方を見ていきましょう。
1.文字の優先順位を決める
バナーは1番に何を伝えたいのかを明確にしなくてはいけません。小さなスペースの中でどれだけわかりやすく簡潔に伝えられるかが重要になりますので、あれもこれもとなって結局ごちゃごちゃ…なんてことにならないよう気をつけましょう。
2.文字と画像の配置を決める
人の視線は左上から右下に向かうということを意識しながら、レイアウトを組んでいきます。画像がある場合はどのように配置するか、文字が多い場合はどのように区別するかを決めておきます。
レイアウトにはいくつか定番の形が存在するので、まずはバナーだけ集められた参考サイトをじっくり観察してみましょう。そのうち、業種によってある程度決まった形があることがわかると思います。
例えばファッション関連のバナーは、いくつかの商品画像を決まった並びで配列しているパターンや、1つの商品を大きく使っているパターンがあります。
逆にネット関連のバナーは、素材となる画像がない場合もあり、文字だけで完結しているものも数多くありました。
画像の有無や文字の量である程度形は決まってきますし、業種によって最適な形は違うのです。
3.文字を整える
レイアウトがある程度決まったら、次は文字の細かい部分を調整していきます。
フォントを変える
フォントを変えることでバナーの雰囲気をガラリと変えることができます。用途にあったフォントを選ぶようにしましょう。
文字の太さを調整する
フォントと太さの組み合わせによって与える印象は変わります。
太いフォント：力強さ・元気さ・男性的・アクティブさの表現に。
細いフォント：都会的・女性的・洗練されたイメージに。
カギ括弧は細くする
カギ括弧を細くすることで括弧の中の文字が読みやすくなります。
文字サイズに差を付ける
単位「円」や助詞「てにをは」を一回り小さくすると、文字にメリハリが出て情報がより頭に入りやすくなります。
段差を揃える
文字サイズが同じでも、アルファベットとカタカナで水平ラインが揃わない場合があります。この場合は見た目を優先し、水平ラインを揃えます。
文字のカーニングを整える
文字のカーニングも忘れずに調整しましょう。この細かな調整こそがバナーの品質を左右します。
4.色をつける
基本的にバナーの配色は飛び先のサイトデザインに合った色を選びましょう。ピンク系の可愛らしいバナーをクリックしたのに、かっこいい男性向けのサイトに飛んだら誰だって混乱しますよね。
色の置き方に迷ったら、バナーを白黒にしてコントラストを確認してみるといいですよ。文字が見づらいと感じたら配色を考え直しましょう。
5.文字を装飾する
これまでの工程と並行して行うこともありますが、最後に装飾部分を整えます。
アーチ状にしてみたり、あえて1文字ずつ文字サイズを変えたり、文字で遊んでみるのも面白いですよ。
さいごに
今回は文字周りをメインに、バナーデザインのポイントをまとめさせていただきました。
本当に細かい調整ばかりでユーザーは気付きにくいかもしれませんが、少しの手間でバナーの品質は大きく変わってきます。
文字の扱い方で魅力的なバナーを作れるように、少しでも参考になれば幸いです。
