アバター Avatar

ユーザーの顔写真やイニシャルを丸形で表示する。プロフィールやコメント欄で使用。

使用場面: ユーザーアイコン、コメント投稿者、チームメンバー一覧などの表示 採用例: Slack, GitHub

ライブデモ

サイズ
S
M
L
XL
ステータス
TK
YS
MN
グループ
A
B
C
D
+5

ソースコード

<div class="demo-avatars">
  <div class="demo-avatar-section">
    <div class="demo-avatar-label">サイズ</div>
    <div class="demo-avatar-row">
      <div class="demo-avatar sm"><span>S</span></div>
      <div class="demo-avatar md"><span>M</span></div>
      <div class="demo-avatar lg"><span>L</span></div>
      <div class="demo-avatar xl"><span>XL</span></div>
    </div>
  </div>
  <div class="demo-avatar-section">
    <div class="demo-avatar-label">ステータス</div>
    <div class="demo-avatar-row">
      <div class="demo-avatar md online"><span>TK</span></div>
      <div class="demo-avatar md busy"><span>YS</span></div>
      <div class="demo-avatar md offline"><span>MN</span></div>
    </div>
  </div>
  <div class="demo-avatar-section">
    <div class="demo-avatar-label">グループ</div>
    <div class="demo-avatar-group">
      <div class="demo-avatar md" style="background:var(--ui-primary);"><span>A</span></div>
      <div class="demo-avatar md" style="background:#8b5cf6;"><span>B</span></div>
      <div class="demo-avatar md" style="background:#f59e0b;"><span>C</span></div>
      <div class="demo-avatar md" style="background:#10b981;"><span>D</span></div>
      <div class="demo-avatar md more"><span>+5</span></div>
    </div>
  </div>
</div>
.demo-avatars { display: flex; flex-direction: column; gap: 20px; }
.demo-avatar-section {}
.demo-avatar-label {
  font-size: 12px; font-weight: 600; color: #888; margin-bottom: 10px;
}
.demo-avatar-row {
  display: flex; align-items: center; gap: 12px;
}
.demo-avatar {
  border-radius: 50%; background: var(--ui-primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; position: relative;
  flex-shrink: 0;
}
.demo-avatar span { line-height: 1; }
.demo-avatar.sm { width: 28px; height: 28px; font-size: 10px; }
.demo-avatar.md { width: 36px; height: 36px; font-size: 13px; }
.demo-avatar.lg { width: 48px; height: 48px; font-size: 16px; }
.demo-avatar.xl { width: 64px; height: 64px; font-size: 20px; }
.demo-avatar.online::after,
.demo-avatar.busy::after,
.demo-avatar.offline::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #fff; box-sizing: border-box;
}
.demo-avatar.online::after { background: #10b981; }
.demo-avatar.busy::after { background: #ef4444; }
.demo-avatar.offline::after { background: #d1d5db; }
.demo-avatar-group {
  display: flex;
}
.demo-avatar-group .demo-avatar {
  margin-left: -8px; border: 2px solid #fff;
  box-sizing: content-box;
}
.demo-avatar-group .demo-avatar:first-child { margin-left: 0; }
.demo-avatar.more {
  background: #e5e7eb; color: #888; font-weight: 600;
  font-size: 11px;
}
.demo-avatar:hover {
  transform: scale(1.1); z-index: 1;
  transition: transform 0.15s;
}

AIプロンプト

Basic 
アバターコンポーネントをHTML/CSSで作ってください。イニシャル表示の丸形アバターで、複数サイズに対応します。
Custom 
以下の仕様でアバターコンポーネントを実装してください。
- サイズバリエーション（S/M/L/XL）
- オンラインステータス表示（緑=オンライン、赤=取り込み中、灰=オフライン）
- アバターグループ（重ねて表示、+N で残り人数）
- プライマリカラー: #2563eb
- 画像なしの場合はイニシャルをカラー背景で表示
- ホバーで拡大エフェクト
Advanced 
高機能なアバターコンポーネントを実装してください。
- 画像読み込み失敗時のフォールバック（イニシャル自動生成）
- ツールチップでユーザー名・ステータス表示
- グループ表示の最大数設定（超過分は+N表示、クリックで全員表示）
- ランダムカラー生成（ユーザー名ハッシュベース）
- レスポンシブサイズ調整
- アニメーション付きステータス変更
- スクリーンリーダー対応（alt/aria-label）
← カタログに戻る