背景コード生成用
スポットライトのダーク背景
暗い背景に上から光を差して、見出しを主役に。
用途・説明
暗い背景の上部中央から、ブランドカラーの光がふわっと差し込むような背景を作成します。開発者向けサービスやプロダクトのファーストビュー、新機能の告知セクションなど、引き締まった印象にしたいところに向いています。radial-gradient だけで描くので軽量です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいWebデザイナーです。 暗い背景に上から光が差す「スポットライト背景」のファーストビューを実装してください。 ## 仕様 - ベース色：#0B1220 - 光の色：#1463F0 - セクションの最小の高さ：560px ## 実装方法 - radial-gradient を使い、上端の中央を中心にした横長の楕円の光を描く - 中心の不透明度は0.7〜0.8、楕円の外側70%あたりで完全に透明にする - 光はベース色の上に重ねる（background に複数指定） - 必要なら、下端に向かってベース色に溶ける linear-gradient を1層足す - 画像は使わない ## コンテンツ - 中央揃えで、ラベル → 見出し → 補足文 → ボタン の順 - 見出しは白（#FFFFFF）、補足文は rgba(255, 255, 255, 0.8) - メインボタンは白背景に #0B1220 の文字。サブボタンは白の枠線のみ ## アクセシビリティ - 光の最も明るい部分の上でも、白い文字のコントラスト比4.5:1以上を確保する - フォーカスリングは白で表示する - ダーク背景でも、リンクは下線などで文字色以外の手がかりを付ける ## レスポンシブ - スマホでは光の楕円を横に広げすぎない（幅120%程度） - 最小の高さはスマホで 440px にする ## 出力形式 - [使用技術]のコードを1つ出力 - 光の色・強さ・広がりをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。