メンバー紹介カード
顔写真・名前・役職・SNS アイコンをまとめた メンバー紹介カード です。会社概要やチームページの「人」を見せるセクションで、誰が関わっているのかを親しみやすく伝えるための部品です。 これは CSS のみ で組まれており、JavaScript は使いません。
解説
顔写真・名前・役職・SNS アイコンをまとめたメンバー紹介カードです。会社概要やチームページの「人」を見せるセクションで、誰が関わっているのかを親しみやすく伝えるための部品です。
これは CSS のみで組まれており、JavaScript は使いません。カード上部のアバター領域は aspect-ratio:1 で正方形を保ち、グラデーション背景の上にプレースホルダーのアイコンを置いています。実運用では、この枠を実際の顔写真に差し替えて使います。下半分の本体は中央寄せで、名前を太字、役職を小さめに字間を広げて配置し、視線の流れを名前から役職へと自然に導いています。角丸と overflow:hidden により、上部の画像も角がきれいに丸まります。
使う場面とカスタマイズ
- 会社概要のメンバー一覧、士業やサロンのスタッフ紹介
- 登壇者プロフィールや、制作チームのクレジット表示
- アバターのグラデーション、本体の余白、SNSアイコンの色を調整
複数人を並べるときは grid でカードの高さをそろえると整います。顔写真には必ず人物名を含む alt を付け、SNS リンクには aria-label でサービス名を添えると読み上げ環境でも誰のどのリンクか伝わります。なお実在しない人物の合成顔は避け、必ず本人の写真を使ってください。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
アバターを実際の写真に変えるには
アバター枠のグラデーション背景とプレースホルダーアイコンを、img要素やbackground-imageに置き換えます。枠はaspect-ratio:1で正方形を保つので、object-fit:coverを使えば写真の縦横比が崩れずに収まります。
メンバーを横並びで複数表示したい
カードを囲む親要素にgridを指定し、grid-template-columnsで列数を決めます。gapで間隔を取り、狭い画面では列数を減らすメディアクエリを足すと、スマホでも自然に1列へ折り返します。