FAQコード生成用
開閉できるFAQアコーディオン
質問をクリックすると答えが開く、よくある質問。
用途・説明
よくある質問を、クリックで開閉できるアコーディオン形式で作成します。キーボード操作と読み上げに対応し、検索エンジン向けの構造化データも一緒に出力されます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- Q&Aのペアを3〜8個
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の内容で、よくある質問（FAQ）のアコーディオンを実装してください。 ## 内容 [質問と回答] ## 動作 - 質問をクリック（またはEnter／Space）で回答を開閉 - 複数の質問を同時に開いてよい - 初期状態はすべて閉じる ## デザイン - 最大幅 760px、中央配置 - 各項目の区切りに 1px solid #E2E8F0 の線 - 質問行：高さ最低 56px、16px、font-weight 700、色 #1B2A44、先頭に「Q」（#1463F0） - 右端に開閉を示すアイコン（＋ / −、または下向き矢印の回転） - 回答：15px、line-height 1.9、色 #5F6D84、左に「A」、上下 padding 16px - 開閉のアニメーションは 200ms 程度の控えめなもの ## アクセシビリティ - <details>/<summary> を使うか、<button aria-expanded aria-controls> で実装する（どちらを選んだか理由を書く） - フォーカスリングを表示 - prefers-reduced-motion ではアニメーションを無効化 ## SEO - FAQPage の構造化データ（JSON-LD）も合わせて出力する ## 出力形式 - [使用技術]のコードと、JSON-LDをそれぞれ出力 - 質問を追加する方法をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。