CTA・特徴紹介コード生成用
安心材料を添えたCTA
ボタンの下に「カード不要」などを3つ並べる。
用途・説明
大きなボタンのすぐ下に、「クレジットカード不要」「いつでも解約OK」などの安心材料をチェックマークつきで並べるCTAを作成します。申し込む直前の不安を、その場で解消できます。無料登録や無料体験の受付に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：30秒で、かんたん登録
[ボタンの文言]- 例：無料で登録する
[安心材料]- 全角12文字以内で3つ。例：クレジットカード不要
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「安心材料を添えたCTA」を実装してください。 ## 表示内容 - 見出し：[見出し] - ボタン：[ボタンの文言] - 安心材料： [安心材料] ## レイアウト - すべて中央揃え。上から 見出し → ボタン → 安心材料 - 安心材料は PC で横並び（間隔 24px）、スマホで縦並び（間隔 8px） - セクションの上下に PC 80px / スマホ 56px の余白 ## デザイン - 見出し：PC 28px / スマホ 22px、font-weight 700、色 #1B2A44 - ボタン：高さ 60px、左右padding 56px、角丸 999px、背景 #1463F0、文字 #FFFFFF・18px・font-weight 700、影 0 8px 20px（#1463F0 の25%）、見出しの下 24px - スマホではボタンを幅100%（最大 360px）にする - 安心材料：13px、色 #47566E、ボタンの下 20px - チェックマーク：16px、線の太さ 2.5px、色 #1463F0、文字の左に 6px の間隔 - hover：ボタンを 2px 持ち上げ、影を濃くする ## マークアップ - 見出しは h2、ボタンは a 要素 - 安心材料は ul / li。チェックマークは aria-hidden="true" ## 注意点 - 安心材料には、事実だけを書く（実際には条件があるのに「いつでも解約OK」と書かない） ## アクセシビリティ - focus-visible のスタイルを用意する - hover の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。