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