数字で見る 4 列
このパーツは、大きな数字を 4 つ横並びにして会社の規模感を伝える「実績ナンバー」セクションです。濃紺の背景に白文字を載せ、数字部分は linear-gradient を -webkit-background-clip:text でテキストに切り抜いてグラデーション文字にしています。
このパーツの使いどころと実装ポイント
このパーツは、大きな数字を 4 つ横並びにして会社の規模感を伝える「実績ナンバー」セクションです。濃紺の背景に白文字を載せ、数字部分は linear-gradient を -webkit-background-clip:text でテキストに切り抜いてグラデーション文字にしています。数字本体は <b>、単位は <small>、ラベルは <span> という構造で、Georgia 系の serif フォントが数字の存在感を高めています。
向いている場面
導入実績・継続率・ROI・事業年数のような、定量的な信頼材料を一気に見せたい場面に向きます。BtoB SaaS の実績ページ、コンサルや制作会社の About、採用サイトで会社の安定感を示すときなどです。背景が濃色なので、明るいセクションの合間に挟むとリズムが生まれます。
カスタマイズの勘所
- 数字は
<b>内の値、単位は<small>を書き換えます。「2.4x」のように小数や記号も入れられます。 - 背景色やグラデーションの 2 色を変えるとブランドカラーに合わせられます。
実装上の注意として、数字は誇張せず実数を入れることが信頼につながります。グラデーション文字は一部の環境で読みづらくなるため、コントラストを確認してください。レスポンシブでは 4 列が窮屈になりやすいので、スマートフォンでは 2 列に折り返す指定を足すと安定します。JavaScript は使っていません。
よくある質問
数字をアニメーションでカウントアップさせたいです
このパーツ自体は JavaScript を含まない静的な表示です。数字が 0 から増えていく演出を加えたい場合は、別途カウントアップ用の小さなスクリプトを足します。ただし演出を入れても表示される最終値は実数にしてください。
グラデーションの数字が読みにくい環境はありますか
background-clip:text を使うため、ごく一部の古いブラウザではグラデーションが効かず単色になることがあります。その場合でも文字自体は表示されるので大きな問題はありませんが、フォールバックの文字色を指定しておくと安心です。