背景コード生成用
ぼかした円が浮かぶ背景
大きくぼかした色の円を重ねた、やわらかな背景。
用途・説明
ぼかしをかけた大きな円（ブロブ）を2〜3個配置して、ふんわりと色がにじむ背景を作成します。ファーストビューや申し込みセクションの背景に向いています。円は装飾用の要素として重ねるため、位置や色を1つずつ調整しやすいのが特徴です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[円の大きさ]- 例：360px
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいWebデザイナーです。 ぼかした円が浮かぶ「ブロブ背景」を持つセクションを実装してください。 ## 仕様 - ベース色：#F7F9FC - 円の色：#7FA9F7、#F4C9A8、#7FA9F7を白で薄めた色の3つ - 円の大きさ：[円の大きさ]を基準に、1つは少し大きく、1つは少し小さくする ## 実装方法 - セクションを position: relative と overflow: hidden にする - 円は装飾用の要素（aria-hidden="true" の span など）を絶対配置し、border-radius: 50% と filter: blur(60px〜80px) をかける - 配置は、左上・右下・中央やや右の3か所。円の一部がセクションの外にはみ出すようにする - コンテンツは円より前面（z-index）に置く - サンプルとして、中央に見出し・本文・ボタンを配置する ## 読みやすさ - 円の不透明度は0.6〜0.8に抑え、背景が主張しすぎないようにする - 最も色の濃い部分の上でも、文字のコントラスト比4.5:1以上を確保する ## レスポンシブ・パフォーマンス - スマホでは円を2つに減らし、大きさを6割程度にする - 円は動かさない。動かす場合は transform のみを使い、prefers-reduced-motion で停止する - blur をかける要素は3つまでにする（描画負荷を抑えるため） ## 出力形式 - [使用技術]のコードを1つ出力 - 円の色・大きさ・ぼかしの強さをCSS変数にまとめ、差し替え方をコメントで説明する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。