この連載の地図と読み方 — UI/UXを体系で学ぶ（第0回）
UI/UXを学ぼうとすると、最初に大量の用語に出会います。アフォーダンス、ゲシュタルト、ヒューリスティック評価、デザインシステム。
どれも重要なのですが、用語を覚えた数と設計の質は比例しません。
第0回：この連載の地図と読み方（この記事）。次回：UXとUIを分ける（近日公開）
知識のリストとしては身につかない
この連載は、UI/UXを判断の階層として扱います。
同じ用語を知っていても、初学者はそれを守り、中級者は状況に応じて曲げ、上級者は曲げてよい条件そのものを設計します。段階を分けているのは知識量ではなく、何を判断できるかです。
三つの段階
| 段階 | できること | 落とし穴 |
|---|---|---|
| 初学者 | 原則を知り、それに沿って作れる。タップ領域44px、コントラスト比4.5対1といった具体値を持っている | 原則を守ること自体が目的になる |
| 中級者 | 原則同士が衝突したとき、どちらを優先するか根拠を持って決められる | 利用者の声をそのまま設計に翻訳して、根本原因に届かない |
| 上級者 | 事業目標と利用者の価値の対立を、どちらかを切り捨てずに構造として扱える | 抽象度が上がって、手が動かなくなる |
自分がどこにいるかは、落とし穴のほうを見ると分かりやすいと思います。
全11回の構成
第1回から第7回で領域を一周します。UXとUIの分離、利用者の理解、情報設計、状態設計、ビジュアル設計、評価、そして組織と仕組み。
第8回から第10回はスキルアップ編です。何をすれば伸びるのか、段階ごとにどう進むのか、停滞をどう抜けるのか。
| 回 | 扱うこと |
|---|---|
| 第1回 | UXとUIを分ける — ノーマンの6概念、実行の淵と評価の淵 |
| 第2回 | 利用者を理解する — リサーチ設計、ペルソナ、ジャーニー |
| 第3回 | 情報を構造化する — 情報設計、メンタルモデル、ナビゲーション |
| 第4回 | 状態を設計する — インタラクション、エラー、空状態 |
| 第5回 | 見た目に意味を持たせる — ゲシュタルト、余白、文字組み、色 |
| 第6回 | 評価する — ヒューリスティック評価、ユーザビリティテスト、アクセシビリティ |
| 第7回 | 仕組みを作る — デザインシステム、統治、倫理 |
| 第8回 | スキルアップの原理 — 何をすれば伸びるのか |
| 第9回 | 段階別の学習ルート — 初学者・中級者・上級者 |
| 第10回 | 停滞を抜ける — 伸び悩みの正体と対処 |
読み方
順番に読む必要はありません。ただし第1回の概念語彙だけは先に通しておくと、以降の議論が格段に読みやすくなります。ここで扱う言葉は、後の全回で判断の道具として使い回すからです。
その回の内容を自分の現場に当てはめるための問いです。読んで終わりにせず、手元のサイトや画面に対して一度は答えてみてください。
この連載は原則の紹介ではなく、判断できるようになることを目標にしています。当てはめてみたときに初めて、原則が道具に変わります。
今回の学び
まず、段階を分けているのは知識量ではないということ。同じ用語を知っていても、それを守る人と、曲げられる人と、曲げてよい条件を決められる人がいます。差は覚えた数ではなく、何を判断できるかでした。
次に、各段階に固有の落とし穴があること。守ること自体が目的になる、声をそのまま設計にする、抽象度が上がって手が止まる。自分がどこにいるかは、できることより、はまっている穴のほうが教えてくれます。
そして、語彙を先に通しておくと、あとが速いこと。第1回の言葉は、以降の全回で判断の道具として使い回します。順番に読む必要はありませんが、ここだけは先に通す価値があります。
この記事を共有する
関連記事
配列を制すとJSが書ける — バニラJS入門（第5回）
文法を一周しても作れないのは、データの扱いを練習していないからです。覚える配列メソッドは4つだけ。そこから始めます。
押さずに、押したことにする
広告リンクが押されたことを数える仕組みを入れました。動くかどうかは、押してみれば分かります。 ただ、その1回が向こう側に記録されます。 この記事で扱うこと 自分の広告リンクを押さずに、押したときの動きだけを確かめた話です […]
自分のブラウザでは、一度も動いていなかった
タグマネージャーの設定を足したので、公開する前に動きを確かめようとしました。プレビューを起動して、サイトのURLを入れて、接続を待つ。 繋がりませんでした。そして原因を追ったら、プレビューの話では終わりませんでした。 こ […]