はじめに
「UIXHEROって、結局何が学べるの？」
サイトを開いてみたものの、記事がたくさんあって何から読めばいいか分からない。そんな状態で闇雲に読み進めても、知識がバラバラになってしまう。
この記事では、UIXHEROの知識構造を整理する。サイト全体がどう構成されているかを把握することで、自分が今どこにいて、次に何を学べばいいかが分かるようになる。
1. UIXHEROの全体構造
5つの知識領域
UIXHEROは、以下の5つの領域で知識を整理している。
| 領域 | 内容 | 役割 |
|---|---|---|
| UI原則 | 視覚設計の原則・パターン | 「どう見せるか」の判断基準 |
| UX心理 | ユーザー心理・認知バイアス | 「なぜそう感じるか」の根拠 |
| UIコンポーネント | ボタン・フォームなどの部品 | 「何を使うか」の選択肢 |
| 用語集 | 専門用語の定義 | 「何を指しているか」の共通理解 |
| 学習ルート | 体系的な学習パス | 「どの順序で学ぶか」のガイド |
これらは独立しているわけではなく、相互に関連している。
なぜこの構造にしているのか
UI/UX設計を学ぶとき、多くの人は以下のような壁にぶつかる。
- 「原則は分かったけど、どう使えばいいか分からない」
- 「心理学は面白いけど、設計にどう活かせばいいか分からない」
- 「コンポーネントは作れるけど、なぜその形なのか説明できない」
これらは「知識がバラバラ」だから起きる。UIXHEROでは、知識を関連づけて学べるように構造化している。
2. 各領域の詳細
UI原則
UI原則は、「どう見せるか」の判断基準を提供する。
たとえば以下のような原則がある。
- コントラスト：重要な要素を目立たせる
- 整列：要素を揃えて秩序を作る
- 近接：関連する要素を近くに配置する
- 反復：一貫性を持たせてパターンを作る
これらは「なんとなく」ではなく「根拠を持って」デザインするための道具だ。画面の優先順位や見せ方で迷ったら、UI原則を見る。
UX心理
UX心理は、「なぜそう感じるか」の根拠を提供する。
たとえば以下のような心理法則がある。
- ヒックの法則：選択肢が多いと決定に時間がかかる
- フィッツの法則：大きいターゲットは押しやすい
- ミラーの法則：人は7±2個の情報しか保持できない
- フォン・レストルフ効果：異質なものは記憶に残りやすい
これらを知ることで、「ユーザーがなぜ迷うのか」「なぜ押し間違えるのか」を説明できるようになる。ユーザーの反応理由を考えたいとき、UX心理を見る。
UIコンポーネント
UIコンポーネントは、「何を使うか」の選択肢を提供する。
たとえば以下のようなコンポーネントがある。
- ボタン：アクションを実行する
- フォーム：情報を入力する
- モーダル：注意を集中させる
- ナビゲーション：移動を可能にする
各コンポーネントには「いつ使うか」「どう設計するか」のガイドラインがある。具体的な部品の使い方を知りたいとき、UIコンポーネントを見る。
用語集
用語集は、「何を指しているか」の共通理解を提供する。
UI/UX設計には専門用語が多い。たとえば以下のような用語だ。
- アフォーダンス：操作可能性を示す特性
- ペルソナ：ユーザー像を具体化したもの
- ワイヤーフレーム：画面構成を示す骨組み
- プロトタイプ：動作確認用の試作
用語を正しく理解することで、チーム内のコミュニケーションがスムーズになる。知らない言葉が出てきたら、用語集を見る。
学習ルート
学習ルートは、「どの順序で学ぶか」のガイドを提供する。
単発の記事を読むだけでは、知識がバラバラになりやすい。学習ルートでは、以下のように順序立てて学べる。
- foundation（このルート）：なぜUX/UIを学ぶのかを理解する
- beginner：UX設計の基本的な流れを学ぶ
- 今後追加予定：役割別・テーマ別の専門ルート
体系的に学びたいときは学習ルートを進め、困ったときに都度引きたいときは辞書のように使う。どちらの使い方もできる。
3. 領域間のつながり
3層構造で考える
UI設計の判断を説明するとき、UIXHEROでは以下の3層構造で考える。
┌─────────────────────────────┐
│ UX心理（Why） │ なぜそう感じるか
├─────────────────────────────┤
│ UI原則（What） │ 何を重視するか
├─────────────────────────────┤
│ UIコンポーネント（How） │ どう実装するか
└─────────────────────────────┘
たとえば「ボタンを大きくする」という判断は、以下のように説明できる。
- UX心理：フィッツの法則により、大きいターゲットは押しやすい
- UI原則：重要なアクションにはコントラストをつける
- UIコンポーネント：プライマリボタンとして実装する
この3層を意識することで、「なんとなく」ではなく「根拠を持って」設計できるようになる。
用語集と学習ルートの位置づけ
用語集は、3層すべてで使われる共通言語だ。たとえば「アフォーダンス」という用語は、UX心理でもUI原則でも登場する。
学習ルートは、これらの知識を「いつ、どの順序で学ぶか」を整理したものだ。バラバラに学ぶのではなく、流れで学ぶことで定着しやすくなる。
4. 崩れやすいポイント
「全部読まないと使えない」と思ってしまう
初心者が陥りやすいのは、「すべての記事を読まないと実務で使えない」と思ってしまうことだ。
実際には、必要なときに必要な知識を参照すれば十分だ。UIXHEROは「辞書」のように使うこともできる。
「記事を読めば身につく」と思ってしまう
もう1つ陥りやすいのは、「読めば身につく」と思ってしまうことだ。
知識は、使わなければ定着しない。読んだ内容を実際の設計に適用してみることで、初めて自分のものになる。
5. この知識がUI設計で効く場面
設計判断を説明するとき
「なぜこのデザインにしたのか」と聞かれたとき、UIXHEROの知識があれば以下のように説明できる。
- 「ミラーの法則に基づいて、選択肢を5つに絞りました」
- 「近接の原則に従って、関連する項目をグループ化しました」
- 「プライマリボタンのガイドラインに沿って、サイズと色を決めました」
根拠を持って説明できることで、デザインの信頼性が上がる。
改善ポイントを見つけるとき
「なんとなく使いにくい」と感じたとき、UIXHEROの知識があれば以下のように分析できる。
- 「選択肢が多すぎて、ヒックの法則に反しているのでは？」
- 「整列が崩れていて、視線の流れが分断されているのでは？」
- 「ボタンの役割が不明確で、適切なコンポーネントを使えていないのでは？」
知識があることで、「何が問題か」を言語化できるようになる。
どこから調べ始めるか迷うとき
新しい案件や制約に直面したとき、UIXHEROの知識構造があれば以下のように考えられる。
- 「どう見せるか」で迷っているなら、UI原則を見る
- 「なぜユーザーがそう感じるか」を調べたいなら、UX心理を見る
- 「何を使うか」の選択肢を探したいなら、UIコンポーネントを見る
構造を知っていれば、「とりあえず検索」ではなく、判断に必要な知識にたどり着ける。
6. まとめ
UIXHEROは、UI原則・UX心理・UIコンポーネント・用語集・学習ルートの5つの領域で知識を整理している。
この記事で押さえてほしいのは以下の3点だ。
- UIXHEROは「なぜ（UX心理）→ 何を（UI原則）→ どう（UIコンポーネント）」の3層構造で整理されている
- 学習ルートは、バラバラの知識を流れで学ぶためのガイドである
- すべてを読む必要はなく、必要なときに参照すればよい
次のステップでは、「学習ルートの使い方」を整理する。どこから始めればよいか、順番通りに読む意味、飛ばしてよい場面を理解することで、効率的に学習を進められるようになる。
関連知識
- UI：ユーザーインターフェースの定義
- UX：ユーザー体験の定義
- 情報設計：情報の構造化と整理
- UIデザイン完全ガイド：UI設計を網羅的に学ぶためのハブ記事