デザインをしていると、レイアウトやスペースの都合で写真の上に文字をのせたいと思うことがあるかもしれません。今回は、その時に知っておきたいコツをご紹介したいと思います。

空いたスペースに文字を入れよう

いちごの写真(右側に文字を入れられそうなスペースがあります)
トリガー

この写真の場合、イチゴは左側に寄っていますよね。
なので文字を入れるなら右側のスペースを使いましょう。

写真の右上のスペースに文字を入れてみました。背景が暗いので白い文字が映えます。
職員Aさん

背景が暗いから文字を白にしてみたよ。

トリガー

いいですね!MUD(メディア・ユニバーサル・デザイン)の記事でもお伝えしたように、背景の色と文字の色は明度に差をつけるのが読みやすさのポイントです。

空いたスペースがないときは

全面にイチゴが並ぶ写真
職員Aさん

でも上の写真みたいに空いたスペースがない時はどうしたらいいの?

トリガー

この写真だと、全面にイチゴが並んでいるため、余白として使えるスペースはありませんね。こういう時は、文字を直接のせてしまうと読みづらくなってしまうことが多いです。特に背景と似た色や明度が近い文字色(この場合だとピンクや緑)は要注意です。

職員Aさん

ほんとだ。とっても読みづらいね。

対策その1 文字にフチをつける

トリガー

写真と文字の間に、フチをつけることで判読性を上げることができます。はっきりとしたフチでもいいですし、影のようにモヤっとしたフチでも効果があります。背景が濃い時は白っぽいフチ、背景が白っぽい時は濃い色のフチがおすすめです。

職員Aさん

フチをつけるだけで、かなり見やすくなった!

対策その2 文字の下に帯を敷く

トリガー

フチをつけた文字は、タイトルなど文字数が少ない時はいいのですが、数行の文章などになると逆にごちゃごちゃして読みづらくなってしまうことがあります。そんなときは文字の下に帯を敷いて、まとめて背景と区別すると良いですよ。

職員Aさん

帯があると文字がぐっと読みやすくなるね。

トリガー

帯の形を変えるだけで印象がガラッと変わるので、いろいろ試してみてください。

まとめ

今回は写真に文字をのせる時のコツをいくつかご紹介しました。いかがでしたでしょうか。
広報紙などの紙媒体だけでなく、ホームページに掲載する写真やバナー画像などにも応用できますので、ぜひ参考にしてみてください。