フォーム・お問い合わせコード生成用
部署別のお問い合わせ窓口
内容ごとに担当の窓口を分けて、たらい回しを防ぐ。
用途・説明
お問い合わせの内容ごとに、担当の窓口・連絡先・受付時間を一覧にするページを作成します。「製品について」「採用について」「取材について」など、内容によって担当が違う会社で、最初から正しい窓口に連絡してもらえます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[窓口]- 内容・担当部署・連絡方法・受付時間を3〜5件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「部署別のお問い合わせ窓口」を実装してください。 ## 表示内容 - 見出し：お問い合わせ窓口 - 案内文：「ご用件に合わせて、担当の窓口へご連絡ください。」 [窓口] （各行：ご用件、担当部署、連絡方法のボタン、受付時間） ## レイアウト - 窓口を縦に並べる。行の間は 1px solid #E2E8F0 - PC：左にご用件と担当部署（幅 40%）、中央に受付時間、右に連絡方法のボタン - スマホ：ご用件 → 担当部署と受付時間 → ボタン の順に縦に並べる ## デザイン - 全体：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 8px 24px - 各行：上下 padding 20px - ご用件：16px、font-weight 700、色 #1B2A44（例：製品・サービスについて） - 担当部署：13px、色 #5F6D84 - 受付時間：13px、色 #5F6D84。行頭に時計のアイコン - ボタン：高さ 40px、左右padding 16px、角丸 999px、枠線 1px solid #1463F0、文字 #1463F0・13px・font-weight 700 - フォームの場合：封筒のアイコンと「フォームへ」 - 電話の場合：電話のアイコンと電話番号 ## 動作 - フォームのボタンは、お問い合わせの種類をあらかじめ選んだ状態でフォームを開く（URLのパラメーターで渡す） - 電話番号は tel: リンクにする ## アクセシビリティ - 一覧は ul / li、ご用件は h3 - ボタンの aria-label に、ご用件を含める（例：採用についてフォームで問い合わせる） - アイコンは aria-hidden="true" - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - 窓口を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。