#ui-components

Toggle Group(トグルグループ)

複数の選択肢を排他選択(単一選択)または複数選択できるボタングループUIコンポーネント。RadioとCheckboxとの使い分け・単一/複数選択の設計・ARIA rolegroupパターンの実装を解説する。

2026年3月3日
14

Tooltip(ツールチップ)

要素にホバーまたはフォーカスした時に補足情報を表示する小さなフローティングUIコンポーネント。TooltipとPopoverの使い分け・モバイル対応の限界・role=tooltip ARIAパターン・aria-describedbyの実装を解説する。

2026年3月3日
15

Command Palette(コマンドパレット)

キーボードショートカット(⌘K / Ctrl+K)で呼び出す全機能横断の検索・実行UIコンポーネント。アプリ内のコマンド・ページ・設定を横断検索し、キーボードだけで操作を完結させるパワーユーザー向けUI設計を解説する。

2026年3月2日
16

Dropdown Menu(ドロップダウンメニュー)

トリガー要素をクリック/ホバーすると展開するメニューUIコンポーネント。Context MenuやSelectとの使い分け・フォーカス管理・サブメニュー設計・ARIA menuパターンの実装を解説する。

2026年3月2日
15

Sort(ソート)

コンテンツを特定の基準(日付・価格・名前・評価など)で並べ替えるUIコンポーネント。ソートUIの形式選択・現在の並び順の可視化・昇順/降順トグルの設計基準を解説する。

2026年3月2日
15

Avatar(アバター)

ユーザーやエンティティを表す小さな円形または正方形の画像UI。プロフィール写真・イニシャル・アイコンの3種とフォールバック設計、グループ表示(Avatar Group)の判断基準を解説する。

2026年3月1日
12

Badge(バッジ)

ラベル・ステータス・数値を小さな丸みを帯びたチップで示すUIコンポーネント。カテゴリタグ・未読数・ステータス表示に使われ、視覚的に素早く情報を補完する。

2026年3月1日
12

Card(カード)

1つのエンティティに関連する情報(画像・タイトル・説明・アクション)をひとまとめにした独立したコンテナUI。ECサイトの商品一覧・記事サムネイル・ダッシュボードのウィジェットに使われる。

2026年3月1日
14

Filter(フィルター)

コンテンツを条件(カテゴリ・日付・価格・ステータスなど)で絞り込むUIコンポーネント。チェックボックス・ドロップダウン・トグル・レンジスライダーの使い分けと、フィルター状態の可視化設計を解説する。

2026年3月1日
17

Image / Media(画像・メディア)

UIにおける画像・動画・音声などのメディアコンテンツの表示設計。アスペクト比固定・レイジーロード・スケルトンUI・alt属性の設計基準を解説する。

2026年3月1日
16

List(リスト)

複数の情報を縦に並べる最基本のUIパターン。Ordered / Unordered / Description の3種と、インタラクティブなAction list・Selection listの使い分けを押さえる。

2026年3月1日
13

Search(検索)

ユーザーが入力したキーワードでコンテンツを絞り込むUIコンポーネント。インクリメンタルサーチ・サジェスト・空の状態・キーボード操作の設計基準を解説する。

2026年3月1日
18
#ui-components | Blog | UIXHERO