写真の上で文字が読みにくくなる原因
写真は、単色の背景とは違います。一つの単語の後ろにも、明るい机、暗い紙、物の輪郭、光の反射が入ります。白い文字なら明るい部分で、濃い文字なら暗い部分で、背景との差が小さくなることがあります。
差がある色を選んでも、細かな模様が文字の線に重なると形を追いにくくなります。文字そのものを飾る前に、読みにくい箇所の背景を見てください。文字の一部だけが消えるのか、全体が細かい模様に紛れるのかで、直す場所が違います。
たとえば、紙の束を紹介する写真に濃い文字を載せる場合。明るい机の上では読めても、同じ文の末尾が濃い紙の上へ来ると読みにくくなります。書体を変えず、その文が収まる明るい場所を探すだけでも、試すべき案を一つ作れます。
色の組み合わせや比率の測り方から確認したい場合は、背景色と文字色の組み合わせを参照してください。ここでは、背景の色が場所ごとに変わる写真で、どの部分を残し、どこへ文字を置くかを比べます。
同じ写真と文字で、三つの直し方を比べる
教材の文字は「紙もの体験」「手を動かす午後」です。写真は、紙と鉛筆を置いた架空の制作机。元の案と三つの修正案で、写真のファイル、文字の内容、色、書体、大きさをそろえました。
全案共通の文字：「紙もの体験」「手を動かす午後」
元の案：紙の輪郭と文字が重なる
暗い紙と明るい机面が、文字の後ろに混在します。読みづらさを観察するための案です。
案1：切り取りを変える
同じ倍率のまま表示範囲を左へ寄せ、無地の机面に文字を置きます。紙の右側と鉛筆が画面外へ出ます。
案2：半透明の面を敷く
切り取りは元の案のまま。文字の周りだけにアイボリーの半透明の面を重ねています。
案3：単色の帯を敷く
切り取りは元の案のまま。上側に不透明な帯を置き、文字の背景を一定にしています。
一度に書体や文字色まで変えると、どの変更が読みやすさに関わったのか分かりにくくなります。まず、文字の後ろの状態だけを変えます。見た目の好みを選ぶ前に、「紙もの体験」の一文字ずつを追い、背景に紛れる部分が残っていないか見てみてください。
同時に、写真の何が見えなくなったかも探します。紙の種類を見せたいのに紙が隠れる、手仕事を伝えたいのに鉛筆が切れる、といった変化は、文字が読めたとしても見過ごせません。
切り取りで直すなら、残す被写体を決める
案1では、同じ倍率のまま写真の表示範囲を左へ寄せました。文字の後ろに明るい机面が来る一方、紙の右側と鉛筆が画面の外へ出ています。写真を暗くしたり、文字の後ろへ面を追加したりせずに、置き場所を作る方法です。
この方法が使いやすいのは、空や壁、机面など、文字が収まる静かな場所がある写真です。ただ空いていればよいのではなく、文字を入れたあとも写真の主役が残る必要があります。教材のように紙の雰囲気を添える用途なら一部を切る案も考えられますが、鉛筆そのものを紹介する写真なら、この切り取りは合いません。
切り取る前に、「この写真で見せたいもの」を一つ言葉にしてみます。道具の先端、商品の形、作業する手元など、欠けると意味が変わるところに印を付けます。その範囲を残しても文字の場所が作れるかを確かめます。
無地の場所が足りないときは、文字をさらに小さく押し込むより、別の配置を試します。写真の隣や下に文章を置いても、写真と案内は一緒に見せられます。写真内へ文字を入れることを、制作の必須条件にしないでください。
半透明の面と単色の帯を、目的で分ける
案2は、文字の周囲だけにアイボリーの半透明の面を敷いています。写真の明暗や輪郭が薄く残るため、背景を完全に隠す案とは見え方が違います。写真全体を覆わず、読ませたい部分だけを調整できる方法です。
ここでいう半透明の面は、写真の上に重ねる色の層です。「オーバーレイ」と呼ばれることもあります。ただし、ツールの合成モードに同名の機能がある場合、その操作と同じとは限りません。使っているツールでは、色の付いた図形と不透明度を調整する方法を確認してください。
半透明の面を使うときは、面の色だけを見て判断しません。下の写真の色も混ざるからです。教材の案では不透明度88%を使っていますが、この数値をどの写真にも通用する正解としては使えません。元画像、文字色、置く位置が変われば、仕上がりも変わります。
案3は、不透明な単色の帯です。文字の背後を一定の色にできるので、写真を差し替えても、その帯の中の色ペアは保てます。一方、帯の下にある写真は見えません。隠した部分がその写真の主役なら、帯を別の場所へ移すか、文字を写真の外へ分ける必要があります。
| 置き方 | 試しやすい条件 | 戻して考えたい状態 |
|---|---|---|
| 切り取り・位置変更 | 主役を残したまま、文字を無地に近い場所へ置ける | 必要な道具や商品の形が切れる |
| 半透明の面 | 写真を少し見せながら、文字の背後を整えたい | 明暗の差や模様が残って文字に重なる |
| 単色の帯 | 文字の背景色を一定にしたい | 主役が帯の下に隠れる、文字が帯からはみ出す |
半透明を選ぶことが上級、帯を使うことが初心者という分け方ではありません。写真の役割と文字量に合うほうを選びます。長い参加条件や注意書きを、写真の雰囲気のために読みにくい状態で残す必要はありません。
影や縁取りを足す前に確認したい注意点
文字の周りへ影や縁取りを加える方法もあります。ただ、細い文字へ強い影を重ねると、文字の形までぼやけて見えることがあります。「影を付けたから読める」と決めず、小さい表示で一文字ずつ区別できるか確認します。
写真のコントラストを測るときは、明るい場所を一か所だけ選ばないようにします。文字の後ろで背景が変わるなら、差が小さくなる場所も見る必要があります。W3Cの解説も、画像などを背景に使う場合の文字とのコントラストを扱っています。W3C：コントラストの最低限の要件
測ることが難しいときは、文字の背後を不透明な単色にして、測れる色ペアへ変える方法があります。この教材の帯はアイボリー、文字はネイビーです。透明度を文字と帯の両方へまとめて掛けると文字も薄くなるため、面だけの透明度と区別してください。
タイトルを大きくした結果、無地の場所からはみ出すこともあります。見出しの強さを変えたい場合は、タイトルを目立たせるやり方で、周囲との余白や情報の強弱も併せて検討できます。大きくする修正と、背景を整える修正は分けて試すと判断しやすくなります。
スマホと写真の差し替え後は、もう一度見る
横長の画像をスマホで正方形にすると、左右が切れることがあります。パソコンでは机面に載っていた文字が、狭い画面では紙の上に来るかもしれません。写真を同じ位置に置いたつもりでも、表示範囲が変われば背景も変わります。
実際に読まれる幅では、文字の折り返しも確認します。一行だったタイトルが二行になると、半透明の面や帯から出ていないか、被写体を余分に隠していないかを見る必要があります。文字を大きく表示する設定でも、背景面が文章について広がる作りにしておくと調整しやすくなります。
- 文字が写真の明るい部分と暗い部分をまたいでいないか。
- 二行に折り返しても、文字の背後に面が残るか。
- 帯や切り取りで、写真の主役が消えていないか。
- 画像が読み込まれなくても、文字の背景と案内内容が残るか。
- 写真を差し替えたあとも、同じ場所で読めるか。
Webの告知なら、文字を写真へ焼き込まず、HTMLの文字として重ねる方法も検討できます。文字と写真を別々に調整できるからです。SNS用など一枚の画像として出す場合は、書き出した画像を実際の表示サイズへ縮めて読み直します。編集画面を拡大したままの見え方だけで仕上げないことが大切です。
写真の主役と文字を、一緒に残す
今日のワーク：同じ写真で二案を作る
手元の写真と短い見出しを一組選び、元の版を残します。まず文字を置くための切り取り案を作り、次に元の切り取りへ単色の帯を付けた案を作ってください。文字の内容・書体・大きさ・色は同じにします。
「全部の文字を読めるか」「見せたい被写体が残っているか」の二つで見比べます。どちらかを満たせない場合は、文字を写真の外へ出す案へ戻ってかまいません。
選んだ理由を一文にしてから、スマホで使う幅や実際の印刷サイズでも確かめます。比べる相手を残しておくと、写真を差し替えたときにも何を守るべきか思い出せます。
文字の色を変えても別の箇所が読みにくくなるなら、背景が場所ごとに違うのかもしれません。まず文字の下を見て、静かな場所へ移すか、背景を整えるかを選ぶ。写真を残すためにも、文字を読める場所を用意してみてください。