アバター

Avatar

ユーザーやアカウントを表す顔写真・イラスト・イニシャルを、丸型または角丸の小さな枠に収めて示す表示UI。

単体のバリエーション

田中 健

イニシャル

画像(人物アイコンで代替)

佐藤 誠(オンライン)

アバターグループ(+3表記)

  • 鈴
  • 高
  • 伊
  • +3

○ 使う場面

  • コメント欄や担当者一覧など、誰の情報かを一目で識別させたいとき
  • 複数人の関与者を省スペースで重ねて見せたいとき(アバターグループ)

× 避ける場面

  • 実名やテキストでの識別が必須で、画像・イニシャルだけでは不十分なとき
  • 対象がユーザーではなく、状態や件数そのものを示したいだけのとき(→バッジ)

別名

プロフィール画像、ユーザーアイコン、アバターグループ、ファセパイル

近縁種との比較

「アバター」はサンスクリット語で神が地上に姿を変えて現れることを意味する avatāra に由来するとされ、のちにオンライン上で自分の代わりとなる分身を指す語として定着した。実際の顔写真だけでなく、イラストやイニシャルで自分の「化身」を表すことも多い。

近縁種違い・使い分け
バッジアバターに重ねるオンライン状態ドットはバッジの通知ドットバリアントと見た目が近いが、アバターの状態ドットが「そのユーザーが今どうしているか」という人物固有の状態を表すのに対し、バッジはアイコンボタンなど対象物側の状態・件数を表す点で対象が異なる。複数アバターを重ねる「アバターグループ(Facepile)」は、表示しきれない残り人数を「+3」のような数値バッジ状の表記で補うことが多く、組み合わさって使われることも多い。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション