レイアウトのコツ⑦ フチくくり文字を使うのを避けるんだー！
ひさしぃぶ～りに手を引いて～♪ 間違えた！(^o^；) ひさしぶりにレイアウトのコツシリーズ7回目です。
今日は「フチくくり文字を避けるレイアウト」です。フチくくり文字とはその名の通り、文字のまわりに文字とは違う色のフチ（縁）をつけて二重、三重、に文字をふくらませたようなタイポグラフィのことです。
フチくくり文字は、背景がどんなにゴチャゴチャしていようと、文字を読みやすくするための効果として使われることが多いものです。でも、やりすぎるとスポーツ新聞の見出しのようになってしまい上品さに欠けるデザインになりがちです。ですからデザオも、学生さんには、できるだけフチくくり文字を使わなくて済むようなレイアウトを初めから考えるように指導しています。
しかし、スポーツ新聞のような極端な例でなくとも、ごく普通に写真と文字をひとつの画面でレイアウトしようとすると、すぐ起こってしまうのが、写真と文字の重なりなんです。ですから、この部分を最初（サムネイル頃）から意識しているかどうかで、レイアウトが上手くおさまるかどうかに大きく差がつくのです。
たとえば冒頭の画像をもう一度ここに出してみましょう。京阪電車のポスターで、京阪電車に乗って京都の萬福寺へ行きましょうという主旨のポスターですねー。
ひと目見てお気づきのように、1枚の写真をフルトリミング（画面の端まで使うこと）して、リードコピー+ボディコピーが画面中央に上ゾロエ（天ゾロエ）の文字組で配置されています。
背景の萬福寺の写真は奥の建物のほうに日が射していて、画面下側（手前）の通路はこちらへ来るにしたがってわずかづつですが暗くなっています。遠近感があり、奥の建物が神々しく見える効果的な良い写真かと思います。
しかし、その暗めの地面の上に、白抜き文字でボディコピーをレイアウトしてしまっては、読みにくくなります。（＝可読性が低くなる）大きな文字ならいざ知らず、ボディコピーも少し読ませるタイプですから文字もある程度小さく、文字数も多いです。
上のようにボディコピー部分を拡大すると、ボディコピーの白抜き文字のまわりに、茶系のグラデーションがぼわーんと入れてあることに気づきます。これは普通に文字を白で抜くだけではあまりに読みにくいことに気づいたので、少しでも読みやすくするために入れたのでしょう。
デザオは、よくあるこのデザイン処理も一種のフチくくり文字のようなものだと思っています。これがグラデーションか、くっきりとしたフチかの違いだけで、白い文字を読みやすくするために文字のまわりに色を入れるということは同じですから。
このような処理をすることで、近くで読もうとしたときに「読めない」という広告として最悪の事態は避けられます。上の画像を拡大して見てください。ちゃんと読めます。つまり判読はできるのです。
しかしこれはポスターです。歩いているときに遠くから引きで眺めて、興味を持ったら読んでほしいという性質の広告です。下のように引きで見るのです。
ゴチャゴチャして見えませんか？
このように、文字をグラデーションで囲むことも含めたフチくくり文字は、遠くから見るとゴチャゴチャして、近くに寄ってみても読みにくく、かなり近くまで顔を近づけないと読めないくらいに可読性を下げてしまうことが多いです。ですから、できるだけ避けるのがベターなのです。
しかしたとえば、この萬福寺のポスターなら、それは撮影する前、サムネイルの時点からわかっていたはずのことです。ボディコピーが読みにくくなるだろうなということがです。なら、どうして最初からそのためのレイアウト対策をしないのか？と疑問です。もしかしたら最初から、ボディコピーが読みにくくなったら文字のまわりにグラデーションでも入れればいいなとわかっていてプランを進めているかもしれませんが・・・。
リースフォトの人気画像は余白のある画像
リースフォトという便利なサービスがありますよね。撮影経費を抑えるために、あらかじめ用意された写真を借りてリース代を払うのです。そのリースフォトの常識は、デザイナーが文字をレイアウトしやすいように、背景など余白を広くとった写真を用意しておくということです。
川の堤防を歩く子供の写真があったとしましょう。空の抜けを広くとったり、芝生部分は一眼レフ風のボケ足を広くとって、雑草のディテールがわからないようにぼかしておくなど、あとから文字をレイアウトしやすい空間をたっぷりとっておくと使用されやすいのです。
それくらい写真と文字のレイアウト関係は「超」がつくほど基本的なレイアウトの注意事項です。
世の中の広告にあふれる「写真と文字のフチくくり戦争」
そう思って街中の広告を見渡してみてください！面白いことに気づくと思いますよ。いかにたくさんの広告が文字の入れ方に困ってフチくくりしているかをです。たとえばこの阪急百貨店のポスターを見てみましょう。デザオが、ピンクで3つ丸い囲みを入れました。
10,800円コート特集と、5,400円ニット特集のところがモデルの写真と重なっているので、白で細いフチくくり処理をしています。婦人服大処分市のタイトルもメインのモデルと重なっているのですが、文字がある程度大きいので、フチをくくらなくても読めるだろうと判断してフチくくりをしていません。ゴチャゴチャするのがわかっているのでここは避けたわけです。しかし、9・10階催場のところはスミ文字と黒いパンツが重なるので、フチをくくらざるを得ませんでした。
このように、注意深く見ると、デザイナーの「写真と文字が重なる部分が読みにくくなること」を何とかする苦労が手に取るようにわかりますね（笑）
このような内容の広告の場合は、ファッション写真は縦長で、強調したい値段は横長なので、どうしても普通のレイアウトでは重なる部分をどうするかが必然的な「いつもの」問題として生じます。それを毎回、安易にフチくくりでいいやん、としてあきらめているとしたら、それは阪急のデザイナーの怠慢か、どうせ毎週の催事のポスターやからそこまで凝らなくていいやん、という軽視でしょうね！
フチくくりによって、レイアウトの質が低下していることは、実は多くのデザイナーがわかっている常識問題なのです。ですから、デザインの勉強をしている学生さん！上手いレイアウトを考える上でこのポイントは重要ですよ～。
いつもクリックありがとうございます！
↓FC2ブログランキング、にほんブログ村、人気ランキングに参加しました。
それぞれ1クリックしてくださるとデザオとっても嬉しいですオー！よろしくお願いします！
にほんブログ村
デザイン・アート ブログランキングへ
ひと目見てお気づきのように、1枚の写真をフルトリミング（画面の端まで使うこと）して、リードコピー+ボディコピーが画面中央に上ゾロエ（天ゾロエ）の文字組で配置されています。
背景の萬福寺の写真は奥の建物のほうに日が射していて、画面下側（手前）の通路はこちらへ来るにしたがってわずかづつですが暗くなっています。遠近感があり、奥の建物が神々しく見える効果的な良い写真かと思います。
しかし、その暗めの地面の上に、白抜き文字でボディコピーをレイアウトしてしまっては、読みにくくなります。（＝可読性が低くなる）大きな文字ならいざ知らず、ボディコピーも少し読ませるタイプですから文字もある程度小さく、文字数も多いです。
上のようにボディコピー部分を拡大すると、ボディコピーの白抜き文字のまわりに、茶系のグラデーションがぼわーんと入れてあることに気づきます。これは普通に文字を白で抜くだけではあまりに読みにくいことに気づいたので、少しでも読みやすくするために入れたのでしょう。
デザオは、よくあるこのデザイン処理も一種のフチくくり文字のようなものだと思っています。これがグラデーションか、くっきりとしたフチかの違いだけで、白い文字を読みやすくするために文字のまわりに色を入れるということは同じですから。
このような処理をすることで、近くで読もうとしたときに「読めない」という広告として最悪の事態は避けられます。上の画像を拡大して見てください。ちゃんと読めます。つまり判読はできるのです。
しかしこれはポスターです。歩いているときに遠くから引きで眺めて、興味を持ったら読んでほしいという性質の広告です。下のように引きで見るのです。
ゴチャゴチャして見えませんか？
このように、文字をグラデーションで囲むことも含めたフチくくり文字は、遠くから見るとゴチャゴチャして、近くに寄ってみても読みにくく、かなり近くまで顔を近づけないと読めないくらいに可読性を下げてしまうことが多いです。ですから、できるだけ避けるのがベターなのです。
しかしたとえば、この萬福寺のポスターなら、それは撮影する前、サムネイルの時点からわかっていたはずのことです。ボディコピーが読みにくくなるだろうなということがです。なら、どうして最初からそのためのレイアウト対策をしないのか？と疑問です。もしかしたら最初から、ボディコピーが読みにくくなったら文字のまわりにグラデーションでも入れればいいなとわかっていてプランを進めているかもしれませんが・・・。
リースフォトの人気画像は余白のある画像
リースフォトという便利なサービスがありますよね。撮影経費を抑えるために、あらかじめ用意された写真を借りてリース代を払うのです。そのリースフォトの常識は、デザイナーが文字をレイアウトしやすいように、背景など余白を広くとった写真を用意しておくということです。
川の堤防を歩く子供の写真があったとしましょう。空の抜けを広くとったり、芝生部分は一眼レフ風のボケ足を広くとって、雑草のディテールがわからないようにぼかしておくなど、あとから文字をレイアウトしやすい空間をたっぷりとっておくと使用されやすいのです。
それくらい写真と文字のレイアウト関係は「超」がつくほど基本的なレイアウトの注意事項です。
世の中の広告にあふれる「写真と文字のフチくくり戦争」
そう思って街中の広告を見渡してみてください！面白いことに気づくと思いますよ。いかにたくさんの広告が文字の入れ方に困ってフチくくりしているかをです。たとえばこの阪急百貨店のポスターを見てみましょう。デザオが、ピンクで3つ丸い囲みを入れました。
10,800円コート特集と、5,400円ニット特集のところがモデルの写真と重なっているので、白で細いフチくくり処理をしています。婦人服大処分市のタイトルもメインのモデルと重なっているのですが、文字がある程度大きいので、フチをくくらなくても読めるだろうと判断してフチくくりをしていません。ゴチャゴチャするのがわかっているのでここは避けたわけです。しかし、9・10階催場のところはスミ文字と黒いパンツが重なるので、フチをくくらざるを得ませんでした。
このように、注意深く見ると、デザイナーの「写真と文字が重なる部分が読みにくくなること」を何とかする苦労が手に取るようにわかりますね（笑）
このような内容の広告の場合は、ファッション写真は縦長で、強調したい値段は横長なので、どうしても普通のレイアウトでは重なる部分をどうするかが必然的な「いつもの」問題として生じます。それを毎回、安易にフチくくりでいいやん、としてあきらめているとしたら、それは阪急のデザイナーの怠慢か、どうせ毎週の催事のポスターやからそこまで凝らなくていいやん、という軽視でしょうね！
フチくくりによって、レイアウトの質が低下していることは、実は多くのデザイナーがわかっている常識問題なのです。ですから、デザインの勉強をしている学生さん！上手いレイアウトを考える上でこのポイントは重要ですよ～。
いつもクリックありがとうございます！
↓FC2ブログランキング、にほんブログ村、人気ランキングに参加しました。
それぞれ1クリックしてくださるとデザオとっても嬉しいですオー！よろしくお願いします！
にほんブログ村
デザイン・アート ブログランキングへ
スポンサーサイト
| デザインの基本（実践編） | 12:00 | comments:0 | trackbacks:0 | TOP↑
