Avatar（アバター）
12分で読める
ユーザーやエンティティを表す小さな円形または正方形の画像UI。プロフィール写真・イニシャル・アイコンの3種とフォールバック設計、グループ表示（Avatar Group）の判断基準を解説する。
コンポーネントタグ: ui-components / avatar
記事一覧
UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
ユーザーやエンティティを表す小さな円形または正方形の画像UI。プロフィール写真・イニシャル・アイコンの3種とフォールバック設計、グループ表示（Avatar Group）の判断基準を解説する。
ラベル・ステータス・数値を小さな丸みを帯びたチップで示すUIコンポーネント。カテゴリタグ・未読数・ステータス表示に使われ、視覚的に素早く情報を補完する。
1つのエンティティに関連する情報（画像・タイトル・説明・アクション）をひとまとめにした独立したコンテナUI。ECサイトの商品一覧・記事サムネイル・ダッシュボードのウィジェットに使われる。
コンテンツを条件（カテゴリ・日付・価格・ステータスなど）で絞り込むUIコンポーネント。チェックボックス・ドロップダウン・トグル・レンジスライダーの使い分けと、フィルター状態の可視化設計を解説する。
UIにおける画像・動画・音声などのメディアコンテンツの表示設計。アスペクト比固定・レイジーロード・スケルトンUI・alt属性の設計基準を解説する。
複数の情報を縦に並べる最基本のUIパターン。Ordered / Unordered / Description の3種と、インタラクティブなAction list・Selection listの使い分けを押さえる。
ユーザーが入力したキーワードでコンテンツを絞り込むUIコンポーネント。インクリメンタルサーチ・サジェスト・空の状態・キーボード操作の設計基準を解説する。
コンテンツ間の論理的・視覚的な区切りを表現するUIコンポーネント。水平線・余白・色の違いなど実装手段の選択基準と、装飾と意味論的区切りの使い分けを解説する。
長いページ内のセクション構造を可視化し、読者が任意の場所へジャンプできるナビゲーションUI。スクロール連動・アクティブ追跡・スムーズスクロールの設計基準を解説する。
画面左端に縦並びするアイコン主体のナビゲーション。Sidebarより薄く、Bottom navより画面を広く使えるモバイル〜タブレット向けの省スペースナビゲーションコンポーネント。
現在地と階層構造を同時に伝えるナビゲーション補助コンポーネント。ユーザーが「今どこにいるか」と「どこから来たか」を一目で把握できる設計基準。
ファイル選択・ドラッグ&ドロップ・進捗表示・エラーハンドリングを統合したコンポーネント。ユーザーが「今どの状態にあるか」を常に把握できる設計が品質の核心。