デザインをしていると、レイアウトやスペースの都合で写真の上に文字をのせたいと思うことがあるかもしれません。今回は、その時に知っておきたいコツをご紹介したいと思います。
空いたスペースに文字を入れよう
この写真の場合、イチゴは左側に寄っていますよね。
なので文字を入れるなら右側のスペースを使いましょう。
背景が暗いから文字を白にしてみたよ。
いいですね!MUD(メディア・ユニバーサル・デザイン)の記事でもお伝えしたように、背景の色と文字の色は明度に差をつけるのが読みやすさのポイントです。
空いたスペースがないときは
でも上の写真みたいに空いたスペースがない時はどうしたらいいの?
この写真だと、全面にイチゴが並んでいるため、余白として使えるスペースはありませんね。こういう時は、文字を直接のせてしまうと読みづらくなってしまうことが多いです。特に背景と似た色や明度が近い文字色(この場合だとピンクや緑)は要注意です。
ほんとだ。とっても読みづらいね。
対策その1 文字にフチをつける
写真と文字の間に、フチをつけることで判読性を上げることができます。はっきりとしたフチでもいいですし、影のようにモヤっとしたフチでも効果があります。背景が濃い時は白っぽいフチ、背景が白っぽい時は濃い色のフチがおすすめです。
フチをつけるだけで、かなり見やすくなった!
対策その2 文字の下に帯を敷く
フチをつけた文字は、タイトルなど文字数が少ない時はいいのですが、数行の文章などになると逆にごちゃごちゃして読みづらくなってしまうことがあります。そんなときは文字の下に帯を敷いて、まとめて背景と区別すると良いですよ。
帯があると文字がぐっと読みやすくなるね。
帯の形を変えるだけで印象がガラッと変わるので、いろいろ試してみてください。
まとめ
今回は写真に文字をのせる時のコツをいくつかご紹介しました。いかがでしたでしょうか。
広報紙などの紙媒体だけでなく、ホームページに掲載する写真やバナー画像などにも応用できますので、ぜひ参考にしてみてください。