FAQコード生成用
関連する質問のリンク
回答の下に、あわせて読まれている質問を並べる。
用途・説明
回答の下に「関連する質問」を3つほどリンクで並べるパーツを作成します。ひとつの回答を読んだ人が、次に気になりそうな質問へすぐ進めます。ヘルプセンターの個別ページや、質問ごとにページが分かれているFAQに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[いまの質問と回答]- サンプルとして1組
[関連する質問]- 3〜4個
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「関連する質問のリンク」を実装してください。 ## 表示内容 - いまの質問と回答：[いまの質問と回答] - その下に、見出し「関連する質問」と、リンクの一覧： [関連する質問] ## レイアウト - 質問（大きな見出し）→ 回答 → 区切り線 → 関連する質問 - 関連する質問は縦に並べる。各行は、左に「Q」、中央に質問、右端に右向きの矢印 ## デザイン - いまの質問：24px、font-weight 700、line-height 1.5、色 #1B2A44 - 回答：16px、line-height 2、色 #47566E - 「関連する質問」の見出し：14px、font-weight 700、色 #5F6D84、letter-spacing 0.05em - リンクの行：高さ 56px、左右padding 16px、背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 10px、行の間隔 8px - 「Q」：font-weight 700、色 #1463F0 - 質問：15px、色 #1B2A44、1行で省略 - hover：枠線 #1463F0、矢印を右に 4px 動かす ## 動作 - 関連する質問は、同じカテゴリの質問から、いまの質問を除いて選ぶ（選び方の関数を用意する） - 手動で指定した関連質問がある場合は、そちらを優先する ## アクセシビリティ - 関連する質問は nav 要素（aria-label="関連する質問"）のなかの ul / li - 行全体を a 要素にする。矢印は aria-hidden="true" - focus-visible のスタイルを用意する - hover の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。