使いやすいUIを作る最強の方法「オブジェクト指向UIデザイン」

4/11/2026

Summarize

この記事は、書籍「オブジェクト指向UIデザイン」で提唱されている「オブジェクト指向UI」の簡単な解説です。 https://gihyo.jp/book/2020/978-4-297-11351-3

最近、モンスターをハントする有名ゲームがセールしていたので、買いました。 10年ぶりくらいだけど、やっぱり楽しいですね。すっかりハマってしまい、最近ずっとやっています。

ただ、プレイする中で、1箇所だけ不便だと感じるUIがあるんですよね。

「アイテムのマイセット」という機能のUIです。マイセット機能とは、アイテムのセットを「登録」しておき、登録したマイセットを「所持」することでそのアイテムセットを簡単に手持ちに入れられる機能です。

この画面構成はこうなっています。「アイテムのマイセット」メニュー選択後、まずは操作を「所持・登録・移動・削除」から選びます。

どれかを選ぶと、さらにその操作の対象となるマイセットを選びます。選ぶと、そのマイセットに対して最初に選んだ操作（「所持」なら手持ちに入れる、「登録」なら手持ちをマイセットに登録、…）が実行されます。

一番最初に感じた違和感は、「初手何を選べば良いかわからない」でした。初見でメニューを開き「所持・登録・移動・削除」が表示されたとき、「マイセットとは何かもよくわからないのに、やりたい操作を聞かれてもわからないよ」と感じました。試しに選択してはみますが、その後マイセットを選び、操作が完了するまで、最初の選択は正しかったのか？最初からやり直しなのではないか？と若干不安になりながら操作していました。今回は短い操作なのでそこまで気になりませんでしたが、これがもっと複雑な操作だったら、最初からやり直しの不安を抱えながら何ステップも選択を繰り返す、キツい体験になっていたでしょう。

もう一つ初見で迷ったのは「マイセットの名前を変える方法」です。先ほどのゲーム画面をもう一度見てください。実は右下に「名称変更」という操作があるのです。なんでこんなところにあるのでしょうか？

さらに、この「名称変更」、「マイセット解除」の時のマイセット一覧画面にもあるのです。これからマイセットを消そうという時に、なぜそれの名前を変える必要があるのでしょうか？この「名称変更」の位置や操作手順は全体的に変です。

加えて、使い慣れてもずっと残っている不便さは、「途中で操作を切り替えられないこと」です。例えば特定のマイセットを「所持」した直後（所持するマイセットを選ぶ画面が表示されている状態）、「このマイセットよく使うから上に移動したいなあ」と思うことがある。でもその場で移動はできない（マイセットの一覧が今そこにあるのに！）。一度一番最初まで戻り、「マイセット移動」を選ぶところからやり直さないといけないのだ。

そもそも、一覧を見る前に「移動」を選ばせること自体が無理があるように思います。「移動」したいと思うのは、一度マイセット一覧を見て「ああこれ、この位置にあるのか。不便だな」と思った時だけです。一覧を見る前に「移動」したいと思うことはほとんどありません。

この機能はゲームの本筋ではないので、ここがどれだけ使いにくかろうともう100時間以上プレイしているのですが、気にはなります。

では、どういうUIであれば、使いやすいのでしょうか？

UIを改善する

どういうUIが良いか、一言で言えば、「タスク → オブジェクトではなくオブジェクト → タスクの順で選ばせる」です。冒頭の例で言えば、「操作 → マイセット」ではなく「マイセット → 操作」の順で選ばせるということです。画面イメージを書いてみましょう。

まず、マイセットメニューを選ぶと、先にマイセット一覧が表示されます。

マイセットを選ぶと操作が表示され、操作を選ぶと実行されます。

これで私が感じた不便さは全て解消されます。

まず「初手何を選べば良いかわからない」はもうありませんね。初見の時は「マイセットを作成」しかないので、とりあえずそれを選んだらマイセットを作れます。 1つマイセットができれば、マイセットメニュー → マイセット一覧とその中身が表示されますから、マイセットが何であるかがわかります。その上でマイセットを選んでみると可能な操作が表示されます。対象が明確なので、全て何が起こるかわかります。迷いません。

「名称変更」も他の操作と同じ位置に収まりました。操作手順としても違和感ありません。

「途中で操作を切り替えられない」ももうありません。マイセットを見ながら柔軟に操作を変えられます。

オブジェクト指向UI

このような「オブジェクトをまず見せ、それを手がかりにタスクを行わせる」UIのことを、「オブジェクト指向UI」と言います。

書籍「オブジェクト指向UIデザイン」では、オブジェクト指向UIの原則として以下4つを挙げています。

オブジェクトを知覚でき直接的に働きかけられる

ユーザーがオブジェクトを画面上で見ることができ、それをPCならマウスカーソルや上下キー、スマホならタッチ等で操作できることです。マイセットの例では「マイセットが一覧に表示されており、上下操作とAボタンで選択できる」ことを指します。

オブジェクトは自身の性質と状態を体現する

そのオブジェクトが何で、どういう状態なのかをユーザーが理解するのに必要十分な情報が表示されているということです。マイセットの例では「マイセットの名前と（カーソルが合っている間）中身が表示されている」ことを指します。

オブジェクト選択 → アクション選択の操作順序

これは先ほど説明した通りです。「マイセット → 操作」の順で操作させることですね。

全てのオブジェクトが互いに協調しながらUIを構成する

これは少し難しいですが、オブジェクトの位置関係等からユーザーがオブジェクト同士の概念関係を理解できるということです。マイセットの例では「オブジェクトの位置関係から、マイセット同士、アイテム同士は並列の関係、マイセットとその中のアイテムは包含関係にあることが直感的に分かる」ことを指しています。マイセット同士・アイテム同士は枠で囲われてリスト化されており、並列であることは見ればわかります。マイセットとアイテムの包含関係は、マイセット左 → アイテム右という順番に並んでいることで一定分かりますし、マイセットの選択を切り替えてみればアイテムが切り替わるのですぐにわかります。

オブジェクト指向でUIをデザインすることであらゆるUIが使いやすくなります。私の経験としてそう思いますし、書籍「オブジェクト指向UIデザイン」でもそのように主張しています。

デザインはトレードオフの集合であり、常に有効なメソッドというものはほとんどありませんが、「タスク指向からオブジェクト指向への転回」だけは、半ば機械的に行えることでもあり、もう銀の弾丸と言っていいほど汎用的で強力なUI 改善方法なのです。

では、なぜ「オブジェクト指向」にすることであらゆるUIが使いやすくなるのでしょうか？

オブジェクト指向UIが使いやすい理由

オブジェクト指向UIが使いやすいのは、それが人間の本能的な行動原理に即しているからです。

それを確かめるために、一旦システム・アプリ・UIという文脈を離れて、物理世界の我々の行動、例えばレストランで料理を食べるという行動がどのように行われるか見てみましょう。

あくまで私の例ですが、まずはレジの様子を見て注文方法を確認します。レジにメニューが置いてあったり人が並んでいたりしたら、先に注文するお店っぽいですから、まずはそこに並んで料理を選びます。そうでなければテーブルについてから注文すると判断して、先に席を選びます。「オブジェクト（レジ）をまず見て、それを手掛かりにタスク（料理を選ぶ/席を選ぶ）を行う」オブジェクト指向です。

注文する際も、メニューを見て料理を選んでから、注文します。もしメニューが全然想像と違っていたら、注文せず店を出るかもしれません。ここでも「オブジェクト（料理）をまず見て、タスク（注文する）を行う」オブジェクト指向です。

料理が来たら来た料理を見て、注文と合っていれば食べ、合っていなければ店員さんに言って替えてもらいます。毎回疑いの目を持ってやっているわけではありませんが、自然にやる行動です。ここでも「オブジェクト（料理）を見て、タスクを行う」オブジェクト指向です。

このように、人間の行動とそれを決める指向は、ほぼ全て「オブジェクトを見て、それを手掛かりにタスクを行う」というオブジェクト指向の順序で行われます。そうではない例も無くはないでしょうが、具体例を出すのが難しいくらいには少ないです。

そのため、UI上での操作も、同じようにオブジェクト指向の順序でできると、使いやすいのです。

先ほどのオブジェクト指向UIの4原則も、要は「現実世界での人間の認知の仕方に、UIを合わせましょう」ということだと思います（これは書籍にはない私の解釈です）。

オブジェクトを知覚でき直接的に働きかけられる → 人間は五感のいずれかで知覚でき、触るなど働きかけられるものだけを「モノ」とみなす
オブジェクトは自身の性質と状態を体現する → 人間はそのモノ自体が体現しているものを、そのモノの性質・状態と捉える
オブジェクト選択 → アクション選択の操作順序 → 人間はモノを見てからアクションを選択する
全てのオブジェクトが互いに協調しながらUIを構成する → 人間はモノ同士の位置関係から概念的な関係を捉える（e.g., 箱の中におもちゃが入っている状態を「箱が親・おもちゃが子」のような関係として捉える）

オブジェクト指向UIの作り方

オブジェクト指向UIの作り方は、実は標準的なシステム設計プロセスとほぼ同じです。なぜか、システム設計とUI設計が別物として行われることが多いのですが、実際はほぼ同じなのです。

まずは、そのシステムで行いたいタスクを洗い出します。これは、標準的な設計プロセスにおける「業務フロー分析」や「ユーザーストーリーマッピング」の結果をそのまま流用できます。マイセットの例であれば例えば以下のようになります。

マイセットを作成する
マイセットにアイテムを追加する
マイセットからアイテムを取り除く
マイセットを手持ちに入れる
マイセットの順番を変更する
マイセットを削除する
マイセットの名前を変える

ここで察しがつくと思いますが、このタスクをそのままUIに起こした結果として、タスク指向UIが生まれるのです。

ですので、ここから、少し工夫をしてオブジェクト指向UIに持っていきます。具体的には「オブジェクトとその関係・画面とその遷移・画面レイアウト」を検討します。この3つはどこから始めても良いですし、途中で前に決めたものを変更しても良いです。最終的に3つの整合が取れていれば良いです。例として、この3つをこの順で決める感じで進めてみましょう。

まずは各タスクをオブジェクト（マイセット・アイテムなどの名詞）とアクション（作成・所持などの動詞）に分解して、それぞれの関係をモデルにします。これは、標準的な設計プロセスにおける「ドメインモデル設計」「データ構造設計」などの結果をそのまま流用できます。マイセットの例であれば以下のようになります。（ここでの「マイセット内アイテム」には「アイテム（名前・効果・所持数上限などを持つ）」が紐づきますが、今は関係ないので割愛します）

次に画面とその遷移の検討ですが、まずは機械的に、オブジェクト指向で使う2種類の画面「一覧画面」と「詳細画面」を全オブジェクトに割り当てます。オブジェクト指向UIでは、各オブジェクトに、そのオブジェクト複数をまとめて確認する「一覧画面」と、一つのオブジェクトを詳しく確認する「詳細画面」を持たせます。まずは、機械的に全てのオブジェクトに「一覧画面」と「詳細画面」を作り、オブジェクトの関係に沿って繋いでみましょう。今回はマイセットの中にアイテムがあるので、「マイセットの詳細の中にマイセット内アイテム一覧がある」という構造が自然です。一旦問題なさそうなので、このまま進めます。

次に各画面をデザインします。

ここで「マイセット詳細とマイセット内アイテム詳細、いらなくない？」という問題に気づきます。マイセット詳細については、表示すべき情報がありません。マイセットの属性である「名前」と「順番」は一覧で表現されていますし、「マイセット内のアイテム」はアイテム一覧の方で表現されているためです。「マイセット内アイテム詳細」も、マイセットでアイテム1つ1つの詳細を確認するケースは多くないため、不要そうです。

解消のため、画面遷移図を修正します。

これで必要十分になりました。

完成！と思ったら最後に、最初に洗い出したタスクが、この画面構成で通せるかをテストします。このタスクができることをアプリに求めていたので、できないのではダメです。「マイセットを作成する」 … できませんね。作成ボタンがありません。「マイセットにアイテムを追加する」 … できません。他のアクションもできません。

テストが落ちたので、修正しましょう。「マイセットを作成する」については、リストの下に作成ボタンをおけば良いでしょう。他のアクションのうち「移動・削除・名前変更」は、マイセット選択時に操作メニューを表示して選ばせます。マイセット内のアイテムの出し入れは、一つ一つ出し入れするのも面倒なので、「マイセット内のアイテムを手持ちアイテムで置き換える」という1操作にまとめましょう（ここは色々議論があると思いますが省略）。

これで、全部のタスクができるUIになりました。

こんな感じで、オブジェクト抽出・画面と遷移・画面レイアウトを行ったり来たりしながら考え、最後にタスク全てが通せることを確認したら、完成です。

今回は割と簡単でしたが、オブジェクトが多かったり関係が複雑だったりすると、一筋縄ではいかないことも多いです。

書籍「オブジェクト指向UIデザイン」には、この手の練習問題が豊富に載っています。実際に書籍を手に取って、練習問題をこなすと、感覚やコツが掴めてきます。ぜひ読んでみてください。

https://gihyo.jp/book/2020/978-4-297-11351-3

終わりに

本記事では、使いやすいUIを作る最強の方法「オブジェクト指向UIデザイン」を簡単にご紹介しました。

書籍「オブジェクト指向UIデザイン」も全人類読んでほしいです。オブジェクト指向UIの原則や作り方の詳細がより詳しく載っており、練習問題で実践力も養えます。また、個人的には末尾に付録のようについている「オブジェクト指向のフィロソフィー」という章が非常に興味深かったです。オブジェクト指向UIが生まれた歴史的背景などが解説されていて、オブジェクト指向UIの理解がより深まります。