FAQコード生成用
検索できるFAQ
キーワードを入れると、当てはまる質問だけに絞り込む。
用途・説明
上部の検索窓にキーワードを入れると、当てはまる質問だけが残るFAQを作成します。ヘルプページやサポートページなど、質問が20件以上あるような場面に向いています。見つからなかったときの案内も含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 質問・回答を10件程度
[お問い合わせ先]- 見つからないときの案内先。例：お問い合わせフォームのURL
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「検索できるFAQ」を実装してください。 ## 表示内容 - 検索窓（プレースホルダー「キーワードで質問を探す」） - 質問と回答の一覧：[質問と回答] - 件数の表示（例：3件の質問が見つかりました） - 0件のときの案内と、[お問い合わせ先] へのリンク ## レイアウト・デザイン - 検索窓：高さ 52px、背景 #FFFFFF、枠線 1px solid #DCE4F0、角丸 9999px、左に虫めがね（色 #5F6D84）。フォーカス時は枠線 #1463F0 - 質問行：16px、font-weight 700、色 #1B2A44、先頭に「Q」（#1463F0）。押すと回答が開く - 回答：15px、line-height 1.9、色 #5F6D84 - 一致した言葉は、質問と回答の中で #1463F0 の15%の背景を付けて目立たせる - 件数：13px、色 #5F6D84 ## 動作 - 入力のたびに絞り込む（200ms 待ってから実行） - 質問と回答の両方を対象にし、全角・半角、大文字・小文字、ひらがな・カタカナの違いを区別しない - 検索中は、一致した質問の回答を開いた状態にする - 入力を消すと、すべての質問を閉じた状態に戻す ## アクセシビリティ - 検索窓には見えるラベル、または aria-label を付ける - 件数の変化を aria-live="polite" で伝える - 質問は button 要素、aria-expanded を付ける - JavaScriptが動かない場合でも、すべての質問と回答が読めること ## 出力形式 - [使用技術]のコードを1つ出力 - 質問と回答を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。