こんにちは！クラウドソリューション開発部の今野です。
「このメニュー表、なんだか見づらいな…」
「写真も入っていてイメージはしやすいのに、なぜ目的の注文にたどり着くのに時間がかかるんだろう？」
普段アプリやWebサイトを使っていて、このような違和感を覚えたことはありませんか？
その原因は、画面デザインそのものよりも「ユーザーへの情報の見せ方・体験（UI/UX）」の設計にあるかもしれません。
今回は、UI設計において非常に重要な考え方である「OOUI（オブジェクト指向UI）」について、基本的な仕組みからタスク指向との使い分け、実際の開発現場での活かし方まで解説します！
オブジェクト指向UI（OOUI）とは？
OOUIは Object Oriented User Interface の略で、ユーザーが操作する「対象（オブジェクト＝名詞）」を起点に画面を設計する手法です。
OOUIのポイントを一言で表すと、「名詞 ➔ 動詞」の順番で操作させる点です。この対比に当たるのが、従来の「タスク指向UI（動詞 ➔ 名詞）」です。
| 設計手法 | 操作の順番 | 人間の自然な思考 | 画面の例 |
| タスク指向 | 動詞（タスク） ➔ 名詞 | 「何かを注文したい ➔ 対象を選ぶ」 | 「注文を開始する」ボタンから始まり、条件を順に選ばせる |
| OOUI | 名詞（オブジェクト） ➔ 動詞 | 「あのハンバーグが食べたい ➔ 操作を選ぶ」 | ハンバーグの写真一覧から選び、サイズ変更や注文を行う |
人間は普段、目の前にある「物（名詞）」を見てから「どう扱うか（動詞）」を決定することが多いため、OOUIを採用することで直感的でストレスのない画面レイアウトを作りやすくなります。
メニュー表アプリで見る具体例
このOOUIですが、上手く活用すると一言で言えば「見やすい！」といった画面レイアウトが非常に作りやすくなります。
概念的な話が続くと、イメージが難しいため、ある場面例を出します。
レストランのメニューをiPadで見れるようにアプリを作りました。
リリースが完了して、実際にユーザーが使う段階まで進みました。
ｶﾗﾝｶﾗﾝ(お店に入る音)
「iPadからご注文お願いします」
「さて、ハンバーグ食べるぞ〜」
「サラダとかついてるみたいだし、ここはセットかな」
「…サイズか…。Mを選択っと。ハンバーグの選択項目まだかな…。」
「飲み物…?!!早く食べ物選ばせてー！！」
いかがでしょうか？
方法を優先的に聞いているため、いわゆる「タスク型」と呼ばれる表示方法です。
ユーザーからしてみれば、「早くハンバーグを選ばせてぇー！！」となりそうです。
ハンバーグを楽しみにこのお店に来ていたのですから。
小さな子どもがメニューを選ぶときにも困ってしまいます。
親「どれにする？」
子「これ食べたい！」
といった場面もありそうです。
では、今回のテーマとなる、OOUIのモデルに置き換えたらどうなるでしょうか？
「ハンバーグを選択！」
「サイズはMだねー」
「ハンバーグに野菜も合わせたいから、セットで！」
「飲み物は烏龍茶で！」
いかがでしょうか？
ハンバーグ、いわゆるメインディッシュを先行して選ぶことで、それに付随する操作も選択しやすくなったわけです。
これがOOUIのモデルになります。
ちなみに、このような例は自動販売機も該当しますね。
タスク型だと、先にお金を入れる→飲み物のボタンをタッチ！→ガコン(飲み物が下から出てくる音)
OOUIだと、以下のような順番になります。
飲み物のボタンをタッチ！→お金を入れる→ガコン(飲み物が下から出てくる音)
まずメニューを見て、「これ飲みたい！」と指差すのと同じような心理です。
OOUIは、人間の心理に沿った考え方だと思います。
身近な例でいうと、スマート券売機やモバイルオーダーアプリも同様です。
先に「買いたい商品（名詞）」を画面で指指して選び、最後に「決済（動詞）」に進む流れは、人間の直感的な心理に則っています。
タスク型の方が良い場合
「じゃあ全部OOUIにすればいいのでは？」と思うかもしれませんが、実はタスク指向の方が適している場面も存在します。
皆さんが普段から使っているシステム…
「銀行ATM」です。
銀行ATMは、画面をタッチする→「引き出す」「預ける」「記帳」「振り込む」の選択があります。
そして暗証番号入力→金額を入力する…といった流れですね。
タスク型のメリットとしては、先に手段を決定するので、その後の流れが固定化しやすいところでしょうか。
このブログを書いててふと思ったのですが、ドラクエなどのRPGゲームもそういえばタスク型ですね。
やせいのミミックがあらわれた！
このときに行動コマンドが表示されます。
たたかうを選択する→攻撃する相手を選択するという流れになります。
バトルでは「たたかう（動詞）」を選択してから「攻撃対象のモンスター（名詞）」を選びます。
プレイヤーに行動の選択肢（たたかう/じゅもん/にげる）を意識させ、ゲームルールに沿った緊張感や戦術性を生み出すために、あえてタスク指向が採用されています。
実際の開発現場でOOUIをどう活かすか？
私自身、日々のアプリ開発の中で「OOUIかタスク指向か」という視点は常に意識しています。
例えば、ユーザーの投稿記事やタスクを管理するアプリ、ECアプリなどを開発する場面を考えてみます。
-
タスク指向で画面を設計してしまうと…
画面の上部やメインメニューに「編集する」「削除する」「注文する」といった機能（動詞）のボタンがズラリと並びます。
タップした後に「どの記事/商品を編集しますか？」と検索・選択させる流れになるため、画面が機能ボタンで埋め尽くされ、操作の手数も増えてしまいます。
-
OOUIで画面を設計すると…
まずメイン画面に「記事カード」や「商品一覧」といった対象（オブジェクト）をわかりやすく配置します。ユーザーが目的のオブジェクトをタップすると詳細画面が開き、そこに「編集」「シェア」「削除」といった操作ボタンが表示されます。
例えば、iPadアプリの設定画面などを検討する際も、このアプローチが非常に役立ちます。
以前関わっていた業務で「オブジェクトの色を変更する」という操作フローをより見やすくするため、以下のように順番を見直して、レイアウトを修正しました。
-
タスク指向のフロー（変更前）
「色を変更する」を選択 ➔ 赤・青などの色を選ぶ ➔ 対象のオブジェクトをタップして適用
-
OOUIのフロー（変更後）
対象のオブジェクトをタップ ➔ 「色を変更する」を選択 ➔ 赤・青などの色を選ぶ
「どのオブジェクトを操作したいか」を起点に組み替えるだけで、画面全体の迷いが減り、ユーザーにとって直感的な操作感へ一気に近づくことができます。
最後に
いかがでしたでしょうか？
OOUIはUI設計を劇的に改善する非常に強力なアプローチですが、万能の解決策（いわゆる「銀の弾丸」）ではありません。
大切なのは、「ユーザーはオブジェクトを求めているのか、それとも一連の手続き（タスク）を求めているのか」を正しく理解することです。
弊社（クラウドソリューション開発部）では、Web・モバイルアプリからIoT管理画面まで、様々な開発案件に挑戦しています。「ユーザーにとって本当に使いやすい体験とは何か？」をエンジニア自らが突き詰めながら開発を行っています。
UI/UXの視点を大切にしながら、一緒にこれからのモノづくり・未来を作っていきませんか？
少しでも興味を持っていただけた方は、ぜひ以下の募集要項もチェックしてみてください！
募集要項はこちら
最後までご覧いただき、ありがとうございました！
