UIXHERO
  • 記事
  • UXリファレンス
  • リソース
  • 学習ルート
  • About
お問い合わせ
  1. ホーム
  2. 記事

タグ: ui-components

UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。

UIデザイン完全ガイド

UX心理・UI原則・コンポーネントの3レイヤーを一本化した総合ガイド

見る

UX心理(119)

UIデザインの「なぜ」を説明する心理・認知の法則

見る

UI原則(65)

心理法則をUI設計のルールに翻訳した原則

見る

UIコンポーネント(72)

ボタン・フォーム・モーダルなど実装可能なUI部品

見る

用語集(537)

UX/UIデザインの重要キーワードを網羅した辞書

見る

UIデザイン完全ガイド

UX心理・UI原則・コンポーネントの3レイヤーを一本化した総合ガイド

見る

UX心理(119)

UIデザインの「なぜ」を説明する心理・認知の法則

見る

UI原則(65)

心理法則をUI設計のルールに翻訳した原則

見る

UIコンポーネント(72)

ボタン・フォーム・モーダルなど実装可能なUI部品

見る

用語集(537)

UX/UIデザインの重要キーワードを網羅した辞書

見る
すべて(72)コンポーネント(72)

UIXHEROの本

あなたがAIにUIを作らせると、何が起きるか

AIが「できました」と言うとき、何が省かれているのか。予備知識ゼロのAIに、実在する業種の業務UIを175枚作らせ続けた記録です。何が組めて、何が組めなかったか。読んだあとは、AIが渡してあったコンポーネントを組み合わせただけなのか、その場でHTMLとCSSを書き起こしたのかを見分けられるようになります。

電子書籍・2026年8月刊。中身はどこで買っても同じで、買った店のアプリかブラウザで読めます。

Zennで買う(¥1,500)(新しいタブで開く)Amazonで買う(¥1,500)(新しいタブで開く)
UIXHERO

UIXHERO

UXデザインの法則や心理学効果を、実例を交えて解説するリファレンスサイト

ナビゲーション

  • ホーム
  • 記事
  • UXリファレンス
  • About
  • お問い合わせ

その他

  • カテゴリー
  • タグ
  • 検索
  • アーカイブ
  • GUNJO(デザインシステム)

プライバシーポリシー

© 2026 UIXHERO. All rights reserved.

72件の記事が見つかりました
タグ: ui-components

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

19分で読める

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

コンポーネントタグ: ui-components / toggle

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

17分で読める

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

コンポーネントタグ: ui-components / context-menu

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

12分で読める

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

コンポーネントタグ: ui-components / pagination

Accordion(アコーディオン)

15分で読める

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

コンポーネントタグ: ui-components / accordion

AI Chat UI(AIチャットUI)

14分で読める

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

コンポーネントタグ: ui-components / ai-chat-ui

Alert(アラート)

12分で読める

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

コンポーネントタグ: ui-components / alert

Calendar(カレンダー)

14分で読める

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

コンポーネントタグ: ui-components / calendar

Carousel(カルーセル)

12分で読める

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

コンポーネントタグ: ui-components / carousel

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

16分で読める

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

コンポーネントタグ: ui-components / dashboard-patterns

Density Patterns(密度パターン)

14分で読める

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

コンポーネントタグ: ui-components / density-patterns

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

17分で読める

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

コンポーネントタグ: ui-components / editor-patterns

Empty State(空状態)

12分で読める

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

コンポーネントタグ: ui-components / empty-state
前へ
134
6
次へ