写真の上の文字が読みにくいときの直し方｜暗くする・影を足す・位置を動かすの選び分け

「トップページの写真に重ねたキャッチコピーが、写真の色と同化してほとんど読めない」

写真を大きく使ったホームページでは、必ずと言っていいほど一度は起きる問題です。しかも発覚のしかたが決まっていて、制作中のパソコン画面では気づかず、経営者やお客様がスマートフォンで開いた瞬間に「読めない」と指摘が入ります。

先に結論を書きます。写真の上の文字が読みにくいとき、写真を差し替える前にできる直し方は3系統あります。

• 写真側に半透明の層を敷く（オーバーレイ）――画面の広い範囲で読みにくいとき
• 文字側に影・縁取りを足す（text-shadow）――写真の一部の色と偶然かぶっているとき
• 文字か写真の位置を動かす――スマートフォンなど特定の画面幅でだけ起きるとき

そして、どれを選ぶか・直ったかどうかは、感覚ではなくコントラスト比という数値で判定します。基準は4.5:1（Webアクセシビリティの標準であるWCAGのAA基準)。この数値を最初に測っておくと、「なんとなく読みやすくなった気がする」という曖昧な着地を避けられます。

順に説明します。

「読みにくい」は感覚で議論しない。先に測る

「読みにくい」は主観の言葉ですが、原因はほぼ必ず数値化できます。そして数値を見ずに手を動かすと、原因と関係のない場所を直してしまいます。

実際にあった例を挙げます。名古屋のWEB制作会社graciautoが、あるスクールのサイトで「代表挨拶のページが読みづらい」という相談を受けたときのことです。最初に出た案は「文章のボックスをもっと細かく分ける」という構成変更でした。ところが手を入れる前に実測したところ、原因は構成ではありませんでした。

• 本文の文字色と背景のコントラスト比が4.3:1で、基準の4.5:1をわずかに下回っていた
• 1行の文字数が65文字で、日本語の適正とされる35〜45文字の1.5倍あった
• 段落と段落の間隔が0pxで、文章が詰まって見えていた

この3つをCSSの調整だけで直したら、構成には一切手を入れずに解決しました。見出しは元から4つあり、区切りは足りていたのです。もし数値を見ずにボックス分割へ進んでいたら、工数だけかかって「まだ読みづらい」が残るところでした。

写真の上の文字も同じです。まず、文字の色と、文字が重なっている部分の写真の色を取り、コントラスト比を計算します。ブラウザの開発者ツールのカラーピッカーにはコントラスト比の表示機能がありますし、「コントラスト比 チェッカー」で検索すれば色コードを2つ入れるだけのツールが見つかります。

このとき注意したいのは、写真は場所によって明るさが違うことです。空の部分では読めても、建物の影の部分では読めない、ということが普通に起きます。文字が重なる範囲のいちばん不利な場所（明るい文字なら写真のいちばん明るい場所、暗い文字ならいちばん暗い場所）で測ってください。そこで4.5:1を切っているなら、誰かのスマートフォンでは確実に読みにくくなっています。

測った結果によって、次の3つの直し方を選び分けます。

直し方①：写真に半透明の層を敷く――広い範囲で読みにくいとき

文字が乗っている範囲の大部分でコントラストが足りない場合は、文字を個別に調整するより、写真と文字の間に半透明の色の層（オーバーレイ）を敷いて、写真全体のトーンを文字に合わせて整えるほうが確実です。

定番は黒の半透明を敷いて写真を暗くし、白文字を立たせる方法ですが、暗くする一択ではありません。業種やブランドによっては「サイト全体を黒っぽくしたくない」という要望は珍しくなく、その場合は逆に白の半透明を敷いて写真を明るく飛ばし、濃色の文字を乗せる方向があります。

graciautoが関東の水回りメンテナンス事業者のホームページを制作したときは、まさにこの型でした。トップの全幅写真に白のオーバーレイを敷き、その上に濃紺の見出しを置いて、コントラスト比7.7:1を確保しています。基準の4.5:1に対してかなり余裕がありますが、大きな見出しを写真の上に置くファーストビューでは、このくらい余裕を持たせると照明や画面設定の悪条件でも崩れません。

もうひとつ実務のポイントは、オーバーレイを均一にしないことです。このときの実装では、白の不透明度を文字のある左側で92%、写真を見せたい右側で60%と、グラデーションで変化させました。均一に濃く敷くと文字は読めるようになりますが、写真が死にます。「文字のある側だけ濃く、写真の見せ場は薄く」が、可読性と写真の魅力を両立させる敷き方です。

直し方②：文字に影・縁取りを足す――写真の一部と偶然かぶっているとき

写真全体では読めるのに、写真の中の特定の色と文字色が偶然かぶって、その部分だけ沈むというケースがあります。この場合、オーバーレイで写真全体を触るのは大げさで、文字側に手を入れるほうが小さく済みます。

実例を挙げます。前述の水回りメンテナンス事業者のサイトで、濃紺の見出しの一部が、写真に写っている作業服の紺色と重なって、その数文字だけほぼ読めなくなっていました。写真もレイアウトも変えずに直すため、文字に多重のtext-shadow（文字の影）を足しています。

• 紺色の文字には、白いぼかし影を4層重ねて、縁取りに近い淡い光をまとわせる
• 白い文字には、紺色の影を3層重ねて輪郭を立たせる

ここで「4層」「3層」と層を重ねているのには理由があります。1層のくっきりした縁取りは、いかにもチラシ的で野暮ったくなりがちです。ぼかした影を複数重ねると、縁取りではなく「文字の周りがほんのり明るい」程度の見え方で、デザインの雰囲気を保ったまま可読性だけを足せます。

そしてこの方法には、実装上の大きな利点があります。白背景の上では、白いぼかし影は物理的に見えないのです。つまり、同じ見出しがパソコンでは白背景の上に、スマートフォンでは写真の上に乗る、というようなレイアウトでも、画面幅ごとにスタイルを出し分ける必要がありません。写真に重なったときだけ勝手に効く保険として仕込めます。背景の色ごとに条件分岐を書かずに済む分、後々の崩れも起きにくくなります。

雰囲気への影響が最も小さく、写真にもレイアウトにも触らない。3系統の中で最小侵襲の直し方が、この多重text-shadowです。

直し方③：位置を動かす・どかす――特定の画面幅でだけ起きるとき

パソコンでは問題ないのに、スマートフォンでだけ読めない。この場合、原因は色ではなく位置にあることが多いです。写真と文字の重なり方は画面幅によって変わるため、パソコンでは写真の暗い部分に乗っていた白文字が、スマートフォンでは明るい部分に移動してしまう、あるいは要素同士の距離が詰まって別の文字と衝突する、ということが起きます。

実例では、スマートフォンの幅（390px）で、セクション番号の英字ラベルと装飾用の英字が同じ高さに並んで衝突し、両方読めなくなっていたケースがありました。この場合の対処は、影でも色でもなく、狭い画面幅では装飾側を非表示にすることです。

ただし、非表示にはひとつ判断基準があります。消してよいのは純粋な装飾だけです。非表示は最速の対処ですが、情報を捨てる対処でもあります。実務では次の2つを確認してから消します。

• その要素は情報を運んでいないか。 装飾に見えて実は情報を担っていることがあります。たとえばセクション番号を大きな装飾英字が兼ねているデザインで、スマートフォン用に装飾を消すと、番号という情報ごと消えます。こうした事態を防ぐには、消す前に「この要素が消えたとき、読者が失う情報は何か」を確認し、情報を担っていた場合は先にその情報を別の要素（見出しの頭など)へ移してから消します。
• 対になる装飾が他にないか。 縦書きの英字と目盛り線、線と点のように、装飾はセットでデザインされていることが多いものです。片方だけ消すと、残ったほうが「消し忘れ」のような崩れに見えます。ブレークポイントで装飾を消すときは、対になる装飾を一覧にして、セットで消すかどうかを判断します。

もうひとつ、文字ではなく写真側を動かす手もあります。CSSのobject-positionというプロパティで、枠の中で写真のどの部分を見せるかを調整できます。文字が写真の暗部や柄に重なっているなら、写真の切り取り位置をずらして、文字の下に無地に近い領域が来るように調整する。これも写真データそのものには触らないため、いつでも戻せます。

写真の差し替えは、この3つを試してからでいい

ここまでの3系統は、すべてCSSの調整だけで完結します。写真データにも、ページの構造にも手を入れません。つまり効かなければすぐ戻せる直し方です。

一方、写真の差し替えは、代わりの写真の選定・撮影、被写体や権利の確認、他のページとのトーン合わせと、コストが桁違いにかかります。そして差し替えた写真でも、文字と重なる以上は同じ問題が起こり得ます。「読みにくいから写真を変えよう」の前に、オーバーレイ・影・位置の3つを検討する。この順番のほうが、時間もお金も写真の資産も守れます。

直したあとの確認は「機械検出＋目視」の2段で

最後に、確認の話です。写真と文字の重なりは、機械的な検査だけでは白黒がつきません。

全ページを複数の画面幅で走査して、要素同士の重なりを機械的に検出する検査を実務で回すと、「交差」は大量に検出されます。ところがその大半は、写真の上に文字を重ねる意図的なデザインです。機械が検出できるのは「図形として重なっている」ことまでで、「読めないほど沈んでいる」かどうかは判定できません。逆に、コントラスト不足で読めない文字は、重なり検出には一切引っかかりません。

したがって確認は2段構えにします。

1. 機械で候補を挙げる。 重なり検出やコントラスト比の計算で、疑わしい箇所を機械的に洗い出す。目視だけでは全ページ×全画面幅を網羅できません
2. 目視で選別する。 挙がった候補を実際の画面で見て、「意図した重なりで読める」のか「読めない」のかを人間が判定する

この2段を経て、最終的にはスマートフォンの実機で確認します。パソコンのブラウザ幅を縮めた確認は便利ですが、実機の画面サイズ・明るさ・持つ距離で見たときの印象とは別物です。写真の上の文字は特に、実機で読めて初めて合格です。

まとめ：症状から直し方を選ぶ

写真の上の文字が読みにくいときの選び分けを、症状から引ける形でまとめます。

症状	直し方
文字の範囲の広い部分で読みにくい	写真に半透明の層を敷く（文字側を濃く・見せ場は薄くのグラデーション）
写真の特定の色と偶然かぶって一部だけ沈む	文字に多重のぼかし影を足す（背景が無地の場所では見えないので分岐不要）
特定の画面幅でだけ読めない・文字同士が衝突する	位置を動かす。装飾なら非表示も可（ただし情報を運んでいないか確認してから）
文字の下だけ写真の柄・暗部が来ている	object-positionで写真の切り取り位置をずらす

そして、着手前と修正後に必ずコントラスト比を測ること。基準は4.5:1、写真の上の大きな見出しなら7:1程度まで余裕を持たせると安心です。「読みやすくなった気がする」ではなく「4.3:1が7.7:1になった」と言える状態にしておくと、社内やクライアントへの説明も一言で済みます。

写真を差し替える前に、できることは3つある。その選び分けを数値で決める。これだけで、写真主導のデザインの魅力を保ったまま、読める画面に直せます。