フォーム・お問い合わせコード生成用
チェックボックスのグループ
複数選べる項目を、押しやすい行で並べる。
用途・説明
「興味のある分野」「ご希望の連絡方法」など、複数選べる項目を並べたチェックボックスのグループを作成します。ブラウザ標準の小さなチェックボックスを、押しやすくブランドの色に合った見た目に整えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問]- 例：興味のある分野を選んでください（複数選択可）
[項目の例]- 例：デザイン、開発、マーケティング、運用
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUXとアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「チェックボックスのグループ」を実装してください。 ## 表示内容 - 質問：[質問] - 項目：[項目の例] ## レイアウト・デザイン - 項目は縦に並べる（PCで項目が多い場合は2列）。行の高さ 44px 以上 - チェックボックス：20px 四方、角丸 5px、枠線 1.5px solid #CBD5E1、背景 #FFFFFF - チェック時：背景と枠線 #1463F0、白（#FFFFFF）のチェックマーク（線の太さ 2.5px） - 項目の文字：15px、色 #1B2A44。チェックボックスとの間隔 10px - 質問の文字：14px、font-weight 700、色 #1B2A44。補足は 12px、色 #5F6D84 ## 動作 - 文字の部分を押してもチェックが切り替わる - hover：枠線を #1463F0 に - チェックマークは 120ms で表示する ## アクセシビリティ - 実体は input type="checkbox" とし、label で文字と関連付ける。input を display: none にしない - 全体を fieldset、質問を legend でマークアップする - フォーカス時は、チェックボックスに #1463F0 の 2px のアウトラインを外側に 2px 離して表示 - スペースキーで切り替えられること - 「1つ以上選択」などの条件がある場合は、エラーをグループ全体に対して表示する ## 出力形式 - [使用技術]のコードを1つ出力 - 項目を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。