FAQコード生成用
「解決しましたか？」付きの回答
回答の最後で、役に立ったかどうかを聞く。
用途・説明
回答の最後に「この回答で解決しましたか？」と尋ね、「はい」「いいえ」のボタンを置くパーツを作成します。「いいえ」を選んだ人には、問い合わせへの案内を表示します。どの回答が役に立っていないかが分かり、FAQの改善につなげられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- サンプルとして1組
[いいえの場合の案内]- 例：お問い合わせフォームへのリンク
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「『解決しましたか？』付きの回答」を実装してください。 ## 表示内容 - 質問と回答：[質問と回答] - 回答の下に、枠で囲んだ評価のエリア： - 「この回答で解決しましたか？」 - ボタン：「はい」「いいえ」 - 「はい」を押したあと：「ご回答ありがとうございます。」 - 「いいえ」を押したあと：「お役に立てず申し訳ありません。」と、[いいえの場合の案内] ## デザイン - 評価のエリア：背景 #F7F9FC、角丸 12px、padding 16px 20px、上に 24px の余白 - 質問の文：14px、font-weight 700、色 #1B2A44。ボタンと横に並べる（スマホでは縦） - ボタン：高さ 40px、左右padding 20px、枠線 1px solid #CBD5E1、角丸 999px、背景 #FFFFFF、文字 14px・font-weight 700。左に親指のアイコン（上向き／下向き） - hover：枠線 #1463F0、文字 #1463F0 - 押したあとのメッセージ：14px、色 #47566E。チェックマークを添える ## 動作 - どちらかを押すと、ボタンを消してメッセージに置き換える - 結果は、質問の id と一緒にコールバックで受け取れるようにする（送信の処理そのものは含めない） - 同じ質問に何度も回答できないよう、回答済みであることを localStorage に保存する ## アクセシビリティ - ボタンは button 要素。アイコンは aria-hidden="true" - 押したあとのメッセージは aria-live="polite" で伝える - 親指のアイコンだけに頼らず、「はい」「いいえ」の文字を必ず表示する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。