CTA・特徴紹介コード生成用
フッターに重なるCTAカード
フッターの上辺にまたがる、浮いたカード。
用途・説明
フッターの上辺に半分重なるように置く、カード型のCTAを作成します。ページの最後で自然に目に入り、フッターとの境目にリズムが生まれます。お問い合わせや相談への導線として、多くのコーポレートサイトで使われる形です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：お困りごとは、ありませんか？
[補足]- 例：まずはお気軽にご相談ください。
[ボタンの文言]- 例：お問い合わせ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「フッターに重なるCTAカード」を実装してください。 ## 表示内容 - 見出し：[見出し] - 補足：[補足] - ボタン：[ボタンの文言] - 位置関係が分かるよう、仮のフッター（背景 #1B2A44）も一緒に出力する ## レイアウト - カードは最大幅 1000px、中央配置。カードの高さの半分が、フッターの上に重なる - PC：カードのなかは、左に見出しと補足、右にボタン（横並び・上下中央揃え） - スマホ：縦に並べて中央揃え。ボタンは幅100% ## デザイン - カード：背景 #1463F0、角丸 20px、padding PC 40px 48px / スマホ 32px 24px、影 0 16px 40px rgba(27,42,68,0.25) - 見出し：PC 24px / スマホ 20px、font-weight 700、色 #FFFFFF - 補足：14px、色 rgba(255,255,255,0.85)、見出しの下 8px - ボタン：高さ 48px、左右padding 32px、角丸 999px、背景 #FFFFFF、文字 #1463F0・15px・font-weight 700 - フッター：背景 #1B2A44。カードが重なるぶん、上のpaddingを広く取る ## 実装 - 重なりは、カードに負の margin-bottom を付けるか、フッターの上paddingとカードの transform で作る。position: absolute は使わない（カードの高さが変わっても崩れないため） - 重なりの量を CSS 変数にまとめ、スマホでは小さくする ## アクセシビリティ - カードは section 要素にし、フッター（footer 要素）の外に置く - 見出しは h2、ボタンは a 要素。focus-visible の枠は白にする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。