OOUI(オブジェクト指向UI)の基礎を学ぶ

「護りたい。その想いを護る。」というミッションを掲げている株式会社ゼストで、プロダクトデザインを担当している池田です。

弊社のデザイン設計は、OOUIという設計思想に基づいて進めています。 OOUIは今やかなり浸透しているデザイン設計なので、ご存知の方も多いかと思いますが、改めて基本の設計方法をまとめてみました。

OOUIを選んだ理由

OOUIを採用している理由は、なんといっても直感的に操作できる設計思想であるということです。直感的に操作できれば、ツールの操作に慣れていない方でも迷いなく操作できるということです。

OOUIとは

まずOOUIとは、Object Oriented User Interfaceの頭文字からなる略語で、オブジェクト指向UIと呼ばれているものです。 OOUIでのオブジェクトとはメニュー、ボタン、画像、のように、形で表すことができ、それを見ればそれが何であるか、どのような状態なのか、何ができるのかがわかるものになります。そして、このオブジェクトを起点として、画面を設計していきます。

オブジェクトを起点にするとは？ 

オブジェクトを起点にするということは、ユーザーが行う操作の順番が、まずオブジェクトを選択し、次にアクションするという順番になるということです。

例えば、物を買うときは、商品（オブジェクト）を選択して買う（アクションする）という流れになります。この例だけでなく、多くの場合、何か動作するときには、オブジェクトを選択してアクションとなるはずです。

普段から行なっている動作と同様の流れになっているため、直感的に操作できる、というのがOOUIの設計思想になります。

OOUIで設計する

STEP1：タスク（やりたいこと）を書き出す

例えば、訪問看護ステーションで働く職員であれば、このようなことがタスクとしてあがってきます。

ある職員の職種を確認する
ある職員のチームを確認する
ある職員のスキルを確認する

STEP2：オブジェクトを抽出する

オブジェクトを抽出するとは、つまり、やりたいことから名詞を抜き出す作業になります。タスクの中からオブジェクトを抽出すると、このようになります。

職員
職種
チーム
スキル

抽出したオブジェクトの中からメインオブジェクトは何になるかを考えます。オブジェクト同士の関係性を図に表してみます。

オブジェクト同士の関係性をみると、オブジェクトはすべて「職員」と紐付いているため、「職員」がメインオブジェクトということがわかります。メインオブジェクトが確認できたら、そのメインオブジェクトに付随するプロパティをまとめます。

STEP3：画面構成を考える

この職員ページでは、基本とされるビュー形式が当てはまります。基本のビュー形式とは、複数のオブジェクトの集合（一覧）と単体のオブジェクト（詳細）の形です。画面構成を考える際には、まずはオブジェクトごとにコレクションビューとシングルビューがどのようになるのかを考えます。この場合、コレクションビューにはメインオブジェクトである職員が並び、シングルビューにはメインオブジェクトに付随するプロパティが入ります。