OOUIは、ユーザーにとって使いやすいアプリケーションの設計を目指すにあたり、近年用いられている手法のひとつです。OOUIの基礎知識や設計する際の基本的な流れを理解し、フロントエンドエンジニアとしてのスキルアップを目指してください。

OOUI（オブジェクト指向UI）とは

OOUIとは「Object-Oriented User Interface」の略称で、日本語で呼ぶ際には「オブジェクト指向UI」とも表現されます。オブジェクト指向UIの「オブジェクト」とは、ユーザーが操作する「対象」や「目当てのもの」です。例えば、アパレルショップのECサイトではサイト内の衣料品や服飾雑貨などの商品がオブジェクトにあたります。

OOUIとタスク指向UIの違い

OOUIとタスク指向UIはいずれもUI設計の代表的な手法ですが、開発ステップやアプリケーションを使用するユーザーの行動の流れに違いがあります。

OOUIは「オブジェクト」を起点として、UIを構築する手法です。OOUIで開発したアプリのユーザーは最初に目当ての「もの」（オブジェクト）を選択したうえで、「行動」を決定します。例えば、連絡先一覧から相手を選んだ後で、「メッセージを送る」「写真を送る」「通話する」などの操作を選べるメッセージアプリは代表例です。

タスク指向UIとは、想定される「タスク」やユーザーの「アクション」を起点としてUIを設計する手法です。タスク指向UIで開発されたアプリにおいて、ユーザーは最初に行いたいタスクを指定した後で、表示される選択肢から目当てのものを指定します。例えば、最初に「新規メールを作成する」「既存メールを編集する」などの行動の選択肢から選んだ後で、連絡先一覧から送信先を選ぶメールアプリが代表例です。

OOUIが求められている背景

OOUIは、時代の需要に即したUI設計手法として注目されています。OOUIについて正しく理解するため、注目が高まった理由を確認しておきましょう。

ユーザーエクスペリエンス（UX）の重要性が高まっている

OOUIが注目されている理由のひとつは、企業間のアプリの競争が激化し、ユーザーエクスペリエンスの重要性が高まったことです。同様の機能をもつアプリが多数存在する中、他社のサービスと差別化するためには、ユーザーに「使いやすい」「わかりやすい」と感じてもらう必要があります。

OOUIで設計を進めると、人間が日常生活で行動する際と同様の、自然な流れで操作できるアプリの構築が可能です。結果としてユーザーエクスペリエンスが向上すれば、他社のサービスとの差別化を実現でき、ユーザーに支持されるアプリとなります。

スマホやタブレットに適合したインターフェース開発が求められている

スマホやタブレットが普及して直感的に操作できるインターフェースが支持されるようになったことも、OOUIの注目度を高めた理由のひとつです。スマホやタブレットの画面に慣れたユーザーは、マニュアルを読まないと操作方法を理解できないアプリにストレスを感じる可能性があります。スマホのインターフェースはOOUIで構築されていることから、同様の設計を採用すれば、ユーザーフレンドリーなアプリを目指せます。

OOUI設計の基本的な流れ

OOUIでは、基本的に以下の3ステップに沿って設計します。

1.オブジェクトを抽出する

まず、ユーザーの目線に立って行うタスクを分析し、オブジェクトとして抽出します。「オブジェクトに該当するか」の判断に迷う場合は、名詞で表現できること・同種のグループとして管理できることを基準として検討しましょう。抽出したオブジェクトは名詞と動詞に切り分けて、名詞のみを抜き出してください。

例えば宿泊予約アプリを開発する場合、ユーザーの目線で考えると、「行き先を決める」「日時を設定する」「宿泊料金で絞り込む」などのタスクが想定されます。名詞のみを抜き出すと、「行き先」「日時」「宿泊料金」です。名詞を抜き出した後はそれぞれの関係性を図式化して整理し、特に重要度の高いオブジェクトを特定しましょう。

2.ビュー・ナビゲーションを設計する

ビューとは、ユーザーの画面へ実際に表示される情報のグループです。ビューには主に、一覧画面を意味する「コレクションビュー」と、詳細画面を意味する「シングルビュー」が存在します。例えば、宿泊予約アプリの場合、ホテルの一覧を表示する画面がコレクションビューで、ホテルごとに情報を詳細表示する画面がシングルビューです。

ビューが増加するほどユーザーの操作性は低下しやすいことから、不要なものは省略した、シンプルな設計を検討する必要があります。ナビゲーション設計では、ビューとビューの関係性を整理したうえで動線を明確化してください。

3.レイアウトを作成する

ビュー・ナビゲーションを概ね設計した後はターゲットデバイスに応じてパーツの表示サイズを調整し、レイアウトを作成します。スマホで操作するアプリの場合、ビューごとに画面を分けて遷移させるレイアウトが親切です。デスクトップアプリの場合、すべてのビューを1画面に配置できる可能性もあります。

レイアウトの作成後はユーザーの目線に立ち、オブジェクト中心のインターフェースになっていることを確認してください。確認中に不要なビューの存在や定義したオブジェクトの誤りに気づいた際には前のステップに戻って作業をやり直し、改善を図りましょう。

OOUI設計のメリット

OOUIは、ユーザーとエンジニアの双方にメリットがあるUI設計手法です。OOUIを採用する主なメリットは、以下の3点です。

ユーザーエクスペリエンス（UX）が向上する

OOUIでは、画面上のオブジェクトを直感的に操作できるように設計されています。ユーザーは、マニュアルなどを見なくても容易に操作方法を予測でき、スピーディーに目的を達成できます。

例えば、アプリ内のゴミ箱のアイコンがあれば、多くのユーザーは「削除したいものを入れるところ」と理解できます。そして、不要なデータなどをドラッグアンドドロップでそこに移し、容易に削除を完了させられます。

アプリの操作性の高さや使用する際の安心感は、ユーザーエクスペリエンスを左右する重要な要素です。OOUIを採用し、ユーザーが安心して操作できるアプリを開発すれば、ユーザーエクスペリエンスの大幅な向上も可能です。

開発効率が向上する

OOUIで開発されたプログラムは再利用性が高く、一旦作成したコードを他のプロジェクトで流用し、開発効率の向上が可能です。OOUIで設計したアプリは各オブジェクトが独立していることから、仕様変更や機能の追加が生じた際、比較的スムーズに対応できるメリットもあります。

また、OOUIで設計したアプリは、タスク指向UIと比べて画面数が少なくなるのが一般的です。画面数が少ないとプログラムがシンプルになり、フロントエンドとバックエンドが連携しやすくなります。

保守性の強化につながる

OOUIで設計されたプログラムはモジュール化されているため、保守段階で修正が生じた際にも、比較的スムーズに対応できます。オブジェクト指向がベースのプログラムは多くのエンジニアにとって理解しやすく、新規メンバーが加入した際の教育を行いやすいこともメリットです。

長期的なプロジェクトでは、保守期間にメンバーが入れ替わることも珍しくありません。OOUIで開発すれば、メンバーが入れ替わった場合も不具合やアップデートに無理なく対応できます。

OOUI設計の注意点

OOUIにはさまざまなメリットがあるものの、実際に採用する際には、以下の注意点を意識しましょう。

OOUI設計・タスク指向UIのどちらが適したプロダクトか検討する

OOUIはユーザーエクスペリエンスの向上につなげやすい設計手法とは言え、万能とは言えません。ユーザーの目的が最初から明確に定まっている場合、タスク指向UIのほうが迅速かつ確実にタスクを完了させられることが多いです。開発するアプリのターゲットや用途によって、適切に使い分けましょう。

タスク指向UIでの開発が向いているものとして、公的機関の手続きサービスのように、ユーザーを特定のタスクへ誘導することが目的のアプリが挙げられます。例えばコンビニエンスストアでの証明書自動交付端末は、「マイナンバーカードの読み取り」「暗証番号の入力」「発行する証明書の種類」「発行枚数」などのタスクを順番にこなすように設計されています。

インターネットバンキングのように、オブジェクトが自分の口座などに限定される場合も、タスク指向UIのほうが適しています。ログイン後に「預金する」「振り込む」「取引履歴を見る」といったタスクを選び、例えば「振り込む」であれば、「金額」や「振込先」などを選ぶように設計できるでしょう。

以上の二つの例のように、自由度の高さが不要で、必要な情報を漏れなく入力することが重要なものは、タスク指向UIが適切です。

メンテナンスのしやすさを考慮して設計する

OOUIは多数のオブジェクトとその相関関係によって多様な機能を実装できる設計手法であるため、知識不足の状態で採用すると、複雑なプログラムになる恐れがあります。他のエンジニアが見た際、スムーズに理解できないほど複雑なプログラムを使用すれば、メンテナンス性が低下してしまいます。また、オブジェクトの相関関係を誤って実装した場合、アプリケーションのパフォーマンスに影響するリスクもあります。

OOUIで設計を行う際にはメンテナンスしやすいように、他のエンジニアにとってもわかりやすいプログラムにすることが原則です。チーム内に十分な知識をもつエンジニアがいない場合は専門家のサポートを受ける方法も検討しましょう。

まとめ

OOUIとは、ユーザーの目当てのものにあたる「オブジェクト」を起点としたUI設計手法です。OOUIにはユーザーエクスペリエンスやメンテナンス性の向上を助けるメリットがあり、時代の需要に即した手法として注目されています。

ただし、OOUIを適切に採用するためには、十分な専門知識が欠かせません。フロントエンドエンジニアとしてスキルアップを目指す場合には、OOUIについてより深く学習を進めることもおすすめです。