写真の上に文字を配置することは、メインビジュアルなどでよく行います。

そのとき、写真が差し替えになるなどして、写真と文字の相性が悪く、

文字が目立たなくなってしまうことも、よくあります。

 

その際に、文字の色を変えられるなど自由度が高ければ、

文字が目立つようにデザインを変更することも楽なのですが、

文字の色を変えるとサイトの印象が変わってしまったり、

お客様のご要望で変えることができない場合もあります。

 

こういった場合に、どうやったら目立たせることができるのか、

Photoshopを使ってできる範囲で、７つほど方法を考えてみました。

 

今回試してみたのはこちらの写真。文字の色は白

文字が写真とやや同化して、とても文字が見づらくなっています。

 

1.文字の配置を変更する

修正後↓

修正前↓

文字の位置を変えられるのであれば、真っ先に試したい方法です。

 

この写真の場合、はじめの位置ではタンポポの綿毛の色と文字の色が同系色で、

文字が写真と同化してしまい見づらいですが、

右下の辺りに文字を配置すれば、写真と文字のコントラストがはっきりとして見やすくなります。

 

ただ、文字の位置を変更できない場合もよくあります。

そういったときの方法について考えてみます。

 

2.文字の後ろにプレートを敷く

修正後↓

修正前↓

文字と写真、両方と相性のいい色のプレートを、文字と写真の間に敷くことで、

両方のバランスを保ちながら、文字を目立たせることができます。

 

ただこの方法ですと、写真を一部隠してしまうことになります。

今回はプレートを半透明にして、できるだけ写真を隠す量を減らすように考慮してますが、

それでもやはり、プレートの部分は写真が見づらくなります。

場合によっては使用できないことも多いです。

 

3.背景と文字の間に境界線を置く

修正後↓

修正前↓

文字と写真の間に境界を設けることで、文字を目立たせることができます。

プレートを置く方法よりも、写真を隠してしまう範囲が小さくて済みます。

 

ただこの方法ですと、文字自体のイメージが変わってしまうことが多いです。

落ち着いたイメージや、高級感を出す場合には、この方法は向きません。

 

4.袋文字にする

修正後↓

修正前↓

背景と文字の間に境界線を置く方法の、文字と境界の色を逆にしたものです。

先程と同様に文字を目立たせることができます。

 

ただやはり、こちらも文字自体のイメージが変わってしまうことが多いので、

使う状況に注意が必要です。

 

5.ドロップシャドウを置く

修正後↓

修正前↓

写真をほとんど隠すことなく、文字を引き立てることができます。

 

ただ、プレートや境界線を置く方法に比べると、文字を目立たせる効果はどうしても小さくなってしまいます。

 

6.レイヤー効果の「光彩(外側)」を描画モード「乗算」で置く

修正後↓

修正前↓

効果がかかっているのをできるだけ見る人に気づかせずに、

文字を目立たせるのに効果的な方法です。

 

ただ、気づかれないように効果を抑えれば、その分だけ文字を目立たせることが難しくなります。

効果をつけすぎると、印象を変えてしまいますので、加減の調整が必要です。

 

7.文字周辺のコントラストを下げる

修正後↓

修正前↓

今回の写真のように、情報量の多い写真の上に文字を置く場合に効果的です。

ごちゃごちゃとした感じを抑えて、文字を目立たせることができます。

 

ただ、写真の色や明るさなどの情報が一部少なくなり、写真の印象が変わってしまうこともあるので、

使い方や、加減に注意が必要です。

 

 

いずれの場合も、全体のデザインに合わせて臨機応変に使い分けて、加減を調整することが必要です。

いかに写真と文字のコントラストを高めるかがポイントになります。

 

限られた条件の中で、どういったことができるのかを模索することは、

難しい作業ですが、

あらゆる状況に対応できるように、より多くの方法を見つけていきたいです。