文字に気を配ってわかり易くする（バナー制作編３）

こんばんは。今回の地震によって被災された皆様、お見舞申し上げます。私にできることを考えた結果、「アウトプットを止めない」ことだと思いましたので、このブログ更新も再開したいと思います。今、大変な状況に置かれている方へのエールとして、稚拙ではありますが私なりの「作って喜ばれること」を続けていきたいと思います。

では、バナー制作の続きを。

文言に優先順位をつける

今回のバナーに入れる文言は、

１．予約受付中！
２．天使が届ける
３．フラワーボックス
４．先着50名様プレゼント
５．詳しくはこちら

の５つです。

この中で一番伝えたい文言は、さてどれでしょう？悩みますねー。

１.「予約受付中！」
確かに重要。「今」感を伝える文言ですが、でかでかと「予約受付中！」としても、「何が？」となります。
バナー等は、入口として設置されますので、クリックした先に何かしらの説明ページがあります。それを読んで「予約」というアクションを起こしますので、
説明ページで「予約はこちら」という文言を大きく扱うのはアリですが、入口のバナーでは「ほどほどに目立つ」程度で良いと判断。

２.「天使が届ける」
この５つの中で一番意味がわからない文言です。天使って。。。本当に天使がいるわけでもないですし。。
（サービスとして天使のコスチュームを着た美少女が届けてくれるのかもしれません。。ないか。）
しかし、キャッチーな言葉ではあります。「どういうことだろう？」と疑問を持ってクリックしてくれるかもしれません。なので、そこそこ重要。

３.「フラワーボックス」
商品名（サービス名）になりますので、いわゆる「看板」です。もしかしたら、このサービスがウケて、母の日などに「フラワーボックス」と検索してくれるかもしれません。つまり、「覚えて欲しい」言葉です。ですので、これが一番印象強くしたいので、一番重要。

４.「先着50名様プレゼント」
フックになる言葉です。「何かもらえる」と思ってもらってクリックしてほしい。ですので、こちらもそこそこ重要。

５.「詳しくはこちら」
バナー制作では欠かせない文言ですね。そして、大体右下にあるのが定石です。

と、以上から考えて「フラワーボックス」＞「天使が届ける」＞「予約受付中！」という優先順位になりました。
この順位で、文字の大きさを変えてレイアウトしてみましょう。

それぞれの文字色については「予約受付中！」は影の色、「天使が届ける」は茎の色、「フラワーボックス」はお花の色から抽出し、文字色を決定しています。
こうすることによって、写真との馴染みがよくなり、変に浮き立つことはなくなります。

さらに、「フラワーボックス」にだけグラデーションを適用して、より目立たせています。
文字を目立たせる方法として太字にすることがありますが、今回の場合はお花の可憐さや華奢な感じから離れてしまうので、
グラデーションをつけることによって目立ち度を調整しています。

文字配置後の処理に気を配る

文字間に気を配ると、より読みやすくなります。私がよくやるのは、文字パレットにある「文字間のカーニングを設定」で「オプティカル」を選んでおくこと。

分かりやすいところだと、「フラワーボックス」の「ク」と「ス」の間が微妙に違っていると思います。
１文字づつ、カーニングを調整した方が良いですが、この「オプティカル」をチェックしておくと、大体きれいに揃うので、後は気になるところを微調整していけばいいと思います。

そして、写真と文字が重なっているところは、可読性を増すために、一工夫します。
文字自体にレイヤー効果の「境界線」や「光彩」をかける時もありますが、今回のイメージにはあいません。
こういうときは、文字の後にボケあしのあるブラシで不透明度を下げた白を軽くポンポンと描いていきます。
私がよく使うブラシはボケあしのある100pxのやつです。

こうすることによって、いかにも「加工した」っぽい感じにならないで、可読性を増すことができます。
ぱっと見、分かるか分らないかのところを見極めて白を置いていきましょう。

では、今回はここらへんで。
次回は、「先着50名様にプレゼント」の部分のお話です。