FAQコード生成用
番号付きのQ&A
Q1・Q2と番号を振って、質問を数えやすく探しやすく。
用途・説明
質問に「Q1」「Q2」と番号を付けて並べるQ&Aを作成します。番号があると、電話や問い合わせで「Q3をご覧ください」と案内しやすくなります。マニュアル、申し込みの手引き、学校や自治体の案内など、参照されることの多いFAQに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 質問・回答を5〜8組
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「番号付きのQ&A」を実装してください。 ## 表示内容 [質問と回答] ## レイアウト - 質問を縦に並べ、質問の間は 1px solid #E2E8F0 で区切る - 各行：左に番号（Q1、Q2…）、中央に質問、右端に「＋／−」 - 回答は、質問の文字の左端にそろえて開く（番号の幅ぶん、左に余白） ## デザイン - 番号：幅 56px、20px、font-weight 700、色 #1463F0、欧文は等幅に近い数字（tabular-nums） - 質問：16px、font-weight 700、色 #1B2A44 - 行の上下 padding 20px - 回答：左に「A」（20px、font-weight 700、色 #5F6D84）を置き、その右に本文（15px、line-height 1.9、色 #47566E） - 「＋／−」：18px、色 #5F6D84 ## 動作 - 質問の行を押すと開閉する - 各質問に id（faq-1、faq-2…）を付け、URLのハッシュ（#faq-3）で開いたときは、その質問を開いた状態で表示し、そこまでスクロールする - 質問の右に、リンクをコピーする小さなボタンを hover で表示する ## アクセシビリティ - 番号は自動で振り、読み上げでは「質問1」と伝わるようにする - 質問は h3 のなかの button 要素。aria-expanded と aria-controls を付ける - リンクをコピーするボタンには aria-label を付け、キーボードのフォーカスでも表示する - 開閉の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 質問と回答を配列で渡し、番号は自動で振る
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。