アバターとは

ユーザーを表す丸いアイコン。画像がない場合は頭文字（イニシャル）で代用する。

概要

ユーザーやアカウントを表す丸いアイコンです。プロフィール画像が登録されていない場合は、名前の頭文字（イニシャル）を丸の中に表示して代用することがよくあります。コメント欄や参加者一覧など、複数人を並べて表示する場面で多く使われます。

別名

表記ゆれ：アバター、プロフィール画像、ユーザーアイコン、avatar

「プロフィール画像」は画像そのものを指す言い方で、「アバター」は画像がない場合のイニシャル表示も含めた、やや広い言葉として使われます。

AI への伝え方

「アバターを表示して。画像がない場合はイニシャルで」のように伝えます。オンライン状態を示す小さな丸（ステータスドット）を付けたいか、参加者一覧のように複数のアバターを少しずつ重ねて表示（スタック表示）したいかも合わせて伝えてください。装飾用のイニシャルには aria-label などで本人の名前を伝える実装にし、連続して並ぶスタック表示では 2 つ目以降を aria-hidden にして読み上げの重複を避けると親切です。

似たパーツとの違い

「バッジ」は件数や状態を示す小さな印で、アバターの右上に重ねて通知件数を表示するような使い方をされます。アバター自体は人物やアカウントを表す表示で、バッジはその上に付け足す補助的な情報という違いがあります。

デモ

サスタ

タ

コード

HTML

<div class="avatar-demo">
  <div class="avatar-demo__row">
    <span class="avatar-demo__avatar avatar-demo__avatar--sm" role="img" aria-label="佐藤花子">サ</span>
    <span class="avatar-demo__avatar avatar-demo__avatar--md" role="img" aria-label="鈴木一郎">ス</span>
    <span class="avatar-demo__avatar avatar-demo__avatar--lg" role="img" aria-label="高橋次郎">タ</span>
  </div>

  <div class="avatar-demo__row">
    <span
      class="avatar-demo__avatar avatar-demo__avatar--md avatar-demo__avatar--online"
      role="img"
      aria-label="オンライン中の田中三郎"
      >タ</span
    >
  </div>

  <div class="avatar-demo__stack" role="img" aria-label="参加者 3 名">
    <span class="avatar-demo__avatar avatar-demo__avatar--md avatar-demo__avatar--stacked" aria-hidden="true">A</span>
    <span class="avatar-demo__avatar avatar-demo__avatar--md avatar-demo__avatar--stacked" aria-hidden="true">B</span>
    <span class="avatar-demo__avatar avatar-demo__avatar--md avatar-demo__avatar--stacked" aria-hidden="true">C</span>
  </div>
</div>

CSS

.avatar-demo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: sans-serif;
}

.avatar-demo__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-demo__avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0017c1;
  color: #ffffff;
  font-weight: bold;
}

.avatar-demo__avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.avatar-demo__avatar--md {
  width: 48px;
  height: 48px;
  font-size: 16px;
}

.avatar-demo__avatar--lg {
  width: 64px;
  height: 64px;
  font-size: 22px;
}

.avatar-demo__avatar--online::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0017c1;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #0017c1;
}

.avatar-demo__stack {
  display: flex;
}

.avatar-demo__avatar--stacked {
  margin-left: -12px;
  background: #666666;
  border: 2px solid #ffffff;
}

.avatar-demo__avatar--stacked:first-child {
  margin-left: 0;
}