ボタンコード生成用
タップで電話をかけるボタン
番号と受付時間をのせた、スマホ向けの電話ボタン。
用途・説明
スマホでタップするとそのまま電話をかけられるボタンを作ります。電話のアイコン、大きな電話番号、受付時間を1つのボタンにまとめているので、予約や相談を電話で受けたい店舗、クリニック、工務店、士業のサイトに向いています。パソコンでは電話番号の表示として機能します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[電話番号]- 例：03-0000-0000
[受付時間]- 例：平日 10:00〜18:00
[上の一言]- 例：お電話でのご予約
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「タップで電話をかけるボタン」を実装してください。 ## 表示内容 - 上の一言：[上の一言] - 電話番号：[電話番号] - 受付時間：[受付時間] ## デザイン - 横幅 100%（最大 360px）、高さ 64px、角丸 12px、背景 #1463F0、文字 #FFFFFF - 左に電話のアイコン（24px）を、白い丸（40px、背景 rgba(255, 255, 255, 0.18)）のなかに置く - 右側に2段：上段に一言と受付時間（12px）、下段に電話番号（22px、font-weight 700、letter-spacing 0.04em） - 影：0 4px 12px rgba(20, 99, 240, 0.25) ## 動作 - a 要素の href を tel: にする。番号のハイフンは href では取り除く - パソコン（hover できる端末、幅 768px 以上）ではボタンの見た目をやめ、番号と受付時間のテキスト表示にする例も併記する ## アクセシビリティ - aria-label を「電話をかける 03-0000-0000（平日 10時から18時）」のように、内容がひと続きで伝わる形にする - アイコンは aria-hidden="true" - 白い文字と #1463F0 のコントラスト比 4.5:1 以上 - active（押している間）は背景を一段暗くする ## 出力形式 - [使用技術]のコードを1つ出力 - 受付時間外に押された場合の案内（フォームへの誘導など）を出す方法をコメントで補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。