背景コード生成用
写真に色を重ねる背景
写真の上に色のベールをかけて、文字を読みやすく。
用途・説明
背景に写真を敷き、その上に半透明の色を重ねて文字を読みやすくするセクションを作成します。採用ページ、店舗紹介、イベント告知など、写真で雰囲気を伝えつつメッセージも読ませたい場面に向いています。写真が変わっても読みやすさが保てるよう、重ねる色の濃さを条件にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[写真の内容]- 例：オフィスで打ち合わせをする様子（仮画像でよい）
[見出しテキスト]- 写真の上に置く見出し
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはフロントエンドエンジニアです。 写真の上に色を重ねた「カラーオーバーレイ背景」のセクションを実装してください。 ## 仕様 - 背景写真：[写真の内容]（仮画像のURLを1つ入れ、差し替え箇所をコメントで示す） - 重ねる色：上は #1463F0 の不透明度55%、下は #1B2A44 の不透明度78% の縦方向グラデーション - 見出し：[見出しテキスト] - セクションの最小の高さ：520px ## 実装方法 - 写真は <img>（object-fit: cover）で絶対配置する。background-image にしない（alt と遅延読み込みを使えるようにするため） - オーバーレイは写真の上に疑似要素（::after）で重ねる - コンテンツはさらに前面に置く - 写真には width / height を指定し、読み込み中のレイアウトのずれを防ぐ ## コンテンツ - 左下寄せ、最大幅 640px - 見出しは白、clamp(28px, 4vw, 48px)、font-weight 700 - 補足文は rgba(255, 255, 255, 0.85)、16px ## アクセシビリティ - 写真が内容を伝えるものなら適切な alt を、装飾なら alt="" を付ける - どんな写真に差し替えても、白い文字のコントラスト比4.5:1以上になるオーバーレイの濃さにする - 文字に text-shadow を足す場合は、ごく弱いものにとどめる ## パフォーマンス - ファーストビューで使う場合は fetchpriority="high"、それ以外は loading="lazy" - 画面幅に合わせた srcset の例を示す ## 出力形式 - [使用技術]のコードを1つ出力 - オーバーレイの2色と不透明度をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。