アバターグループ
共同編集者のアイコンが少しずつ重なって並び、末尾に「+N」で残数を表示。ホバー/タップで扇状に広がって全員が見える。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 共同編集者・参加者を省スペースで示すヘッダー
- 人数が 5〜10 人で全員を見せたい場面
- 誰がいるかを一目で伝えたいドキュメント
- 避ける場面
- 個々の氏名や状態を確認させたい一覧
- 人数が数十人（+N しか意味を持たない）
- 構成要素
- 見出し
- アバター
- 重なり
- +N 残数
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab でグループへ、Enter／Space で展開・収納
- 支援技術
1 つの button に aria-expanded と、氏名を列挙した aria-label（佐藤・鈴木… ほか 4 人）。各アバターに title で氏名。focus-visible のリングあり。reduced-motion で広がりと浮きを止める
- 動き
重なりが 280ms バウンスで解けて扇状に広がる。ホバーした 1 人が 4px 浮く 200ms
デザインの要点
- 重なりは 40px の丸を −12px ずつ重ねる。3 割隠すと 5 人が 3 人分の幅に収まり、顔はまだ判別できる
- 縁を紙色の 2.5px にして隣と切り分ける。同系色が隣り合うと 1 つの塊に見える
- ホバーで重なりを解く動きは 280ms のバウンスにする。開いた瞬間に「全員いる」と分かる
- 頭文字だけでは氏名が伝わらないので、ボタンの名前に全員を列挙し、各アバターに title を付ける
コード（コピーして使えます）
<div class="ag-wrap">
<p class="ag-cap">このドキュメントの編集者</p>
<button class="ag-group" id="ag-group" aria-expanded="false" aria-label="編集者 9人: 佐藤・鈴木・高橋・田中・伊藤 ほか4人。押すと全員を表示">
<span class="ag-ava" style="background:#2b50c7" title="佐藤">佐</span>
<span class="ag-ava" style="background:#c0492f" title="鈴木">鈴</span>
<span class="ag-ava" style="background:#2e9e6b" title="高橋">高</span>
<span class="ag-ava" style="background:#c779d0" title="田中">田</span>
<span class="ag-ava" style="background:#d98a2b" title="伊藤">伊</span>
<span class="ag-ava ag-more" title="ほか4人">+4</span>
</button>
</div>