背景コード生成用
玉ボケの背景
大きさの違う光の丸を重ねた、やわらかくきらめく背景。
用途・説明
カメラのボケのような、半透明の丸がいくつも重なる背景を作成します。ウェディング、ギフト、季節のキャンペーン、お祝いのメッセージページなど、華やかでやさしい雰囲気を出したいセクションに向いています。丸の大きさと濃さを変えることで、奥行きが生まれます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「玉ボケの背景」を持つセクションを実装してください。 ## 仕様 - ベース色：#1463F0 の9%のごく淡い色 - 丸：8〜10個。直径は 40px〜160px でばらつかせる - 丸の色：#1463F0（不透明度 0.12〜0.3）を中心に、#F4C9A8（不透明度 0.5）を2〜3個まぜる - 大きな丸ほど薄く、小さな丸ほど濃くする ## 実装方法 - 丸は装飾用の span を position: absolute で配置する。位置は % で指定する - 輪郭をほんの少しだけぼかす（filter: blur(1px)）。強くぼかさず、丸の形が分かるようにする - 丸どうしが重なる部分は、色が濃くなるよう mix-blend-mode: multiply にする - 丸の入れ物には aria-hidden="true" と overflow: hidden を指定する ## 読みやすさ - 見出しは #1B2A44、補足文は #5F6D84 - 中央は丸を少なくし、文字に重なる丸は薄いものだけにする - サンプルとして、見出し・補足文を含むセクションを1つ用意する ## レスポンシブ・その他 - スマホでは丸の数を6個に減らし、直径を 70% にする - 丸がゆっくり上下にゆれるアニメーションの例も併記する（prefers-reduced-motion で無効化） - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 色・丸の大きさをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。