フッターコード生成用
CTAつきフッター
ページの最後で、もう一度だけ行動を促す。
用途・説明
フッターのすぐ上に、申し込みや問い合わせを促すCTAの帯を一体で配置します。最後まで読んだ人をそのまま次の行動につなげたいLPやサービスサイトに向いています。CTAの帯とフッター本体の色のつながりや、スマホでの並びも指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[CTA見出し]- 例：まずは無料で、試してみませんか。
[CTA補足文]- 例：登録は1分。クレジットカードは不要です。
[ボタン文言]- 例：無料ではじめる
[サービス名]- ロゴ部分とコピーライトに表示する名前
[リンク項目]- 例：機能、料金、ヘルプ、運営者情報
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「CTAつきフッター」を実装してください。 ## 表示内容 - CTAエリア：見出し「[CTA見出し]」、補足文「[CTA補足文]」、ボタン「[ボタン文言]」 - フッター本体：ロゴ（テキスト「[サービス名]」）、リンク [リンク項目]、コピーライト ## レイアウト - 上にCTAエリア、その下にフッター本体を隙間なく続ける - CTAエリア：中央揃えで 見出し → 補足文 → ボタン の順。上下 padding は PC 96px / スマホ 64px - フッター本体：PC は左にロゴ、中央にリンク、右にコピーライトの横1行。スマホは中央揃えの縦並び - どちらもコンテンツ最大幅 1200px、左右 padding 24px ## デザイン - CTAエリア：背景 #1463F0、文字 #FFFFFF - 見出し：PC 32px / スマホ 24px、font-weight 700、line-height 1.5 - 補足文：15px、色 rgba(255,255,255,0.85) - ボタン：高さ 52px、角丸 9999px、背景 #FFFFFF、文字 #1463F0、font-weight 700 - フッター本体：背景 #1B2A44 - ロゴ：#FFFFFF、font-weight 700 - リンク：14px、色 rgba(255,255,255,0.72)、hover で #FFFFFF - コピーライト：12px、色 rgba(255,255,255,0.6) ## 状態 - ボタンの hover：背景を少しだけ暗い白（#EEF3FC）に - focus-visible：白い 2px のアウトラインを外側に表示（濃い背景の上でも見える色にする） ## アクセシビリティ - CTAエリアは section 要素とし、見出しは h2。フッター本体は footer 要素 - CTAエリアは footer の外に置く（フッターのランドマークに宣伝文が含まれないようにする） - リンクは nav（aria-label="フッターメニュー"）内の ul / li - #1463F0の背景と白文字のコントラスト比が 4.5:1 以上か確認し、満たさない場合は調整案を出す ## 出力形式 - [使用技術]のコードを1つ出力 - CTAエリアだけを別のページでも使い回せるよう、独立したコンポーネントに分ける
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。