CTA・特徴紹介コード生成用
グラデーション背景のCTA
2色のグラデーションで、華やかに締めくくる。
用途・説明
2色のグラデーションを背景にした、華やかなCTAセクションを作成します。無料トライアルやキャンペーンなど、目立たせたい案内に向いています。ラベル・見出し・ボタンだけの、要素を絞った構成です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ラベル]- 例：FREE TRIAL
[見出し]- 例：14日間、すべての機能を無料で。
[ボタンの文言]- 例：いますぐ試す
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「グラデーション背景のCTA」を実装してください。 ## 表示内容 - ラベル：[ラベル] - 見出し：[見出し] - ボタン：[ボタンの文言] ## レイアウト - 最大幅 1080px のカード型。左右に 24px の余白、中央配置 - すべて中央揃え。上から ラベル → 見出し → ボタン - padding PC 72px 40px / スマホ 48px 24px ## デザイン - 背景：linear-gradient(120deg, #1463F0, #8B5CF6)、角丸 24px - 背景の右上と左下に、白い半透明の大きな円（不透明度 8%）を装飾として重ねる - ラベル：12px、font-weight 700、letter-spacing 0.2em、色 rgba(255,255,255,0.85) - 見出し：PC 32px / スマホ 24px、font-weight 700、line-height 1.5、色 #FFFFFF、ラベルの下 12px - ボタン：高さ 52px、左右padding 36px、角丸 999px、背景 #FFFFFF、文字 #1463F0・16px・font-weight 700、見出しの下 28px - hover：ボタンを 2px 持ち上げ、影 0 8px 20px rgba(27,42,68,0.2) を付ける ## マークアップ - section 要素。見出しは h2、ボタンは a 要素 - 装飾の円は疑似要素で描き、overflow: hidden でカードの外にはみ出さないようにする ## アクセシビリティ - グラデーションのどの位置でも、白い文字とのコントラスト比が 4.5:1 以上になる2色を選ぶ必要があることをコメントで補足する - focus-visible の枠は白にする - hover の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 2色をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。