「機能は満たしているのに、なぜか使いにくい」 そんなアプリやシステムに触れたことはありませんか？
今回は、非デザイナーの方にこそ知ってほしいOOUI（オブジェクト指向UI）という設計思想についてお話しします。
私自身、普段は主にエンジニアとして活動する中で、OOUIを学んで良かったと感じることが多くあります。特に良かったことは、ソースコードだけでなく、システムやアプリケーション全体を「オブジェクト」という一貫した概念で捉えられるようになったことです。
以前、UI設計に携わった際に機能を詰め込むことに必死で、「どう設計すれば使いやすくなるのか」が分からず四苦八苦していました。 その中で出会った書籍、『オブジェクト指向UIデザイン──使いやすいソフトウェアの原理』[1]をベースに、非デザイナーでも実践できるUI設計の基本を解説します。
まずUIの設計思想についてです。UIの設計には、大きく分けて「タスク指向」と「オブジェクト指向（OOUI）」という2つのアプローチがあります。
タスク指向のUIは、ユーザーが行いたい「作業（タスク）」を起点に画面を設計するアプローチです。 「自動精算機」や「ATM」のような一方通行の操作に向いた手法です。 例えば、最初に以下のようなボタンが表示される写真管理アプリをイメージしてみてください。
「写真を削除」→「削除する写真を選ぶ」といったように、 ユーザーはまず「やりたいこと」を選び、その後に対象となる写真データにたどり着きます。このように、「やること」を中心にUIを構成するのがタスク指向UIです。
OOUI（Object-Oriented User Interface）は、ユーザーが関心を持つオブジェクト（モノ）を起点に設計するアプローチです。
例えば先ほどタスク指向UIの例で出した写真管理アプリをOOUIの設計にすると、 最初に表示されるのは「写真一覧（オブジェクト）」です。
ユーザーはその中から写真を選び、
といった操作を行います。
つまり、「何をするか」ではなく、何に対して操作するかがUIの中心になります。
著書では、
ほとんどの場合、UIはオブジェクト指向に設計されているべき
とされています。[2]
多くのアプリケーションにおいて、ユーザーの関心は「何をするか」よりも「何に対して操作するか」にあり、オブジェクトを中心に据えたUIの方が、直感的で理解しやすいためです。[3]
今ではスマートフォンやパソコンのGUIをはじめ、誰もがOOUIのツールに触れています。それにもかかわらず、業務アプリケーションを中心に、タスク指向の使いにくいシステムが作られている現状があります。 普段からOOUIに触れているにもかかわらず、いざ自分でツールのデザインを考えるとタスク指向のUIになってしまうのはなぜでしょうか？
理由として、開発プロセスそのものが、タスク指向UIが生まれる原因とされています。
システム開発ではまず、ユーザーの要求を整理するところから始まります。 このとき定義するのが
といった「やること（タスク）」です。
さらに要件定義や設計では、これらをベースにユースケースや業務フローが作られていきます。 つまり開発の初期段階から、システムは「タスクの集合」として捉えられやすい構造になっており、 その結果、
といったように、UIもタスク単位で分割されがちになってしまいます。
それでは、OOUIの設計プロセスを見ていきます。 OOUIを構築するための基本ステップは以下の通りです。
このステップに沿って、具体的な要件からOOUIを設計してみます。 今回は、チームで使うタスク管理アプリを想定します。
要求は以下の通りです。
まず要求から名詞を抽出します。 ここでは「操作（動詞）」ではなく「対象（名詞）」に注目することが重要です。
抽出した名詞：
次に、それぞれの関係を整理します。
ここで重要なのは、「ユーザーが操作したい・参照したい対象は何か？」という点を意識することです。 この観点からUIの中心に配置するメインオブジェクトを特定します。
メインオブジェクト
メインオブジェクトに付随する情報を、プロパティ（状態）として定義します。要求にはなくても、必要になるプロパティを想定して追加します。
プロジェクト
タスク
ユーザー
プロパティを定義してオブジェクト構造が固まったら、ビュー（画面）を設計します。
ビューは以下の2種類に分かれます：
今回の例では以下のメインオブジェクトに対してのビューを設定します。
プロジェクト
タスク
ユーザー
ここでビュー間の関係（遷移）を整理し、可視化すると理解しやすくなります。
ナビゲーションには、ユーザーが頻繁にアクセスするオブジェクトのコレクションを配置します。
今回の例では：
となります。
最後に、各ビューを具体的なUIに落とし込みます。 ここではゼロから画面を作るのではなく、世の中で一般的に使われている「UIデザインパターン」を、定義したオブジェクトの性質に合わせて選択・適用していく作業となります。 代表的なパターンには、以下のようなものがあります。
「コレクション」
「シングル」
「コレクション」
「シングル」
メイン情報
サブ情報
アクション
「コレクション」
「シングル」
メイン情報
サブ情報
アクション
以上のステップでUIの骨子が組み上がります。しかし、一度で完璧な設計にたどり着くことは少ないです。実際には、このプロセスを何度も行き来しブラッシュアップしていく必要があります。
ユーザーが「何をするか」を考える前に、目の前の「何をどうしたいか」を直感的に捉えられる形になるまで、オブジェクトの定義とレイアウトのパターンを練り上げていくことが大切です。
OOUIは、「何をするか（タスク）」ではなく 「何を扱うか（オブジェクト）」を起点に設計する手法です。
今回例として挙げた要求はシンプルでしたが、実務ではもっと複雑な仕様が絡み合っていくことが多いです。
そこで、要求通りの「タスク」をただ画面に並べるのはなく、 「オブジェクト」を掘り起こし、ユーザーが直感的に扱える形へと再定義することが必要です。
このOOUIの設計プロセスは、エンジニアにとってUIデザイン以上の価値を持つと考えています。DBやクラス設計で定義したモデルをUIに反映させることで、システム全体を一貫したオブジェクトの集合として捉えられるようになるからです。バックエンドから画面までが一本の線で繋がる感覚を持つことで、開発はよりロジカルで強固なものに変わると考えています。
『オブジェクト指向UIデザイン──使いやすいソフトウェアの原理』では、より細かい設計ステップや事例などが非デザイナーでも分かりやすいように紹介されていますので、興味のある方は是非手に取られてみてください。
1 「オブジェクト指向UIデザイン──使いやすいソフトウェアの原理」（EB+DB PRESS plusシリーズ） 単行本（ソフトカバー） – 2020/6/5 ソシオメディア株式会社 （著）, 上野 学 （著, 監修）, 藤井 幸多 （著） ↩
2 「オブジェクト指向UIデザイン──使いやすいソフトウェアの原理」Kindle版59ページ ↩
3 ATMなど「特定の目的を迷わず短時間で遂行させる」場合は、あえてステップを絞ったタスク指向が有効なケースもあります。 ↩