写真に文字を入れるときのデザインパターンと注意点

WEBデザインでも印刷物でも写真に文字を入れることはよくあります。
ブログやYoutubeのサムネイルのことも考えるとデザイナーに限らず写真に文字をのせることをしている人は多いのではないでしょうか。

しかし、うまく作れなかったり、きれいにできなかったりすることはありませんか？

うまいくいかない理由のほとんどは、写真の内容に無限のパターンがあるためだと思います。
この記事では、写真に文字をきれいに入れるためのデザインパターンと注意点をご紹介します。

文字の色は基本的に白か黒で良い

まず文字の色についてです。

特に理由が無ければ写真に入れる文字は白か黒で大丈夫です。
暗い写真には白文字、明るい写真には黒文字でいいですね。

次の例の写真は白でも黒でも合う文字の入れやすい写真です。

もし強調したい部分があって色を使いたい場合には、彩度の高い鮮やかな色がお勧めです。原色系でいいと思います。文字の色を変えてもいいですが、強調したい部分に色を背景色を付けてあげるのも良い方法です。

最も注意したい色は、グレー系や彩度の低い色です。写真になじませようと思って使ってしまう場合もあると思いますが、文字が読みづらかったり全体が曇った印象になりがちです。

文字を目立たせるデザイン手法

次に文字を目立たせる方法です。

複雑な被写体の写真に、ただ文字を入れるだけだと、大抵の場合は文字が読みづらいです。

写真の内容(構図など)を工夫できない場合、デザイン手法でなんとかするしかありません。
そのための手法をご紹介します。

袋文字にする

チラシ広告などでよく見る手法です。
文字の周りに線を入れることで、背景にどんな複雑な写真があっても強制的に文字とのコントラストを付けて目立たせる方法です。

目立たせるという目的に対しては確実ですが、かっこわるくなりがちです。

文字にシャドウか光彩を入れる

袋文字に似ていますが、それよりも写真との馴染みがある方法です。
写真に入っている色からシャドウの色を決めると、よりな馴染みやすいです。

半透明の背景色を入れる

写真を目立たなくする方法です。
半透明レイヤーの色は、基本的に白か黒で大丈夫です。

写真をぼかす

これも写真を目立たなくする手法です。
写真が複雑な場合や、文字が写っている場合に有効な手段です。

半透明の背景色と組み合わせることでさらに文字を目立たせることができます。

写真の選び方と構図

そもそもの写真を自分で撮影したり選んだりできれば、さらにきれいに作れます。

文字を入れやすい写真

文字を入れるのに適した写真は以下の条件です。

文字を入れづらい写真

逆に、文字を入れるのが難しい写真の条件はこちらです。

こういった条件の写真の場合、先ほどの“半透明の背景色を入れる”方法や、“背景をぼかす”方法が有効になってきます。

あるいは、写真の解像度が高くトリミングの余地がある場合、中央にある被写体が端にくるように切り取るのも良い手段です。

その他の文字を入れる方法

これら以外にも上手く文字を入れる方法はあります。少し高度なやり方もありますが、その一部をご紹介します。

写真を加工する

例えば、Photoshopにグラデーションマップという機能があります。これを使って写真の色をすべて単色か2色にしてしまえば、文字は入れやすくなります。

あえて被写体に文字を重ねる

あまり見ないトリッキーな手法ですが、あえて被写体に文字を重ねる方法もあります。文字内容と被写体が完全に合致していたり、ちょっとコミカルな表現をしたいときに使えます。

意味や目的が無いと変なデザインになってしまいます。

まとめ

今回ご紹介した方法は、すべてPhotoshopで作ることができますが、WEBのCSSだけで実現できるものも多くあります。

最近ではYoutubeのサムネイルが非常に重要になっていますので、デザイナーではない方にもわかりやすいようにまとめました。

このほかにも色々な手法や考え方がありますので、またご紹介いたします。