フッターコード生成用
電話とフォームのCTAつきフッター
フッターの上に、電話番号と問い合わせボタンの帯を置く。
用途・説明
フッターのすぐ上に、電話番号とお問い合わせボタンを左右に並べた帯を付けるフッターを作成します。ページを最後まで読んだ人に、連絡の方法を2つ示せます。工務店、リフォーム、士業、不動産、クリニックなど、電話とフォームの両方で受け付けるサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[呼びかけ]- 例：ご相談・お見積りは無料です
[電話番号・受付時間]- 例：0120-000-000（9:00〜18:00・日祝休）
[ボタン文言]- 例：メールで相談する
[サービス名]- コピーライトに表示する名前
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「電話とフォームのCTAつきフッター」を実装してください。 ## 表示内容 - CTAの帯：呼びかけ（[呼びかけ]）、左に電話（[電話番号・受付時間]）、右にボタン（[ボタン文言]） - フッター本体：ロゴ、リンク、コピーライト（© 年 [サービス名]） ## レイアウト - CTAの帯：上に呼びかけ（中央）、その下に左右2つのエリアを並べ、中央を 1px の縦線で区切る - 左のエリア：「お電話でのご相談」のラベル、電話番号、受付時間 - 右のエリア：「フォームでのご相談」のラベル、ボタン、「24時間受付」の一言 - スマホ：左右のエリアを縦に並べる - フッター本体：左にロゴ、右にリンク、下にコピーライト ## デザイン - CTAの帯：背景 #1463F0、文字 #FFFFFF、上下 padding 48px - 呼びかけ：20px、font-weight 700 - ラベル：13px、不透明度 0.9 - 電話番号：32px（スマホ 28px）、font-weight 700、letter-spacing 0.02em。左に電話のアイコン - 受付時間：12px、不透明度 0.9 - ボタン：高さ 56px、左右padding 32px、角丸 999px、背景 #FFFFFF、文字 #1463F0・16px・font-weight 700。左に封筒のアイコン - 区切りの縦線：1px solid rgba(255, 255, 255, 0.3) - フッター本体：背景 #1B2A44、文字 rgba(255, 255, 255, 0.78)、上下 padding 32px ## アクセシビリティ - 電話番号は tel: リンク - 白い文字と #1463F0 のコントラスト比 4.5:1 以上 - アイコンは aria-hidden="true" - footer 要素を使う。CTAの帯は、footer の前の section として分けてもよい（どちらにしたかを明記） ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。