MaruLaboの浅海ゼミでの講座のスライドです。 https://www.marulabo.net/docs/asami29/ OOAD(Object-Oriented Analysis & Design)の観点から、OOADにおけるUI設計の位置付けを整理します。 本講座ではOOADの基本となるUP(Unified Process)をベースにしていますが、コンシュマー向けWebシステムのUI開発ではアジャイル開発やUCD(User Centered Design)、情報アーキテクチャの活用が有効です。 これらの複数のパラダイムをどのように組み合わせてOOAD開発とUI設計を進めていくのか考えていきます。

1. 設計/ UX/UI設計
2023年11⽉16⽇
浅海智晴
クラウドアプリケーションのための
オブジェクト指向分析設計講座
第29回
作業分野

2. SimpleModeling2021
• オブジェクト指向分析設計での共通範囲
• UML/UP
• 本講座で使⽤するUMLプロファイル
• プロファイル：SimpleModeling2021 (SM2021)
• オブジェクト指向分析設計の基本からの拡張部を明確化
• アジャイル開発
• Communication
• Embrace Change
• Travel Light
• Scaling
• Component-Based Development
• クラウド・アプリケーション
• モデル駆動開発
SM2021
Travel Light
Embrace Change
Cloud
Model-Driven
Scaling
CBD
Testability
Serviceability
• ⾮機能要件
• Testability
• Serviceability

3. 第1部 基本編の構成(1)
• 概論 [第1回]
• 開発プロセス [第2回]
• 基本モデル [第3回]
• 静的モデル(1) [第4回]
• 静的モデル(2) [第5回]
• 動的モデル [第6回]
• 協調モデル [第7回]
• 関数モデル [第8回]
• 物理モデル [第9回]
• 作業分野 [第10回]
• ビジネス・モデリング [第11回]
• 要求 [第12回]
• 要求/ユースケース [第13回]
• 要求/シナリオ [第14回]
• 分析 [第15回]
• 分析/コンポーネント分析 [第16回]
• 分析/イベント駆動 [第17回]
• 作業分野
• 設計 [第18回]
• 設計/アーキテクチャ設計 [第19回]
• 設計/コンポーネント設計(1) [第20回]
• 設計/コンポーネント設計(2) [第21回]
• 設計/コンポーネント設計(3) [第22回]
• 設計/ドメイン設計(1) [第23回]
• 設計/ドメイン設計(2) [第24回]
• 設計/ドメイン設計(3) [第25回]
• 設計/ドメイン設計(4) [第26回]
• 設計/ドメイン設計(5) [第27回]
• 設計/原理 [第28回]
• 設計/ UX/UI設計 [第29回]
• 実装 [第30回]
• テスト [第31回]

4. 第1部 基本編の構成(2)
• アプリケーション・アーキテクチャ [第32回]
• ドメイン・モデル [第33回]
• アプリケーション・モデル [第34回]
• プレゼンテーション・モデル [第35回]
• ケーススタディ[第36回]
• 要求モデル [第37回]
• 分析モデル [第38回]
• 設計モデル [第39回]
• 実装 [第40回]
• テスト [第41回]

5. 本講座のアプローチ
• オブジェクト指向分析設計の基本を確認
• UML + UP(Unified Process)
• CBD (Component-Based Development)
• 最新技術でアップデート
• クラウド・コンピューティング
• イベント駆動、分散・並列
• ビッグデータ、AI、IoT
• コンテナ
• 関数型
• OFP(Object-Functional Programming), Reactive Streams
• ルール, AI
• DevOps
• アジャイル開発
• DX (Digital Transformation)
第25回 アプリケーション・アーキテクチャ
第2回 開発プロセス
第9回 物理モデル
第11回 ビジネス・モデリング
第2部 クラウド・アプリケーション編
第21回 設計/ドメイン設計
第20回 設計/コンポーネント設計
第2部 クラウド・アプリケーション編

6. 原理 (Principle)
• Agile Software Development [ASD]
• SRP (The Single Responsibility Principle)
• OCP (The Open-Close Principle)
• LSP (The Liskov Substitution Principle)
• …
• GRASP (General Responsibility Assignment Software Patterns or principles)
• Low Coupling
• High Cohesion
• …
• Writing Effective Use Cases [WEUC]
• Scope
• …

7. パターン (Pattern)
• Design Patterns [DP]
• Observer, Strategy, …
• Domain Driven Design [DDD]
• Ubiquitous Language, Intention-
Revealing Interfaces, …
• Analysis Patterns [AP]
• Party, Quantity, …
• Pattern-Oriented Software
Architecture [POSA]
• Layers, Pipes and Filters, …
• Patterns of Enterprise
Application Architecture [PEAA]
• Unit of Work, Data Transfer Object,
…
• Enterprise Integration Patterns
[EIP]
• Message Bus, Aggregator, …
• Patterns for Effective Use
Cases [PEUC]
• CompleteSingleGoal,
VerbPhraseName, …
• AntiPatterns [AnP]
• Stovepipe System, Analysis
Paralysis, …

8. 内容
• UI設計の論点
• UX(User Experience)
• 情報アーキテクチャ
• UCD & OOAD

9. 本講座のUX/UI設計に対するアプローチ
• UI設計の詳細には踏み込まない
• OOADの観点から、OOADにおけるUI設計の位置付けを整理
• Web系技術との接点をさぐる
• 要求モデルの選択
• Webコンテンツとサービスの実現⽅法

10. UI設計の論点

11. UI設計の論点
• 実現⽅法
• アプリケーションの⽬的
• 利⽤者
• 利⽤シーン
• 画⾯サイズ
• アプリケーション機能

12. 実現⽅法
• CUI (Character User Interface)
• 開発者向けの端末UI
• メインフレームなどの業務端末
• GUI (Graphical User Interface)
• プラットフォーム固有機能を使⽤したグラフィカル機能を⽤いたUI
• WindowsやMacのアプリケーション
• iPhone/iPadやAndroidなどのモバイル・アプリケーション
• WebUI (Web User Interface)
• Web(HTML&JavaScript)を⽤いたUI

13. アプリケーションの⽬的
• 情報公開
• Webアプリケーションの場合、振る舞いは伴わずコンテンツの公開を
⾏うだけのものがある
• UI設計はコンテンツの配置やナビゲーション、画⾯設計になる
• サービス提供
• 定型業務
• ビジネス・モデリングで抽出した定型処理が効率よく遂⾏できる観点でUI設計が
⾏われる
• ⾮定型業務
• 利⽤者からの⾃由な利⽤も想定したUI設計が必要

14. 利⽤者
• ビジネス・ユーザー
• ビジネス・システム内のロールを遂⾏するユーザー
• ビジネス・モデリングで抽出した定型業務/⾮定型業務が効率よく実⾏
できる観点でUI設計が必要
• コンシュマー
• 利⽤者の⽬的や使⽤⽅法が多岐にわたるため、これらの要因を想定し
たUI設計が必要

15. 利⽤シーン
• 会社でデスクトップ
• キーボード＆マウス
• 資料作成などの更新作業
• コミュニケーション
• 居間でタブレット
• タッチパネル
• 情報閲覧
• コミュニケーション
• モバイル
• タッチパネル
• 情報閲覧
• コミュニケーション
• 位置情報を活⽤

16. 画⾯サイズ
• 種類
• デスクトップ
• タブレット
• スマートフォン
• 画⾯サイズごとに利⽤シーン、利⽤者の⽬的が異なる
• 画⾯サイズごとに画⾯設計の⽅針も異なる

17. アプリケーション機能
• アプリケーション機能の種類(代表例)
• アプリケーション本体
• 管理コンソール
• 分析ダッシュボード
• アプリケーション機能の種類ごとにUI設計の⽅針が異なる
• アプリケーション本体に加えて、運⽤管理やビジネス上の分析
機能といったアプリケーション機能が必要で、それぞれにUIが
必要なる

18. UX (User Experience)

19. ユーザビリティ (Usability)
• 特定のユーザが特定の利⽤状況において，システム，製品⼜は
サービスを利⽤する際に，効果，効率及び満⾜を伴って特定の
⽬標を達成する度合い。(JIS Z 8521:2020 (ISO 9241-11:2018))
• 有効さ
• 効率
• 満⾜度
• 利⽤状況

20. UX (User Experience)
• ユーザーが製品、システム、サービスとの相互作⽤によって得
られる体験
• 有⽤性 (utility)
• 使いやすさ (ease of use)
• 効率性 (efficiency)

21. UCD (User Centered Design)
• HCD (Human Centered Design) : ISO 9241-210:2010
• 開発プロセスのフレームワーク
• 開発対象
• 製品、サービス、プロセス
• 要素
• ユーザビリティの⽬標
• ユーザーの特性、環境、タスク、ワークフロー

22. 情報アーキテクチャ

23. 情報アーキテクチャ
• IA (Information Architecture)
• 共有された情報環境の構造設計
• ⾒つけやすさや使いやすさをサポートするWebサイト、イント
ラネット、オンライン・コミュニティ、ソフトウェアの組織化、
ラベリング、検索、ナビゲーション

24. Webシステムの構造

25. UCDを実現するアーキテクチャ例
『The Elements of User Experience』

26. UCD & OOAD

27. UCD & OOAD
• UCD (User Centered Design)
• OOAD (Object-Oriented Analysis & Design)
• Webアプリケーション開発での組み合わせ
• ポイント
• 要求モデルの選択
• Webコンテンツとサービスの実現⽅法

28. 三層アーキテクチャ
再掲 第19回 アーキテクチャ設計

29. 要求モデル

30. 要求モデル
• OOADの要求モデルに対応するUCDの分析モデルについて⽐較
します
• 利⽤者分析
• シナリオ分析

31. 利⽤者分析
• OOAD (UML/UP)
• アクター
• OOAD (アジャイル)
• ユーザー
• UCD
• ペルソナ

32. シナリオ分析
• OOAD(UML/UP)
• ユースケース
• OOAD(アジャイル)
• ユーザー・ストーリー
• ユースケースの軽量版
• オン・サイト・カスタマーと併⽤
• UCD
• 構造化シナリオ
• 価値のシナリオ
• ⾏動のシナリオ
• 操作のシナリオ
• カスタマー・ジャーニー・マップ
• ペルソナの体験のさまざまな要素を⼀枚のマップに記述

33. 開発プロセスとモデル

34. ユースケース vs ユーザー・ストーリー
• ユースケース
• 出⾃：OOAD (OOSE) → UML/UP
• ユーザの⽬的を達成するための物語
• 要求仕様を軽量級から重量級の詳細度で記述することができる
• ユーザー・ストーリー
• 出⾃：アジャイル開発 (XP)
• ユーザの⽬的を達成するための物語を完結に記述
• オン・サイト・カスタマーと併⽤

35. アクター vs ペルソナ
• アクター
• 出⾃：OOAD(OOSE)→UML/UP
• ビジネス・システムの中で定められたロール
• ロールに割り当てられた⽬的を達成するためにシステムを利⽤
• ペルソナ
• 出⾃：UCD
• Webサイトを利⽤するコンシュマー
• コンシュマーの⽬的を達成するためにシステムを利⽤
• コンシュマーの⽬的のモデル
• コンシュマーの⽬的を達成するシナリオはコンシュマーに依存する

36. 本講座のアプローチ
• コンシュマー向けのWebサイトの分析ではUCDを⽤いる
• コンシュマーの特性の詳細な分析が有効
• 業務アプリケーションの分析ではUPを⽤いる
• アクターの定義で⼗分な分析ができる
• オン・サイト・カスタマーによって詳細なモデリングが不要な場合は
ユーザー・ストーリーを⽤いることも可能
• コンシュマー向けのWebサイトの場合でも、管理コンソールや
分析ダッシュボードなどのビジネス・システム内部で使⽤する
ビジネス・アプリケーションはアクター＆ユースケースを⽤い
る

37. 分析・設計

38. 分析・設計
• コンシュマー向けアプリケーションの場合は、ペルソナ＆構造
化シナリオなどの形でシナリオ・モデルが作成される
• 業務向けアプリケーションでは、アクター＆ユースケース(また
はユーザー・ストーリー)の形でシナリオ・モデルが作成される
• いずれの場合もシナリオ・モデルが作成されので、ここからシ
ナリオ分析でOOADに合流することができる

39. UIアンチ・パターン

40. UIとサービス

41. 要求モデルとUCD&OOAD

42. 本講座のアプローチ
• Webのコンテンツ設計はUCD
• Webのサービス設計はUCD&OOAD
• アプリケーション層、ドメイン層の分析設計はシナリオ・モデ
ルからシナリオ分析でOOADに合流する

43. まとめ
• UX(User Experience)
• 情報アーキテクチャ
• UCD & OOAD
• 要求
• コンシュマー向けアプリケーションはUCD
• 業務アプリケーションはOOAD
• 分析
• アプリケーション層、ドメイン層の分析設計はシナリオ・モデルからシナリオ分
析でOOADに合流する

44. 参考⽂献
• The Unified Modeling Language Reference Manual,
2nd (Rumbaugh他, 2004)
• The Unified Modeling Language User Guide, 2nd
(Booch他, 2004)
• The Unified Software Development Process
(Jacobson他, 1999)
• The Object Constraint Language, 2nd (Warmer他,
2003)
• UML 2 and the Unified Process: Practical Object-
Oriented Analysis and Design (Arlow他, 2005)
• OMG Unified Modeling Language Version 2.5
(OMG, 2015)
• 上流⼯程UMLモデリング (浅海, 2008)
• Usability Engineering (Nielsen, 1993)
• The User is Always Right : A Practical Guide to
Creating and Using Personas for the Web. (Mulder,
2007)
• Information Architecture 100 : ユーザーエクスペ
リエンスのための情報アーキテクチャ設計 :
(⻑⾕川, 2009)
• Designing with the Mind in Mind : Simple Guide to
Understanding User Interface Design Rules
(Johnson, 2010)
• The Elements of User Experience : User-Centered
Design for the Web and Beyond, 2nd (Garret, 2011)
• IA/UXプラクティス : モバイル情報アーキテク
チャとUXデザイン (坂本, 2016)
• Web制作者のためのUXデザインをはじめる本 :
ユーザビリティ評価からカスタマージャー
ニーマップまで (⽟飼他, 2016)