オブジェクト指向のUIデザインを学ぼう！OOUIの基本的な考え方や設計プロセスを解説

近年、UX/UIデザインの分野で「オブジェクト指向UIデザイン（OOUI）」が注目されています。

その一方で、OOUIについて勉強しているデザイナーからは、「抽象的で理解しにくい」「理屈はわかったような気がするけれど、目の前の業務にうまく応用できない」といった声も聞こえてきます。

そこでこの記事では、あらためて基本を学びたい方に向けて、第一線でOOUIを実践しているデザイナーを監修者に迎え、OOUIの基本的な考え方やメリット、設計プロセスについて、具体例を交えながら詳しく解説していきます。

OOUIとは？

OOUIとは、Object Oriented User Interface（オブジェクト指向ユーザーインターフェース）の略で、ユーザーが操作する対象となる「オブジェクト」を起点にしてUIを組み立てる考え方です。英語の「object」には、私たちが視覚などの感覚でとらえることのできる「物、物体」という意味のほか、考えや行動などが向かう「対象、目的、ねらい」などの意味もあります。

OOUIは、何かの目的を持って物を手に取り、それを操作したり加工したりするという、私たちが現実世界で行っているモノの見方（メンタルモデル）をUX/UIに生かしたものです。身近な例では、パソコンやスマートフォンのOSに採用されているGUI（Graphical User Interface／グラフィカルユーザーインターフェース）もOOUIの考え方で作られています。

GUIが登場する前は、パソコンを操作するには黒い画面にコマンドを入力する必要があったため、使えるのはコマンドの知識がある人に限られていました。しかしGUIの登場によって、誰でもデスクトップのアイコンや、フォルダ、ウィンドウをマウスで操作して、気軽にデジタルデバイスを使えるようになりました。現在では、パソコンやスマートフォンのアプリ、Webアプリの多くにOOUIが取り入れられています。

OOUIがなぜ注目されているのか？

考え方としては昔から存在していたOOUIが近年注目されるようになった背景には、いくつかの理由があります。

1つ目の理由は、クラウドやSaaSの発達、デジタルデバイスの普及により、日々やりとりされる情報量が増加し、アプリケーションやサービスが複雑化していることです。それぞれが膨大な機能を抱えるようになり、ユーザーにとって「どこから触ればいいかわからない」という問題が起きやすくなりました。わかりやすく情報を整理し、ユーザーの学習コストを下げるにはOOUIが適しているため、あらためてOOUIが注目されるようになったのです。

また、ビジネスにおけるデータ活用が重視される時代になり、サービスの裏側にあるデータが「顧客」「商品」「コンテンツ」などのオブジェクト中心に整理されるようになったことも理由の1つです。データの構造に合わせてUIもオブジェクト中心に設計することで、データとUIの整合性が取れるという効果が得られます。

もう1つの理由は、それぞれのデザイナーが自分の直観や経験をもとにオブジェクト中心の設計をしていたものが、体系的な方法論として整理され、学べるようになったことです。Alan Cooperの書籍『About Face』シリーズや、Sofia Praterなどによるコミュニティ「ooux」、日本では上野学の『オブジェクト指向UIデザイン──使いやすいソフトウェアの原理』などが有名です。

ほかのUIデザイン手法とOOUIとの違い

おもなUIデザインの手法には、OOUIのほかにも、タスク指向UI、機能指向UIなどさまざまな種類があります。それぞれのUIとユーザーの関係を、現実世界で料理をするシチュエーションにたとえて考えると以下のように整理できます。

UIデザイン手法	OOUI	タスク指向UI	機能指向UI
UIの起点	対象（オブジェクト） 「何を扱うか」	目的（ゴール） 「何をしたいか」	機能 「どんな機能があるか」
料理でたとえると？	使える食材（トマト、玉ねぎ、肉など）が目の前にあって、ユーザー自身が作りたい献立を自由に作ることができる	作りたい料理（例：カレー）はあらかじめ決まっていて、ユーザーは指示された手順通りに作る	使える調理法（切る、炒める、煮る など）が用意されていて、どの食材、料理にそれらを適用するかはユーザーが考える
身近なアプリケーションの例	写真アプリ ECサイト 連絡先アプリ メールアプリ など	銀行ATM 確定申告アプリ インストールウィザード など	「編集」「挿入」「表示」などのメニューが並んだソフト スマートフォンの「設定」アプリ
ユーザーのメリット	使い方の選択肢が多く、自由度が高い	間違いなく目的を達成できる	多様なツールの中から自分に必要なものを選べる

OOUIの最大の特徴は、ユーザーが扱うことのできる対象（オブジェクト）があらかじめ提示されていることです。OOUIにおけるオブジェクトは、ユーザーが現実世界のモノやコトと結び付けて考えられるような具体性を持っています。そしてオブジェクトを選択した段階で、それに対して実行できる処理が明らかになり、ユーザーがやりたいことを主体的に選択できるようになります。

タスク指向UIは、アプリケーション上で命令されたことをユーザーが処理する、という動作の繰り返しで、あらかじめ決められた目的を達成します。

機能指向UIは、抽象的な「機能」のみが並べられていて、ユーザーが機能を選んだ後に、その機能を使う対象が選択できるようになります。料理に例えるなら、「まず包丁を手に取った後に、何を切るかを選ぶ」という状況で、ユーザーが現実世界で慣れた手順とは逆になってしまう場合もあります。

OOD (Object Oriented Design)とOOUI（Object Oriented User Interface）の違い

オブジェクト指向（Object-Oriented）は、もともとソフトウェア開発の分野でプログラミング技術として生まれました。データとそれに対する手続き（メソッド）をひとかたまりのオブジェクトとして扱うプログラミング手法をOOP（Object-Oriented Programming／オブジェクト指向プログラミング）と呼び、OOPを取り入れてソフトウェアやシステムの設計を行うプロセスやアプローチをOODと呼びます。

OODは画面の裏側で動いているデータやプログラムの構造を設計するための手法です。それに対してOOUIは、ユーザーが知覚し操作する部分の設計手法です。同じ「オブジェクト」という言葉を使っていても、指しているものは違います。どう違うのかを、以下の表に整理してみました。

	OOD	OOUI
オブジェクトとは？	データと、それに対する手続きや動作がセットになったもの	ユーザーが画面上で触って操作する対象
オブジェクト指向でデザインする範囲	Webサイトやアプリケーションがもつ裏側のデータ構造や処理の設計	Webサイトやアプリケーションのナビゲーション構造、インタラクションを含むUI
デザインする人	システムエンジニア	UI/UXデザイナー（ディレクター,PdM,PMなど）
適用するおもな目的	プログラムの拡張性や、モジュールとしての再利用可能性を高める	ユーザーにとっての世界の見え方（認知モデル）に合わせて体験を設計し、直感的に理解・操作できるようにする

OODとOOUIの違いをレストランにたとえると？

1つのサービスやアプリケーションを、レストランにたとえて考えてみましょう。

OOUIは、レストランのお客さんが操作するタブレット上のメニューを作る手法です。オブジェクトは画面に表示されている料理で、そのうちの1つを選択すると、詳細情報を見たり、数量やオプションを指定して注文したりといった操作ができます。

OODは、お客さんから見えないところにある厨房の食材や調理器具の配置、注文を受けてから料理を出すまでの流れなど、料理を出す仕組み全体を構築する手法です。ここでいうオブジェクトは、メニューに対応した「食材＋料理方法」のセットです。

OODとOOUIは、一緒に用いられるのが理想的です。レストランのメニューと厨房内での配置や業務フローが対応関係にあれば、より効率的なサービスができ、メニューの増減も容易でしょう。

しかし、技術的な問題でシンプルな紙のメニューしか用意できなくても、スペースが狭く1つの冷蔵庫と調理台しかない厨房でも、レストランとして料理を提供すること自体は可能です。これと同様に、たとえ裏側の仕組みがOODで作られていないWebサービスであっても、UIにオブジェクト指向を取り入れて、ユーザーが使いやすいように見た目や使い勝手を整える、ということは可能です。

OOUIで設計するメリット

ユーザーにとってのメリット

ユーザーにとってのOOUIのメリットは、専門知識やマニュアルがなくても直観的に操作ができることです。

そのアプリケーションやサービスの使い方を知らなくても、並んでいるオブジェクトの中から自分の目指すものを選ぶだけで、そのオブジェクトに対してどんな操作ができるのかが明らかになります。同じ目的を達成するアプリケーションであってもタスク指向UIと比べてOOUIはユーザーの操作数が少なく、「自分が今何をやっているのか」「扱っているオブジェクトがどのような状態なのか」理解しやすいという特徴があります。

また、アプリケーションやサービスの仕様目的や使用手順が限定されず、ユーザーが使い方を主体的に選び、工夫できることもメリットと言えます。

開発・運用にとってのメリット

開発・運用側にとってのOOUIを取り入れるメリットは、サービスの設計自体がシンプルになり、保守性や作業効率が高まるという点です。

システムやソフトウェアの多くはオブジェクト指向で作られているので、UIもオブジェクト指向で作られていれば全体の構造を把握・管理しやすくなります。さらに、UIの構成をタスク指向からオブジェクト指向に変更すると、作成する画面数を大幅に削減することも可能です。また、プログラムをオブジェクト単位で管理することで、仕様変更の影響範囲が読みやすくなったり、コンポーネントの再利用によって拡張が容易になったりします。

UX/UIデザイナーにとっては、OOUIを共通言語として開発側との認識合わせがしやすくなるというメリットもあります。これによって、開発のより初期の段階からUX/UIデザイナーが参画し、UIとクライアントサイド／バックエンドのプログラムの一貫性が担保できた開発が可能になります。

ビジネスにとってのメリット

経営におけるOOUI導入のメリットは、開発側であればユーザー満足度の向上や、開発・運用の効率化によるコスト削減が挙げられます。また、OOUIを取り入れた業務システムや顧客向けサービスなどを会社に導入する場合のメリットとしては、導入における教育コストの削減や、誤操作や探索時間などの削減、拡張性の担保などがあります。

OOUI設計の基本プロセス

次に、オブジェクト指向でアプリケーションやサービスのUX/UIをデザインする際の基本プロセスを説明します。

ステップ１：登場人物（アクター）の整理

OOUIの設計では、まず「誰がこの世界に存在しているのか」を整理すると、混乱しづらいです。
ここで言う登場人物（アクター）は、単なるユーザー像ではなく、オブジェクトと関係を持つ主体としての人々です。
たとえば、同じ「顧客データ」を扱うCRMでも、立場が変われば見え方がまったく異なります。

アクター	見えている世界	主な目的	同一オブジェクト 「顧客」の見え方
カスタマー（お客さま）	自分のアカウント・注文・問い合わせ	情報の確認・変更・購入・解約	自分自身（サービス対象）
営業担当	案件・コンタクト履歴・確度	進捗管理/接点創出	担当顧客（現在の関係と次の打ち手）
カスタマーサポート	問い合わせ/対応履歴	解決と満足度維持	対応主体（過去の事実と次の対応）
マーケティング	セグメント・反応率・LTV	施策設計/検証	セグメントの一員（集計・分析対象）
管理者/経営	全体KPI・データ整合性	運用/権限/監査	統計単位（正確性と統制）

このように、同じオブジェクトでもアクターによって解釈が異なるため、OOUIでは「アクター × オブジェクト」の対応関係を整理することが設計の出発点になります。

アクター整理の段階では、以下の3点を明らかにしておくとスムーズです。

• どんな立場・役割の人が存在するか（例：利用者・管理者・運用者）
• それぞれがどのオブジェクトと関係しているか
• どんな目的・状況でオブジェクトを扱うか

この整理ができていると、次のステップである「オブジェクト抽出」の際に、"誰の視点で世界を切り取るのか"が明確になり、命名や構造がぶれにくくなります。

ステップ２：オブジェクトの抽出

次にやるべきことはオブジェクトの抽出です。オブジェクトを抽出するためには、まずそのアプリケーションやサービスがユーザーのどのような活動をサポートするのか、範囲（ドメイン）を決める必要があります。そのうえで、ユーザーがそのドメインにおいて何をどのように行っているのか、ユーザーに見えている世界を理解し、ユーザーの行為や関心の対象となるものをオブジェクトとして抽出します。

オブジェクトはそれぞれに共通する性質や属性を持ち、ユーザーが行う操作とセットで定義されます。また、オブジェクトは名詞、操作は動詞で表され、操作は複数のオブジェクトに対して一貫して適用されます。

サービスの例	eメールクライアント	タスク管理アプリ	ファイルエクスプローラー
オブジェクト（名詞）	受信したメール	作成されたタスク	フォルダ
操作（動詞）	開く メールボックスを移動する 削除する フラグをつける など	完了にする メモを編集する 期限を変更する 削除する など	開く コピーする 移動する 共有する 名前を変更する 削除する 　など

このステップで大切なのは、ユーザーに見えている世界に対する解像度を上げることです。開発者側の思い込みでオブジェクトを決めたり、システム都合の命名をしたりすると、ユーザーが使いやすいものにはなりません。ユーザーの観察やインタビュー、既存サービスの調査など、準備段階の取り組みを怠らないようにしましょう。

ステップ３：ビューの設計

オブジェクトの抽出ができたら、次にビューを設計します。

通常、オブジェクトは複数のビューで表示されます。ビューの型にはさまざまなものがありますが、大きく分けると「コレクション（一覧）」と「シングル（詳細）」の2種類です。サービスの目的や用途に応じて、オブジェクトの作成・編集画面や、比較表示、管理者用のダッシュボードなど、ほかにもさまざまな画面が必要になる場合もあります。

コレクション（一覧）

コレクションのビューでは通常、１つの画面の中に共通した属性を持つ多数のオブジェクトを並べて表示します。オブジェクトの属性は主要なものだけが表示され、ユーザーはその中から目当てのオブジェクトを探し出します。そのため、コレクションビューに表示する属性は、ユーザーの興味・関心に合わせて選定する必要があります。アイコン表示やリスト表示ができるファイルエクスプローラーのように、表示する属性や見た目をユーザーがカスタマイズできるようにするケースもあります。

レストランの例：タブレットのメニューで最初に表示される一覧。料理の写真、名前、価格といった主要な情報のみが表示される。

シングル（詳細）

コレクションから目当てのオブジェクトを選択した後に表示されるのがシングルのビューです。そこでは、１つのオブジェクトについて詳細な情報が表示されます。

レストランの例：一覧から目当ての料理を選択して表示される詳細ページ。料理の大きな写真と紹介文、オプションメニュー、カロリーやアレルゲン情報なども書かれていて、注文などの操作を行うことができる。

ステップ４：レイアウトとナビゲーション

オブジェクトとビューの定義ができたら、具体的な画面上のレイアウトやナビゲーションを作成していきます。

レイアウトやナビゲーションは、表示するスクリーンのサイズによって変える必要があります。デスクトップ用であれば画面サイズが大きいので、ページの左側にコレクション、右側にシングルのビューを配置し、左側でオブジェクトを選択すると右側に詳細情報が反映されるといったレイアウトも可能です。スマートフォンの場合はサイズが小さいため、最初にコレクションのみの画面が表示され、オブジェクトを選択すると詳細上の画面に遷移するレイアウトになります。

よりユーザーが使いやすいUIにするために工夫すべき箇所は、コレクションビューのレイアウトやナビゲーションです。使用される場面やユーザーの興味に合わせて、複数のパターンを用意するとよいでしょう。

レストランの例：コレクションビューで価格帯やカロリーの範囲指定、特定の食材を使っているメニューの除外ができる。食材別の一覧ページや、限定メニューの一覧ページがある、など。

具体例で学ぶOOUI

次に、OOUIを採用しているアプリケーションやサービスの事例をもとに、OOUIの具体的なイメージをつかんでいきます。

ユーザーが現実世界で行っていることとアプリケーションやサービスの中身を、共通するオブジェクトを通じて繋ぐと、ユーザーはより自然に、直観的に操作できるようになります。使用頻度が高く、扱う対象が複雑であればあるほど、OOUIの導入による学習コス

ト削減の効果は高まります。

これらの理由から、ユーザーが日常的に繰り返し操作するアプリや、複雑な対象（オブジェクト）を扱うシステムなどOOUIはとくに効果を発揮するのです。個人が日常的に使うアプリケーションと、業務で使うアプリケーション、2つの例を見てみましょう。

写真アプリの場合

スマホユーザーの多くは日常的にスマホで写真を撮って、自分で見返したり友達や家族と共有したりしています。撮影後に行うことの起点は「写真」にあるので、写真をオブジェクトとしてそこからさまざまな操作をするのが自然な流れです。

オブジェクト	写真
UIの構造	一覧表示された写真の中から目当てのものを選んでタップすると、「見る・編集・削除・共有」などの操作が一貫して表示される
OOUIが有効な理由	ユーザーは「写真をどうしたいか」考えてアプリを使用するため、まず写真を選べるようにするのが合理的

CRM（顧客管理ツール）の場合

CRMや在庫管理システムなど、多数の機能を持ちさまざまな人が使う業務システムは、「顧客」「商品」などのオブジェクトを中心に設計することで、直観的に操作できるシンプルな構成になります。

オブジェクト	顧客
UIの構造	一覧表示から特定の顧客のページを開くと、「基本情報・住所・案件・請求書・メモ」がまとまっている。
OOUIが有効な理由	業務の担当者は「この顧客の情報が見たい」「情報を追加したい」などの目的を持って使用するため、「顧客」を起点とすることで迷わず操作できる

よくある質問

最後に、OOUIについて学ぶ人からよくある質問と、監修者からの回答をご紹介します。

Q1. OOUIとはUX全体にかかわる概念なのでしょうか、それともUIの設計手法のことを指すのでしょうか

A.実はOOUIには「広義のOOUI」と「狭義のOOUI」という2つの層があります。この2つを区別しておくと、OOUIを学んだり実務に生かしたりする際の混乱を防ぐことができます。以下を参考にしてください。

広義のOOUI

UIの設計だけでなくデータ構造やナビゲーションも含めて「体験全体をオブジェクト指向で整理する思想」を指します。体験全体をOOUIの考え方で整理したうえで、UIの設計には部分的にタスク指向UIや機能指向UIを組み込む場合もあります。

狭義のOOUI

画面上でユーザーが認識・理解しやすいオブジェクトを定義し、オブジェクトごとに属性・行為・関係を整理する、具体的な設計方法を指します。

Q2. 仕事にOOUIを取り入れる際に気をつけるべきことを教えてください

A.OOUIの導入において重要なのは「何をオブジェクトとして扱うか」の見極めです。設計するときには、単に現実世界をUI上にコピーするのではなく、それぞれのユーザーがアプリケーションやサービスをどのような目的で使うのか文脈を理解し、画面上のオブジェクトとデータ構造の間を整理する必要があります。

具体的に言うと、SNSアプリに登録した自分のアカウント情報は、やり取りしている相手にとっては「友だち」、管理者にとっては「ユーザー」として認識されます。このような場合は、データベース上では同じ情報であっても、使う主体が変われば画面上では異なるラベルをつける必要があります。

オブジェクトの抽出や画面設計を的確に行うために大切なのは、事前のリサーチです。ユーザーに見えている景色の解像度を上げるために、ユーザーへのヒアリング調査などを行う、エンジニアとUIの実現性をすり合わせて落としどころを探すなど、設計前のプロセスがOOUI導入の成功を左右します。

監修者より：OOUIは身近なもの。オブジェクトの視点で考えてみよう

OOUIについて学び始めたばかりの人は、「OOUIってなんだか抽象的で難しい」と思っているかもしれません。でも、私たちはすでに日常的にOOUIの概念に触れています。メッセージアプリで「人」を選んで電話やメッセージを送るとき、 写真アプリで「写真」を開いて編集や共有・削除をするときなど、無意識のうちに「オブジェクトを起点に操作する」体験をしているのです。

OOUIを仕事に取り入れる際、大切なのは「ユーザーがどんな"モノ"を扱う対象として考えているか」を探すことです。その"モノ"を中心にUIを整理すると、自然に使いやすいデザインが生まれます。

OOUIは単なる技術や流行ではなく、ユーザーの見えている世界とシステムを繋ぐ翻訳方法のひとつです。繰り返し使われるサービスや、複雑な業務アプリケーションのUX/UI設計に挑むときこそ、OOUIの視点が強力な武器になります。

ぜひ一度、アプリケーションやサービスを「オブジェクトの目」で見直してみてください。きっと、UIデザインをもっと考えやすくなるはずです。