メンバーフォトカードセクション
このパーツは、ポートレート画像・氏名・役職・自己紹介文・SNSリンクをひとまとめにした メンバーカードを3枚横並び にしたチーム紹介セクションです。レイアウトは display:grid に grid-template-columns:repeat(3,1fr) を指定して等幅3カラムを作り、各カードはホバー時に…
このパーツの使いどころと実装ポイント
このパーツは、ポートレート画像・氏名・役職・自己紹介文・SNSリンクをひとまとめにしたメンバーカードを3枚横並びにしたチーム紹介セクションです。レイアウトは display:grid に grid-template-columns:repeat(3,1fr) を指定して等幅3カラムを作り、各カードはホバー時に transform:translateY(-4px) で軽く浮き上がり、影が濃くなる演出を transition で滑らかにつないでいます。アバターは border-radius:50% の円形クロップで、画像には loading="lazy" と decoding="async" を付けて読み込みを後回しにしています。
向いている場面
- コーポレートサイトの「会社情報・メンバー」ページ
- 士業・クリニック・サロンなど担当者の顔を見せたい業種
- 制作会社やスタートアップの「About」セクション
カスタマイズの勘所
人数を4人にしたいときは repeat(4,1fr) に変えるだけで横並びが増えます。役職を強調したいなら .team__role に色や太字を足すと視線が止まります。実運用では img の alt を「○○さんのポートレート」のように具体名で書き、SNSリンクの aria-label も埋めておくと読み上げ環境でも誰のリンクか伝わります。アバターは縦横比が崩れないよう object-fit:cover を使うと安全です。スマホでは3カラムだと窮屈になるため、画面幅で1カラムへ折り返す指定を加えると読みやすくなります。
よくある質問
メンバーが4人以上いる場合はどうすればいいですか？
CSSの grid-template-columns を repeat(4,1fr) など列数に合わせて変えれば横並びの枚数を増やせます。人数が多いときは1行に3〜4枚を上限にして複数行へ折り返すと、1枚あたりの情報量と余白のバランスが保てます。
アバター画像はどんな形式を用意すればよいですか？
円形にクロップされるため、顔が中央に来る正方形に近い画像が向いています。表示は80px前後と小さいので、容量を抑えたWebPで300px程度を用意し、object-fit:cover を指定しておくと縦長・横長の写真でも崩れません。