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
3.2k
モデルを中心にデザイン(設計)すること
かとじゅん
November 29, 2021
Tweet
Share
More Decks by かとじゅん
See All by かとじゅん
CQRS/ESになぜアクターモデルが必要なのか
j5ik2o
0
1.4k
メッセージ駆動が可能にする結合の最適化
j5ik2o
10
4.7k
曖昧なプロンプトでも正しいコードが書ける理由
j5ik2o
0
450
AIコーディングエージェントの現実と設計品質の重要性
j5ik2o
0
130
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
17
7.9k
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
8
1.5k
メッセージとイベントを中核に置いたシステム設計の有用性について
j5ik2o
12
4.2k
私のキャリアの旅路: 技術をきっかけに変化を楽しむ
j5ik2o
3
1.1k
いかに開発効率と品質を高めるか: ドメイン駆動設計と組織パターンの視点から考える
j5ik2o
5
3.1k
Other Decks in Design
See All in Design
kintone Style Book
kintone
6
9.9k
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
130
Correspondence:共に生成していく過程
akiramotomura
0
180
公開スライド)熊本市様-電子申請中級編
garyuten
0
740
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
1
180
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
1k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
780
アイデアを加速させる!Firefly ボードで発想の幅を広げよう
connecre
1
290
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
saka2jp
2
770
モビリティプラットフォームの未来を築くクラウド基盤
kossykinto
0
200
mount_company_profile
mount_inc
0
4.7k
DMMデザイナーの “AI活用の現在と未来”
takumasaito
1
420
Featured
See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
59
42k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
1
1.4k
Automating Front-end Workflow
addyosmani
1371
200k
So, you think you're a good person
axbom
PRO
2
1.9k
A Tale of Four Properties
chriscoyier
162
24k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
170
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.4k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
110
Abbi's Birthday
coloredviolet
1
4.6k
GraphQLの誤解/rethinking-graphql
sonatard
74
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.4k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
280
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