4 列メンバーグリッド

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

写真・名前・役職をまとめたカードを 4 列で並べる、メンバー紹介セクションです。グリッドは grid-template-columns:repeat(4,1fr) で 4 等分し、各カードの上部に円形のアバターを置いています。アバターは border-radius:50% の丸型で、いまはイニシャルのプレースホルダですが、ここに人物写真を入れる前提の構造です。名前は b、役職は small で大きさに差をつけ、視線の優先順位を作っています。

向いている場面

会社の経営陣やスタッフ紹介、士業事務所の所属メンバー、クリニックの担当医一覧、スクールの講師陣など、人を顔ぶれで見せたいページに合います。人数が多いときは行を増やして並べられます。

カスタマイズの勘所

• アバターは円形に切り抜かれるため、写真は顔が中央に来るようにクロップしてから入れます
• 役職の下に一言コメントを足すと人柄が伝わりやすくなります
• 人数を増やしても 1fr 指定で自動的に次の行へ折り返します

実装上の注意として、人物写真の alt には名前を入れると読み上げで誰かが伝わります。架空の人物や AI 生成の顔を載せず、実在のメンバーの写真を使うのが信頼につながります。レスポンシブは max-width:680px で 2 列に変わるため、スマートフォンでも 2 人ずつ並んで見やすく収まります。