ビジネスとIT活用に役立つブログBlog


伝わりやすいバナーをデザインするポイント(フォントと色の選び方編)

シリーズ「伝わりやすいバナーをデザインするポイント」、今回は「フォント」と「色」の効果的な選び方についてご紹介します。
魅力的なバナーを作成したいけれど、画像等の素材がない…という場合でもフォントと色を工夫するだけで伝わるバナーを作ることが出来ます。

ターゲットを決める

まずは作成するバナーがどのようなユーザーに興味を持ってもらいたいか定義します。
ターゲットとなるユーザーによって選ぶフォントや色が変わってきますので、あらかじめターゲットユーザー像を明確にしておきましよう。
ターゲットを決める上で考慮すべき情報は性別・年齢、職業やライフスタイル等色々な条件はあるかと思いますが、今回は簡単に「男性」「女性」「こども」の3つをターゲットとしたバナーを作成していきます。

バナーの制作手順

1. フォントを決める

設定したターゲットに合わせて、フォントを選んでみましょう。
フォントは種類や太さ、文字の詰め方によって様々な雰囲気を演出できます。
どのようなフォントがどのような印象を与えるのかまとめてみました。

フォント印象

「細い」「柔らかい」⇒繊細、女性的
「太い」「堅い」⇒力強い、男性的
「太い」「柔らかい」⇒活発、楽しい
「細い」「堅い」⇒落ち着いた、格調の高い

ではフォントの印象から3つのターゲットの印象に合ったものを実際に選んでいきます。
今回は名刺のネットショップのバナーを想定して作成しました。

ターゲット:男性

男性バナー001

使用フォント:ヒラギノ角ゴ

ターゲット:女性

女性バナー001

使用フォント:はれのそら明朝

ターゲット:こども

子供バナー001

使用フォント:秀英丸ゴ

いかがでしょうか。
同じ文言、配置でもフォントの選び方によって受ける印象が変わってきます。

2. 色を決める

フォントが決まったら、次は色を決めてさらに求めるイメージに近づけていきましょう。
それぞれのターゲットごとに連想される色をまとめてみました。

男性的な色

女性的な色

こどもっぽい色

ではこれを参考に実際にバナーに色をつけていきましょう。よりターゲットに合わせた印象が強くなっていきます。

ターゲット:男性

男性バナー002

ターゲット:女性

女性バナー002

ターゲット:こども

子供バナー002

3.ワンポイントを入れる

文字だけでは少し寂しいので、アイコンを用いてワンポイントを入れています。
フリーのアイコンを提供しているサイトもあるので、こういったものを利用すれば簡単にクオリティの高いアイコンが手に入ります。
参考:icon rainbow(商用フリー) http://icon-rainbow.com/

ターゲット:男性

男性バナー003

ターゲット:女性

女性バナー003

ターゲット:こども

子供バナー003

全体的な調整としては名刺のアイコンをとラインを入れました。
男性向けは力強い印象を強調するためにラインを太くし、女性向けは柔らかさを出すために店名を湾曲させています。
こども向けは元気な印象になるように色数を増やし、また親しみやすさや柔らかさをプラスするために文言をひらがなにしました。
少し手を加えるだけで、単純に文字を置いただけのデザインより凝った印象になったかと思います。

色々な雰囲気の演出方法

ここまで紹介した方法以外の演出方法をご紹介します。

高級感を出したい場合

高級感バナー

明朝体で優雅さを、明度の低い色で重厚感を出します。
文字は浮き出たような演出にしました。

ナチュラルな雰囲気を出したい場合

ナチュラルなバナー

自然の風合いを感じさせるような色を選び、素朴で優しさの感じられるフォントにしました。

さいごに

フォントと色の使い方だけで、受ける印象が異なってくることがお分かりいただけたでしょうか。
バナー作成に悩んだ際には、ターゲットの人物像に振り返り、どのような雰囲気が好ましいのか考えてみると良いかもしれません。
少しでも参考になれば幸いです。

The following two tabs change content below.
アーティス

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!