カウンタ + グラフ
カウンタ + グラフ
「実績1,200件」「満足度98%」――数字は最強の説得材料ですが、ただ書くだけでは流し読みされます。スクロールで見えた瞬間に数字がカウントアップし、グラフがすっと伸びる。この一手間で、同じ数字の説得力が大きく変わります。デモはカウントアップと棒・折れ線・円・ドーナツの各グラフを揃えた構成です。
採用サイトの社員データ、サービスサイトの実績セクション、料金比較――使いどころは多く、実案件での登場頻度も高い部品です。
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
おさえておきたいところ
「カウンタ」「グラフ」を使う目的はこんな感じです。 目的：データを可視化して見せる 動きのきっかけ：画面の読み込み後 / スクロール
数字のカウントアップ・ダウン
棒グラフ（縦）
棒グラフ（横・複数バー）
折れ線グラフ（複数）
円グラフ
円グラフ（ドーナッツ型）
実務メモ（2026年追記）
現在の実装の定石は、発火のきっかけに IntersectionObserver（要素が見えたら開始）を使い、数値の更新は requestAnimationFrame で滑らかに行う形です。そしてSEO・信頼性の面でひとつ大事な作法があります。最終的な数字はHTMLに最初から書いておき、JSは「0から本来の値まで動かす演出」だけを担当させること。こうしておけば、JSが失敗しても検索エンジンにも読者にも正しい数字が届きます。
- カウントアップは1〜2秒以内に完了させる（長いと数字を疑われる）
- グラフは色だけで区別せず、ラベルと数値を必ず併記する
- グラフライブラリ（Chart.js等）を使う場合は更新への追従を保守項目に入れる
- 発火演出の基本パターンはよく使う動きにまとめています
次回の予定
ユーザーの注意を引いたり入力させる 「モーダルウィンドウ」を作ってみようと思います＼＼\٩( ‘ω’ )و //／／
