カードコード生成用
CTAバナーカード
色付きの背景に見出しとボタンを置く、申し込みへの誘導。
用途・説明
メインカラーで塗ったカードに、見出し・補足文・ボタンを置いたバナーを作成します。記事の末尾、ページの途中、サイドバーなどに差し込んで、申し込みや資料請求へ誘導する場面に使います。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：まずは無料で、試してみませんか。
[補足文]- 例：クレジットカードの登録は不要です。
[ボタン文言]- 例：無料ではじめる
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「CTAバナーカード」を実装してください。 ## 表示内容 - 見出し：[見出し] - 補足文：[補足文] - ボタン：[ボタン文言] ## レイアウト - PC：左に見出しと補足文、右端にボタンの横並び - スマホ（768px未満）：縦に積み、中央揃え。ボタンは全幅 ## デザイン - カード：背景 #1463F0、角丸 16px、padding PC 36px 40px / スマホ 28px 20px - 見出し：PC 22px / スマホ 19px、font-weight 700、色 #FFFFFF - 補足文：14px、色 rgba(255, 255, 255, 0.85)。見出しの下 6px - ボタン：背景 #FFFFFF、文字 #1463F0、高さ 48px、左右padding 28px、角丸 9999px、font-weight 700 ## 状態 - ボタン hover：背景を白の90%に - ボタン focus-visible：白（#FFFFFF）の 2px のアウトラインを外側に 2px 離して表示 ## マークアップ・アクセシビリティ - 見出しは置く場所の階層に合わせて h2 または h3 - 白い文字と #1463F0 のコントラスト比が 4.5:1 以上になること。満たさない場合は色の調整案を出す - ボタンはリンク遷移なら <a> を使う ## 出力形式 - [使用技術]のコードを1つ出力 - 色・角丸・余白をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。