Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
モデルを中心にデザイン(設計)すること
Search
かとじゅん
November 29, 2021
Design
3
3k
モデルを中心にデザイン(設計)すること
かとじゅん
November 29, 2021
Tweet
Share
More Decks by かとじゅん
See All by かとじゅん
AIコーディングエージェントの現実と設計品質の重要性
j5ik2o
0
19
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
15
7k
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
8
1.2k
メッセージとイベントを中核に置いたシステム設計の有用性について
j5ik2o
12
3.8k
私のキャリアの旅路: 技術をきっかけに変化を楽しむ
j5ik2o
3
920
いかに開発効率と品質を高めるか: ドメイン駆動設計と組織パターンの視点から考える
j5ik2o
5
2.9k
社内のメンバーに「関数型プログラミングの学習・教育」についていろいろ聞いてみた
j5ik2o
2
2.1k
AWS データベースブログの記事 「Amazon DynamoDBによる CQRSイベントストアの構築」 を勝手に読み解く
j5ik2o
2
3.2k
EIPとAkkaについて
j5ik2o
3
2.8k
Other Decks in Design
See All in Design
株式会社バクタム 会社説明資料
bactum
0
280
「UXとUIの違い」v2
shirasu3
0
180
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
220
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
340
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
120
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
#Dubois Challenge 2025: Economics
ajstarks
0
150
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
720
UXデザインはなぜ定着しないのか?
designstudiopartners
0
840
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
110
信念を持つ方法
magi1125
0
180
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.1k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
Six Lessons from altMBA
skipperchong
28
3.9k
Gamification - CAS2011
davidbonilla
81
5.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
A Tale of Four Properties
chriscoyier
160
23k
Speed Design
sergeychernyshev
32
1.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Scaling GitHub
holman
461
140k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
8
550
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Transcript
モデルを中心に デザイン(設計)すること かとじゅん( ) 2021/11/29 デザイナー向け社内勉強会 @j5ik2o 1
自己紹介 Chatwork社 テックリード @j5ik2o 2
今日のテーマ 何を手がかりにシステムを デザイン(設計)するのか 3
タッチパネル式の券売機 出典:オブジェクト指向UIデザイン 4
タスク VS オブジェクト 何を目当てにしてデザインするのか タスク=やること、オブジェクト=関心の対象、どちらが先か タスク中心よりオブジェクト中心であることが求められる 出典:オブジェクト指向UIデザイン 登録する 確認する 修正する
削除する 感想⽂を書く リストにしてみる 出版社別に並べてみる My Books タスク中心の設計 ➡各画面へ オブジェクト中心の設計 検索キーワード Scala関数型デザイン&プログラミング 実践Rustプログラミング⼊⾨ エリック・エヴァンスのドメイン駆動設計 オブジェクト指向存在論⼊⾨ 技術とは何だろうか-三つの講演 My Books ↓ タイトル エリック・エヴァンスのドメイン駆動設計 著者 エリック・エヴァンス 出版社 出版⽇ 感想⽂ Book 5
FYI: オブジェクトとは オブジェクトとは概念のこと(イミフ?) オブジェクトは「世界」だとか「論理空間」だと言っている に等しい。つまり全部を表しているので意味が分からないと なりやすい まずは「ある関心の対象」という程度の理解でよい 6
オブジェクトを中心に設計する 出典:オブジェクト指向UIデザイン タスク タスク タスク オブジェクト タスク タスク タスク オブジェクト
7
UIはユーザとオブジェクトを 接続する情報空間 オブジェクト指向設計では、ユーザが持っている関心対象につい ての構造的概念=メンタルモデルをコンピュータの中で模式的に 再現する。 Chatworkの場合は、ユーザがメッセージという概念を持ってい るなら、その概念のままプログラム中に情報単位として再現す る。これが「オブジェクト」です。 出典:オブジェクト指向UIデザイン 8
ユーザにおけるオブジェクトの価値 ユーザーはインターフェースを、それを描く元となるデータとビ ジネスの世界についてのモデルとの間に経路を作るために使用す る 適切に設計されたプログラムは、データモデルにおいてうまく情 報モデルをとらえるし、少なくてもそのようにしているという幻 想を与える そういうことをソフトウェアができるならば、ユーザーはコンピ ューターのメモリが、自分の記憶の延長であるように感じる 出典:
より 出典:オブジェクト指向UIデザイン トリグヴェ・リーンスカウク、ジェームズ・コプリエン 「DCIアーキテクチャ」 9
ソフトウェアデザインのレイヤー 出典:オブジェクト指向UIデザイン ユーザが目にするGUIはオブ ジェクトを反映したものであ り、内部のデータモデルはユ ーザのメンタルモデルを反映 したものになる 優れたUIは人と一体化する 人が箸(UI)を自在に操って 食べ物(オブジェクト)を口
へと運ぶ 人がヴァイオリン(UI)を自 在に操って自在に音(オブ ジェクト)を操る プレゼンテーション インタラクション モデル 10
ソフトウェアデザインの構成要素 出典:オブジェクト指向UIデザイン プレゼンテーション インタラクション モデル モデル ソフトウェアデザインの基盤となる層で、 デザイン全体の60%を占めると言われてい る インタラクション
ソフトウェアデザインの構造と機能に関する層で、モデルとプレゼ ンテーションを繋ぐ仕組み プレゼンテーション ソフトウェアデザインの表層で、インタラクションのメカニズムを 様々なUI表現によってユーザに示す 11
モデルとは何か? オブジェクトと関係は? モデルは、問題や課題を解決する考え方 オブジェクトは、モデルを反映した実装 12
FYI: 具体例としてのMVC 考案者 トリグヴェ氏曰く、「モデルは知識の表層です」とした MVCの目的は、人間であるユーザーのメンタルモデルとコンピ ュータの中にあるデジタルなモデルとの間にあるギャップを埋め ること 理念的なMVCのソリューションは、ユーザーがドメインの情報 を直接的に視認して操作しているという幻想を支える 13
モデルとデザイン(1/2) 本来はあるべき形のUIを最優先に検討するべき、その裏の構造 はプレゼンテーションとメンタルモデルの間の整合を取るための ものにすぎない デザインの目的は形である とはいえ、構造的な根拠がないとソフトウェアとしてインタラク ティブな表現ができない。プレゼンテーションやインタラクショ ンの表現の妥当性はモデルがないと検証できない その形を検証する必要がある この両面の視点でいったりきたりしなければならない
14
FYI: ダイナブック構想とモデル 出典: 「あらゆる年齢の「子供たち」のためのパーソナ ルコンピュータ」にてダイナブックという構想= ダイナブック構想を考案した アラン・ケイ曰く 特に若年の子供においてはそうですが、知識は 一連の操作モデル として保持されます。
それぞれのモデルはアドホックで、他のモデル と論理的に一貫している必要はありません(そ れらは本質的にアルゴリズムやストラテジであ って、論理的公理や述語、定理ではない)。 論理が使用されるようになるのは発達段階のずっと後半 で、そ の段階でも論理を超えたストラテジが取られ続けます。 https://swikis.ddo.jp/abee/74 15
モデルとデザイン(2/2) 「論理が使用されるようになる」とは記号操作のこと。その前に 「動作的」「映像的」な操作モデルが構築されるとしている。 16
モデルとは何か? オブジェクトと関係は? モデルは、問題や課題を解決する考え方 オブジェクトは、モデルを反映した実装 17
モデルの例 おもちゃの車 現実の車から「走らせて遊 ぶ」という概念だけを抜き 出して表現 メルカトル図法 極の面積は大きくなるが角 度が正しい 航海士のための地図 18
目当てのモデル=ドメインモデル 出典:『エリック・エヴァンスのドメイン駆動設計』 モデルにはいろいろなものがある。 プレゼンテーションのモデル データベースのモデル ここでいうモデルとは、お目当てのモデ ル、問題領域(ドメイン)のモデルであるド メインモデルのこと ドメインモデルとは 人間が扱う意味のある概念。問題や課題を解決する考え方の
こと 現実世界の仕組みを説明するための簡素化された表現 現実世界の事象は複雑なので、人間の限られた認知能力で扱 えるように、重要ではない部分を削ぎ落としシンプルにする 19
ドメインモデルの例 チャットルーム メンバー同士でメッセージを交換できるコミュニケーション の場 チャットルームには管理者が最低1名以上必要 管理者 コンタクトを持つ、ユーザーをメンバーとしてチャットルー ムに追加/削除できる メンバーを管理者に昇格できる(降格もできる) メンバー
メンバーは参加するチャットルームでメッセージを投稿/編 集/削除できる これはCHATWORKのドメインモデルだが 他のサービスだと異なる形になる 20
モデルを反映したオブジェクトを 実装する ソフトウェア開発において、問題や課題を解く考え方=モデルを 「オブジェクト」(ソフトウェア部品)として反映する設計スタイ ルが利用される。代表格はドメイン駆動設計(DDD) モデルを反映したオブジェクトのイメージ 21
オブジェクトは静的とは限らない 22
モデルはプロジェクト活動も支える 開発初期は簡単でも追加要件 などによりソフトウェアが複雑 になった場合は、頼れるドメイ ンモデルがないと複雑さに圧倒 されてしまう 意思疎通のコアにドメインモ デルを使う。プロジェクト全体 に浸透させる。会話、ドキュメ ント、図、アーキテクチャ、コ
ードにも。そしてUI/UXにも ドメインモデル ドキュメント アーキテクチャ 会話 コード 図 UI/UX 23
FYI: 皮むき機 VS ナイフ ユーザの要求に合わせようとするとモーダルになりがち。新たな道 具の存在が要求のあり方を変えてしまう。 デザインにユーザー側が合わせられるように、デザインを無為な形 に保つこと。在るが儘の目当てを模式化してユーザーに送り戻す。 OOUIにはそういった基本的な考え方がある。 出典:オブジェクト指向UIデザイン
皮むき機は抽象度が低い (モーダル) ナイフは抽象度が高い (モードレス) 24
まとめ デザインの究極の目的は形であるが、モデルが不在では使えるも のになるか検証できない 形とモデルの両面で追究してくいく必要がある。特に価値を生み 出す動くソフトウェアとの親和性を考えるとモデルを中心にした 設計は効果的 形 ー モデル ー
オブジェクト の関係性を、プロダクトチーム全 体の活動にしていく必要がある 25
終わり 26