こんにちは、中国人デザイナーのYINGです。
今日はOOUI実践の最初のステップについてご紹介します。
（日本語はまだまだなので、表現におかしな点があればご容赦ください！）

はじめに

OOUIとは

OOUI（Object-Oriented User Interface）とはオブジェクト指向UIのことで、オブジェクト指向プログラミングの原則をUI設計に適用するというデザイン方法です。
初めてOOUIと出会ったのは、去年会社の同僚と一緒に『オブジェクト指向UIデザイン──使いやすいソフトウェアの原理』という本で勉強会をしたのがきっかけでした。
ここではOOUIの考え方について簡単にご紹介しますが、興味がある方はぜひ本を読んでみてください。

OOUIの考え方

従来のUIでは、多くの場合「ユーザーが行うタスク＝行動」をベースにしています。典型的な例が、行政の業務システムで見られる「ボタンだらけ」のデザインです。このようなUIの問題点は、新しい機能を追加するために、ますます多くのボタンやページが追加され、使い勝手が悪くなることです。『オブジェクト指向UIデザイン──使いやすいソフトウェアの原理』（以降『オブジェクト指向UIデザイン』）では、下記の例があります。

一方、OOUIの考え方では、ユーザーが関心のあるもの＝オブジェクトをベースに設計することで、よりわかりやすい、使いやすいUIが作成できます。さらに、機能の改修や追加にもよりスムーズに対応できるようになります。

OOUIを実践してみよう

『オブジェクト指向UIデザイン』には、OOUIの設計ステップについて詳しく解説があり、第4章と第5章には多数のワークアウトが掲載されています。OOUIを初めて実践する方は、ぜひワークアウトから始めていただきたいです。私も同僚と勉強会で一通り実践して、大変勉強になりました。

そして今回紹介したいのは、個人のプロジェクトでOOUIを実践して、実際にWebサービスを開発する話です。なぜ個人のプロジェクトを行うのかと言うと、会社の個人目標で課題にしているからです（笑）。そして、フロントエンドの開発練習もかねて、今回はデザインから開発まで行ってみることにしました。
では、どのようなアプリのデザインをすればよいのでしょうか。友人であるエンジニアのKさんと軽く相談した結果、「家計簿とかどうだろう」とアドバイスをもらいました。個人の出費を記録できるアプリはたくさんありますが、家族やカップルの複数のメンバーで共同で記入、管理できるサービスはあまりないようです。そこで、「家庭単位など複数ユーザーで使いやすい家計簿Webアプリ」を作ることにしました。
以下は、『オブジェクト指向UIデザイン』で紹介されているOOUIの実践手順に従って作業を進めていきます。

Step1 オブジェクトの抽出

タスクをリストアップ

OOUIの設計の第一歩は「オブジェクト抽出」です。 そのため、まずは家計簿アプリにほしい機能や実現できること(タスク)をリストアップしていきます。下記のように、何をやりたいのかをとりあえず書いてみました。

名詞を抽出

次は名詞を抽出します。
図1から名詞をboldにしていますが、わかりやすくするため、内容的に近そうなカードを色分けもしてみました。

余談になりますが、開発の時にバックエンドなどで力をお借りすることになるので、Kさんにも意見を聞いたところ、必須ではないのでピンクの2枚は最初のフェーズに入れないことにしました。

名詞の関係性を抽出

さらに、名詞の関係性を抽出します。
『オブジェクト指向UIデザイン』では、「名詞を汎化し、粒度を揃える」という手順もありますが、今回は機能を考えた段階ではわりと統一した言葉を使用していたので、さらに汎化する必要がありませんでした。

名詞の関係性をつなげ、オブジェクトを特定

今回の場合、オブジェクトは下記のように、「出費」、「帳簿」、「ユーザー」になると思います。
ちなみに、「カテゴリ」も「出費」と「帳簿」と関係あるので、オブジェクトかな？と迷っていましたが、今回のケースではオブジェクトというより「出費」、「帳簿」のプロパティにあたるのではないかと判断しました。

また、「*」を付けているのは、多重性のある関係を表しています。
例えば、ユーザーは複数の出費が記録できるが、出費は一人のユーザーしか考えられないので、出費とユーザーの間の線で、出費側に「*」を付けているのです。

オブジェクトにプロパティを付ける

プロパティはオブジェクトに付随するものなので、図4の「時系列」や「カレンダー」は見た目のことを省きます。
また、開発目線でいくと、データベースのテーブルに追加する際にIDもいるので、プロパティにはIDも追加します。

タスクからアクションを見つける

オブジェクト抽出の最後は、図1のタスクからアクションを見つけて、図5のオブジェクトに紐付けます。

これでStep1のオブジェクト抽出は完了です。

Step1でやることを振り返ると、まずは家計簿で想定するタスクをリストアップし、それから名詞を抽出し、名詞の関係も抽出し（必要であれば名詞を汎化して粒度を揃えます）、名詞の関係性をつなげてオブジェクトを特定します。さらに、オブジェクトにプロパティを付け、タスクから見つけたアクションもつけます。

Step2はビューとナビゲーションの検討になりますが、また次回ご紹介します。

※今回の使用ツール: miro、Figma