背景に画像の上に文字を載せる場合、背景と文字の色が干渉して読みにくくなることがある。その場合によく使われるのが文字にふちの加工を施したフチ文字だ。
IllustratorやPhotoshopでの加工が簡単で、効果が分かりやすいために安易に使われることが多い。ただしフチ文字の処理をしたために逆に読みにくくなることもある。
文字の処理方法は、プロデザイナーとノンデザイナーで大きく差が出る部分である。
文字に使うフチや影の種類
先日、あるバンドのCDライナーノーツに目を通していたらとても読みにくかった。職業柄担当したデザイナーの名を確認する。やはりプロのデザイナーではなかった。ノンデザイナーは読みやすさよりもつい見た目の格好良さを選んでしまう。仕方のないことだが。
ロゴやタイトル、見出しなどの文字数が少なく大きなサイズの文字にフチや影を使うのは、その効果を狙っているので使って構わない。ここで問題とするのは、それ以外の文字が多目の本文に関してである。
背景と本文文字の干渉を防ぐためにプロのデザイナーが使う加工方法は大体以下の何れかだ。
ただし本文の文字に関しては、フチも影も使わないのが基本。理由は本文などの比較的小さな文字にこれらの加工をすると逆に可読性が落ちるからだ。
背景が上の画像のように割りと色が均一な場合は、文字の色を白にすれば十分に可読性も良く、フチや影を付ける必要はない。また加工の前に背景画像と文字が干渉しないように画像の拡大縮小、または移動を試みてなるべく加工はしない。
フチや影を使用する場合
背景に画像を使用する場合、上の画像のように全体的に色が均一の場合は未加工で問題ないが、むしろ均一ではない場合の方が普通だろう。
このような背景画像の場合、色が濃い部分の文字は読めるが、右下の部分は色が薄くなり、白文字と背景画像が干渉して読めない。
上の例はノンデザイナーがやりがちな例である。
文字にフチを付けさらにぼかしている。その結果可読性は増すが、本文フチ文字と背景のコントラストが強くなり長い時間文字を読む気にはならない。ベッタリとした感じで疲れる。見出し文字は問題ない。ノンデザイナーは効果が強いほど自己満足感が得られるというのもつい加工してしまう理由だろう。商業デザインの場合は読者のことをつねに考えなければならない。
読みやすくするプロの処理方法
ではこのような背景画像の場合、プロならどのような処理をするだろうか。
背景画像の上に地色を敷く
背景画像と文字のコントラストを少なくするために、その上に乗算50％で黒の地色を敷いている。加工は簡単だが、地色と背景画像の境界が目立ち、また背景が見にくくなるのが弱点だ。
背景画像の色を調整
背景画像自体の色味を加工するのも一案。上の例では背景画像に黒のカラーオーバーレイを乗算30%で適用し暗くしている。WEBサイトのヘッダー画像によく使われている手法だ。可読性は増している。背景画像が見えて、かつ文字も読める適度な境界を探るのがデザイナーの腕の見せどころ。
影（ドロップシャドウ）を付ける
文字に影（ドロップシャドウ）を付けた例。この場合は可読性が悪いので合わない。背景画像と文字のバランスを見て読みやすく最適な処理方法を先述の例も含めて考える。ちなみに上の例では文字の下に右に2px、下に2pxずらした（オフセットした）影を付けている。
ノンデザイナーがやりがちな例
上は本文文字が黒の例。これくらいの色味の背景画像であれば、文字と背景画像に加工の必要はない。しかしここで何故か可読性とは別の感覚で、文字にフチを付けてしまう例をよく見る。上下2つを比べてみると、上の方が洗練されていて、下の方が野暮ったく見えるだろう。IllustratorやPhotoshopのTipsを知ったからと言って無理に使う必要はない。
まとめ
以上、フチ文字の扱いについて解説してきた。次の順に試してみることをお勧めする。
- 本文に使う文字は加工しない。タイトルや見出しに使う文字は別
- 背景画像により可読性が落ちる場合は文字加工ではなく、まず背景の拡大縮小または移動を試す
- 背景と文字の間に色の付いた地を敷く、または背景の色加工
- 文字に影（ドロップシャドウ）を付ける
- 以上でも読みにくい場合は、文字に控えめにフチを付ける
