ブログ

クリックしてもらえる、綺麗で見やすいバナー広告の作成方法~文字編~

2016.02.26

弊社では、バナー広告を活用してお客様の集客のお手伝いをしております。
まずは下記の【A】と【B】バナーの文字を見比べてみてください。

【A】
300_250

【B】
300_250

こちらのバナーを比較すると、上のバナーでは文字がぼやけています。

しかし、下のバナーでは文字がはっきりと見えて文字が読みやすく見栄えも良いと思います。

バナー広告では指定されたサイズの中でいかにユーザーの興味関心を引くかということが重要になります。

そこで、今回は広告用のバナー制作に携わるデザイナーの方へ、小さい文字でも鮮明に見せるコツをお伝えします。

※Photoshop CS5の画面を使用してご説明させていただきます。

綺麗に見せる必要性

バナー広告の目的は、第一にユーザーにクリックしてもらうことです。

クリックをしてもらわなければ、集客には繋がりません。

文字が見えにくく何を伝えているのか分からないバナーでは、ユーザーは興味を引くことはないでしょう。

以上のことから、ユーザーがバナー広告を見て興味を引いてクリックしてもらうためにも、綺麗に見せる必要があると言えます。

文字がぼやけてしまう原因

上記のバナー画像はなぜ、文字がボケてしまったのでしょうか。

それは、Photoshopはビットマップデータで作られているからです。

ビットマップデータとは下記の画像のように色が付いた点の集合でできたものです。

ビットマップデータ
ビットマップデータの特徴として拡大や縮小を繰り返してしまうと、画質の劣化が生じてしまいます。

そのため上記のバナーでは画質が劣化して、ぼやけてしまっているのも1つの原因です。

文字や画像データの拡大や縮小は、自由変形(Windows:Ctrl+T / Mac:Cmd+T)で出来ますが、文字の拡大と縮小をするときには、フォントサイズの設定で行うようにしたら文字もぼやけにくくなります。

1px以下に注目

さらに1px以下までこだわると、さらに鮮明に文字を表示させることが出来ます。

先程のセクションで説明しましたので、フォントサイズの小数点以下を0にしていることを前提に進めていきます。

文字を入力し終えたら、自由変形で基準点を確認します。

小数点以下

基準点を見ると小数点以下が0になっていないので、小数点以下を0に修正します。

拡大表示して小数点以下を0にするとどうなるのかを比較してみます。

px比較
実際のサイズだと、変化はあまり感じられないかもしれませんが、拡大して”N”を比較すると、その差は歴然です。

フォントやサイズ、アンチエイリアスによって差が異なってきますので、細部までこだわると、さらにぼやけずに文字を表示することができます。

保存形式の差

最後にバナーを書き出すときの保存形式です。jpegとpng-24で比較していきます。まずはこちらの画像をご覧下さい。

jpegとpngの比較
拡大にしてみたときpngで書き出したバナー広告の方が鮮明で綺麗です。

しかしながらファイルサイズがjpegよりもファイルサイズが大きくなってしまうために、ファイルサイズの指定があるバナー広告の時にはjpegで画質を調整すると良いでしょう。

まとめ

昨今、PCでは、高解像度のRetinaディスプレイ。Androidのスマートフォンでは、WQHD(2560×1440px)と、非常に高解像度になっております。

クリックをしてもらうためにも文字の細部までこだわってバナー広告を制作することが求められます。今回の事例も試してみてはいかがでしょうか。

ホームページ制作・LP制作

集客やサイト改善などWebに関することなら、
何でもお気軽にお問い合わせください

ウェブ集客のご相談、見積り依頼などは、こちらからお問い合わせください

ご相談・お問い合わせ

サービスや実績などをまとめた会社案内は、こちらからダウンロードできます

会社資料ダウンロード

お急ぎの方はお電話でも相談いただけます

0120-439-241