実写人物のチーム紹介カードグリッド
このパーツは、実写の人物写真を大きく見せる4枚のメンバーカードをグリッドで並べたチーム紹介セクションです。 grid-template-columns:repeat(4,1fr) で4列に整列し、写真枠は aspect-ratio:1/1 で正方形に統一されます。
このパーツの使いどころと実装ポイント
このパーツは、実写の人物写真を大きく見せる4枚のメンバーカードをグリッドで並べたチーム紹介セクションです。grid-template-columns:repeat(4,1fr) で4列に整列し、写真枠は aspect-ratio:1/1 で正方形に統一されます。object-fit:cover で人物がきれいに収まり、ホバーすると transform:scale(1.05) で写真がわずかに拡大して動きが出ます。氏名・役職・一言コメントと、得意分野を示すタグがカード下部に並びます。
向いている場面
- 制作会社やスタジオが、専門性を持つメンバーを紹介したいとき
- クリニックや士業事務所で、担当者の顔を見せて安心感を出したいとき
- 採用ページで、働く人の雰囲気を伝えたいとき
差し替えどころは、写真URL・氏名・役職・一言・タグの5点です。写真は実在の人物写真を使い、顔が枠の中央に来るようトリミングすると見栄えが安定します。タグは肩書きとは別に、その人の強みが伝わる短い語を選ぶと個性が出ます。
実装上の注意
各写真の alt には誰かが伝わる説明を入れます。4列はスマートフォンでは窮屈なので、中間幅で2列、狭い画面で1列に折り返すと崩れません。正方形クロップで顔が切れないよう、人物が中央に寄った写真を選んでください。タグアイコンは fill:currentColor で色がテキストに追従します。
よくある質問
メンバーが4人より多い、または少ない場合は？
HTMLの mb__card ブロックを人数分だけ増減します。グリッドは repeat(4,1fr) のため、5人や7人など列数で割り切れない人数だと最終行が半端になります。その場合は中央寄せにするか、列数を3列に変えてバランスを取ると整って見えます。
正方形の写真で顔が切れてしまいます。
枠は aspect-ratio:1/1 と object-fit:cover で正方形に切り抜かれるため、顔が中央からずれた写真だと見切れやすくなります。あらかじめ顔が枠の中央に来るようトリミングした画像を用意するか、object-position を調整して表示位置をずらすと改善できます。