チームメンバーカードグリッド

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

このパーツは、アバター・名前・役職・一言紹介をまとめたメンバーカードを並べるチーム紹介セクションです。レイアウトはCSS Gridの repeat(auto-fit, minmax(200px,1fr)) で、人数や画面幅に応じてカードが自動で折り返します。アバターは丸い枠の中に実写画像を position:absolute; inset:0 で敷き、object-fit: cover 相当の収め方で顔が中央に来るようトリミングして見せるのが特徴です。名前は h3、役職と紹介文は段落で構造化されています。

向いている場面

• 代表やスタッフの人柄を見せたいコーポレート・採用ページ
• 講師・スタッフ紹介が信頼につながる教室・クリニック
• 少人数チームの専門性をアピールしたい制作・士業サイト

顔と肩書きが見えることで安心感が生まれ、問い合わせや応募のハードルを下げます。

カスタマイズと注意

メンバーを増やすにはカードを複製し、画像・名前・役職・紹介文を差し替えるだけです。画像は丸枠でトリミングされるため、顔が中央に来る写真を選ぶと収まりが良くなります。実装上の最重要点として、アバターにはAI生成顔や架空の人物写真ではなく実在の本人写真を使ってください。img には誰のポートレートかわかる alt を付け、loading="lazy" で表示を軽くします。レスポンシブでは auto-fit によりスマホで1〜2列に折り返しますが、紹介文が長いとカードの高さがそろわないので、文量をある程度そろえると見栄えが整います。