チームメンバー紹介グリッド

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

このパーツは、メンバーの役職・名前・ひとことコメントをアバター付きのカードで並べるチーム紹介セクションです。グリッドは repeat(auto-fill,minmax(200px,1fr)) で組まれており、メンバー数や画面幅に応じて列数が自動で変わります。各カードはホバーすると translateY でわずかに浮き上がり、影が濃くなる演出が入っているため、静的な一覧よりも操作している実感が得られます。

向いている場面

会社の「メンバー紹介」、士業事務所のスタッフ案内、サロンやクリニックの担当者紹介などに向きます。役職と名前だけでなくひとことコメントを添えられるので、人柄や担当領域を伝えたいサイトに適しています。採用ページで先輩社員を並べる用途にも使えます。

カスタマイズと注意点

• メンバーを追加するときは team__card を複製します。グリッドが自動調整するため、レイアウトの手直しはほとんど不要です。
• アバター画像には誰のポートレートかが分かる alt を付けてください。実在の写真を使う場合は本人の許諾を得たうえで配置します。
• カード内のコメントは長さをそろえると、カードの高さがそろって見栄えが安定します。