フォーム・お問い合わせコード生成用
5問以内のミニアンケート
選ぶだけで答えられる、短いアンケートフォーム。
用途・説明
利用後の感想や、サービスを知ったきっかけなどを聞く、短いアンケートを作ります。ほとんどの質問を選択式にして、自由記入は最後の1問だけにします。購入完了ページ、退会の手続き、イベントの参加後アンケートなどに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問]- 質問文と選択肢を、3〜5問
[冒頭の一言]- 例：1分ほどで終わります。ご協力をお願いします。
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 以下の条件で「5問以内のミニアンケート」を実装してください。 ## 表示内容 - 冒頭の一言：[冒頭の一言] - 質問： [質問] - 最後に自由記入欄（任意）：「ご意見があればお聞かせください」 - ボタン：回答を送信する ## レイアウト - 質問を縦に並べ、質問の間隔 32px - 質問文の左に「Q1」「Q2」の番号。右に「必須」または「任意」のラベル - 選択肢は、4つ以下なら横並びのボタン型、5つ以上なら縦のリストにする - 上部に「全3問中 2問回答済み」の進み具合を表示する ## デザイン - 質問文：16px、font-weight 700、色 #1B2A44。番号は #1463F0 - 選択肢（ボタン型）：高さ 44px、左右padding 16px、枠線 1px solid #CBD5E1、角丸 8px、文字 14px - 選択中：枠線 #1463F0、背景は #1463F0 の9%の淡い色、文字 #1463F0・font-weight 700 - 自由記入欄：高さ 96px、枠線 1px solid #CBD5E1、角丸 8px - 送信ボタン：高さ 48px、背景 #1463F0、文字 #FFFFFF ## 動作 - 1つだけ選ぶ質問と、複数選べる質問を区別する（複数選べる場合は「複数選択可」と明記） - 必須の質問に答えていない場合、送信時にその質問までスクロールしてエラー文を表示する - 送信後は「ご回答ありがとうございました」の画面に切り替える ## アクセシビリティ - 各質問は fieldset と legend でまとめる - 選択肢は input type="radio" / "checkbox" と label で実装する - エラー文は該当する質問の下に表示し、aria-describedby で関連付ける ## 出力形式 - [使用技術]のコードを1つ出力 - 質問を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。