背景コード生成用
すりガラス風のパネル
後ろの色がぼんやり透ける、半透明のカード。
用途・説明
背景をぼかして透かす、すりガラス風（グラスモーフィズム）のパネルを作成します。カラフルな背景や写真の上に、ログインフォームや料金カード、ヘッダーを重ねたいときに向いています。非対応のブラウザでも読めるように、代替の背景色を指定する条件を入れています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[パネルの内容]- 例：見出しと説明文、ログインフォーム
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいWebデザイナーです。 背景がぼんやり透ける「すりガラス風のパネル」を実装してください。 ## 構成 - 背景：#F7F9FC の上に、#1463F0 と #F4C9A8 の大きな円を1つずつ配置（装飾、aria-hidden="true"） - 前面：すりガラス風のパネルを中央に1枚。中身は [パネルの内容] ## パネルのデザイン - 背景：rgba(255, 255, 255, 0.4) - backdrop-filter: blur(16px) と -webkit-backdrop-filter を併記 - 枠線：1px solid rgba(255, 255, 255, 0.75) - 角丸：16px、padding：32px（スマホ 20px） - 影：0 8px 24px rgba(27, 42, 68, 0.12) - 最大幅 480px ## 非対応環境への配慮 - backdrop-filter が使えない場合は、@supports で判定してパネルの背景を rgba(255, 255, 255, 0.9) に切り替える - ぼかしが無くても文字が読めること ## 読みやすさ・アクセシビリティ - パネル内の文字色は #1B2A44。後ろの円と重なった状態でコントラスト比4.5:1以上 - パネルの後ろで色が大きく変わる位置に、小さな文字を置かない - フォーカスリングはパネルの上でもはっきり見える色にする ## パフォーマンス - backdrop-filter を使う要素は画面内に2つまで - パネルや背景の円をスクロールに合わせて動かさない ## 出力形式 - [使用技術]のコードを1つ出力 - 透明度・ぼかしの強さ・角丸をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。