FAQコード生成用
カテゴリタブ付きのFAQ
「料金」「使い方」などのタブで、質問を切り替える。
用途・説明
質問の数が多いときに、カテゴリのタブで切り替えて表示するFAQを作成します。タブの中は開閉できるアコーディオンにして、目的の質問にたどり着きやすくします。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[カテゴリと質問]- カテゴリ名と、それぞれの質問・回答を数件ずつ
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「カテゴリタブ付きのFAQ」を実装してください。 ## 表示内容 [カテゴリと質問] （カテゴリのタブ、選んだカテゴリの質問と回答） ## レイアウト・デザイン - タブ：横に並べ、下に 1px solid #E2E8F0 の線。15px、色 #5F6D84。選択中は font-weight 700、色 #1463F0、下に 3px の線（#1463F0） - スマホでタブが入りきらない場合は横スクロールにし、スクロールバーは隠さない - 質問行：高さ最低 56px、16px、font-weight 700、色 #1B2A44、先頭に「Q」（#1463F0）、右端に開閉の記号 - 回答：15px、line-height 1.9、色 #5F6D84 - 行の間は 1px solid #E2E8F0 で区切る ## 動作 - タブを押すと、そのカテゴリの質問だけを表示する - 質問を押すと回答が開閉する。複数を同時に開ける - URLのハッシュ（#billing など）で、開くタブを指定できるようにする ## アクセシビリティ - タブは role="tablist" / "tab" / "tabpanel" で実装し、左右の矢印キーで移動できる - 質問は button 要素、aria-expanded と aria-controls を付ける - 選択中のタブを、色だけでなく太字と下線でも区別する - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - カテゴリと質問を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。