お客様の声・実績コード生成用
カウントアップする実績の数字
数字が0から増えていき、実績を印象づける。
用途・説明
導入社数や継続率などの実績を、大きな数字で3つ並べるセクションを作成します。画面に入ったときに0から数字が増えていく動きを付け、目を引きます。数字の根拠（時点や調査方法）を添える欄も用意しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[実績のリスト]- ラベル・数字・単位のセットを3つ
[注記]- 例：2025年4月時点、自社調べ
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「カウントアップする実績の数字」を実装してください。 ## 表示内容 [実績のリスト] - 注記：[注記] ## レイアウト - PC：横に3つ並べ、あいだに縦の区切り線（1px solid #DCE4F0）。スマホ：縦に並べ、区切り線を横にする - 各ブロックは中央揃えで、上に数字と単位、下にラベル - 注記はセクションの最後に右揃え ## デザイン - 数字：PC 56px / スマホ 40px、font-weight 700、line-height 1.1、色 #1463F0。桁区切りのカンマを入れる - 単位：数字の40%の大きさ、色 #1B2A44、数字のすぐ右に置く - ラベル：14px、色 #5F6D84、数字の下 12px - 注記：12px、色 #5F6D84 - 数字は等幅の数字（font-variant-numeric: tabular-nums）にして、増えるあいだに幅が揺れないようにする ## 動作 - セクションが画面に入ったら（IntersectionObserver）、0から目標の数字まで 1.5秒で増やす。最初は速く、最後はゆっくり - 小数のある数字は、小数点以下の桁数を保ったまま増やす - 動かすのは1回だけ ## アクセシビリティ - 読み上げには、最初から最終的な数字を伝える（増えていく途中の数字は aria-hidden にする） - dl / dt / dd でマークアップする - prefers-reduced-motion のときは、最初から最終的な数字を表示する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。