FAQコード生成用
横スクロールのチップで絞り込むFAQ
スマホで押しやすいチップで、カテゴリを切り替える。
用途・説明
FAQの上に、横にスクロールできるカテゴリのチップを並べて、質問を絞り込めるようにします。タブよりも場所をとらず、スマホの片手操作でも押しやすい形です。カテゴリが5つ以上あるFAQや、スマホからの利用が多いサービスに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[カテゴリ]- 例：すべて、料金、使い方、アカウント、解約、その他
[質問と回答]- カテゴリ付きで6〜10組
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「横スクロールのチップで絞り込むFAQ」を実装してください。 ## 表示内容 - カテゴリのチップ：[カテゴリ] - 質問と回答： [質問と回答] ## レイアウト - 上部にチップを横1列に並べる。入りきらない分は横スクロール（折り返さない） - チップの列は position: sticky で、スクロールしても上に残す - その下に、質問のアコーディオン ## デザイン - チップ：高さ 36px、左右padding 16px、角丸 999px、枠線 1px solid #DCE4F0、背景 #FFFFFF、文字 14px・色 #47566E - 選択中のチップ：背景 #1463F0、枠線 #1463F0、文字 #FFFFFF・font-weight 700 - チップの列の右端を、白へのグラデーションで薄くして、続きがあることを示す - スクロールバーは非表示にする - 質問：15px、font-weight 700、上下 padding 18px、行の間は 1px solid #E2E8F0 - 質問の上に、小さくカテゴリ名（11px、色 #1463F0）を表示する（「すべて」を選んでいるときのみ） ## 動作 - チップを押すと、そのカテゴリの質問だけを表示する - 絞り込んだ結果の件数を、チップの列の下に表示する（例：料金：4件） - 選択したチップが見える位置に来るよう、自動で横スクロールさせる ## アクセシビリティ - チップは button 要素にし、aria-pressed で選択中を伝える - 件数の変化を aria-live="polite" で伝える - 横スクロールの領域は、キーボードの矢印キーでも動かせる - タップ領域は高さ 44px 以上（見た目は 36px でも、余白で確保する） ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。