フォーム・お問い合わせコード生成用
5段階評価のアンケート
1〜5のボタンから選ぶ、満足度の質問。
用途・説明
「満足度を教えてください」のような質問に、1〜5のボタンで答えてもらうアンケート欄を作成します。利用後のアンケート、記事の「役に立ちましたか」、サポート対応の評価などに向いています。両端に「不満」「満足」の言葉を添えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問]- 例：今回のサービスの満足度を教えてください
[両端のラベル]- 例：不満 ／ 満足
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUXとアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「5段階評価のアンケート」を実装してください。 ## 表示内容 - 質問：[質問] - 1〜5の選択ボタン - 両端のラベル：[両端のラベル] - 選んだあとに表示する、任意のコメント欄 ## レイアウト・デザイン - 質問：16px、font-weight 700、色 #1B2A44 - 選択ボタン：48px 四方、角丸 10px、枠線 1.5px solid #DCE4F0、背景 #FFFFFF、数字 16px・font-weight 700・色 #1B2A44。間隔 8px - 選択中：背景と枠線 #1463F0、数字 #FFFFFF - 両端のラベル：12px、色 #5F6D84。ボタンの下、左端と右端に置く - スマホでも5つが1行に収まるよう、幅を自動で縮める ## 動作 - hover：枠線を #1463F0 に - 選ぶとコメント欄が開く（任意入力） - 選び直しができる ## アクセシビリティ - 実体は input type="radio" とし、fieldset と legend（質問）でマークアップする - 各ボタンのラベルは「1（不満）」「5（満足）」のように、数字の意味が分かるものにする - 矢印キーで選択を移動できること - 選択中かどうかを色だけに頼らない（太い枠線やチェックを併用する） ## 出力形式 - [使用技術]のコードを1つ出力 - 送信処理を接続する箇所をコメントで明示
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。