チームメンバーグリッド

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

このパーツは、顔写真・名前・役職・ひとことプロフィールをカード化して並べるチーム紹介グリッドです。display:grid の3カラムでカードを等間隔に配置し、丸いアバター枠は object-fit:cover で人物写真を中央に収めます。白いカードに淡い影を付け、清潔感のある会社紹介に向く作りです。

向いている場面

誰が担当するか見せて安心感を出したい士業・コンサル・制作会社、スタッフの人柄を伝えたい美容・クリニック・飲食、創業メンバーを紹介するスタートアップの採用ページに向きます。顔が見えることで問い合わせや応募のハードルが下がります。

カスタマイズと注意点

• メンバーは <article> 単位で増減でき、列数を変えれば2人でも6人でも整います
• SNSリンクや所属を足してもカード内に収まるレイアウトです

顔写真は実在のストック写真や本人写真を使い、AI生成の架空の人物は避けてください。アバターには必ず人物が分かる alt を入れ、スマホでは1〜2列に折り返すと窮屈になりません。