マンガでわかるOOUI(オブジェクト指向UIデザイン)の利点

テーマ :
  • 川崎 実紀のプロフィール写真

    川崎実紀デザイナー

  • 中岡 慎介のプロフィール写真

    中岡慎介 ディレクター


イラスト:マンガのタイトル「ウサギさんと学ぶOOUI」

「OOUI(オブジェクト指向ユーザーインターフェース)」という言葉を耳にしたことはあるでしょうか?

従来からあるユーザーインターフェースの設計論ですが、2020年にソシオメディア様が『オブジェクト指向UIデザイン ― 使いやすいソフトウェアの原理』を発刊されてから多くのデザイナーの注目を集めています。本書籍には18回分の演習課題が収録されており、コンセントでも有志のデザイナーで勉強会を定期開催しています。

キャプチャ:Microsoft Teamsでのオンライン会議の様子

オンライン上で開催された有志での勉強会の様子。PC画面を共有し、オンラインデザインツール「Figma」を用いて実際に手を動かしながら演習課題に取り組みました。

ご紹介した書籍を読めばOOUIとは何か、どのように実践するのかということがすべて書いてあるので、詳しく知りたい方はぜひご購入いただければと思います。

本記事では「OOUIの何が良いのか?」について設計実務者以外の方にマンガでお伝えしたいと思います。主役はスマートフォンアプリを作りたいウサギさんです。

ウサギさんと学ぶOOUI

マンガ:アプリづくりを勉強中のウサギのウサ吉くんは、買ってきたお菓子を食べながら次にどんなアプリをつくろうか考えている様子。「むむっ、このお菓子おいしいな…。どこで買ったお菓子だ?思い出せない…!」そこでウサギさんは、おいしいお菓子屋さんの場所をメモできるアプリをつくることにしました。

ウサギさんはアプリづくりを勉強中。お菓子屋さんをメモしておくアプリをつくることにしました。そして…
⼀⽣懸命デザインとプログラミングをしてアプリが出来上がりました!

マンガ:なんとかアプリを完成させたウサギさん。「よーし、さっそくお店の情報を登録するぞ。」

さっそく今までに⾏ったお菓子屋さんを登録したウサギさんですが…。

アプリ画面:ウサギさんが作ったアプリ「たんけんおかしやさんMAP」のトップ画面と、お菓子屋さんの住所を見るためのお店一覧画面。
イラスト:ウサギさん「あれ?間違って『にんじんケーキSHOP』をふたつ登録しちゃった。それに『もちもち団子』を『もちもちち団子』って書いちゃってる!」

⼀度登録したお菓子屋さんを編集する機能と削除する機能をつけ忘れていたウサギさんは急いでアプリを直しました。

イラストとアプリ画面:最初は「お菓子屋さんを登録する」「お菓子屋さんの住所を見る」ボタンだけだったトップ画面ですが、「お菓子屋さんを編集する」「お菓子屋さんを削除する」ボタンを追加したことで前よりも複雑な見た目の画面になってしまいました。直したアプリを見て違和感に気がつくウサギさん。「なんだがボタンだらけになっちゃったな…。」
イラストとアプリ画面:変更したトップ画面を前に困惑した様子のウサギさん。「2つ登録しちゃった『にんじんケーキSHOP』を消すには…。えーっと『もちもちち団子』を直すには…。」

気がつくとなんだか似た画面もたくさん。使い方が難しくなってきました。

イラストとアプリ画面:新しく増やしたお菓子屋さんの住所を見る画面、編集する画面、削除する画面を前に、操作が分からなくなり固まってしまうウサギさん。「???」
マンガ:アプリが使いにくくて発狂するウサギさん。そこへ。「そんなときこそOOUIだよ。」金魚鉢の中のサカナが突然しゃべり出して息を飲むウサギさん。「ヒッ!」

ここでちょっと説明。OOUI とは…。

イラスト:黒板を使いながらウサギさんにOOUIについて説明をするサカナさん。「OOUIはオブジェクトを手がかりにUIをつくります。オブジェクトとはユーザーの『目当て』です。やりたいことの中に名詞であらわれます。」例:お菓子屋さんを登録する、お菓子屋さんの住所を見る、お菓子屋さんを編集する、お菓子屋さんを削除する。話に聞き入るウサギさん。「ボクの目当ては『お菓子屋さん』か…。」
イラストと図説:サカナさん「OOUIではオブジェクトとオブジェクトがもつ情報とオブジェクトに対して行うアクションを1つにまとめて扱います。」ウサギさん「ボクの場合、登録するや編集するみたいな『アクション』は『オブジェクト』であるお菓子屋さんにまとめるんだね!」 例:お菓子屋さんというオブジェクトに対して、情報である「名前」「住所」、アクションである「登録する」「確認する」「編集する」「削除する」が1つのグループにまとめられる。ウサギさんのアプリで言うと、例えばさくさくクッキーストアに対して情報は「さくさくクッキーストア」「大きな山のふもと」、アクションは「登録する」「確認する」「編集する」「削除する」が紐づく。

OOUIを勉強したウサギさんはアプリを設計し直してみました。

イラストとアプリ画面:ウサギさんが直したアプリのトップ画面には写真付きでお菓子屋さんの名前が並び、お店の詳細画面にはお店の名前と住所が表示されている。修正前には別々の画面で行っていた「編集する」「削除する」アクションは新たに追加したメニューアイコンの中に格納し、必要な時にそこから変更できるようになっている。「オブジェクトであるお菓子屋さんをトップ画面に並べることがポイント!」と得意げなウサギさん。

アプリを直す前と直した後では作る画面の数が全然ちがいます。

ツリー状の図説:新しくお店を登録した場合。アプリを直す前では一段目に「TOP」「登録画面」、「TOP」の下の二段目に「住所を見たいお店を選ぶ画面」「編集したいお店を選ぶ画面」「削除したいお店を選ぶ画面」が並ぶ。三段目にはそれぞれの機能ごとにお店の詳細画面が紐づき、機能の数だけお店の画面を追加する必要があった。アプリを直した後は、一段目に「TOP」「登録画面」、「TOP」の下の二段目に「A店」「B店」「C店」とお店の詳細画面が紐づき、お店の数だけ画面を増やせば良くなる。

OOUI を勉強したウサギさんのアプリはわかりやすく、新しい機能も追加しやすくなりました。

イラスト:直したアプリを見ながらさっそくお菓子屋さんへ出かけるウサギさんと、金魚鉢に紐をくくりつけられて犬の散歩のようにして連れて行かれるサカナさん。「やりたいことをただ並べるんじゃなくて、一度オブジェクトを抜き出して設計するのがポイント!」と締めくくるサカナさん。

まとめ

オブジェクト指向でユーザーインターフェースを設計する利点を改めてまとめます。

ユーザー視点

  • ユーザーの目当てであるオブジェクトが画面に並んでいるため、日常生活と同じように対象物を直接操作できる。
  • 画面数が少なくなるので、使い方を学習しやすくなる。
  • 画面間の無駄な行き来が減るため、操作効率が上がる。

サービス提供者視点

  • オブジェクトの観点で情報や機能が整理されているため、オブジェクトに対する操作の追加がしやすい。
  • 画面数が少なくて済むため、開発コスト・運用コストが下がる。

さいごに

近年、toC向けのアプリケーションではOOUIを学ぶ前のウサギさんが作ったようなオブジェクト指向でないアプリケーションを見かける機会は少なくなりました。一方、toB向けのアプリケーションには使い勝手の悪いものがまだまだ多く見受けられます。

その要因の1つとして、業務分析から抽出される「○○を作成する」「XXを提出する」といった業務をそのままアプリケーションの機能として実装してしまっていることが挙げられます。

既存の業務をただデジタル環境に置き換えるのではなく、業務プロセスの中にあらわれるオブジェクトに着目し、新たな業務プロセスとして再構築することでユーザーにとってより利用しやすいアプリケーションのデザインが可能になります。

[ 執筆者 ]

テーマ :

コンセントは、企業と伴走し活動を支えるデザイン会社です。
事業開発やコーポレートコミュニケーション支援、クリエイティブ開発を、戦略から実行まで一貫してお手伝いします。

ページの先頭に戻る