4 5

オブジェクト指向UIとは何か1 目当ての現し　1-1

　これで、想定したタスクに合ったUIデザインができました。

　ところが実際にアプリケーションを作ってみると、いくつか追加の要求が出

てきました。たとえば、次のようなことです。

・本の情報の入力間違いを修正する・本を処分した場合にその登録を削除する・読み終わった本の感想文を書き込む・すべての本をリストにしてざっと見る・本を著者別や出版社別に並べて見る

　もしこれらの新たな要求を満たすとすると、UIは図1-1-2のように冗長になっていきます。やること別に入口が並んでいるだけの、いかにもアマチュアラ

イクなデザインです。

　問題は、このUIがユーザーの目当てを現していないことです。目当てが見え

ていないので、タスクだけが羅列される形となって、道具としてのまとまりに

欠けたものになっています。このアプリケーションが何の情報を扱うもので、

その全体像はどのようになっているのかが、はっきりしないのです。それは設

計者であるあなたの頭の中だけに暗黙的に想定されているにすぎません。そこ

では、アプリケーションが前提としている問題とその解法が、利用者に対する

恣意的な行動統制として一方的に決定されているのです。ではその目当てとは

何のことでしょうか。

目当て＝オブジェクト

　先述の課題は、オブジェクト指向でUIを作ることによって解決できます。目

当て＝オブジェクトを起点としてUIをデザインするのです。この場合のあなた

の目当ては「本」です。本の情報を登録したりそれを検索したりするのがアプリ

ケーションに想定されたタスクですが、それらのタスクの対象となっているも

の、あなたが関心を寄せているそのものは、要するに「本」なのです。ですから、

オブジェクト指向UIでは、ユーザーに「本」の存在を見せることが表現上の中心

的な活動になります。そのUIは図1-1-3のようになるでしょう。　このUIでは、あなたの蔵書がまず一覧表示されます。まるで自分の本棚を見

ているようです。あなたの関心の対象である「本」がそのまま画面の中にある。

これがオブジェクト指向UIなのです。そしてそこで本を検索したり、一冊を選

んで内容を確認／編集したり、新しい本を登録したりできるようにするのです。

　あとでくわしく解説しますが、スマートフォンやパソコンの画面で私たちが

図1-1-2　新たな要求を満たしたUI

My Books

登録する

確かめる

修正する

削除する

感想文を書く

リストにして見る

出版社別に並べて見る

本を登録する画面へ

本を検索する画面へ

登録を修正する画面へ

登録を削除する画面へ

感想文を書く画面へ

リスト表示する画面へ

出版社別に表示する画面へ

図1-1-3　オブジェクト指向によるUI

My Books

登録日順

オブジェクト指向UIデザイン ソシオメディア

四方対象 - オブジェクト指向存在論入門 グレアム・ハーマン

形の合成に関するノート／都市はツリーで… クリストファー・アレグザンダー

技術とは何だろうか - 三つの講演 マルティン・ハイデガー

未来をつくった人々 - ゼロックス・パロア… マイケル・ヒルツィック

デザイニング・インターフェース ジェニファー・ティドウェル

ヒューメイン・インタフェース ジェフ・ラスキン

昭和・平成オカルト研究読本

＋ Bookタイトル

著者

出版社

出版日

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

ソシオメディア

感想文

完了削除

本の一覧 本の詳細

64 65

オブジェクト指向UI設計の実践3 ステップ1．オブジェクトの抽出　3-3

3-3 ステップ1．オブジェクトの抽出　まずはオブジェクトの抽出です。

　次の図は、学校名簿アプリケーションをイメージしたタスクのサンプルです。

断片的で粒度もまちまちなものですが、アプリケーションが発想されたときの

小さな目的意識の例として挙げています。

野球部の顧問教師の電話番号を確認する

ある生徒が何組かを確認する 文化祭の主担当

教員を確認する

1年A組の名簿を印刷する

2年B組の担任を確認する

修学旅行の日付を確認する

ある生徒が所属している部活を確認する

運動部の中で一番所属生徒数が多い部を確認する

3年C組のある生徒の成績を確認する

図3-3-1　学校名簿アプリケーションのタスク

　想定されたタスクとして書かれた単語や表現は、アプリケーションのデザイ

ンに大きな影響を与えます。実際のデザインでは事前のリサーチや要求分析な

どによってこのタスクを揃えるところから始まります。ここではたとえばこう

いったタスクがぼんやりと考えられ、ひとまずこれをさっと形にしてみるなら

ば、という状況を考えてください。

　このタスクの断片を例にしながら、オブジェクト指向UIのアプローチ方法を

説明していきます。

「名詞」を抽出する

　それぞれのタスクの文言から名詞を探します。

ある生徒が所属している部活を確認する 野球部の顧問教

師の電話番号を確認する

ある生徒が何組かを確認する 文化祭の主担当

教員を確認する

1年A組の名簿を印刷する

運動部の中で一番所属生徒数が多い部を確認する

2年B組の担任を確認する

修学旅行の日付を確認する

3年C組のある生徒の成績を確認する

図3-3-2　タスクから名詞を抽出する

　オブジェクトは名詞を手掛かりに抽出されます。その際、単に名詞を機械的

に抜き出すのではなく、ユーザーの関心の対象となる概念は何かを考えてみて

66 67

オブジェクト指向UI設計の実践3 ステップ1．オブジェクトの抽出　3-3

ください。

　オブジェクトには「もの」的なものもあれば、「こと」的なものもあります。食

べ物や書物などもオブジェクトですし、食事や読書などもオブジェクトです。

オブジェクト

アクション

オブジェクト化されたアクション

図3-3-3　オブジェクトには「もの」的なものも「こと」的なものもある

　探してみるとあれもこれもオブジェクト、日々の生活では普段からたくさん

の名詞に囲まれています。24時間365日、私たちはオブジェクトの中で暮らし

ているのです。

「名詞」とそれらの関係を抽出する

　次に名詞同士の関係を整理します。

野球部

ある生徒

顧問教師

何組

部活

修学旅行 日付

1年A組 名簿

文化祭 主担当教員

運動部 生徒数部

生徒 成績

2年B組

3年C組

担任教師

電話番号

ある生徒

図3-3-4　名詞同士の関係を抽出する

　タスクごとに名詞同士の関連を示すために線でつなげていきましょう。この

あたりはUMLのクラス図を使ってシステムが扱う基本概念をモデリングした

経験があれば慣れた作業だと思います。

168 169

ワークアウト：基礎編4 家族で遊べる場所を探すアプリケーション　レベル5

図レベル4-7　モバイル

　さらに発展させるとどうなるでしょうか。

　今回のタスクにはありませんでしたが、ユーザーにとって「スペースが今すぐ

使えるかどうか」が特に重要かもしれません。そのような場合はスペースのコレ

クションビューにおいてフィルタリングを用意しましょう。

　フィルタリングについては後のワークアウト（レベル9）で扱っているので参

考にしてください。

　なお、このワークアウトでは触れませんでしたが、実際にこのような予約シ

ステムを作る上では「予約をしたユーザー」を特定するために「ユーザー」オブジ

ェクトが必要になるでしょう。

　想定タスクの文言には表れていなくても、実装寄りの観点からモデリングを

したい場合には、そのような一般的に必要とされる重要なオブジェクトを加え

て全体の概念構成を検討していってもかまいません。

レベル5 家族で遊べる場所を探すアプリケーション　次のタスクから、家族で遊べる場所を探すアプリケーションをデザインして

ください。

すみれ山公園のすべり台の設置場所を確認する ブランコのある

公園を確認する

公園の住所を確認する

すべり台の一般的な特徴を確認する

図レベル5-1　家族で遊べる場所を探すアプリケーションのタスク

スペースのコレクションビュー スペースのシングルビュー

172 173

ワークアウト：基礎編4 家族で遊べる場所を探すアプリケーション　レベル5

ビューとナビゲーションの検討　次はコレクションビューとシングルビューの呼び出し関係を整理します。

コレクション公園

シングル公園

コレクション公園に設置されている遊具

コレクション遊具の種類

シングル遊具の種類

図レベル5-3　ビューとナビゲーションの検討

　公園に設置されている遊具は、情報量が少ないのでシングルビューは省略し

ています（レイアウト面積に依存するのでレイアウトしながら決めましょう）。

また公園シングルビューから遊具の種類コレクションビューへのナビゲーショ

ンは不要と考え省略しました。

　ルートナビゲーションには「公園」と「遊具の種類」を並べることにしました。

ただし「遊具の種類」という表現は少し複雑な印象を与えるので、ここでは単に

「遊具」としてみましょう。

レイアウトパターンの適用　レイアウトパターンを適用して実際の画面をデザインしていきます。

　次の図はデスクトップのサンプルです。

　公園のシングルビューには、設置されている遊具のコレクションビューを一

体化して表示しています。プロパティは遊具の名称と設置場所が表示されてい

ます。実際には設置されている各遊具に固有の名称がない場合も多いかもしれ

ないので、名称だけでなく遊具の種類と関連付けるようにオブジェクトをモデ

リングしてもよいでしょう。

　公園のプロパティに定義されていない写真を大きく使っています。「公園の写

真を確認する」というタスクは言語化されにくいものです。ですが写真を使って

レイアウトすると具体的なイメージを掴むのに有用であることがわかります。

このような場合はオブジェクトのプロパティに写真を追加しましょう。このよ

うにレイアウトからオブジェクトを定義するという方向もあり得ます。

図レベル5-4　デスクトップ

公園のコレクションビュー

公園のシングルビュー

O指向UI(004-005)O指向UI(064-065)O指向UI(066-067)O指向UI(168-169)O指向UI(172-173)