CTA・特徴紹介コード生成用
記事のなかに差し込むCTAボックス
読んでいる流れを止めずに、関連する案内を。
用途・説明
ブログやコラムの本文の途中に差し込む、小さなCTAボックスを作成します。記事の内容に関連する資料やサービスを、読む流れを邪魔しない大きさで案内します。左の太い線で、本文とは別の案内だと分かるようにしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：請求書づくりを、もっとラクに
[補足]- 例：テンプレートを無料で配布中
[ボタンの文言]- 例：受け取る
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「記事のなかに差し込むCTAボックス」を実装してください。 ## 表示内容 - 見出し：[見出し] - 補足：[補足] - ボタン：[ボタンの文言] ## レイアウト - 記事の本文と同じ幅で表示する。上下に 40px の余白 - PC：左に見出しと補足、右にボタン（横並び・上下中央揃え） - スマホ：縦に並べ、ボタンは幅100% ## デザイン - ボックス：背景は #1463F0 の9%の淡い色、枠線 1px solid（#1463F0 の25%の淡い色）、左の辺だけ 4px solid #1463F0、角丸 8px、padding 20px 24px - 見出し：18px、font-weight 700、line-height 1.5、色 #1B2A44 - 補足：13px、色 #5F6D84、見出しの下 4px - ボタン：高さ 44px、左右padding 24px、角丸 999px、背景 #1463F0、文字 #FFFFFF・14px・font-weight 700 - 記事の本文の文字サイズや行間の影響を受けないよう、ボックスのなかの文字のスタイルを明示する ## マークアップ - aside 要素にし、aria-label="関連するご案内" を付ける（本文とは別の内容だと伝える） - 見出しは、記事の見出しの階層を乱さないよう、p 要素（太字）にする - ボタンは a 要素 ## アクセシビリティ - ボタンに focus-visible のスタイルを用意する - 広告や宣伝にあたる場合は、「PR」などの表示を添えられる場所を用意する ## 出力形式 - [使用技術]のコードを1つ出力 - 1つの記事に複数置く場合の注意（置きすぎない目安）をコメントで補足
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。