画面とは何か

第2部では設計原則を紹介します。その前に、「画面とは何か」を考えておきましょう。

---

システムの全体像

業務システムには、多くのオブジェクト（もの・こと）が存在します。ユーザー、注文、商品、配送、権限…。これらは互いに関連し、複雑なネットワークを形成しています。

人間は、この全体を一度に把握することはできません。

---

画面 = 切り取った窓

画面とは、システム全体から「人間が把握できる範囲」を切り取った窓です。

ユーザーは、この「窓」を通してシステムを操作します。

---

オブジェクトとは

顧客、注文、商品、請求書…。ユーザーが認識し操作する**対象（もの・こと）**を、オブジェクトと呼びます。

オブジェクトとは、ユーザーの関心や操作の対象となる「もの」や「こと」である。 — 上野学・藤井幸多「オブジェクト指向UIデザイン」

UIのオブジェクトは、データベースのテーブルに対応することが多いです。

---

一覧と詳細

窓の切り取り方には、大きく2種類あります。

• 一覧: 複数のオブジェクト（もの・こと）を一望します。比較、選択、一括操作に向いています。
• 詳細: 1つのオブジェクト（もの・こと）を深く見ます。関連するオブジェクトも一緒に表示します。

---

窓から窓へ

ユーザーは、システム全体の中から、見たい部分を次々と切り替えていきます。

• 一覧で選んで、詳細を開く
• 詳細から、関連するオブジェクトの詳細へ
• 詳細から、一覧に戻る

具体例

1. 注文一覧を開く（注文というオブジェクトの一覧）
2. 注文#002をクリック → 注文詳細に移動
3. 顧客名「田中太郎」をクリック → 顧客詳細に移動
4. ブラウザの戻るボタン、またはパンくずで一覧に戻る

URLで表すと: /orders → /orders/002 → /customers/123

この切り替えはスムーズでなければなりません。ユーザーが「今どこにいるのか」を見失わないように、窓と窓の関係は明確であるべきです。

「登録画面」「確認画面」「完了画面」のような画面は、この流れを分断します。本来は窓から窓へ、自由に行き来できればいいのです。

---

操作は「窓の中」で行う

この考え方に立つと、操作（登録、編集、削除、承認…）は窓の中で行えばいいことが分かります。

操作	自然な場所
新規作成	一覧の中で（インライン追加）
編集	詳細の中で（インライン編集）
削除	一覧または詳細の中で

「登録画面」「編集画面」を別に作るのは、同じ窓で見られるものを、わざわざ別の窓に切り出していることになります。

---

第2部の読み方

以降の原則は、この「画面 = 切り取った窓」という考え方を前提にしています。

原則	窓の視点で言うと
画面名は「何を見ているか」で名付ける	窓には「何が見えるか」で名前をつける
登録はその場で行う	一覧という窓の中で追加する
編集はその場で行う	詳細という窓の中で編集する
確認画面は最低限にする	窓を増やさず、取り消しで対処する
モードレスを優先する	どの窓を見るかは、ユーザーが自由に決められる
状態と操作を分離する	オブジェクトの状態を、操作の副作用で変えない
ステップではなく不足条件で示す	窓を順番に開かせるのではなく、何が見えていないかを示す

この視点を持って、各原則を読み進めてください。