DAY 24の学習目標：最重要の文字領域を先に決め、その文字を邪魔しない写真を選択・配置できるようになること。
写真の上に文字を置くときは、文字と写真の両方が分かる状態を目指します。
写真には明るい部分、暗い部分、色や形が細かく変化する部分があります。そのため、同じ文字色でも、置く位置によって読みやすさが変わります。
最初に、一番伝えたい見出しと、その配置を決めます。文字の位置は、写真の都合ではなく、情報の優先順位や見た人に読んでほしい順番から考えます。
次に、その文字領域を邪魔せず、伝えたい内容を補う写真を選びます。文字を左側へ置くなら、人物や商品が右側にあり、左側の色変化が少ない写真が使いやすいでしょう。
適した写真がなければ、写真の意味を損なわない範囲で位置や大きさ、切り取り方を調整します。写真に合わせて最重要の文字を移動するのではなく、決めた文字領域に写真を合わせます。
文字と写真の優先度を先に決める
サービス内容を伝えるバナーでは、文字の大きさ、フォント、色が情報を伝える重要な要素です。先に文字の優先順位と基本の見せ方を決め、写真をそれに合わせます。
一方、商品そのものを見せる商品バナーでは、商品画像が主役になり、文字が補助になる場合もあります。目的に応じて、どちらを第1優先にするか決めます。
今回の料理教室ではサービス内容を伝える文字を優先し、次の順番で写真側から調整します。
1．写真の位置や切り取り方を調整する
文字が読みにくいときは、写真の位置、大きさ、切り取り方を最初に見直します。人物や料理の意味を残しながら、文字の後ろへ色変化の少ない部分が来るようにします。
難しい場合は、決めた文字領域に合う別の写真を選びます。
2．文字の後ろへ帯を置く
文字の後ろに一色の長方形を置くと、背景を安定させられます。
帯を少し透けさせると写真を残せますが、透明にしすぎると文字が再び読みにくくなります。透明度の数値を正解とせず、実際の読みやすさで調整します。
3．写真の明るさを調整する
白い文字を重ねる場合は、写真を少し暗くすると差を作りやすくなります。
ただし、写真を暗くしすぎると、人物の表情や商品の特徴が見えなくなります。写真の役割が残っているかも確認します。
4．文字色は最後に調整する
写真側を調整しても読みやすさを確保できない場合に、文字色を検討します。
文字色は、情報の優先順位や印象を伝える要素です。メインカラーの濃さを変えるなど、配色の役割と伝えたいイメージが変わらない範囲で調整します。大幅な変更が必要なら、写真の選択へ戻ります。
装飾を加える前に位置を見直す
文字が読みにくいと、縁取り、影、色などを重ねたくなることがあります。効果を増やしすぎると、文字の形が複雑になる場合があります。
最初に写真の位置や切り取り方を変えます。それでも文字を邪魔する場合は、別の写真、帯、写真の明るさの順に検討します。文字色は、配色の意味を保てる範囲で最後に調整します。
今日の課題
人物と調理台が写った料理教室の写真を使い、「初心者向け料理教室」という見出しを置きます。
- 一番伝えたい見出しと、その位置を決める
- 見出しを邪魔せず、教室の様子が伝わる写真を選ぶ
- 写真の位置と切り取り方を調整する
- 必要なら文字の後ろに帯を置いた案も作る
- 縮小し、文字の読みやすさと写真の意味を確認する
紙で取り組む場合は、写真の代わりに簡単な人物と背景を描き、帯の有無を比べてください。
今日の確認ポイント
-
-
- 最重要の文字領域を、写真より先に決めましたか。
- 写真は文字を邪魔せず、内容を補っていますか。
- 文字色を変えた場合、配色の役割や伝えたい印象を保てていますか。
-
まとめ
写真の上へ文字を置く場合も、最重要なのは伝える情報です。文字領域を先に確保し、写真をその領域へ合わせます。
写真は文字を邪魔しないだけでなく、内容を補う役割も必要です。写真の位置や切り取り方、帯、写真の明るさの順に検討し、文字色は配色の意味を保てる範囲で最後に調整しましょう。
次回は、先に決めた文字位置へ視線が向く人物写真の選び方と配置を学びます。
64歳からデザインを学び始め、現在はWebと印刷物のデザインを制作しています。このシリーズでは、デザイン経験がない方にも分かる言葉で、デザインの基本と作り方をお伝えします。
ハッシュタグ：#デザイン初心者 #Canva #写真と文字 #コントラスト #デザインの基本