カードコード生成用
数字で見せる実績カード
大きな数字と短い説明で、実績をひと目で伝える。
用途・説明
導入社数、継続率、満足度など、実績の数字を大きく見せるカードを作成します。サービスサイトの実績紹介、会社概要、採用ページの「数字で見る」セクションに向いています。数字・単位・説明を3〜4枚並べます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[実績データの例]- 数字・単位・説明を3〜4件。例：98／%／継続利用率
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「数字で見せる実績カード」を実装してください。 ## 表示内容 [実績データの例] （各カード：数字、単位、説明、あれば注釈） ## レイアウト - PC：3〜4列、スマホ：2列。カード間隔 20px - カード内は中央揃えで、上から 数字と単位 → 説明 → 注釈 ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 28px 16px - 数字：40px、font-weight 700、line-height 1、色 #1463F0。等幅の数字（font-variant-numeric: tabular-nums） - 単位：数字の右に 16px、font-weight 700、色 #1B2A44。数字と下端をそろえる - 説明：14px、font-weight 700、色 #1B2A44。数字の下 10px - 注釈：11px、色 #5F6D84（「※ 2026年3月時点」など） ## 状態 - 画面に入ったとき、数字を 0 からカウントアップする案を併記する（1回だけ、800ms） ## マークアップ・アクセシビリティ - 数字と単位と説明が、続けて自然に読み上げられる順でマークアップする（例：dl / dt / dd） - カウントアップ中も、スクリーンリーダーには最終的な数字だけを伝える - アニメーションは prefers-reduced-motion で無効化し、最初から最終の数字を表示する ## 出力形式 - [使用技術]のコードを1つ出力 - 実績データを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。