アバター (Avatar)

ユーザーや人物を表現するコンポーネントです。画像、イニシャル、ステータス表示、グループ化など様々なバリエーションに対応します。

基本的な使用法

画像アバター

画像アバターのCode:

<div class=“avatar avatar-md”>
  <img src=“user-photo.jpg” alt=“ユーザー” class=“avatar-image” />
</div>

イニシャルアバター

田

佐

山

イニシャルアバターのCode:

<div class=“avatar avatar-md avatar-primary”>
  <span class=“avatar-text”>田</span>
</div>

プレースホルダーアバター

プレースホルダーのCode:

<div class=“avatar avatar-md avatar-secondary avatar-placeholder”>
  <svg fill=“none” stroke=“currentColor” viewBox=“0 0 24 24”>
    <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z” />
  </svg>
</div>

サイズ

サイズバリエーション

2xl

3xl

サイズのCode:

<div class=“avatar avatar-xs”>…</div>
<div class=“avatar avatar-sm”>…</div>
<div class=“avatar avatar-md”>…</div>
<div class=“avatar avatar-lg”>…</div>
<div class=“avatar avatar-xl”>…</div>
<div class=“avatar avatar-2xl”>…</div>
<div class=“avatar avatar-3xl”>…</div>

形状

形状バリエーション

円

円形

角

角丸

四

正方形

形状のCode:

<div class=“avatar avatar-lg avatar-circle”>…</div>
<div class=“avatar avatar-lg avatar-rounded”>…</div>
<div class=“avatar avatar-lg avatar-square”>…</div>

色

色バリエーション

プ

プライマリー

セ

セカンダリー

成

成功

警

警告

危

危険

情

情報

紫

桃

ピンク

藍

インディゴ

青

ティール

色のCode:

<div class=“avatar avatar-md avatar-primary”>…</div>
<div class=“avatar avatar-md avatar-success”>…</div>
<div class=“avatar avatar-md avatar-purple”>…</div>

ステータスインジケーター

オンライン状態

田

オンライン

佐

オフライン

山

ビジー

鈴

離席中

ステータスのCode:

<div class=“avatar avatar-lg avatar-primary”>
  <span class=“avatar-text”>田</span>
  <div class=“avatar-status avatar-status-online”></div>
</div>

画像アバターのステータス

グループ表示

アバターグループ

小サイズグループ

田

佐

山

鈴

標準サイズグループ

グループのCode:

<div class=“avatar-group”>
  <div class=“avatar avatar-md avatar-primary”>
    <span class=“avatar-text”>田</span>
  </div>
  <div class=“avatar avatar-md avatar-success”>
    <span class=“avatar-text”>佐</span>
  </div>
  <div class=“avatar avatar-md avatar-secondary”>
    <span class=“avatar-text”>+3</span>
  </div>
</div>

通知・バッジ

通知付きアバター

田

通知ドット

佐

数値バッジ

山

99+

大きな数値

バッジ＋ステータス

通知・バッジのCode:

<div class=“avatar avatar-lg avatar-primary”>
  <span class=“avatar-text”>田</span>
  <div class=“avatar-notification”></div>
</div>

<div class=“avatar avatar-lg avatar-success”>
  <span class=“avatar-text”>佐</span>
  <div class=“avatar-badge”>3</div>
</div>

クリック可能なアバター

インタラクティブアバター

田

山

ホバーで拡大・リング効果が表示されます

クリック可能なCode:

<div class=“avatar avatar-lg avatar-primary avatar-button”>
  <span class=“avatar-text”>田</span>
</div>

実用的なパターン

チームメンバー一覧

田中太郎

フロントエンド開発者

オンライン

佐藤花子

デザイナー

ビジー

山

山田次郎

バックエンド開発者

離席中

プロジェクト参加者

ウェブアプリ開発プロジェクト

8名参加

田

佐

ユーザープロフィール

田中太郎

オンライン

フロントエンド開発者として5年の経験があります。React、Vue.js、TypeScriptを得意としています。

コメント表示

佐藤花子

このデザインはとても良いですね！ユーザビリティも考慮されていて素晴らしいです。

2時間前

山

山田次郎

技術的な実装についても確認しました。問題なく進められそうです。

1時間前

チームメンバーのCode:

<div class=“flex items-center gap-3 p-3 border border-gray-200 rounded-lg”>
  <div class=“avatar avatar-md”>
    <img src=“user-photo.jpg” alt=“田中太郎” class=“avatar-image” />
    <div class=“avatar-status avatar-status-online”></div>
  </div>
  <div class=“flex-1”>
    <div class=“font-medium”>田中太郎</div>
    <div class=“text-sm text-gray-500”>フロントエンド開発者</div>
  </div>
  <div class=“text-sm text-green-600”>オンライン</div>
</div>

プロジェクト参加者のCode:

<div class=“avatar-group”>
  <div class=“avatar avatar-sm”>
    <img src=“member1.jpg” alt=“メンバー” class=“avatar-image” />
  </div>
  <div class=“avatar avatar-sm”>
    <img src=“member2.jpg” alt=“メンバー” class=“avatar-image” />
  </div>
  <div class=“avatar avatar-sm avatar-secondary”>
    <span class=“avatar-text”>+3</span>
  </div>
</div>

アクセシビリティ

• 画像アバターには適切なalt属性を設定
• イニシャルアバターは背景色とテキストの十分なコントラスト比を確保
• クリック可能なアバターにはrole="button"とtabindex="0"を設定
• ステータスインジケーターはaria-labelで状態を説明
• キーボードナビゲーション（Enter/Spaceキー）に対応
• 通知バッジはaria-labelで件数を読み上げ
• フォーカス表示を明確にする（リング等）
• グループ表示ではaria-describedbyで参加者数を説明
• 色だけでなくアイコンやテキストでも情報を補完
• スクリーンリーダーで適切に読み上げられるよう構造化

田

適切なARIA属性が設定されたアバター