インライン実績行
運営実績・導入企業・継続率といった数値を、横一列に 3 つ並べて見せる実績バーです。 display:flex と justify-content:space-around で 3 ブロックを均等配置し、各ブロックは大きな太字の数値（ b ）とその下のラベル（ span ）の 2 段構成になっています。
このパーツの使いどころと実装ポイント
運営実績・導入企業・継続率といった数値を、横一列に 3 つ並べて見せる実績バーです。display:flex と justify-content:space-around で 3 ブロックを均等配置し、各ブロックは大きな太字の数値（b）とその下のラベル（span）の 2 段構成になっています。白いカードに薄い影を付け、本文の途中にさりげなく挟める落ち着いたトーンが特徴です。
向いている場面
会社紹介やサービス紹介の説得材料として、信頼の裏付けを短く示したいときに向きます。たとえば SaaS の「導入社数・稼働率」、教室業の「在籍数・合格率」、ECの「販売数・リピート率」など、強みを数字 3 つで言い切る使い方が効果的です。見出しを持たない軽い区画なので、別セクションの直後に置いても圧迫しません。
カスタマイズの勘所
- 数値は
b、補足はspanという単純な構造なので、桁数や単位（円・件・%）を変えても崩れにくいです。 - 4 つ以上にしたい場合は
flex-wrap:wrapを加えると、狭い画面で 2 段に折り返せます。 - 数値だけでなく根拠（集計時点・対象）を小さく添えると、誇張に見えず信頼が増します。
SP で 3 列のままだと数字が小さく潰れるため、必要に応じて縦積みや 2 列へ切り替えると読みやすくなります。
よくある質問
数値を4つ以上に増やすことはできますか？
できます。div ブロックを追加すれば横並びに項目が増えます。ただし数が増えると1つあたりの幅が狭くなるため、flex-wrap を有効にして折り返しを許可し、スマホでは2列や縦積みになるよう調整すると読みやすさを保てます。
数値に単位や記号を付けても崩れませんか？
崩れにくい構造です。数値部分は太字の b 要素なので、年・社・%・円などの単位をそのまま含めて記述できます。桁数が大きく変わる場合はフォントサイズを下げるか、ブロックの余白を見直すとバランスが整います。