FAQコード生成用
カテゴリを左に並べたFAQ
左でカテゴリを選び、右にその質問だけを表示する。
用途・説明
左側にカテゴリの一覧、右側に選んだカテゴリの質問を表示するFAQを作成します。質問が20件を超えるような、ヘルプページやサポートサイトに向いています。カテゴリごとの件数も表示するので、どこに何があるかの見当がつきます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[カテゴリと質問]- カテゴリごとに、質問と回答を数組ずつ
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「カテゴリを左に並べたFAQ」を実装してください。 ## 表示内容 [カテゴリと質問] ## レイアウト - PC：左にカテゴリの一覧（幅 240px）、右に質問のアコーディオン。間隔 48px - カテゴリの一覧は position: sticky で、スクロールしても画面内に残す - スマホ：カテゴリは上部の横スクロールのチップにする ## デザイン - カテゴリの項目：高さ 44px、左右padding 16px、角丸 8px、文字 15px・色 #47566E。右端に件数（13px、色 #8A96AA） - 選択中のカテゴリ：背景は #1463F0 の9%の淡い色、文字 #1463F0・font-weight 700 - 右側の上部に、選択中のカテゴリ名（20px、font-weight 700） - 質問：15px、font-weight 700、上下 padding 18px、行の間は 1px solid #E2E8F0 - 回答：14px、line-height 1.9、色 #5F6D84 ## 動作 - カテゴリを選ぶと、右側の質問が切り替わる - 選択中のカテゴリをURLのハッシュ（#billing など）に反映する - 切り替えたとき、右側の先頭までスクロールする（スマホのみ） ## アクセシビリティ - カテゴリは role="tablist"（aria-orientation="vertical"）、右側は role="tabpanel" にする - 上下の矢印キーでカテゴリを移動できる - 件数は「料金について、5件」と読み上げられるようにする - 質問は h3 のなかの button 要素。aria-expanded を付ける ## 出力形式 - [使用技術]のコードを1つ出力 - カテゴリと質問を、入れ子の配列で渡せるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。