フォーム・お問い合わせコード生成用
スマホの画面下に固定する連絡バー
電話・メール・予約を、いつでも押せる位置に並べる。
用途・説明
スマホの画面下に固定して表示する、連絡用のバーを作成します。「電話」「メール」「予約」などを横に並べ、ページのどこを読んでいてもすぐに連絡できます。来店や相談につなげたい店舗、クリニック、工務店、士業のサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ボタン]- 2〜3個。例：電話する、メールで相談、Web予約
[電話番号]- 例：03-0000-0000
[いちばん目立たせるボタン]- 例：Web予約
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「スマホの画面下に固定する連絡バー」を実装してください。 ## 表示内容 - ボタン：[ボタン]（それぞれアイコンと文言） - 電話番号：[電話番号] - 目立たせるボタン：[いちばん目立たせるボタン] ## レイアウト - position: fixed で画面の下端に固定する。幅 100% - ボタンを横に並べる。目立たせるボタンは、ほかの2倍の幅にする - 高さ 60px。iPhoneのホームバーを避けるため、padding-bottom に env(safe-area-inset-bottom) を足す - 768px 以上では表示しない ## デザイン - バー：背景 #FFFFFF、上に 1px solid #E2E8F0、影 0 -4px 16px rgba(27, 42, 68, 0.08) - 通常のボタン：アイコン（22px、色 #1463F0）を上、文言（11px、font-weight 700、色 #1B2A44）を下に。あいだは 1px solid #E2E8F0 の縦線 - 目立たせるボタン：背景 #1463F0、文字 #FFFFFF・15px・font-weight 700、アイコンを左に置く横並び - 押している間（active）：背景を一段暗くする ## 動作 - 少しスクロールしてから（200px）、下からせり上がって表示する - フッターが見えたら隠す（フッターの内容と重ならないようにする） - フォームの入力欄にフォーカスしている間は隠す（キーボードの上に重ならないようにする） - バーの高さぶん、ページの下に余白を足す ## アクセシビリティ - nav 要素（aria-label="お問い合わせ"）でマークアップする - 電話のボタンは tel: リンク。aria-label に電話番号を含める - アイコンは aria-hidden="true" - タップ領域は高さ 48px 以上 - 表示・非表示の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。