ブログ

2016.02.26

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

Web制作

こんにちは、青木です。

弊社では、バナー広告を活用してお客様の集客のお手伝いをしております。
まずは下記の【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)と、非常に高解像度になっております。クリックをしてもらうためにも文字の細部までこだわってバナー広告を制作することが求められます。今回の事例も試してみてはいかがでしょうか。

WEBコンサルティング

最適化・最大化させる。

制作、集客、解析、改善、検証まで一気通貫した完全オーダーメイドのWebコンサルティング。
お客様のビジネスゴールに向けた戦略的コンサルティングを行います。

VIEW MORE くわしく見る

ホームページ制作

キレイなだけじゃない。

競合分析・サイト設計から更新・運用までトータルサポート。
Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。

VIEW MORE くわしく見る

ネット集客・広告

来てほしい人が来てくれる。

御社にとっての最適解は、本当にリスティング広告で集客することですか?
リスティング運用者全員がWebコンサルタントのアクシスでは、そこから話を始めます。

VIEW MORE くわしく見る

解析・分析・改善

あなたのサイトを丸裸に。

Webサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。
“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。

VIEW MORE くわしく見る

お問い合わせ

メールフォームからの
お問い合わせ