数字統計付きヒーロー
数字統計付きヒーローは、上部のメッセージブロックと下部の実績数字エリア（ .hero-stats__nums ）を縦に組み合わせた構成です。数字エリアは display:flex で 3 つの指標を等間隔に並べ、上に区切り線を引いて視覚的に分離しています。
解説
数字統計付きヒーローは、上部のメッセージブロックと下部の実績数字エリア（.hero-stats__nums）を縦に組み合わせた構成です。数字エリアは display:flex で 3 つの指標を等間隔に並べ、上に区切り線を引いて視覚的に分離しています。strong に大きな数字、small に単位（社・%・/5 など）、span にラベルを置く 3 段構造で、導入企業数・継続率・満足度といった信頼指標をひと目で伝えます。JavaScript なしの静的レイアウトです。
こんなときに
- BtoB SaaS で導入実績を冒頭から示したいとき
- コーポレートサイトで信頼感を最優先したいとき
- サービス紹介ページで定量的な強みを訴求したいとき
数字や単位は HTML を書き換えるだけで差し替えられます。指標を 4 つに増やしても flex が自動で配置を調整します。数字の強調色は .hero-stats__nums strong の color で変更可能です。flex-wrap:wrap 済みのため、モバイルでは数字が自然に折り返します。実数値で水増しせず、根拠のある数字を載せることが信頼につながります。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
数字を3つから4つに増やせますか？
増やせます。.hero-stats__nums の中の div ブロックを複製して指標を追加するだけで、flex レイアウトが自動で等間隔に並べ直します。モバイルでは自動で折り返します。
数字の色だけ変えたいときは？
.hero-stats__nums strong の color を変更すると、数字部分の強調色だけをブランドカラーに変えられます。ラベルや単位の色はそれぞれ別の指定で調整できます。