カードコード生成用
資料ダウンロードのカード
資料の表紙と中身の要点を見せて、ダウンロードへ。
用途・説明
サービス資料や事例集などのダウンロードを案内するカードを作成します。左に資料の表紙、右にタイトル、内容の要点、ページ数、ボタンを置きます。BtoBサイトの「お役立ち資料」一覧や、記事の途中に差し込む案内枠に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[資料タイトル]- 例：サービス紹介資料
[内容の要点]- 資料で分かることを2〜3個
[ページ数・形式]- 例：PDF・全12ページ
[ボタン文言]- 例：資料をダウンロード
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「資料ダウンロードのカード」を実装してください。 ## 表示内容 - 資料の表紙画像（仮の表紙でよい） - 資料タイトル：[資料タイトル] - 内容の要点： [内容の要点] - 形式とページ数：[ページ数・形式] - ボタン：[ボタン文言] ## レイアウト - PC：左に表紙（幅 30%）、右にタイトル → 要点 → 形式 → ボタン - スマホ：表紙を上、情報を下に縦に並べる ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 24px - 表紙：縦横比 3:4、角丸 6px、影 0 4px 12px rgba(27, 42, 68, 0.12)。少しだけ傾ける（-3度） - タイトル：18px、font-weight 700、色 #1B2A44 - 要点：14px、色 #47566E、行頭に #1463F0 のチェックマーク - 形式とページ数：12px、色 #5F6D84 - ボタン：高さ 44px、左右padding 24px、角丸 999px、背景 #1463F0、文字 #FFFFFF・14px・font-weight 700、左にダウンロードのアイコン ## アクセシビリティ - タイトルは h3、要点は ul / li - 表紙の alt は「サービス紹介資料の表紙」のように内容を書く - ボタンがフォームへ移動するのか、すぐにファイルが開くのかを文言で分かるようにする - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。