写真に文字を重ねるデザイン。知っておきたい10の秘訣

写真に文字を重ねるデザインは、Web上のいたるところで使われています。写真のインパクトと文字の情報を両立できる合理的なアイデアですが、デザインの質を高めるためには知識も必要です。

今回は、写真に文字を重ねるデザインをつくる際に役立つ10の秘訣をご紹介します。

1. 写真と文字のコントラストをつける

▲出典：Telegraph

写真に文字を重ねる際にもっとも重要なのは、文字の見やすさです。文字が読みやすいように、写真と文字にコントラストをつけるよう心がけましょう。
例えば背景に暗めの写真を使う場合、文字には白や、白に近い色を使うのがおすすめです。

またここでいうコントラストは、色の濃淡だけではありません。文字の大きさや太さによってコントラストをつけるのも有効です。

2. 文字を写真になじませる

▲出典：TOAST

画像のように、文字を写真になじませるのも良いアイデアです。

ただし、あらゆる写真と文字で上手くいくとは限りません。マクラーレンの例のように、「シンプルな写真にシンプルな文字」という組み合わせが向いているようです。

3. 視線の流れをつくる

▲出典：Brad Hogan

▲出典：Michael Schmid

視線の流れを意識したデザインも重要です。

注目させたい被写体とはかぶらない位置に、文字を配置しましょう。画像のように、写真にうつっている人のボディランゲージや、目線などを意識して配置するのがおすすめです。

逆に、人物の顔の上や、紹介すべき製品の上に文字を配置するのはおすすめできません。

4. 写真をぼかす

▲出典：Wallmob

ぼかした写真や、写真のぼやけている部分に文字を配置すると、文字が際立つというメリットがあります。

写真の一部をぼかすことで製品に焦点をあてることができ、かつ文字を際立たせられることが、上の例からもわかりますね。

5. フレームを活用する

カラフルな写真を背景に使う場合や、写真自体にコントラストが強くついている場合は、文字をフレームの中に配置してみましょう。

上の例では長方形と円が使われていますが、こうしたフレームの形も印象を左右します。イメージにあった形を選びましょう。

また当然ながら、フレームの色も重要です。文字を見やすくするためのフレームなので、写真や文字とのバランスを考えて色を選んでください。上の例では写真の類似色がフレームの色に採用されています。

フレームを透けさせるのも、やわらかい印象を与えられます。

6. 写真の背景に文字を配置する

▲出典：Squareup International Ltd.

▲出典：Caitlin Wicker

文字を写真のどこに重ねるか迷ったら、背景に配置してみましょう。

背景が単色の写真は、文字を重ねるのにぴったりです。写真を加工しなくても、自然に文字を配置できます。

上の例のように、文字に少しだけ影をつけることで、文字の読みやすさを高められます。

7. ときには大胆に

▲出典：TINY FOOTPRINT COFFEE

「とにかく目を引きたい」「いろいろ試してみてもしっくりこない」という方は、まずは文字を大きく配置してみましょう。

大きな文字は、間違いなくユーザーの目をひきます。またコーヒー豆の例のように、被写体を大きく写した写真を使うのもおすすめです。

8. 色でアクセントをつける

▲出典：Story & Heart

文字の色を一部変えて、アクセントをつけてみましょう。

写真に使われている色を文字に採用すると文字がなじみ、逆に対照的な色を使うと文字が目立ちます。どちらも効果的なテクニックです。

9. オーバーレイを活用する

▲出典：WinShape Camps

オーバーレイを活用したデザインもおすすめです。

文字が読みやすく、かつ写真も認識できる程度の透明度にするのがポイント。ベストな色や透明度を決めるために、組み合わせをいくつか試してみましょう。
もし色が決められないなら、商品やサービスのイメージカラーやブランドカラーからはじめるのがおすすめです。

10. 迷ったらシンプルに

▲出典：Keep SA Real

▲出典：Josh Cohen

最後に、もしデザインで迷ったら「シンプルイズベスト」に立ち返りましょう。

こだわりすぎて何を主張したいのか分からなくなるよりも、すっきりとシンプルにするほうがずっと良いです。シンプルな写真とシンプルな文字を使えば、余計なものに邪魔されずに情報がきちんと伝わります。

おわりに

この記事全体をとおして一番伝えたいのは、写真に文字を重ねる際には「読みやすさを大切にしてほしい」ということです。

今回ご紹介したヒントを活用して可読性を確保しつつ、ユニークなデザインを作ってみましょう。遊び心も忘れずに！

（原文：Carrie Cousins　翻訳：Nakajima Asuka）

こちらもおすすめ！▼