アイコン付き実績数値
制作実績・取引社数などの数値を、アイコン付きカード4枚で横並びに見せる実績セクションです。グリッドは repeat(auto-fit,minmax(140px,1fr)) で組まれているため、画面幅に応じてカードの折り返し列数が自動で変わります。
このパーツの使いどころと実装ポイント
制作実績・取引社数などの数値を、アイコン付きカード4枚で横並びに見せる実績セクションです。グリッドは repeat(auto-fit,minmax(140px,1fr)) で組まれているため、画面幅に応じてカードの折り返し列数が自動で変わります。各数値には data-target 属性が付き、要素が画面に入った瞬間に IntersectionObserver でカウントアップ演出が発火します。
向いている場面
企業の実績紹介、サービスサイトの信頼性アピール、採用ページの「数字で見る当社」コーナーなど、成果を端的に数字で訴えたい場面に向きます。アイコンが添えられることで、何の数値かが直感的に伝わります。
カスタマイズと注意点
- カードの数を増やす場合は
.stats-icon__cardを複製し、data-targetの値と単位・ラベル・アイコンを差し替えます。 - カウントアップは画面に入って初めて動くため、スクロールで現れた瞬間に数字が伸びる演出になります。動きを止めたい場合はJSを外せば最終値が静的に表示されます。
- アニメーションに頼りすぎず、
data-targetに最終値を持たせておくとJSが無効でも数字が欠落しません。装飾アイコンにはaria-hiddenを付けて読み上げの邪魔を防いでいます。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
カウントアップはページ読み込み時にすぐ動きますか？
いいえ。IntersectionObserverを使っているため、そのカードが画面内に入ったタイミングで初めてカウントが始まります。下にスクロールして現れた瞬間に数字が0から目標値まで伸びる演出になります。
数値カードを4枚以外にできますか？
できます。カード要素を複製または削除し、data-target・単位・ラベル・アイコンを変えるだけです。グリッドはauto-fitで自動折り返しするため、枚数を変えてもレイアウトは破綻しません。