カードコード生成用
大きな番号付きの特徴カード
01・02・03の数字で、強みを順番に印象づける。
用途・説明
「選ばれる理由」「3つの特徴」のように、数を示して強みを伝えるセクション向けのカードを作成します。カードの上に大きな番号を置き、その下に見出しと説明文を並べます。アイコンを用意しなくても見栄えがするので、素材が少ないサイトでもすぐに使えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[特徴]- 見出しと説明文を3つ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「大きな番号付きの特徴カード」を実装してください。 ## 表示内容 [特徴] （各カード：番号、見出し、説明文） ## レイアウト - PC：3列、スマホ：1列。カードの間隔 24px - カード内は左揃えで、上から 番号 → 見出し → 説明文 ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 28px 24px - 番号：「01」のように2桁で表示。48px、font-weight 700、line-height 1、色 #1463F0 の25%の淡い色 - 番号の下に、幅 32px・高さ 3px の #1463F0 の短い線 - 見出し：18px、font-weight 700、色 #1B2A44、線の下 16px - 説明文：14px、line-height 1.8、色 #5F6D84 - 3枚のカードの高さをそろえる ## アクセシビリティ - 番号は装飾として扱い、aria-hidden="true" にする。順番に意味がある場合は ol / li でマークアップする - 見出しは h3 - 淡い色の番号は読めなくても内容が伝わるよう、見出しだけで意味が通る文にする ## 出力形式 - [使用技術]のコードを1つ出力 - 特徴を配列で渡し、番号は自動で振る
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。