「OOUIってどういう意味？」
「OOUIの具体例は？」
「OOUIを学ぶのにおすすめの本はある？」
このような疑問を抱えている方、必見の内容です。
OOUIは、さまざまなアプリやサービスサイトで活用されているUIデザインの考え方です。最近広く普及しており、UIデザインの基本的な手法の一つと言っても過言ではありません。
本記事では、デザイン・エンジニアリング両面からサービスの設計・開発を行っているFlowzが以下の内容について詳しく解説します。
- OOUIの概要・具体例
- OOUIに基づいた設計方法
- OOUIを学ぶのにおすすめの本
- OOUIとタスク指向UIの違い
この記事を読めば、OOUIの基本的な概念やどのようにデザインに反映されているかがわかるでしょう。ぜひ最後までお読みください！
なお、Flowzではデジタル領域でのサービス設計、プロダクト開発の視点からお客様のビジネスをサポートしています。お困りごとがある方はぜひお気軽にご相談ください！
目次
OOUIとは？具体例も紹介
はじめに、OOUIという言葉の意味について具体例を交えて解説します。
- OOUIとは「モノ」を起点に設計されたUI
- OOUIの具体例
1. OOUIとは「モノ」を起点に設計されたUI
OOUIは「Object Oriented User Interface」の頭文字を取った言葉で、日本語にすると「オブジェクト指向UI」と翻訳されます。オブジェクトとは、ユーザーの目的となる「モノ」のことです。
つまり、OOUI（オブジェクト指向UI）は、オブジェクトを起点にUIを設計する考え方です。
たとえば、自動販売機で飲み物を買うシーンを考えてみると、ドリンクが「オブジェクト」に該当します。AmazonのようなECモールの場合、商品が「オブジェクト」と言えるでしょう。
OOUIは、はじめて使うユーザーでもマニュアルなしで直感的に使えるデザインを構築できることから、近年注目を集めています。
2. OOUIの具体例
OOUIは、さまざまなWebサービスに取り入れられています。
具体的な事例として、オンラインフリマサービスのメルカリが挙げられるでしょう。メルカリでは、興味がある商品をクリックすると、いいね！を付けたり出品者に連絡を取ったり、商品を購入したりできます。
このことからわかるように、OOUIはオブジェクトを選んだあとにどのような行動をするのかを選択する流れで導線を組む考え方です。
他には、SlackのようなメッセージツールにもOOUIのデザインが採用されています。具体的には、連絡先やグループなどのオブジェクトを選択したあとに、メッセージを送ったりタスクを投げたりする行動を選択するという設計です。
このように、OOUIはさまざまなサービスデザインの基本的な考え方として広く普及しています。
OOUIのメリット
ここでは、OOUIの考え方をデザインに取り入れるメリットについて紹介します。
- 直感的に使える
- 構造がシンプルになる
さまざまなサービスデザインに取り入れられているのは、OOUIならではの利点があるからと言えるでしょう。
1. 直感的に使える
OOUIの考え方を採用するメリットとして、ユーザーが直感的に操作できる構造を設計しやすいことが挙げられます。
人の思考は「何を」→「どうする」の順番で流れる傾向があるため「何を」にあたるオブジェクトを主体にすると、直感的に操作できるのです。
マニュアルや説明書がないと使い方がわからないWebサービスやアプリは、使い心地に悪影響を与えます。
マニュアルなしで操作できる構造を設計できるOOUIは、ユーザーに親切なデザイン手法と言えるでしょう。
2. 構造がシンプルになる
サイトやアプリの構造がシンプルになる点も、OOUIの大きな利点です。
何をするのかを決めてからオブジェクトを選ぶより、オブジェクトを選択してから「何をするのか」を選択する設計のほうが、シンプルにまとまります。
たとえば、先に行動（タスク）を決めると画面遷移が発生し、導線が複雑になるでしょう。
一方、OOUIで設計するとシンプルに画面をまとめられます。
このように導線を設計する際にOOUIの考え方を採用すれば、ユーザーの操作が楽になるだけでなく、開発陣の負担も軽減できるでしょう。
OOUIの設計方法3つの手順
ここでは、OOUIの設計方法を3つの手順にわけて解説します。
- オブジェクトを洗い出す
- ビューを設計する
- レイアウトを作成する
1. オブジェクトを洗い出す
OOUIはオブジェクトを起点に導線を組む考え方であるため、オブジェクトを洗い出すことから始めましょう。
たとえば、オンラインで家具を購入できるECサイトを設計する場合、ユーザーの「やりたいこと」は、以下のように想定できます。
- 家具を探す
- カテゴリーから家具を探す
- 色から家具を探す など
実際には、これら以外にも多くのオブジェクトがピックアップされるでしょう。
オブジェクトを洗い出す工程では、ユーザーがどのような使い方をするのかについて、いろいろなパターンの案を出し合うことが大切です。
2. ビューを設計する
次に、実際の画面にあたる「ビュー」を設計します。具体的には、抽出したオブジェクトをグルーピングし、導線を整理していく作業です。
ビューは、コレクションとシングルに別れます。
| コレクション | オブジェクトを一覧で表示した画面 |
| シングル | ひとつのオブジェクトの詳細情報を表示する画面 |
ソファーやカーテンのようにカテゴリーごとに商品一覧を表示する画面は「コレクション」、商品一つひとつの詳細情報を表示する画面は「シングル」と呼ばれます。
たとえば、家具のECサイトであれば、以下のような構造が想定できるでしょう。
「カテゴリー」オブジェクトのビュー▼
| コレクション | ソファーやカーテンなどのカテゴリーの一覧が表示される |
仮にカテゴリーから「ソファー」を選ぶとすると、次のような画面が表示されます。
「ソファー」のオブジェクトビュー▼
| コレクション | さまざまなソファーの商品が一覧で表示される |
| シングル | ソファー単体の紹介 |
このように、コレクションとシングルのビューを使い分ければ、サービスの構造を整理できます。
3. レイアウトを作成する
最後は「2.ビューを設計する」で決定したオブジェクトごとの関係性を、形にしていく作業です。
最近では、PCだけでなくスマホで操作されるケースも多いため、どの画面幅でサイトを開いてもレイアウトが崩れないようにする必要があります。
また、ユーザーにとって使いやすいUIになっているか、テストユーザーに操作してもらって評価することも大切です。
詳しくは「ユーザビリティーテスト」について詳しく書かれた記事をご覧ください。
【おすすめ本】OOUIを学ぶなら「オブジェクト指向UIデザイン」
| 価格 | 単行本：3,278円 Kindle：3,212円 |
| 著者 | ソシオメディア株式会社,上野 学,藤井 幸多 |
OOUIについて学ぶなら「オブジェクト指向UIデザイン」がおすすめです。第一章から第三章までは、OOUIの基礎的な概念から、設計プロセス、実践に向けた具体的な考え方まで解説されています。
また第四章以降は、18個の課題が用意されており、アウトプットしながらOOUIについて学べる良書です。
インプットするだけでなく、頭を使いながら手を動かすことで「わかる」レベルにとどまらず「できる」レベルまでOOUIについて理解を深められるでしょう。
OOUIとタスク指向の違い
オブジェクト指向と対になるデザインの考え方として、タスク指向があります。ここでは、オブジェクト指向とタスク指向の違いについて詳しく解説します。
- タスク指向UIとは「ユーザーが行いたいこと」を起点に設計されたUI
- タスク指向UIが推奨されるケース
1. タスク指向UIとは「ユーザーが行いたいこと」を起点に設計されたUI
タスク指向とは「ユーザーが行いたいこと」を軸に構造を設計する考え方です。
タスク指向で構造をデザインすると、「ユーザーが行いたいこと」であるタスクを一覧で表示し、そのあとにオブジェクトを表示する導線になります。
たとえば、不動産物件を探すサイトはタスク指向の構造になっている傾向があります。「住所から探す」「駅・路線から探す」などのタスクを選択してから、オブジェクトである物件にアプローチできる導線です。
オブジェクト指向UIは名詞（何を）を、タスク指向UIは動詞（どうする）を軸に構造を設計する考え方ととらえるとわかりやすいでしょう。
2. タスク指向UIが推奨されるケース
近年、タスク指向よりオブジェクト指向のほうが注目を集めているものの、オブジェクト指向がタスク指向より優れているというわけではありません。むしろ、タスク指向との相性が良いケースもあります。
たとえばATMの場合、オブジェクトが「口座の中にあるお金」に限定されているので、わざわざオブジェクトを選択する画面を用意する必要はありません。そのため、ATMのUIはタスク指向で設計されています。
また、不動産物件を探すサイトのように、膨大な量のオブジェクトがある場合もタスク指向UIと相性が良い傾向にあります。物件の絞り込み方をタスクとして先に選ぶことで、希望の物件、つまりオブジェクトを効率よく絞り込めるのです。
以上の具体例を分析すると、タスク指向は「オブジェクトが一意に定まる場合」や「無数のオブジェクトがある場合」に相性が良い設計の考え方と言えるでしょう。
OOUIの考え方を採用して使いやすいプロダクトを開発しよう
OOUIは、使いやすいサービスを作るうえで欠かせない考え方です。さまざまなサービスの設計に取り入れられているため、大手企業のECサイト等を見ると、至るところでOOUIの考え方が反映されていることがわかります。
OOUIの考え方を活用して、ユーザビリティの高いサービスを設計しましょう！
なお、Flowzではデジタル領域でのサービス設計、プロダクト開発の視点からお客様のビジネスをサポートしています。UXデザインを自社サービスでも活かしたい方は、ぜひFlowzにご相談ください！
