テック技報最新号へ →
デザイン

写真の上の文字が埋もれるときの対処パターン

写真と見出しを両立させるには、文字を置く「場所」を変えるのが第一手。

@kawai_design · 2026-10-09
#レイアウト#写真#タイポグラフィ#バナー#可読性

どんな問題を解決するか / いつ使うか

広告バナー、SNS告知画像、ヒーロー画像など、写真の上にキャッチコピーを載せたら読みにくくなったとき。

やり方

投稿で紹介された対処（6つの見本のうち本文で触れられていたもの）：

  1. 文字を写真の外へ出す：写真と文字エリアを分割（例「写真を右、文字を左に。文字の背景は無地にして」）。
  2. 写真の余白（空・壁など情報の少ない部分）に置く：トリミングで余白を作るのも有効。
  3. 文字の下に帯を敷く：半透明〜不透明の帯を文字の背後に置く。
  4. 背景（写真）を暗くする：全体または文字側だけにグラデーションのオーバーレイ。

CSSでの例（オーバーレイ）：

css
.hero { background: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,0) 60%), url(photo.jpg) center/cover; }

仕上げは必ずスマホの実寸表示で読めるか確認する。

注意点・対応状況

  • 文字にフチやシャドウを付けて無理に読ませるのは最終手段（AIっぽさ・安っぽさの原因になりやすい）。
  • コントラスト比は WCAG の 4.5:1（大きな文字は 3:1）を目安に。

出典

X の元の投稿を開く