FAQコード生成用
カード型のFAQ
開閉なしで、質問と回答をカードに並べて一覧する。
用途・説明
質問と回答を1枚ずつのカードにして、開閉なしで並べるFAQを作成します。質問が4〜6件ほどで、どれも読んでほしい場合に向いています。トップページや料金ページの下に置く、短いQ&Aとして使えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 質問・回答を4〜6件。回答は2〜3行
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「カード型のFAQ」を実装してください。 ## 表示内容 [質問と回答] （各カード：質問、回答） ## レイアウト - PC：2列、スマホ：1列。カード間隔 20px - 同じ行のカードは高さをそろえる ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 24px - 質問：16px、font-weight 700、line-height 1.6、色 #1B2A44。先頭に「Q」（#1463F0、font-weight 700） - 回答：14px、line-height 1.9、色 #5F6D84。質問の下 10px - 「Q」と質問文の2行目以降は、文字の位置をそろえる ## アクセシビリティ - 質問は h3、回答はその下の段落。一覧は ul / li - 「Q」が読み上げられない実装でも質問だと分かるよう、質問文は疑問文にする - 検索エンジン向けに、FAQPage の構造化データ（JSON-LD）の例を併記する ## 出力形式 - [使用技術]のコードを1つ出力 - 質問と回答を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。