フォーム・お問い合わせコード生成用
ヘッダーに置くお問い合わせボタン
電話番号とボタンを、ヘッダーの右に常に見せておく。
用途・説明
ヘッダーの右側に、電話番号と受付時間、お問い合わせボタンをまとめて置くパーツを作成します。どのページからでも連絡先が目に入るので、問い合わせが主な目的のサイトで効果があります。工務店、リフォーム、士業、クリニックなどのサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分に表示する名前
[電話番号]- 例：0120-000-000
[受付時間]- 例：9:00〜18:00（日祝休）
[ボタン文言]- 例：無料見積もり
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ヘッダーに置くお問い合わせボタン」を実装してください。 ## 表示内容 - 左：ロゴ（テキスト「[サービス名]」で代用） - 右：電話のアイコン、電話番号（[電話番号]）、受付時間（[受付時間]）、ボタン（[ボタン文言]） ## レイアウト - ヘッダーの高さ 80px。左にロゴ、右に電話とボタンを横に並べる - 電話のまとまり：アイコンの右に、電話番号（上）と受付時間（下） - 電話とボタンの間隔 24px - ボタンは、ヘッダーの高さいっぱいの四角にする（右端にぴったり付ける） ## デザイン - ヘッダー：背景 #FFFFFF、下に 1px solid #E2E8F0 - 電話のアイコン：20px、色 #1463F0 - 電話番号：22px、font-weight 700、letter-spacing 0.02em、色 #1B2A44 - 受付時間：11px、色 #5F6D84 - ボタン：幅 160px、背景 #1463F0、文字 #FFFFFF・15px・font-weight 700。封筒のアイコンを文言の上に置く - hover：ボタンの背景を一段暗く ## レスポンシブ - 1024px 未満：受付時間を隠す - 768px 未満：電話番号のテキストを隠し、電話のアイコンボタン（44×44px）だけにする。お問い合わせボタンも、アイコンだけの四角（56×56px）にする ## アクセシビリティ - 電話番号は tel: リンク。アイコンだけになったときも、aria-label で電話番号を伝える - ボタンがアイコンだけになったときも、aria-label で文言を伝える - パソコンでは電話番号を押しても電話がかからないことが多いので、選択してコピーできるテキストにする - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。