オンライン状態付きアバター

解説

オンライン状態付きアバターは、丸いアイコンの右下に小さなドットを重ね、online・busy・away・offline といった在席状況をひと目で伝える UI です。ドットは position:absolute でアイコンの隅に固定し、背景色と同じ色の太い border を回すことで、アイコンから少し浮き上がって見える「切り抜き」風の表現を実現しています。状態の違いは .av__dot--online などクラスごとの背景色だけで切り替わり、JavaScript は使いません。

使う場面

• チャットやメッセージアプリの相手表示
• チームメンバーの在席ボード
• カスタマーサポートの担当者一覧

状態色は緑＝オンライン、赤＝取り込み中、黄＝離席、グレー＝オフラインが一般的で、このスニペットもその慣習に沿っています。色を変えるときは各 --状態 クラスの背景値を編集します。ただし色だけで状態を区別すると色覚特性のある人に伝わりにくいため、ドットに title 属性で状態名を添えたり、テキストラベルを併記すると親切です。ドットの大きさや縁取りの太さは width と border で調整できます。