オブジェクト指向UIデザインまとめ

オブジェクト指向UIデザインとは？

2020年6月5日発売の書籍で、アプリケーション開発に関わるすべての人が読むべき、オススメの一冊です。

オブジェクト指向UIデザインは、オブジェクト（モノ、名詞）を起点にしたUI設計手法です。
使いやすく、心地よいユーザー体験のアプリーケーションを実現する為に力を発揮します。

多くの人が行うデザインの手順と問題点

アプリ開発において、ユーザーの要望ベースで改善を進める場合、以下の手順で取り組むことが多々あります。

• ユーザの要望を叶えるタスクを考える
• 上記のタスクに応じたUIを考える

蔵書アプリの場合、以下の様なタスクが考えられます。

• 本のタイトル、著者、出版社、出版日を登録する
• 本を検索してすでに持っているかを確かめる
• 本の情報の入力間違いを修正する
• 本を処分した場合にその情報を削除する
• 読み終わった本の感想文を書き込む
• すべての本をリストにしてざっと見る
• etc.

これらのタスクに応じたUIをそのまま実装した場合、ただやることが羅列された形となり、道具としてのまとまりに欠けたものになってしまいます。
また、タスクの増減に応じて、画面・UI・内部実装などが、どんどん複雑なものになっていきます。

使いやすいアプリケーションを実現するために

そもそも使いやすいアプリケーションとはどういったものなのかを考えてみましょう。

具体的には、以下のようなことが挙げられます。

• どんな情報を扱っているかが明確
• UIがシンプルでわかりやすい
• 画面数が少ない

これらを実現するには、オブジェクト指向UIが有効です。
オブジェクト指向UIとは、最初に触れた通り、オブジェクト（モノ、名詞）を起点にしたシンプルなUIです。
なぜオブジェクトを起点に扱うことで、シンプルなUIを実現できるのか、例を元に考えてみましょう。

あなたは勇者です。お気に入りの剣を持っています。素敵ですね。

目の前にモンスターが現れました。早く倒して村を平和にせねば！

そんな時、モンスターを倒す為には、剣で攻撃すれば良いだけですよね。

※ 都合上、画像を変更しています
※ 人に斬りかかるのはやめましょう
※ 傘は大切にしましょう

現実世界では、「コマンドを開く→たたかう→技を選択→対象を選択」といったタスクを意識することってほとんどないですよね。
これらのタスクがあることで、ごちゃごちゃしたUIや体験が生まれてしまいます。

上記のような「コマンドを開く→たたかう→技を選択→対象を選択」といった一連のタスクを起点にしたものをタスク指向と呼び、それに対して「剣」というオブジェクトを起点にしたものをオブジェクト指向と呼びます。

現実世界で剣を扱う場合、切るや突くという使い方だけでなく、何かを叩いたり、地面を掘ったりといったイレギュラーな使い方も出来ますし、切る対象も人、動物、植物などを問いません。
複数のタスクを単一のオブジェクトでシンプルに表現できるのです。

オブジェクト指向UIデザインでは、このオブジェクト指向の考え方をUIに適用し、モノを直感的に扱えることに重点を置いて、シンプルなUIや体験をベースにした使いやすいアプリケーションを実現します。

オブジェクト指向UIデザインのプロセス

オブジェクト指向UIデザインを行う場合、以下のプロセスを踏みます。

1. オブジェクトの抽出
2. ビューとナビゲーションの検討
3. レイアウトパターンの適用

1〜3の番号が振られていますが、どこから始めても良く、各ステップを行ったり来たりしながら、全体の概念を整理しつつ、整合性を取っていきます。

それぞれについて簡単に説明します。

オブジェクトの抽出

アプリケーションに必要なオブジェクトを見つける作業です。
以下の手順で見つけることが可能です。

1. アプリケーションで実現したいタスクを一通り挙げる
2. 挙げたタスクから「名詞」を抽出する
3. 抽出した名詞のうち、関係性があるものを整理する
4. 名詞を汎化し、粒度を揃える
5. 名詞の関係性をネットワーク状につなぎ、中心にあるものをメインオブジェクト、枝葉となっているものをサブオブジェクトとする
6. メインオブジェクトに対して、サブオブジェクトを「プロパティ」、実現したいタスクの動詞を「アクション」とする

テーブル設計やクラス設計と近しいことをUI設計に取り入れている為、エンジニア的な知識がない場合、4〜6辺りは少し慣れるまでに時間がかかるかと思います。

ビューとナビゲーションの検討

アプリケーションに必要な画面の設計工程です。
ビューは画面に表示する形式、ナビゲーションは各ビューを行き来する為のものです。

ビュー

基本的なビューは、コレクションビューとシングルビューの大きく2つに分かれます。
一般的な表現だと、コレクションビューは一覧画面、シングルビューは詳細画面を指します。
コレクションビューとシングルビューの関係は、現実の世界の「眺める」と「よく見る」です。
アプリケーションでもこの関係性は同じで、ユーザーは、全体を眺め、必要に応じて、よく見るといった行動を取る為、それらをコレクションビューとシングルビューで表現します。
ビューの割当に関して、一旦抽出したオブジェクトすべてに対し、機械的にコレクションビューとシングルビューを割り当てます。
最適な構成の決定は、「レイアウトパターンの適用」の工程で行います。

ナビゲーション

これはスマホの下部にあるUIをイメージしていただけると分かりやすいですが、どのページからでも移動を可能とするメニューのようなものです。

ここに表示するべきものは、利用頻度の高いコアとなるオブジェクトです。
オブジェクト抽出で整理した関係性を元にこの項目を決定します。

ちなみに画面やナビゲーションの項目の名称を決める際、オブジェクト名の語尾に「管理・一覧・閲覧・確認・紹介・参照・登録・情報・編集」などは付与してはいけません。

レイアウトパターンの適用

この工程では、「オブジェクト抽出」「ビューとナビゲーションの検討」で行った内容を元にレイアウトの定石的なパターンを適用しつつ、間引いたり、結合したりして最適なレイアウトを適用していきます。

本書にたくさんのレイアウトパターン例が掲載されており、そちらを読んだ方が分かりやすいことと著作権の関係上、詳しい図が本記事に掲載できないため解説は省略します。

よく目にするサイトやアプリのレイアウトパターンが網羅されており、非常に参考になります。

まとめ

オブジェクト指向UIデザインの概要、メリット、プロセスを紹介させていただきました。

自分は本書のおかげで、悪いと感じるUIをどの様に改善していけば良いのかの知識がつき、UIに対する視座が高まりました。
また、本書の読了をきっかけに、UXデザインやアクセシビリティの学習を開始し、本質的に良いユーザー体験を提供する為の行動に繋がっています。

最近、社内で開催していた本書の読書会が完了したのですが、本書の知識を持った者同士が集まることでUI改善に対して質の高い会話ができ、解像度の高い行動が取れる様になりました。
巷で目にする使いやすいサイトやアプリは、オブジェクト指向UIデザインが適用されているものが多く、ユーザー体験を向上させていく上で本書の知識は必須だと感じています。

この記事を読んで興味を持たれた方は、是非本書を読んでみてくださいね！
自分もランサーズの体験を良くする為に、本書の知識を実践していきます。