フォーム・お問い合わせコード生成用
カード型の選択肢（ラジオ）
プランやコースを、カードを押して1つ選ぶ。
用途・説明
プラン、コース、配送方法などを、カードを押して1つだけ選ぶ選択肢を作成します。小さな丸いラジオボタンだけより押しやすく、説明や価格も添えられます。申し込みフォームや見積もりフォームに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問]- 例：ご希望のプランを選んでください
[選択肢の例]- 名前・説明・価格を2〜4件
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUXとアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「カード型の選択肢（1つだけ選ぶ）」を実装してください。 ## 表示内容 - 質問：[質問] - 選択肢：[選択肢の例] - （各カード：丸い選択マーク、名前、説明、右端に価格） ## レイアウト・デザイン - カードは縦に並べる。間隔 12px（PCで2〜3件なら横並びにする案も併記） - カード：背景 #FFFFFF、枠線 1.5px solid #DCE4F0、角丸 12px、padding 16px 20px - 選択マーク：直径 20px の円。未選択は枠線 #CBD5E1、選択中は #1463F0 の枠線と中心に 10px の丸 - 名前：16px、font-weight 700、色 #1B2A44。説明：13px、色 #5F6D84 - 選択中のカード：枠線 #1463F0、背景は #1463F0 の6% ## 動作 - カードのどこを押しても選択できる - hover：枠線を少し濃くする - 選択の切り替えは 150ms でなめらかに ## アクセシビリティ - 実体は input type="radio" とし、label でカード全体を包む。input は見えなくしても操作できる状態を保つ（display: none にしない） - 全体を fieldset、質問を legend でマークアップする - 矢印キーで選択を移動できる（ラジオボタン標準の動作を残す） - フォーカス時は、カードに #1463F0 の 2px のアウトラインを表示 - 選択中かどうかを、色だけでなく選択マークでも区別する ## 出力形式 - [使用技術]のコードを1つ出力 - 選択肢を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。