#ui-components

トグルボタンとは?意味とデザインの要点・スイッチとの違い

トグルボタンとは、押すたびにオンとオフが切り替わり、押した状態が残るボタンです。トグルスイッチ・チェックボックス・通常のボタンとの違い、使う場面と使わない場面、押した状態の見せ方、画面読み上げソフトに状態を伝えるHTML属性(aria-pressed)の指定方法を解説します。

2026年2月28日
約19分

Context Menuとは?contextmenuイベントとUI設計の使い方

Context Menuとは、右クリックや長押しで表示するコンテキスト依存のメニューUIです。contextmenuイベント、Dropdown Menuとの違い、ARIA menu、モバイル対応を解説します。

2026年3月3日
約17分

ページネーションとは?デザインの要点と無限スクロールとの違い

ページネーションとは、一覧や検索結果を一定の件数ごとにページに分け、ページ番号や「次へ」で移動できるようにするUIです。デザインで守るルール、1ページの表示件数、下へ送ると続きが読み込まれる無限スクロールや「もっと見る」ボタンとの違い、アクセシビリティ要件を解説します。

2026年2月26日
約12分

Accordion(アコーディオン)

見出しをクリックすると対応するコンテンツを展開・折りたたむUIコンポーネント。FAQ・設定セクション・段階的開示に使われ、単一展開と複数展開の使い分け・ARIA disclosure/accordion パターンの実装を解説する。

2026年3月3日
約15分

AI Chat UI(AIチャットUI)

AIアシスタントとの対話インターフェース。メッセージバブル・ストリーミング表示・ロール別スタイリング・入力欄・スケルトンローディング・エラー状態の設計パターンを解説する。

2026年3月3日
約14分

Alert(アラート)

重要な情報・警告・エラー・成功をインラインで伝えるUIコンポーネント。Toastとの使い分け・4種類のセマンティック(info/success/warning/error)・role=alertとaria-liveの実装を解説する。

2026年3月3日
約12分

Calendar(カレンダー)

日付の選択・予定の表示・期間の選択を行う高度な複合UIコンポーネント。Date Picker・Event Calendar・Date Range Pickerの3種類の使い分け・キーボードナビゲーション・aria-labelの実装を解説する。

2026年3月3日
約14分

Carousel(カルーセル)

複数のコンテンツアイテムを横スクロールまたはスライドで切り替える複合UIコンポーネント。自動再生・手動ナビゲーション・インジケーター・レスポンシブ対応・アクセシビリティ(aria-roledescription・aria-live)の設計を解説する。

2026年3月3日
約12分

Dashboard Patterns(ダッシュボードパターン)

KPI・グラフ・テーブル・アラートを1画面に集約したデータ可視化UIのレイアウトパターン。グリッドレイアウト・ウィジェット設計・レスポンシブ対応・スケルトンローディング・フィルタリングの設計を解説する。

2026年3月3日
約16分

Density Patterns(密度パターン)

UIの情報密度をユーザーや用途に合わせて切り替える設計パターン。Compact・Default・Comfortable の3段階・テーブル行・リスト・カードへの適用・ユーザー設定との連動を解説する。

2026年3月3日
約14分

Editor Patterns(エディターパターン)

テキスト・コード・リッチコンテンツを編集するためのUIパターン。ツールバー・コマンドパレット・スラッシュコマンド・マークダウン入力・コードエディター・インラインフォーマットの設計を解説する。

2026年3月3日
約17分

Empty State(空状態)

コンテンツが存在しない状態をユーザーに伝えるUIコンポーネント。「データなし」「検索結果なし」「エラー」の3種類の設計・イラスト/アイコン/テキスト/CTAの組み合わせ・アクセシビリティの実装を解説する。

2026年3月3日
約12分
#ui-components | Blog | UIXHERO