FAQコード生成用
申し込み前のミニFAQ
ボタンのすぐ近くに、迷いやすい3問だけを小さく置く。
用途・説明
申し込みボタンや料金表のすぐ下に置く、3問だけの小さなFAQを作成します。「途中で解約できますか？」「支払い方法は？」など、最後に気になる点だけをその場で解決して、申し込みの手前での離脱を減らします。ページ下部の大きなFAQとは別に使います。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 申し込み前に気になる質問・回答を3組
[すべての質問へのリンク]- 例：ほかの質問を見る
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「申し込み前のミニFAQ」を実装してください。 ## 表示内容 - サンプルの申し込みボタン（このFAQの上に置く） [質問と回答] - 最後に、リンク：[すべての質問へのリンク] ## レイアウト - 最大幅 480px、中央配置。申し込みボタンの下 24px - 質問を縦に3つ並べる。行の間は 1px solid #E2E8F0 - 各行：左に下向きの小さな山形のアイコン、その右に質問 ## デザイン - 全体に枠や背景を付けず、控えめに見せる - 質問：14px、font-weight 700、色 #47566E、上下 padding 12px - 山形のアイコン：14px、色 #8A96AA。開いたら 180度回転し、色を #1463F0 に - 回答：13px、line-height 1.8、色 #5F6D84、左にアイコンの幅ぶんの余白、下 padding 12px - リンク：13px、色 #1463F0、中央揃え、上に 12px の余白 ## 動作 - 標準の details / summary 要素で実装し、JavaScript なしでも開閉できるようにする - summary の標準の三角マークは消し、自作のアイコンに置き換える - 開閉の動きを付ける場合の追加のコードをコメントで補足する ## アクセシビリティ - summary にフォーカスのスタイルを用意する - タップ領域は高さ 44px 以上 - 小さな文字でも、コントラスト比 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - 質問と回答を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。