概要

名詞起点の設計でタスク駆動UIの課題を根本から解消する

想定読者

業務アプリケーションやWebサービスのUI設計に携わるエンジニア・デザイナーで、画面数の肥大化や操作フローの複雑化に課題を感じている実務者

こんな人には向いていない

• 色・タイポグラフィ・ビジュアル表現の改善を主な学習目的とするデザイナーには適用範囲が異なる(本書はUI構造の設計原理を扱い、見た目の美しさは扱わない)
• 18のワークアウト課題を手を動かさず読み流すだけでは手法を体得できない。本書自身が「実際に考え、手を動かし、試行錯誤する」ことを前提としており、受動的インプット型の読み方は効果が薄い
• UIに直接関与しない純粋なバックエンド・インフラ専業エンジニアには、理論は参考になっても演習の実践機会が生まれにくい

この本で身につくこと

• オブジェクト(名詞)起点とタスク(動詞)起点のUI設計の違いを識別し、既存画面のどこが問題かを指摘できる
• タスク駆動設計で増殖しがちな画面数を削減しながら作業効率を高める画面構造を設計できる
• 業務ドメインのオブジェクトモデリングをUI設計と接続し、開発効率・拡張性に優れた構造を選択できる
• 18のワークアウト課題を通じてOOUI設計プロセスを実践的に体験し、実務に転用できるレベルで手法を習得できる
• Atomic Designなどコンポーネントベースのフロントエンド設計にOOUIの概念を応用し、コンポーネント分割の根拠を言語化できる

ハイライト(外部からの言及)

オブジェクト（もの、名詞）を起点としてUIを設計すること。タスク（やること、動詞）を起点としたUIに比べて、画面数が減って作業効率が高まり、また開発効率や拡張性も向上する — 出典

OOUI設計がもたらす恩恵を最も端的に示しており、購買判断の軸となる本書の主張が凝縮されている

読了後にできること

Before(読む前): 機能追加のたびにタスク単位の入力フォームと確認画面が増殖し、画面遷移の複雑化を設計の問題として言語化できなかった

After(読み終えた後): 業務オブジェクトを起点に画面を整理し、画面数と遷移コストを同時に削減する設計判断ができるようになる

章立て

(公式情報未確認 — 出版社公式ページの目次が公開され次第、本セクションを更新予定)

関連記事 / 参考情報

• 【2024年版】エンジニア1年生の自分に読んでもらいたい書籍 — エンジニア入門期に読むべき技術書の高人気まとめ、UIデザイン枠でOOUIを推薦
• 【まとめ】エンジニア向けデザイン参考サイト — エンジニアがデザインを学ぶ際の書籍・サイトリソース集、本書を参考書として掲載
• 今まで読んだ技術書の中で汎用的で印象に残っているものをまとめてみる — 長年のエンジニアが選ぶ汎用的・印象に残る技術書の一冊としてOOUIを紹介
• モデリング：表からは見えないUIデザイン — UIデザインをオブジェクトモデリング視点で捉え直す考察、OOUIを主要参照として活用
• エンジニア転職して一年経つので自宅学習で使った技術書&Udemyをジャンル別に評価してみた — 転職エンジニアが実際に使った技術書をジャンル別に評価、UIデザイン枠に本書を収録
• OOUI の考え方を拝借して Atomic Design を再考してみる話 — OOUIのオブジェクト起点思想をAtomic Designのコンポーネント設計に応用した実践考察
• オブジェクト指向UIデザインとは？ プロセスもざっくりまとめた！ — 本書の理論とOOUI設計プロセスを平易にまとめた解説、2025年投稿で継続的な需要を示す
• OOUIをシフト管理サービス設計に適用していく — シフト管理ドメインにOOUIを実際に適用した設計記録、理論の実務適用事例として貴重

学習のヒント

• 前半の理論パートで「OOUIとタスク指向UIの対比」を具体例とともに腹落ちさせてから後半のワークアウトに進むと、課題の設計意図が掴みやすい。逆に後半から入ると手が動かない
• ワークアウト18課題はすべてこなすより、自分の実務ドメイン(EC・業務システム・スケジュール管理など)に近い3〜5課題を丁寧にやり抜く方が手法の体得に有効
• 現在担当しているプロダクトの画面設計と対照しながら読むと、タスク駆動設計が積み重なっている箇所が具体的に見えてくる。既存のUIを批評する視点が自然に育つ
• Atomic DesignやReact/Vueなどコンポーネントベースのフレームワークをすでに使っているエンジニアは、コンポーネント分割の命名・粒度整理にOOUIの考え方を応用する視点で読むと別の発見がある

前提知識

• WebアプリケーションもしくはデスクトップアプリのUI画面設計や実装に関与した経験(画面を設計・実装したことがある程度で可)
• HTMLのフォーム・リスト・モーダルなど基本UIコンポーネントの概念の知識
• オブジェクト指向プログラミング(OOP)の基礎概念を知っているとより理解が深まるが、プログラマーでなくても読める構成になっている

次に読む本

About Face: The Essentials of Interaction Design

OOUIの源流にあたるGoal-Directed Designを深堀りしたい場合の英語定番書。本書で得た設計思想の背景理論を補完できる

ノンデザイナーズ・デザインブック

OOUI設計で画面構造を整理した後、視覚的なレイアウト原則を補いたい時の参照書。構造設計と視覚設計を対で学べる