FAQコード生成用
よく見られている質問トップ3
とくに多い質問を、順位つきのカードで先に見せる。
用途・説明
問い合わせの多い質問を3つ選び、順位のバッジ付きカードで目立たせるパーツを作成します。FAQ一覧の上、お問い合わせフォームの手前、トップページのサポート案内などに置くと、多くの人の疑問をその場で解決できます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- とくに多い質問と回答を3組
[一覧へのリンク文言]- 例：すべての質問を見る
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「よく見られている質問トップ3」を実装してください。 ## 表示内容 - 見出し：よく見られている質問 [質問と回答] - 下に、リンク：[一覧へのリンク文言] ## レイアウト - PC：3枚のカードを横に並べる（間隔 20px）。スマホ：1列 - カード内は上から 順位のバッジ → 質問 → 回答の冒頭（2行まで）→「続きを読む」 - 3枚のカードの高さをそろえ、「続きを読む」は下端にそろえる ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 24px - 順位のバッジ：直径 32px の円、数字 14px・font-weight 700。1位は背景 #1463F0・文字 #FFFFFF、2・3位は背景 #1463F0 の9%の淡い色・文字 #1463F0 - 質問：15px、font-weight 700、line-height 1.6、色 #1B2A44 - 回答の冒頭：13px、line-height 1.8、色 #5F6D84、2行で省略（…） - 「続きを読む」：13px、font-weight 700、色 #1463F0、右向きの矢印 - hover：枠線を #1463F0 に ## 動作 - カード全体を押すと、FAQ一覧のその質問の位置へ移動する（開いた状態で） - 順位は、渡した順番で自動で振る ## アクセシビリティ - 順位に意味があるので ol / li でマークアップする - 質問は h3 のなかの a 要素にし、カード全体をクリックできるようにする - バッジの数字は「1位」と読み上げられるようにする - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。