写真メンバー横並び

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

顔写真と名前を横一列に並べた、シンプルなチーム紹介セクションです。見出しの下で display:flex と justify-content:center によりメンバーを中央に集め、flex-wrap:wrap で画面が狭いと自動的に折り返します。各アバター（.mr__a）は 72px の正円で、現状は頭文字を入れたグラデーション円のプレースホルダになっています。

向いている場面

少人数のチーム紹介に向きます。たとえば士業事務所のメンバー、スタートアップの創業メンバー、サロンのスタッフ一覧など、4〜6 名程度を顔と名前で親しみやすく見せたい場面に合います。横一列に揃うことで「小さくても顔の見える組織」という印象を与えられます。

カスタマイズの勘所

• アバターは正円なので、実写を入れるときは正方形に切り出してから object-fit:cover で収めると顔が中央に保てます。
• 名前の下に役職を span で 1 行足すと、肩書きの情報が加わって紹介らしくなります。
• flex-wrap が効いているため、人数を増やしても自動で複数段に折り返せます。

顔写真は実在のストック写真を使い、AI 生成顔や架空の人物は避けてください。実写を入れる際は名前と対応する alt を記述すると、アクセシビリティと信頼の両面で有利です。