フォーム・お問い合わせコード生成用
通知設定のスイッチ一覧
項目ごとにオン・オフを切り替える、設定画面の基本形。
用途・説明
メール通知やお知らせの受け取りなどを、項目ごとのスイッチで切り替える設定フォームを作ります。左に項目名と説明、右にスイッチを置き、行ごとに線で区切ります。マイページの通知設定、アプリの環境設定、メルマガの配信設定に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[設定項目]- 項目名と説明を3〜5個
[保存の方法]- 例：切り替えるたびに自動保存／保存ボタンでまとめて保存
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 以下の条件で「通知設定のスイッチ一覧」を実装してください。 ## 表示内容 [設定項目] （各行：項目名、説明文、スイッチ） - 保存の方法：[保存の方法] ## レイアウト - 1枚のカードのなかに行を縦に並べ、行の間は 1px solid #E2E8F0 で区切る - 各行：左に項目名と説明、右端にスイッチ（上下中央） - 行の上下 padding 16px ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 4px 20px - 項目名：15px、font-weight 700、色 #1B2A44 - 説明文：13px、色 #5F6D84、項目名の下 2px - スイッチ：幅 48px、高さ 28px、角丸 999px。オフは背景 #CBD5E1、オンは #1463F0 - つまみ：直径 22px、白、影 0 1px 3px rgba(27, 42, 68, 0.2)。0.2秒で左右に動く ## 動作 - 行のどこを押してもスイッチが切り替わる - 自動保存の場合は、切り替えのあと行の右側に「保存しました」を2秒表示する - 保存に失敗したらスイッチを元に戻し、エラー文を表示する ## アクセシビリティ - input type="checkbox" に role="switch" を付けて実装し、項目名を label にする - 説明文は aria-describedby で関連付ける - オン・オフを色だけで伝えない（つまみの位置で分かる。必要なら「オン」「オフ」の文字も添える） - 保存の結果は aria-live="polite" で伝える - つまみの動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 設定項目を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。