CTA・特徴紹介コード生成用
資料ダウンロードのCTA
資料の表紙を見せて、中身を想像してもらう。
用途・説明
資料の表紙のイメージを左に、タイトル・内容・ボタンを右に置く、資料ダウンロード用のCTAを作成します。「何が書いてある資料か」が分かると、ダウンロードされやすくなります。BtoBサービスのページの途中や最後に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[資料のタイトル]- 例：3分でわかる サービス資料
[資料の内容]- 載っている内容を3つ。例：機能一覧、料金、導入事例
[ボタンの文言]- 例：資料をダウンロード
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「資料ダウンロードのCTA」を実装してください。 ## 表示内容 - ラベル：無料ダウンロード - 資料のタイトル：[資料のタイトル] - 資料の内容： [資料の内容] - ボタン：[ボタンの文言] - 補足：「PDF・全12ページ」のような、形式とページ数 - 資料の表紙（画像がない場合は、CSSで描いた表紙を置く） ## レイアウト - 最大幅 880px のカード、中央配置 - PC：左に表紙、右に文章とボタン。間隔 48px、上下中央揃え - スマホ：表紙 → 文章 の順に縦並び、中央揃え ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding PC 40px / スマホ 28px - 表紙：幅 160px、縦横比 1:1.4、角丸 6px、背景 #1463F0、左に 4度かたむける。右下に淡い色の影（1枚重なっているように見せる） - CSSで描く表紙のなか：上に白い短い線、その下に資料のタイトル（白・14px・font-weight 700） - ラベル：12px、font-weight 700、背景は #1463F0 の9%の淡い色、文字色 #1463F0、角丸 999px - タイトル：24px、font-weight 700、色 #1B2A44 - 資料の内容：14px、色 #5F6D84。チェックマークつきの箇条書き - ボタン：高さ 48px、左右padding 28px、角丸 999px、背景 #1463F0、文字 #FFFFFF・15px・font-weight 700。左にダウンロードのアイコン - 補足：12px、色 #5F6D84、ボタンの右（スマホでは下） ## アクセシビリティ - 見出しは h2、ボタンは a 要素 - 表紙が画像の場合は alt を空にする（タイトルがすぐ横にあるため） - かたむきは見た目だけにし、文字が読みにくくならない角度にする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。