なぜ重要か
顔は瞬時に印象を作り（Willis & Todorov, 2006）、写真は実物と違うことも（Hancock & Toma, 2009）。視覚的階層に沿ってサイズを。
写真がない時
イニシャルや模様の既定画像を（Gravatar, n.d.; MDN, n.d.）。コントラストを守ります。
状態とアクセシビリティ
色だけに頼らず、代替テキストを適切に（W3C, n.d.; WCAG 2.2）、タップ領域を広く（Parhi et al., 2006）。
よくある質問
- イニシャルの色は？
- 名前から算出し一貫させます。
- altは必要？
- 名前が隣なら空のaltに。
出典確認日：2026-10-27
参考文献
- World Wide Web Consortium. (n.d.). Images tutorial. Web Accessibility Initiative. 代替テキストの区別です。
- MDN Web Docs. (n.d.). <img>: The Image Embed element. 読み込み失敗とサイズ指定です。
- Gravatar. (n.d.). Gravatar developer documentation. 既定アバターの選択肢です。
- Willis, J., & Todorov, A. (2006). First impressions: Making up your mind after a 100-ms exposure to a face. Psychological Science, 17(7), 592–598. 顔の第一印象の研究です。
- Hancock, J. T., & Toma, C. L. (2009). Putting your best face forward: The accuracy of online dating photographs. Journal of Communication, 59(2), 367–386. 写真の正確さと信頼です。
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 小さなアバターのタップ領域です。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 1.1.1と1.4.3の基準です。