フォーム・お問い合わせコード生成用
資料請求と相談の2択CTA
「まず知りたい人」と「すぐ話したい人」に、入口を分ける。
用途・説明
「資料をダウンロード」と「相談する」の2つの入口を、左右に並べたセクションを作成します。まだ検討の途中の人と、すぐに話を進めたい人の両方に、合った行き先を用意できます。BtoBサービスや高額な商品のページの最後に置くのに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[左の入口]- 見出し・説明・ボタン文言。例：資料請求
[右の入口]- 見出し・説明・ボタン文言。例：無料相談
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「資料請求と相談の2択CTA」を実装してください。 ## 表示内容 - 左のカード：[左の入口] - 右のカード：[右の入口] - 各カード：アイコン、「こんな方に」の一言、見出し、説明、ボタン ## レイアウト - PC：左右2枚のカードを並べる（間隔 24px）。高さをそろえ、ボタンを下端にそろえる - スマホ：縦に並べる - カード内は中央揃え ## デザイン - セクションの背景：#F7F9FC、上下 padding 80px - 左のカード：背景 #FFFFFF、枠線 1px solid #E2E8F0。ボタンは枠線（1px solid #1463F0、文字 #1463F0） - 右のカード：背景 #1463F0、文字 #FFFFFF。ボタンは背景 #FFFFFF・文字 #1463F0 - 共通：角丸 16px、padding 40px 32px - アイコン：線のアイコン 32px を、56px の丸のなかに置く - 「こんな方に」：12px、font-weight 700（例：まずは情報を集めたい方に） - 見出し：20px、font-weight 700 - 説明：14px、line-height 1.8 - ボタン：幅 100%（最大 280px）、高さ 52px、角丸 999px、font-weight 700 ## アクセシビリティ - 各カードの見出しは h3 - 右のカードの白い文字と #1463F0 のコントラスト比 4.5:1 以上 - ボタンの文言だけで行き先が分かるようにする（「こちら」などにしない） - アイコンは aria-hidden="true" - focus-visible のリングは、色の付いたカードの上でも見えるようにする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。