まんが 「オブジェクト指向ユーザーインターフェース」

表紙
 The Art of User Interface Design
 ジ・アート・オブ ユーザーインターフェースデザイン
 藤井 幸多
 少年と博士が並んでいる
扉絵
オブジェクト指向ユーザーインターフェース
健太が思考の中からオブジェクトを手で取り出し、アプリのデザインへ埋め込んでいる
それを見守る博士と母親
橘 健太(以下 健太)「決めた!アプリを作る!!」
健太の母「え?アプリ?」
健太「うん!毎日いろんなものを見つけるんだけど図鑑に載ってないものが多くて」
健太「だから見つけたものを記録するアプリを作りたいんだ」
健太の母「それはいいアイデアね!!でも困ったわ。お母さんそういうこと全然詳しくないのよ。あ!イリュウ博士に聞いてみたらどうかしら?」
健太「手品師のジョンおじさん?」
健太の母「そうよ。確かコンピュータに詳しかったはずよ」
射留(いりゅう)研究所
ジョン・イリュウ博士(以下 博士)「ほほう!それはいいアイデアだ!」
ポン!
博士がペンを突然出す。
健太「わっ!」
博士「そのアプリがどんなものか絵に描いて教えてくれるかね?」
健太「絵でいいの?」
博士「構わないよ。まずは頭の中にあるものを見せて欲しい」
健太「えーっと」
30分後
健太「できたー!!」
[記録を書く][記録を見る][記録を変更する][記録を消す]というボタンが縦に並んだ画面。
健太「それぞれのボタンからやりたいことができるんだ!ポチッとね」
博士「ほっほっほ。はじめてにしては上出来だ。」
健太「へへへ」
博士「だが1つ問題もある」
健太「え?問題?」
博士「タスク指向になっておる」
健太「タスク指向?」
健太「カリカリ甘くて美味しい…」
博士「それはラスクじゃな…」
健太「肉と野菜を間に挟んで…」
博士「それはタコスじゃ」
健太「じゃあ一体どんな食べ物…」
博士「食べ物ではない」
ぐるぐる〜
健太の腹がなった
博士「どうやらお昼の時間のようだ。おうちで食べてまたおいで」
1時間後
タタタ
健太「よーし。食べたら元気出てきたぞ」
射留研究所へ走ってきた健太
健太「それにしてもタスク指向ってなんなんだろう?」
ガチャ
扉を開けると真っ暗
健太「あ、あれ?」
パッ
健太「わ!!!」
突然目の前にドアがたくさんある家が現れた。
健太「な、なんだ?この家は?」
健太「新しい手品かな?」
ドアには「会う」「質問する」など書かれている。
健太「会う、質問する、相談して帰る…?「会う」に入ってみよう…」
ガチャ
博士「やあ!おかえり!」
健太「あ!博士、これなーに?」
博士「ん?質問かい?質問なら別のドアから入りなさい」
外に出される健太。
健太「えー!?」
健太「じゃあこれかなあ?」
ガチャ
健太「あ、あれ?さっきと同じ」
中には博士がまたいる。
博士「やあ!」
健太「も〜!何なのこのドアわけがわかんないよ〜」
博士「ところで…」
さっき健太が作った画面を引っ張り出す博士。
博士「「記録を見る」を押すとどうなるんだったかな?」
健太「え?」
健太「記録の一覧が出てきて…その中から見たい記録を選択するんだ」
博士「ふむ。ではそれを変更したい場合はどうかね?」
健太「えっと…最初に戻って…「記録を変更する」を押して変更したい記録を選ぶ…」
博士「では変更中に消したくなった場合はどうだい?」
健太「それも一度戻って…消す記録を探して…うーん…あ!これってもしかして…さっきのドアと同じ…!?」
博士「そのとおり。やることを先に選ぶタスク指向じゃ」
博士「タスク。つまり「やること」、これを入り口にするのは色々と問題がある」
健太「問題がある?」
博士「まずタスクの特徴をいくつか考えてみよう」
博士「私達は普段具体的なものに囲まれて生活しているね。そして、その生活の中で「やること」を考えている」
博士「具体的な対象に合わせて「やること」を決めているので対象が変われば「やること」を変えることもある」
例として、小さな紙を前に「小さいから整理して書こう」と思っている人、
大きな紙を前に「大きいから書いてから整理しよう」と思っている人の様子。
博士「ということは逆に言えば、具体的な対象がない状態で「やること」を決めるのは大変なんだ」
博士「それに加えて「やること」は思いつきなのであっという間に増える。例えば1つのメモ帳でも使い方はアイデア次第で無限大」
例としてかみの前で「ブログの下書きに使おう」と考える人や、「メールの下書きに使おう」と考える人、「買い物リストに使おう」と考える人、「メッセージの下書きに使おう」と考える人の様子。
博士「つまり入り口が多くなってしまうんだ。中は同じだとしてもね」
博士「それと「やること」を一言で表現するのは意外と難しい」
例として人が手にペットボトルを持って蓋を開けてじっと見ている様子。
生きる、幸せになる、水分補給する、水を飲む、キャップを開ける、飲むか考える、味見する、ペットボトルを持つ、と様々な表現ができる。
博士「つまり誰かが入り口を作るときに考えた「やること」と自分がいま考えている
「やることが違うかもしれないんだ。」
[会う][質問する][相談して帰る]と書かれたドアの様子。
博士「もっと言えば人間はやりながらどうするか考えているのじゃ」
ブログの文章を書いていたけど…SNSに投稿することにした人の様子。
博士「自分自身でもやり終えて見なければ人に説明できないことも多いのではないかな?」
博士「これらの結果、タスクを入り口にすると…自分のやりたいことは何か?ワッチュウォナドゥ?それは何という入り口でできるのか?その入り口はどこにあるのか?を強く意識しないといけなくなる」
健太「確かにこんな家だと困るなあ…でも一体どうしたら…」
ボン
りんごを健太の頭の上に突然出す博士。
博士「そこでブジェクトの出番だ。」
健太「オ、オブジェクト?」
博士「関心の対象、「もの」というのが近いかもしれん」
りんごが博士の指先で浮かび上がる。
健太も博士もそのりんごを見ながらりんごを思い浮かべている。
健太「これは?」
りんごをつかむ健太
博士「オブジェクトじゃ」
健太「これは?」
自分の靴を指差す健太
博士「オブジェクトじゃ」
健太「これは?」
自分自身を指差す健太
博士「それもオブジェクトじゃ」
健太「オブジェクトだらけだー!!!」
博士「はっはっは」
博士「物理的なもの以外にもデジタルのオブジェクトもある。」
博士はスマートフォンのアプリを示す。メールやユーザー写真やベクターグラフィック、音楽、動画、店、位置情報など様々なオブジェクトがある。
博士「さて」
パチン
博士が指をならす。
ボン
健太「わ!!!」
あたりが光に包まれ煙が発生する。
健太「家が消えた!ヒョエー」
博士「ほっほ!すっきりしたじゃろう。」
健太の作った画面が現れる。
博士「さしずめこれが今の私達の「オブジェクト」じゃな。」
博士「重要なのはオブジェクトを隠さず先に見せることじゃ。例えばお店なら「商品」がオブジェクトじゃ。もしも商品が隠れていたら買うかどうか決められないじゃろ。」
OPENという看板があり、2つのドアがあり、それぞれ「見る」「買う」と書かれている店の前で戸惑う人の様子
博士「アクションを先に選択するのではなく」
[みる][買う]というボタンが並んだスマートフォンアプリの画面。
博士「まずオブジェクトを先に見れるようにする」
みかん、50円、[買う]というボタン、これらが一行になったスマートフォンアプリの一覧の様子。
他にはようなし50円、ぶどう230円、いちご178円、バナナ196円。
博士「こうすると「やること」を前もって決める必要がなく、具体的な対象を見ながら、どうするか考えることができるようになるのじゃ」
例として「美味しそうだし100円なら買おうかな」と考えている人の様子。
博士「わたしはこれをオブジェクト志向のユーザーインターフェース、OOUIと呼んでおる。」
健太「ということはまず大事なオブジェクトを探すってことだね!」
博士「その通り!さっき考えていたユーザーが「やること」を思い出してみようか」
健太「えーっとやることは、、、」
記録を書く、記録を見る、記録を変更する、記録を消す、と書き出す健太。
健太「こんな感じかな?」
博士「次はそれを名詞と動詞に分けるんだ」
手刀で切る仕草をする博士
博士「名詞がオブジェクト」
りんごを出す博士。
健太「わっ」
博士「動詞がアクション」
そのりんごをモグモグと食べる博士
健太「あ…」
健太「えーっと、じゃあ「記録」がオブジェクトで…アクションは「書く」「見る」「変更する」「消す」か!」
博士「グレイト!」少しまとめるとこうだね」
四角の上部に記録、線で区切った下部に、書く、見る、変更する、消すが入った図を出す博士。
健太「わっ」
博士「次はいよいよ画面だ!今回はオブジェクトから一覧画面と詳細画面を作ってみよう」
手に一覧画面と詳細画面のフリップを持つ博士
博士「眺めるのが一覧」
机の上の布をさっと取りたくさんのりんごを出す博士
博士「近くで見るのが詳細」
ずいっと健太の目の前に1つのりんごを近づける博士
健太「近い…」
健太「一覧と詳細画面なら見たことがあるぞ」
健太「ジャーン!」
一覧と詳細画面を描いた健太
詳細画面には数字の書かれた紙の絵と「あんごうのかけらひみつのそしきのおとしものにちがいない」というテキスト。
博士「グッジョブ!最後に見えているオブジェクトに対して操作できるようにしよう」
詳細画面のフリップをコンコンと叩く博士。
健太「できたー!」
一覧画面に[記録作成]、詳細画面に[削除]が追加された画面の前で喜ぶ健太。
健太「ところで博士」
博士「ん?」
健太「オブジェクトがいっぱいあるときは?」
博士「グッドクエスチョン!それは少し話が長くなるぞ…」
おしまい
The Art of User-Interface Design