写真の上に文字を置く方法｜はじめてのデザイン講座 DAY 24

写真の上へ文字を置くと、限られた場所を使いやすくなります。しかし、写真の色や形と文字が重なると、読みにくくなることがあります。

大切なのは、写真と文字を見分けるための差を作ることです。この差をコントラストといいます。

文字の場所を先に決め、写真を合わせます

最初に、一番伝えたい文字をどこへ置くか決めます。次に、その領域の色変化が少なく、人物や商品が文字と重ならない写真を選びます。

たとえば文字を左側へ置くなら、人物や料理が右側にあり、左側の背景が比較的単純な写真が候補です。写真に合わせて重要な文字を動かすのではなく、文字領域を守るように写真の位置や切り取り方を調整します。

文字と写真のどちらを優先するか決めます

サービス内容を伝えるバナーでは、文字の大きさ、フォント、色を情報設計として先に決めます。商品画像を主役にするバナーでは、画像を優先して文字を補助として調整する場合もあります。

今回の料理教室はサービス内容を伝えるため、文字領域と基本の文字色を先に決め、次の順で写真側から調整します。

写真の位置や切り取り方を変える

人物や料理の意味を残しながら、文字の後ろへ色変化の少ない部分が来るようにします。難しい場合は、文字領域に合う別の写真を選びます。

文字の後ろに帯を置く

写真の変化が大きい場合は、文字の後ろに一色の長方形を置きます。少し透ける帯も使えますが、透明にしすぎると読みにくさが戻ります。

写真を少し暗くする

白い文字を置く場合は、写真全体を少し暗くする方法があります。ただし、写真で見せたい表情や商品が分からなくならない範囲にします。

文字色は最後に調整する

写真側を調整しても読みにくい場合に、配色の役割や伝えたい印象が変わらない範囲で文字色を調整します。文字色を大きく変える必要があるなら、写真の選択に戻ります。

今日の10分課題

料理教室のバナーを作ります。先に「初心者向け料理教室」という見出しを左側へ置き、その文字領域を邪魔しない写真を合わせます。

1. 見出しと、その位置を先に決める

2. 人物や料理が見出しと重ならない写真を選ぶ

3. 写真の位置や切り取り方を調整する

4. 必要なら文字の後ろに帯を置いた案も作る

5. 縮小して読みやすさと写真の意味を確認する

写真によっては、帯を置かない案が合う場合もあります。

3つの自己確認

1. 最重要の文字位置を先に決めましたか。

2. 写真は文字を邪魔していませんか。

3. 文字色を変えた場合、伝えたい印象を保てていますか。

次回は、決めた文字位置を支える人物写真の選び方を考えます。

64歳からデザインを学び始め、現在はWebと印刷物のデザインを制作しています。このシリーズでは、デザイン経験がない方にも分かる言葉で、デザインの基本と作り方をお伝えします。

ハッシュタグ

デザイン初心者　Canva　写真と文字　コントラスト　デザインの基本