FAQコード生成用
2カラムのFAQセクション
左に見出し、右に質問と回答を開いたまま並べる。
用途・説明
左側に見出しと問い合わせへの導線、右側に質問と回答を並べる2カラムのFAQセクションを作成します。開閉させずに回答をすべて見せるので、質問が5件前後と少ないページに向いています。検索結果に表示されやすくなる構造化データの出力も指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答のリスト]- Q&Aを4〜6件
[お問い合わせ先]- 例：/contact
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「2カラムのFAQセクション」を実装してください。 ## 表示内容 - 左：英字ラベル「FAQ」、見出し「よくあるご質問」、補足文、「お問い合わせ」リンク（[お問い合わせ先]） - 右：質問と回答の一覧 [質問と回答のリスト] ## レイアウト - PC：左 4 : 右 8 の2カラム、間隔 64px。コンテンツ最大幅 1080px - 左カラムはスクロールしても画面内にとどまる（position: sticky、top 96px） - 960px 未満では1カラムにし、左カラムの内容を上に置く（sticky は解除） - 回答は開閉させず、すべて表示したままにする ## デザイン - 英字ラベル：12px、font-weight 700、letter-spacing 0.2em、色 #1463F0 - 見出し：PC 32px / スマホ 26px、font-weight 700、色 #1B2A44 - 各Q&Aの上下に 1px solid #E2E8F0 の区切り線、上下の余白 24px - 質問：17px、font-weight 700、line-height 1.6 - 回答：15px、line-height 1.9、色 #5F6D84、質問との間隔 8px - お問い合わせリンク：#1463F0、font-weight 700、右向きの矢印付き ## マークアップ・アクセシビリティ - セクション見出しは h2、各質問は h3 - 質問と回答の組は dl / dt / dd ではなく、見出し（h3）＋段落（p）で実装し、見出しジャンプで質問をたどれるようにする - 英字ラベルは装飾なので aria-hidden="true" - リンクの矢印は装飾扱いにする ## 構造化データ - 表示している質問と回答をそのまま使い、FAQPage の JSON-LD を出力する - 画面に表示していない質問を構造化データだけに含めない ## 出力形式 - [使用技術]のコードを1つ出力 - Q&Aはデータ（配列）として分離し、画面表示と JSON-LD の両方をそこから生成する - 質問が10件を超える場合はアコーディオン形式のほうが向いている、という使い分けを最後に補足
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。