バッジ & アバター

バッジ & アバターに分類されるWeb表現技法11件。ステータスバッジ、通知バッジ、コーナーリボン、アバター状態など。ライブデモとコピーできるコード付き。

成功・進行中・警告・エラー・情報を色とドットで表す5種のステータスバッジ一覧。進行中とエラーはドットが脈動し、稼働中や要対応であることを直感的に伝えます。

ベルアイコンに未読数を示す数値バブルを重ねた通知バッジ。ボタンで件数が増減するたびにポップして変化を伝え、9件を超えると「9+」と表記します。

カードの右上角に「NEW」「SALE」「限定」の斜めリボンを重ねたコーナーバッジ。リボンには定期的に光が走り、商品一覧の目印として自然に目を引きます。

アバターの右下にオンライン・離席中・取り込み中を示す小さな光のインジケータを添えたステータス表示。オンラインのみ光が脈動し、稼働中であることを伝えます。

XSからXLまで5段階のサイズと、円・角丸・四角の3つの形状バリエーションを一枚のカードにまとめた見本帳。カーソルを乗せると軽く浮き上がり、影が濃くなります。

重なり合って並ぶメンバーのアバター群と、隠れた人数を示す「+3」バッジ。カーソルを乗せると各アバターが扇状にふわっと広がり、全員の顔が見えるようになります。

虹色グラデーションのリングをまとったアバターに、右下でオンライン・離席中・取り込み中を伝える小さな状態ドットを添えました。オンラインだけが静かに脈動します。

未読のアバターだけ回転するグラデーションリングが輝き、既読になるとリングは静かなグレーへ変わります。クリックすると即座に既読状態へ切り替わります。

入力欄にEnterでタグを追加し、×ボタンで削除できるチップ式のタグ入力。大文字小文字を無視して重複を検知し、既存タグを軽く揺らして知らせます。

丸いプロフィール画像にカーソルを乗せるとカメラアイコンが浮かび上がるアップロードUI。クリックしてファイルを選ぶと、FileReaderでその場に新しい画像がプレビューされます。

画像がなくても成立するアバター一覧。氏名からイニシャルを抜き出し、名前自体をハッシュ化して背景色を決めるため、同じ名前は常に同じ色になります。