メンバー紹介 6 グリッド

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

このパーツは、顔写真と名前・役職・一言コメントを 1 セットにして 3 列 2 段、計 6 名を並べる「メンバー紹介」セクションです。grid-template-columns:repeat(3,1fr) で 3 等分し、各メンバーの写真枠は width:140px;height:140px;border-radius:50% で正円のアイコンになっています。名前（<h3>）、役職（<span>）、担当領域（<p>）が縦に積まれ、中央揃えで統一感を出しています。

向いている場面

チームの顔ぶれを見せて親近感や信頼を作りたい場面に向きます。コンサルや制作会社のメンバーページ、士業事務所のスタッフ紹介、スタートアップの採用サイトでカルチャーを伝えるときなどです。一言コメントがあることで、肩書きだけでは伝わらない役割や人柄が補えます。

カスタマイズの勘所

• サンプルの写真枠はグラデーションのプレースホルダです。実運用では実在メンバーの写真に差し替えます。
• 人数を 4 名や 8 名にしたいときは .mb-6__c を増減します。3 列のまま端数が出ても自然に折り返します。

実装上の注意として、架空のメンバーや AI 生成顔のまま公開しないことが大切です。実写を入れる際は人物が中央に来るようクロップし、alt に氏名を書きます。円形クロップは顔が端に寄った写真だと切れてしまうため、正方形で顔が中央の写真を選んでください。レスポンシブでは列数を 2 や 1 に減らす指定を足すとスマートフォンで見やすくなります。