フォーム・お問い合わせコード生成用
電話番号と受付時間の案内
電話番号を大きく、受付時間と一緒に伝える案内ボックス。
用途・説明
電話での問い合わせを受け付けるサービス向けに、電話番号と受付時間を大きく見せる案内ボックスを作成します。フォームへのボタンも並べて、好きな方法を選べるようにします。店舗、クリニック、工務店、士業などのサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[電話番号]- 例：0120-000-000
[受付時間]- 例：平日 9:00〜18:00
[ボタン文言]- 例：フォームで相談する
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「電話番号と受付時間の案内」を実装してください。 ## 表示内容 - 見出し「お電話でのご相談」 - 電話番号：[電話番号]、受付時間：[受付時間] - フォームへのボタン：[ボタン文言] ## レイアウト - PC：左に電話のアイコン・見出し・番号・受付時間、右端にボタンの横並び - スマホ（640px未満）：縦に積み、中央揃え。ボタンは全幅 ## デザイン - ボックス：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 24px 28px - アイコン：48px の丸い箱（#1463F0 の9%の背景）に、電話のアイコン（#1463F0） - 見出し：13px、font-weight 700、色 #5F6D84 - 電話番号：28px、font-weight 700、letter-spacing 0.02em、色 #1B2A44 - 受付時間：13px、色 #5F6D84 - ボタン：高さ 48px、枠線 1px solid #1463F0、文字 #1463F0、角丸 8px ## アクセシビリティ - 電話番号は tel: のリンクにする。PCでは押せることが分かりにくいので、見た目は文字のままでよい - 受付時間外の案内（例：時間外はフォームをご利用ください）を文字で添える - 電話のアイコンは aria-hidden="true" ## 出力形式 - [使用技術]のコードを1つ出力 - 色・余白をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。