フォーム・お問い合わせコード生成用
よくある質問を先に見せるお問い合わせページ
フォームの前に、多い質問の答えを置いておく。
用途・説明
お問い合わせフォームの上に、よくある質問を3〜5個、先に表示するページを作成します。質問の答えがその場で分かれば、問い合わせずに解決できます。問い合わせの件数を減らしたいサービスや、同じ質問が繰り返し届くサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[よくある質問]- 質問と回答を3〜5組
[入力項目]- 例：お名前、メールアドレス、お問い合わせ内容
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「よくある質問を先に見せるお問い合わせページ」を実装してください。 ## 表示内容 - 見出し：お問い合わせ - ステップ1：「まずは、よくあるご質問をご確認ください」と、質問のアコーディオン [よくある質問] - 「すべての質問を見る」のリンク - ステップ2：「解決しない場合は、こちらからお問い合わせください」と、フォーム - フォーム：[入力項目] ## レイアウト - 中央の1カラム（最大幅 720px） - ステップ1とステップ2を、番号付きの小見出しで区切る。間隔 56px - ステップ1の最後に、「解決しない方はこちら ↓」のボタンを置き、押すとフォームまでスクロールする ## デザイン - 小見出し：左に番号の丸（28px、背景 #1463F0、文字 #FFFFFF）、右に見出し（18px、font-weight 700） - 質問のアコーディオン：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px。質問は 15px・font-weight 700 - 回答：14px、line-height 1.9、色 #5F6D84 - フォーム：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 32px - 送信ボタン：高さ 52px、角丸 999px、背景 #1463F0、文字 #FFFFFF ## 動作 - フォームを隠したり、質問を読まないと進めないようにはしない（急いでいる人がすぐ問い合わせできるようにする） - 「お問い合わせの種類」を選んだときに、関係する質問を入力欄の下に出す例をコメントで補足する ## アクセシビリティ - 見出しは h1、ステップの小見出しは h2 - 質問は h3 のなかの button 要素。aria-expanded を付ける - フォームへのスクロールのあと、フォーカスを最初の入力欄に移す - prefers-reduced-motion のときは、なめらかなスクロールをやめる ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。