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

記事一覧

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

UIデザイン完全ガイド

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

見る

UX心理(119)

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

見る

UI原則(65)

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

見る

UIコンポーネント(69)

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

見る

用語集(536)

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

見る

UIデザイン完全ガイド

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

見る

UX心理(119)

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

見る

UI原則(65)

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

見る

UIコンポーネント(69)

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

見る

用語集(536)

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

見る
すべて(408)UX心理(119)UI原則(65)コンポーネント(69)アクセシビリティ(11)エンジニアリング(15)インタビュー(22)リサーチ(29)記事(67)依頼先の選び方(4)UI検品の6観点(6)UI裁判(1)
UIXHERO

UIXHERO

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

ナビゲーション

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

その他

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

プライバシーポリシー

© 2026 UIXHERO. All rights reserved.

408件の記事が見つかりました

Status Bar(ステータスバー)

14分で読める

システムやコンテンツの現在の状態を画面の固定位置に常時表示するUIコンポーネント。接続状態・保存状態・選択件数・処理進行状況などをコンパクトに伝える設計とARIA実装を解説する。

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

Toggle Group(トグルグループ)

14分で読める

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

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

Tooltip(ツールチップ)

15分で読める

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

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

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

16分で読める

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

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

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

15分で読める

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

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

Sort(ソート)

15分で読める

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

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

Avatar(アバター)

12分で読める

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

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

Badge(バッジ)

12分で読める

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

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

Card(カード)

14分で読める

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

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

Filter(フィルター)

17分で読める

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

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

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

16分で読める

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

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

List(リスト)

13分で読める

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

コンポーネントタグ: ui-components / list
前へ
1
15161819
34
次へ