|
|
 |
文字や飾りの色は美しいだけでなく、見やすいものを選ぶようにしましょう。
写真のどの部分に配置するかも大切なポイントです。 |
|
画像に文字や囲みなどの飾りを組み合わせてるときに迷うのが色でしょう。何度色を設定しなおしても、他の色のほうが良いような気がすることはありませんか？また、どの色も良く思えて決められないこともあるでしょう。特に文字の場合は、美しいだけでなく読みやすい色を選ぶ必要があります。写真と相性が良く、かつ読みやすい色を選ぶコツを解説します。 |
|
写真に配置するものの色を選ぶ際、最初に候補として試してみたいのが、写真の中に使われている色です。洋服を選ぶときに、同系色でコーディネイトすると失敗が少ないのと同じで、写真のなかに使われている一番印象的な色を使うと、全体に統一感が生まれます。例えば写真Aに文字と飾りを配置し、目の色と似た緑色にしたのがBです。統一感があり落ちついた感じになっています。
ではほかには合う色がないかというと、そうではありません。メインの色がくすんだ渋めの色なので、くすんだ渋めの色であれば他の色でも大丈夫です。CとDは目の色と違う色にしたために、Bとはまた違ったムードになりますがそれなりにきれいに見えます。このように同じような調子の色（ここではくすんだ渋めの色）のことを同じトーンの色ということがあります。
つまり文字や飾りは写真の中に使われているのと似た色か、または同じトーンの色にすると、きれいに見えるといえます。ためしに色もトーンも全く異なるようにしてみたのがEとFです。ちぐはぐな感じで、あまりしっくりきませんね。 |
|
|
 |
|
 |
| A 緑の目が印象的な写真です |
|
B 文字や飾りを目と似た色にすると、違和感なく落ち着いた感じになります |
|
 |
|
 |
| C,D 目の色と同じトーンであれば他の色でも美しい組み合わせになります |
|
 |
|
 |
| E,F 色味もトーンも違うと、写真の雰囲気にあいません |
|
|
|
| 文字や矢印のように意味のあるものの場合は、ぱっとみて形を判別できるかが重要になります。美しいということだけでなく、判別しやすい色を選ぶのもポイントです。写真Aの文字は空と同じ色を使用しているので相性は良いのですが、ぱっと見たときに文字の形を判別しにくく読みづらいですね。Bは文字を白くしたものですが、こちらのほうが読みやすく全体的にすっきりとしました。 |
|
|
 |
|
 |
| A 空と同じ水色の文字です。配色のバランスは悪くありませんが読みにくいです |
|
B 文字を白くしました。読みやすくなりました |
|
|
|
このような、形の認識しやすさのことを「視認性」といい、形をハッキリと判別できる色の組み合わせを「視認性が高い」といいます。以下にいくつかの背景と文字の色の組み合わせをあげてみますが、視認性の高い（読みやすい）ものと低い（読みにくい）ものと分類してみてください。
分類してみると、視認性の高いものは背景と文字との明るさの違いが大きいことに気づくでしょうか。グレー階調に変換してみると、視認性の高いものほどくっきりと白黒の差がつきます。文字を配置する際には、すぐ背面にある色と大きく明暗の差をつけると、読みやすくなるということです。 |
|
|
 |
| 背景と文字の色の組み合わせのバリエーションをつくってみました。読みやすいのはどれですか？1、3、4が読みやすいのではないでしょうか |
|
|
|
 |
| 上の図をグレースケールに変換しました。読みやすかった1、3、4は明暗の差が大きいのがわかります |
|
|
|
ここまでをまとめてみると、写真に配置する文字や飾りの色は、写真に使われている印象的な色を基準に似た色か同じトーンのものを選び、読みやすいように文字のバックと明暗の差をつけるということがポイントです。文字や飾りの色を操作するのも良いですし、写真を加工する方法もあります。ちなみに、最初に例として挙げた目の画像はもとは下のCのように全体にもう少し暗いものでした。ここに目と同じ緑の文字を配置しても視認性が低く見にくい場所があるので、目の周囲を明るくして明暗の差をつけ見やすいように加工したのです。
これらのことをふまえておけば、写真に馴染ませてあまりはっきりと見せたくない文字や飾りは、逆に視認性の低い色を選ぶといったデザインも出来ます。
文字の読みやすさは、色だけではなく文字の太さも関係してくるのですが、それについては機会を改めて解説したいと思います。 |
|
|
 |
|
 |
| C このような写真に暗い文字をのせると、視認性が低い部分がでてきます |
|
D 写真を加工して文字や飾りを目立たせました |
|
|
|
写真全体が同じような色で構成されている場合、文字を同じ色にするとまったく見えなくなってしまいます。そのようなときには、どのように色を選べばよいでしょうか。
まず試してみるのは、白か黒です。特に写真の色が鮮やかで強烈なものほど、他の色を直接配置すると色同士がぶつかりあって品のない仕上がりになります。白や黒は色味をもたないので、どんな色にも合う万能選手といえます。 |
|
|
 |
|
 |
| A 強烈な濃い色の上には白い文字が合います |
|
B バックが明るい色なら黒い文字にします |
|
|
|
| 白や黒ではものたりない場合や、写真の色があまり派手ではないのであれば、文字に色をつけてもよいでしょう。写真の色の同系色か、同じトーンで明暗に大きく差をつけたものを試してみましょう。違和感なくあうはずです。 |
|
|
 |
  |
| C 青っぽい氷の影の色にあわせて、同系色の暗い青にしました |
D 白い文字でもきれいですが、道の色と同じトーン（土や緑のようなアースカラー）の暗い色も合います。これは遠くの木の色と同じです |
|
|
|
写真には様々なものが写っていて、必ずしも文字や飾りをのせやすいものばかりとは限りません。例えば、下の二ABつの写真は文字や飾りを載せにくい写真の代表的な物です。
Aは画面の明暗が大きく分かれていて、明るい部分では読みやすい文字や飾りも暗い部分では読みにくくなってしまいます。またBは、全体に沢山の色が混在していて、文字や飾りを配置できる場所がありません。むりやり配置してみましたがやはり見にくくなってしまっています。
このような写真には文字や飾りをくみあわせないで、別の写真を使うことが望ましいのですが「どうしてもこれを使いたい」というときには視認性を高くする工夫が必要です。 |
|
|
 |
|
 |
| A 明暗が途中で大きくわかれていて文字や飾りが部分的に見にくくなってしまいます |
|
B 全体に色や明暗が混在していて、文字や飾りを配置すると見にくくなります |
|
|
|
このような写真に配置した文字や飾りを見やすくするために、良くある手法としてはCのように文字や飾りの色を途中で変えたり、Dのように白フチ・黒フチとよばれる縁取りをつけたりします。しかし、これは場合によってはあまり美しくなく、野暮ったい感じを与えます。そこで、美しくかつ見やすくなるような処理を考えます。たとえば、縁取りでも白や黒の線ではなくて、文字や飾りが少し浮き上がったような影をつけたものがE、発光したような白いぼかしをつけたのがFです。また、Gのように文字がある部分の写真の色を補正して、見やすくする方法もあります。
文字や飾りをもっと目立たせたいのであれば、HのようにPhotoshopのレイヤー効果を使って立体的にしたり質感をつけたりしても良いでしょう。ただし、これは写真よりも目立ってしまうことがあるので注意が必要です。 |
|
|
|
 |
C バックの写真に合わせて文字と飾りの色を途中で変えましたが、あまりかっこよくないようです |
|
 |
D 周りにフチをつけてみました。読みやすくなりましたが、もう一工夫ほしいところです |
|
 |
|
|
 |
E 背面の写真の色を補正して文字と飾りが見えるようにしました |
|
 |
F 文字と飾りが発光したようなぼかしをつけました |
|
 |
G 文字と飾りの背面に影をつけました。読みやすくなったばかりでなく浮き上がったような奥行きが生まれました |
|
 |
H レイヤー効果で文字と飾りをガラスの質感にしました |
|
|
|
|
