写真分割×実績数値の会社紹介

このパーツの使いどころと実装ポイント

このパーツは、左に実写の業務写真、右にミッション文と実績数値を並べた分割レイアウトの会社紹介セクションです。grid-template-columns:0.9fr 1.1fr で写真側をやや狭く、文章側を広く取り、align-items:center で上下中央にそろえています。写真は object-fit:cover で高さ480pxの枠にきれいに収まり、srcset と sizes で画面に応じた解像度を読み込むよう設定されています。

向いている場面

• コーポレートサイトのAboutで、想いと実績を同時に伝えたいとき
• 士業や工務店など、人柄や現場の雰囲気を写真で見せたい業種
• サービス紹介ページで価値観と数字をワンセットで示したいとき

差し替えどころは、写真URL・見出し・リード文・チェック項目・下部の実績数値です。写真は事業の雰囲気が伝わる実写に変え、alt もその内容に合わせて書き換えます。リード文は飾りすぎず、自社が本当に提供している価値を素直に書くと響きます。

実装上の注意

2カラムはスマートフォンでは縦積みにする前提で、写真と文章の順序が読みやすいか確認してください。srcset を使うときは元画像の解像度を十分に確保し、拡大表示でぼやけないようにします。チェックアイコンはSVGなので fill:currentColor で色がテキストに追従します。下部の数値は誇張せず、語れる実績だけを載せましょう。