背景画像にテキストを重ねる指示が毎回うまくいかなかった話——解決策と具体プロンプト集

バナーやLPのヒーロー画像で「写真の上にキャッチコピーを載せたい」というのは定番の依頼だ。ところがClaude Designでこれをやると、最初のうちは毎回テキストが読めない状態で出てきた。白い文字を明るい写真の上に置くか、暗い文字を暗い写真の上に置くか、どちらかを選んでくる。

何度かやり直して、ようやくコツが掴めてきた。まとめておく。

最初にやりがちな失敗パターン

背景に山の写真を使い、その上に「EXPLORE THE WORLD」というテキストを白文字で表示してください

これだと、明るい空や雪山の部分にテキストが重なって潰れる。Claude Designは背景の明るさに関係なく「白文字」を置いてしまう。

もう一つの失敗が「テキスト読めない問題」を回避しようとして文字色を黒にすること。今度は暗い木々や岩の部分で見えなくなる。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。

解決策1：グラデーションオーバーレイを明示的に指定する

写真の上にグラデーションを重ねて、テキスト部分の背景を強制的に暗くする方法が一番安定した。

背景に山の風景写真を使用し、その上に下から上方向に向かって黒（透明度70%）から透明のグラデーションオーバーレイをかけてください。
グラデーションは下部30%の範囲のみに適用。
テキスト「EXPLORE THE WORLD」は画像の下部中央に、白・太字で配置。
テキスト下のオーバーレイ部分は確実に読めるコントラストを確保すること。

「グラデーションオーバーレイ」という単語を使うのがポイント。「暗くする」だと写真全体が暗くなる。

解決策2：テキストボックスに半透明の背景を付ける

オーバーレイを使わず、テキスト自体に背景をつける方法。SNSのストーリーズ系のデザインに合う。

背景に都市の夜景写真。
テキスト「TOKYO NIGHT MARKET」の後ろに、黒（透明度60%）の横長矩形を配置し、その上に白文字でテキストを表示してください。
テキストボックスは画像上部1/3の位置に左揃えで。

この方法はどんな写真でもコントラストが確保できるので、写真の明るさを選ばない。ただしデザインとしては少し野暮ったく見えることがある。オーバーレイ方式の方がスタイリッシュに仕上がることが多い。

解決策3：写真に編集意図を持たせた指定

写真加工込みで指示する方法。Claude Designは写真そのものを生成するため、「最初から暗い部分を作る」という指示が有効だった。

ヒーロー画像を作成してください。
- 下半分が暗め（影になっている）の森林の写真
- 上半分は明るい空
- 下部中央に白文字で「INTO THE WILD」
写真の下部を意図的に暗くなるよう構図を指定してください。

これは写真の構図レベルから調整するので、自然な仕上がりになる。半分の運頼みなところもあるが、うまくいくと一番きれいになる。

コントラスト比に直接言及する

どうしても読めない状態が続くときは、アクセシビリティの数値で指定した。

テキストと背景のコントラスト比を4.5:1以上確保してください（WCAG AA基準）。

これを入れると、Claude Designが自動的にオーバーレイなどで調整してくれることがある。ただし毎回確実ではないので、他の指定と組み合わせる方が安全だ。

現場でよく使うテンプレート

迷ったときはこれを使いまわしている：

【バナー仕様】
- 背景：{写真の説明}
- オーバーレイ：下部40%に黒（透明度65%）のグラデーション、下から上に向けて透明に
- メインテキスト：{キャッチコピー} ／ 白・太字・下部中央
- サブテキスト：{説明文} ／ 白・通常ウェイト・メインテキストの下
- テキスト可読性：すべての文字がコントラスト十分であること

{}の中を変えるだけで使い回せる。オーバーレイの透明度は写真の明るさに応じて50〜80%の間で調整している。

---

正直、最初の5回くらいは全部「テキストが読めないバナー」が出てきた。Claude Designは「きれいな写真」は上手いが「読みやすいテキスト付きバナー」は一段階難しい。オーバーレイの指定を明示すれば、それなりにコントロールできるようになった。