WEBサイトの実例から見る、テイスト別バナーデザインまとめ

2014.03.12

bana_mainimages

少し暖かくなってきたような…そうでないような…。

ツーリングの季節がやってきました。

どうも、丸山です。

きたる3/21～23は大阪モーターサイクルショーです。

今年も「赤い服」で出陣するので、僕を見かけた方は積極的に声をかけて下さい。

さて、今回はバナーデザインについてのお話。

バナーデザインに特化した「まとめサイト」という類は、このWEB上にたくさんありますし、今更感があるかもしれません。

しかし比較的リスティング広告寄りなモノが多いのかな？と感じます。

そこで今回はそういった広告バナーではなく、一般的なWEBサイトで活用されている「バナーデザイン」をテイスト別に紹介してみたいと思います。

それぞれの視覚効果や利点も合わせて参考にして下さい。

シンプルなバナーデザイン

bana_simple01

★モノクロの中にアクセントカラーを。
画像はあえてスッキリと。アクセントで視線を外させ、視覚的に捉えやすいデザインです。
［参照：アン・シェル株式会社様］

bana_simple02

★枠からはみ出すオーソドックスデザイン。
矩形から飛び出したようにするデザインは、ベーシックながらも遊びココロも演出します。
［参照：ヘアーコム様］

bana_simple03

★文字よりも雰囲気重視。
「文字を読んで理解する」というよりも“印象”でクリックを促すシンプルデザインです。
［参照：Beans company 様］

bana_simple04

★リアルと雰囲気を合わせる。
バナーに限った事ではないですが、飲食店（サービス業）の場合は、そのお店（商品）に合わせることが有効的です。
色・質感・店主の思い…など、WEBサイトに訪れることが、イコール「来店と同じ」という感覚になれば最高ですね！
［参照：サヴール・ド・ラ・メール様］

bana_simple05

★メリハリを付け、コア業務を引き立たせる。
メインとなる業務（商品）を目立たせることで、その業務の雰囲気が、グッと良くなります。
［参照：株式会社オカザキ様］

bana_simple06

★ベーシックの中にある、柔らかさ。
写真と文字のトーンを合わせることにより、どこか柔らかさのあるバナーに仕上がります。
［参照：二輪処グループ様］

bana_simple07

★横長長方形じゃなくてもイイんです。
そうです。何もバナーは横長長方形じゃなくてもイイんです。
＜※こちらのバナーは商材（六角レンチ）に合わせたボタン設計＞
［参照：富士工業株式会社様］

bana_simple08

★写真の隙間に文字を配置。
一般的な概念はコレです。（写真の場合）被写体の上に文字を載せるよりも、隙間に配置することでバランスがよくなります。
またそのスペースが単色であれば有るほど、よりシャープになります。
［参照：bolda 様］

オーソドックスなバナーデザイン

bana_normal01

★背景に溶け込ませた枠なしバナー。
強弱・多彩、バランス良く配置することにより、枠がなくても「クリックを促す」バナーデザインに仕上がります。
［参照：T&N AUTO 様］

bana_normal02

★人の気配を感じるデザインはイメージを崩さないように。
バナーで一番むずかしいのが、写真に対しての文字配置です。
またそれが人の場合、色味が多彩になってしまうため、可視性がどうしても悪くなってしまいます。
双方の印象が崩れないように、配置を考慮し、より魅力的なデザインにすることが最重要です。
※顔の上に文字が被っているの見ると気になりませんか？？？
［参照：2次会ティアラ様］

bana_normal03

★トリミング×斜め配置。
こちらも王道です。
商品・機材のような「モノ」で配置すると効果的です。
※注意：「建物」を斜めに配置すると“潰れそうな印象”を受けてしまうのであまりオススメしません
［参照：ユリヤ様］

bana_normal04

★写真と文字に緩急を。
勢いのある写真に勢いのある文字を乗せると、インパクトが全面に出過ぎて、何が言いたいのか分からなくなる時があります。
もちろんそういったデザインが必要なケースもあるのですが、サイドバーに設置するバナーのサイズ程度であれば、写真と文字には緩急を付け、シンプルに配置しましょう。
［参照：テニスクラブ大原野様］

bana_normal05