弊社では、バナー広告を活用してお客様の集客のお手伝いをしております。
まずは下記の【A】と【B】バナーの文字を見比べてみてください。
【A】
【B】
こちらのバナーを比較すると、上のバナーでは文字がぼやけています。
しかし、下のバナーでは文字がはっきりと見えて文字が読みやすく見栄えも良いと思います。
バナー広告では指定されたサイズの中でいかにユーザーの興味関心を引くかということが重要になります。
そこで、今回は広告用のバナー制作に携わるデザイナーの方へ、小さい文字でも鮮明に見せるコツをお伝えします。
※Photoshop CS5の画面を使用してご説明させていただきます。
綺麗に見せる必要性
バナー広告の目的は、第一にユーザーにクリックしてもらうことです。
クリックをしてもらわなければ、集客には繋がりません。
文字が見えにくく何を伝えているのか分からないバナーでは、ユーザーは興味を引くことはないでしょう。
以上のことから、ユーザーがバナー広告を見て興味を引いてクリックしてもらうためにも、綺麗に見せる必要があると言えます。
文字がぼやけてしまう原因
上記のバナー画像はなぜ、文字がボケてしまったのでしょうか。
それは、Photoshopはビットマップデータで作られているからです。
ビットマップデータとは下記の画像のように色が付いた点の集合でできたものです。
ビットマップデータの特徴として拡大や縮小を繰り返してしまうと、画質の劣化が生じてしまいます。
そのため上記のバナーでは画質が劣化して、ぼやけてしまっているのも1つの原因です。
文字や画像データの拡大や縮小は、自由変形(Windows:Ctrl+T / Mac:Cmd+T)で出来ますが、文字の拡大と縮小をするときには、フォントサイズの設定で行うようにしたら文字もぼやけにくくなります。
1px以下に注目
さらに1px以下までこだわると、さらに鮮明に文字を表示させることが出来ます。
先程のセクションで説明しましたので、フォントサイズの小数点以下を0にしていることを前提に進めていきます。
文字を入力し終えたら、自由変形で基準点を確認します。
基準点を見ると小数点以下が0になっていないので、小数点以下を0に修正します。
拡大表示して小数点以下を0にするとどうなるのかを比較してみます。
実際のサイズだと、変化はあまり感じられないかもしれませんが、拡大して”N”を比較すると、その差は歴然です。
フォントやサイズ、アンチエイリアスによって差が異なってきますので、細部までこだわると、さらにぼやけずに文字を表示することができます。
保存形式の差
最後にバナーを書き出すときの保存形式です。jpegとpng-24で比較していきます。まずはこちらの画像をご覧下さい。
拡大にしてみたときpngで書き出したバナー広告の方が鮮明で綺麗です。
しかしながらファイルサイズがjpegよりもファイルサイズが大きくなってしまうために、ファイルサイズの指定があるバナー広告の時にはjpegで画質を調整すると良いでしょう。
まとめ
昨今、PCでは、高解像度のRetinaディスプレイ。Androidのスマートフォンでは、WQHD（2560×1440px）と、非常に高解像度になっております。
クリックをしてもらうためにも文字の細部までこだわってバナー広告を制作することが求められます。今回の事例も試してみてはいかがでしょうか。
