FAQコード生成用
解決しないときの案内付きFAQ
FAQの最後に、問い合わせへの入口を用意する。
用途・説明
開閉できるFAQの最後に、「解決しない場合はこちら」の案内ボックスを置いた構成を作成します。FAQで解決しなかった人が、迷わず問い合わせに進めます。サポートページやサービスサイトのFAQセクションに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 質問・回答を4〜6件
[案内文]- 例：解決しない場合は、お気軽にご相談ください。
[ボタン文言]- 例：お問い合わせ
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「解決しないときの案内付きFAQ」を実装してください。 ## 表示内容 - 質問と回答：[質問と回答]（開閉式） - 案内ボックス：[案内文] と、ボタン：[ボタン文言] ## レイアウト・デザイン - 質問行：高さ最低 56px、16px、font-weight 700、色 #1B2A44、先頭に「Q」（#1463F0）、右端に開閉の記号。行の間は 1px solid #E2E8F0 - 回答：15px、line-height 1.9、色 #5F6D84 - 案内ボックス：FAQの下 32px。#1463F0 の9%の背景、角丸 12px、padding 20px 24px。左に案内文（15px、font-weight 700、色 #1B2A44）、右にボタン - ボタン：高さ 44px、背景 #1463F0、文字 #FFFFFF、角丸 9999px - スマホでは案内文とボタンを縦に積む ## 動作 - 質問を押すと回答が開閉する。開閉は高さのアニメーション（200ms） - 最初はすべて閉じた状態にする ## アクセシビリティ - 質問は button 要素、aria-expanded と aria-controls を付ける - 案内ボックスのボタンは、問い合わせページへの a 要素にする - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 質問と回答を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。