この記事は、 UIXHERO全体 を体系的に学ぶためのナビゲーションです。
UXリサーチ・インタビュー技術・UIデザイン・エンジニアリング・アクセシビリティまで、 306本の記事と493語の用語集 で構成されています。
あなたの目的は？
| 目的 | 最初に読む記事 |
|---|---|
| UXとは何か、基本概念を知りたい | → UXとは |
| ユーザーを理解する調査手法を学びたい | → UXリサーチ完全ガイド |
| インタビューの技術を学びたい | → インタビュー技術一覧 |
| UIを設計する原則・ルールを学びたい | → UIデザイン完全ガイド |
| 実装のためのエンジニアリング原則を学びたい | → エンジニアリング一覧 |
| アクセシビリティを学びたい | → アクセシビリティとは |
| 用語の意味を調べたい | → 用語集（493語） |
UIXHEROの全体構造
UIXHEROは、UXデザインを 7つの領域 で体系化しています。
| 領域 | 記事数 | 役割 |
|---|---|---|
| UXリファレンス | 154本 | UX心理・認知科学の理論体系 |
| UXリサーチ | 15本 | ユーザー調査の手法体系 |
| インタビュー技術 | 21本 | インタビューの技術棚 |
| UIデザイン原則 | 65本 | UI設計の判断基準 |
| UIコンポーネント | 60本 | 実装可能なUIパターン |
| エンジニアリング | 15本 | フロントエンド設計原則 |
| アクセシビリティ | 11本 | 誰もが使えるUI設計 |
合計 306本 ** の記事と ** 493語 の用語集（Glossary）で構成されています。
UXリサーチ
ユーザーを理解するための調査手法を体系化しています。
調査フェーズ別
| フェーズ | 目的 | 主な手法 |
|---|---|---|
| 探索 | 問題を発見する | ユーザーインタビュー、フィールドスタディ、日記調査 |
| 検証 | 仮説を確かめる | ユーザビリティテスト、A/Bテスト、サーベイ |
| 評価 | 成果を測る | NPS、SUS、アクセス解析 |
調査設計の基本
→ すべての手法を見る: UXリサーチ一覧（15本）
インタビュー技術
インタビューは「聞けば答えが返ってくる」ほど単純ではない。 技術 が必要です。
4レイヤー構造
| レイヤー | 内容 | 記事例 |
|---|---|---|
| 基礎 | インタビューの心構え | 概論、タイプ、マインドセット |
| 設計 | 調査設計・リクルーティング | 調査計画、リクルーティング、倫理・同意 |
| 実施 | 本番の技術 | ラポール形成、質問設計、深掘り技術、傾聴技術 |
| 分析 | データを知見に変える | コーディング、親和図法、統合 |
主要技術
→ すべての技術を見る: インタビュー技術一覧（21本）
UIデザイン
UIXHEROのUIデザインは、 3レイヤー構造 で体系化されています。
| レイヤー | 問い | 役割 | 記事数 |
|---|---|---|---|
| UX心理（Why） | なぜユーザーはそう感じ・行動するか | 人間の認知・感情・行動の仕組みを理解する | 154本 |
| UI原則（What） | どう設計すればよいか | 心理法則をUIの判断基準へ翻訳する | 65本 |
| UIコンポーネント（How） | どう形にするか | 原則を実装可能な部品として具体化する | 60本 |
主要法則・原則・コンポーネント
| UX心理 | UI原則 | UIコンポーネント |
|---|---|---|
| ヒックの法則 | 選択肢を減らす | Select |
| フィッツの法則 | Fittsの法則 | Button |
| 認知負荷 | 段階的開示 | Accordion |
| ピーク・エンドの法則 | ピーク/終わりの体験設計 | Progress Bar |
UIデザインの8カテゴリ、全記事リスト、設計プロセスは下記ガイドで詳しく解説しています。
→ UIデザイン完全ガイド — UX心理・UI原則・UIコンポーネントの3レイヤーを深掘り
エンジニアリング
UIデザインを「動くプロダクト」にするためのフロントエンド設計原則。
3カテゴリ構造
| カテゴリ | 内容 | 記事例 |
|---|---|---|
| 設計原則 | コードの品質を保つ | KISS、DRY、YAGNI、SOLID |
| アーキテクチャ | 構造を設計する | アーキテクチャ、コンポーネント設計、状態管理 |
| 品質・運用 | 継続的に改善する | パフォーマンス、テスト、セキュリティ |
UI/UX × エンジニアリング
UIXHEROのエンジニアリング記事は、単なるコーディング技術ではなく UI/UXの文脈で設計原則を解説 しています。
- 関心の分離 — UIとロジックを分ける理由
- API設計 — フロントエンドが使いやすいAPI
- アクセシビリティ実装 — a11yを実装で担保する
→ すべての記事を見る: エンジニアリング一覧（15本）
アクセシビリティ
アクセシビリティは上級編ではない。 必修 です。
3レイヤー構造
| レイヤー | 内容 | 記事例 |
|---|---|---|
| 原則 | なぜ重要か | 概論、WCAG原則（POUR）、インクルーシブデザイン |
| 視覚・UI | 見える・読める | 色彩とコントラスト、タイポグラフィと余白、フォーカスインジケーター |
| 操作・実装 | 使える・動く | キーボードナビゲーション、セマンティクスとARIA、スクリーンリーダーUX |
WCAG 4原則（POUR）
- Perceivable（知覚可能） — 情報を認識できる
- Operable（操作可能） — インターフェースを操作できる
- Understandable（理解可能） — 情報と操作を理解できる
- Robust（堅牢） — 支援技術で確実に解釈できる
→ すべての記事を見る: アクセシビリティ一覧（11本）
UXデザインのプロセス
UXデザインは以下の流れで進みます。
| フェーズ | 問い | 主なアクティビティ |
|---|---|---|
| 理解 | ユーザーは誰か、何を求めているか | UXリサーチ、インタビュー、ペルソナ作成 |
| 定義 | 解くべき問題は何か | ジャーニーマップ、課題定義、要件整理 |
| 設計 | どう解決するか | ワイヤーフレーム、UI設計、プロトタイプ |
| 実装 | どう形にするか | フロントエンド開発、アクセシビリティ対応 |
| 検証 | うまくいっているか | ユーザビリティテスト、A/Bテスト、指標測定 |
このプロセスは一方通行ではなく、検証結果をもとに理解フェーズに戻ることもあります。
このサイトの使い方
① 目的から調べる
「ユーザーを理解したい」→ UXリサーチ / インタビュー技術 「UIを設計したい」→ UIデザイン原則 / UIコンポーネント 「実装したい」→ エンジニアリング 「誰でも使えるようにしたい」→ アクセシビリティ
② 理論から調べる
「なぜユーザーはそう行動するのか」→ UXリファレンス（154法則）
③ 用語から調べる
「この言葉の意味は？」→ 用語集（493語）
まとめ｜UXデザインはリサーチから実装までの全体設計
UXデザインは「ユーザーのことを考える」だけでは完結しない。
- 理解する — UXリサーチ、インタビュー技術
- 設計する — UX心理、UI原則、UIコンポーネント
- 実装する — エンジニアリング、アクセシビリティ
- 検証する — ユーザビリティテスト、指標測定
UIXHEROはこの全体を 306本の記事と493語の用語集 で体系化しています。
各領域を深掘りする
- UIデザイン完全ガイド — UX心理・UI原則・UIコンポーネントの3レイヤー
- UX心理154法則 — 人間の認知・行動・感情の理論体系
- UIデザイン原則まとめ — 心理法則をUI設計ルールに翻訳
- UIコンポーネント完全ガイド — 原則を実装可能なパターンに
- UI設計プロセス完全ガイド — Why→What→Howの思考順序
関連リンク
リソース一覧
- UXリファレンス一覧（154本）
- UXリサーチ一覧（15本）
- インタビュー技術一覧（21本）
- UIデザイン原則一覧（65本）
- UIコンポーネント一覧（60本）
- エンジニアリング一覧（15本）
- アクセシビリティ一覧（11本）
- 用語集（493語）