プロフィールカード
プロフィールカードは、円形アバター・名前・役職・SNS リンクをまとめたメンバー紹介用の部品です。アバターは border-radius:50% の円に display:grid;place-items:center でイニシャルを中央寄せし、画像が無くても成立する作りになっています。
解説
プロフィールカードは、円形アバター・名前・役職・SNS リンクをまとめたメンバー紹介用の部品です。アバターは border-radius:50% の円に display:grid;place-items:center でイニシャルを中央寄せし、画像が無くても成立する作りになっています。SNS リンクはインライン SVG を使い、外部アイコンフォントに依存せず自己完結している点が扱いやすさにつながっています。
使う場面
- 会社のメンバー紹介やチームページ
- 登壇者・執筆者のプロフィール欄
- サービス内のユーザープロフィール表示
アバターの色は .pf-card__av の background で変えられ、実写を使う場合はその中に img を入れて差し替えます。カード幅は width、影の強さは box-shadow で調整します。SNS リンクには行き先の href を必ず設定し、アイコンだけで意味が伝わるよう aria-label でリンク先名を添えるとアクセシビリティが高まります。実在しない人物の写真や名前をそのまま使い回さず、本物の情報に置き換えて運用しましょう。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
アバターを実写の顔写真にできますか
できます。イニシャルの代わりに.pf-card__avの中にimg要素を入れ、円形クロップで表示します。背景色のグラデーションは画像を入れる場合は不要になります。
SNS アイコンは外部フォントが必要ですか
不要です。アイコンはインラインSVGで埋め込まれているため、追加の読み込みなしで表示されます。リンク先のhrefとaria-labelを設定して使ってください。