CTA・特徴紹介コード生成用
中央揃えのCTAセクション
ページの最後に、見出しとボタンをまっすぐ置く。
用途・説明
ページの最後に置く、中央揃えのCTAセクションを作成します。メインカラーの背景に、見出し・補足・2つのボタン（メインとサブ）を置く、もっとも基本的な形です。どのページにも使い回せるよう、文言を差し替えやすくしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：まずは無料で、試してみませんか？
[補足]- 例：クレジットカード不要・1分で登録
[メインボタン]- 例：無料ではじめる
[サブボタン]- 例：資料を見る
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「中央揃えのCTAセクション」を実装してください。 ## 表示内容 - 見出し：[見出し] - 補足：[補足] - メインボタン：[メインボタン] - サブボタン：[サブボタン] ## レイアウト - 画面の幅いっぱいの背景。上下padding PC 96px / スマホ 64px - すべて中央揃え。上から 見出し → 補足 → ボタン - ボタンは PC で横並び（間隔 12px）、スマホで縦並び（幅100%） ## デザイン - 背景：#1463F0 - 見出し：PC 32px / スマホ 24px、font-weight 700、line-height 1.5、色 #FFFFFF - 補足：14px、色 rgba(255,255,255,0.85)、見出しの下 12px - メインボタン：高さ 52px、左右padding 32px、角丸 999px、背景 #FFFFFF、文字 #1463F0・16px・font-weight 700 - サブボタン：同じ大きさ、背景は透明、枠線 1.5px solid rgba(255,255,255,0.7)、文字 #FFFFFF - ボタンは補足の下 32px - hover：メインボタンは少し持ち上げて影を付ける。サブボタンは背景を rgba(255,255,255,0.12) に ## マークアップ - section 要素に aria-labelledby で見出しを結びつける - 見出しは h2、ボタンは a 要素 ## アクセシビリティ - #1463F0 の背景と白い文字のコントラスト比 4.5:1 以上を確認する - focus-visible の枠は白にして、背景の上でも見えるようにする - hover の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。