Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
モデルを中心にデザイン(設計)すること
Search
かとじゅん
November 29, 2021
Design
3
3.2k
モデルを中心にデザイン(設計)すること
かとじゅん
November 29, 2021
Tweet
Share
More Decks by かとじゅん
See All by かとじゅん
メッセージ駆動が可能にする結合の最適化
j5ik2o
9
1.8k
曖昧なプロンプトでも正しいコードが書ける理由
j5ik2o
0
400
AIコーディングエージェントの現実と設計品質の重要性
j5ik2o
0
110
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
16
7.6k
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
8
1.4k
メッセージとイベントを中核に置いたシステム設計の有用性について
j5ik2o
12
4.1k
私のキャリアの旅路: 技術をきっかけに変化を楽しむ
j5ik2o
3
960
いかに開発効率と品質を高めるか: ドメイン駆動設計と組織パターンの視点から考える
j5ik2o
5
3k
社内のメンバーに「関数型プログラミングの学習・教育」についていろいろ聞いてみた
j5ik2o
2
2.2k
Other Decks in Design
See All in Design
Figmaレクチャー会Part1 基本のき編@千株式会社 社内勉強会
designer_no_pon
0
150
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
12k
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.6k
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
170
Vibe Coding デザインシステム
poteboy
3
1.5k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
3.2k
Installing and Running decksh/pdfdeck
ajstarks
1
890
Ralph Penel Portfolio
ralphpenel
PRO
0
110
Memory Man v3 (WIP)
storybychad
PRO
0
2.9k
佐藤千晶|ポートフォリオ
chimi_chia
0
300
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
250
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
130
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
RailsConf 2023
tenderlove
30
1.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.2k
Producing Creativity
orderedlist
PRO
348
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Bash Introduction
62gerente
615
210k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
A designer walks into a library…
pauljervisheath
210
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
690
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Stop Working from a Prison Cell
hatefulcrawdad
273
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