FAQコード生成用
開閉しないQ&Aの一覧
質問と回答を最初からすべて見せる、読みものとしてのFAQ。
用途・説明
アコーディオンにせず、質問と回答を最初からすべて表示するQ&Aを作成します。質問が5つ以下のときや、回答までしっかり読んでほしいときは、開閉させないほうが親切です。採用ページ、サービス紹介の最後、申し込みフォームの手前などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 質問・回答を3〜5組
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「開閉しないQ&Aの一覧」を実装してください。 ## 表示内容 [質問と回答] ## レイアウト - 質問と回答の組を縦に並べる。組の間隔 40px - 各組：左に「Q」「A」の丸いバッジ、右に文章 - コンテナの最大幅 760px ## デザイン - 「Q」のバッジ：直径 36px、背景 #1463F0、文字 #FFFFFF・16px・font-weight 700 - 「A」のバッジ：直径 36px、背景 #FFFFFF、枠線 2px solid #1463F0、文字 #1463F0 - 質問：17px、font-weight 700、line-height 1.6、色 #1B2A44。バッジの上下中央にそろえる - 回答：15px、line-height 1.9、色 #47566E。質問の下 12px - 組の間に 1px dashed #DCE4F0 の線 ## 回答の書式 - 回答のなかで、箇条書き・リンク・太字が使えるようにスタイルを用意する - リンクは #1463F0 で下線付き - 手順は番号付きのリスト（ol）で表示する ## アクセシビリティ - dl / dt / dd でマークアップする。または、質問を h3、回答をその下の段落にする（どちらにしたかを明記） - 「Q」「A」のバッジは aria-hidden="true" にし、読み上げ用に「質問」「回答」の文言を視覚的に隠して入れる - 白い文字と #1463F0 のコントラスト比 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - 質問と回答を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。