デザイナーとコーダーの溝を埋める
テクニカルディレクションにおけるXDの活⽤事例
2018/12/16 札幌 Adobe XD meeting #01

1

半⽥ 惇志➤ 会社：24-7/パンセ➤ テクニカルディレクター/シニアエンジニア➤ ブログ：Thinking Salad➤ 養命酒はじめました2

#SBDLFUTָ㥨ֹ麓ֺ‫ג‬劤‫׋׃ת׃⳿׾‬կ

3

13&$44‫׮‬⡲‫׋׃ת׶‬կ

00$44ծ4."$44ծ#&.‫ك׾‬٦‫׋׃חأ‬⚥鋉垷⟃♳ぢֽ$44،٦‫ٍثؙذؗ‬IUUQQSFDTTJPKB

4

テクニカルディレクターが必要な理由

マークアップ設計におけるXDの実例

これから目指すべきワークフロー

5

テクニカルディレクターが必要な理由
6

テクニカルディレクターの仕事➤ インフラの選定➤ ⾔語・フレームワークの選定➤ 要件→実装への落とし込み➤ WFのチェック➤ ミドルウェア・CMSなどの選定➤ 開発環境に使⽤する技術の選定➤ エンジニアのための情報整理

7

ひと⾔でいうとプロジェクトにおける技術的な判断と整備をする⼈8

テクニカルディレクターの仕事➤ インフラの選定➤ ⾔語・フレームワークの選定➤ 要件→実装への落とし込み➤ WFのチェック➤ ミドルウェア・システム（CMSなど）の選定➤ 開発環境に使⽤する技術の選定➤ エンジニアのための情報整理

910頻繁に編集するなら更新しやすい仕組み作る？

・⼿動更新？⾃動更新？
・ブログ？カスタム投稿タイプ？
・横⻑のやつは⾃動？⼿動指定？

11

テクニカルディレクターの仕事➤ インフラの選定➤ ⾔語・フレームワークの選定➤ 与件の実装への落とし込み➤ WFのチェック➤ ミドルウェア・システム（CMSなど）の選定➤ 開発環境に使⽤する技術の選定➤ エンジニアのための情報整理

12マークアップ設計におけるXDの実例
13

本スライドの登場⼈物

ディレクター

デザイナー

テクニカルディレクター
（TD）

コーダー

14

15

デザイナーの思考例➤ それぞれ異なるコンポーネント➤ テキストのフォントサイズは共通➤ いいね・コメント数も共通

16

コーダーの思考例➤ フォントサイズは共通➤ いいね・コメント数も共通➤ →ここの部分だけでも共通化したい

17

コーダーの思考例➤ フォントサイズは共通➤ いいね・コメント数も共通➤ →ここの部分だけでも共通化したい➤ しかしここの余⽩が明らかに異なる…

18

まずはテクニカルディレクターが⼊って、全てのコンポーネントを洗い出す

19

DEMO

20

デザインプレビューからコンポーネントにプロトタイプコーダーを迷わせない21

この案件におけるワークフロー
デザイナー

TD

コーダー

22

この案件におけるワークフロー
デザイナー

TD

コーダー

ここで分解作業をめちゃめちゃ頑張る（つらい）
XDがサクサク動くのが救い23

デザイナーとの共通認識を醸成する
デザイナー

TD

コーダー

・コンポーネント整理したらこうなったんですよ・ここの余⽩統⼀できると楽なんですけど、いいです？

24

デザイナーにフィードバックして何となく認識を合わせる

25

エレメントリストがある場合

26

DEMO
https://bit.ly/2rRRMhY

27

この案件におけるワークフロー
デザイナー

予め整理してくれた

TD

コーダー

分解作業が楽になった

28

かなりいい感じになってきた欲を⾔えばコンポーネントの粒度をもう少し揃えたい29

抽象化してコンポーネントの粒度「認識」に置き換えてみる30なぜ認識がブレるのか？
➤ 共通となる指針がない。共通認識、共通⾔語➤ ワークフローが各フェーズで断絶されている

31

これから目指すべきワークフロー
32

なぜ認識がブレるのか？
➤ 共通となる指針がない。共通認識、共通⾔語➤ ワークフローが各フェーズで断絶されている

33

http://atomicdesign.bradfrost.com/

34

35

36

37

38

39

40

41

42

43

44

45

Atomic Design Methodology実運⽤のポイント➤ あくまで理論であるため、理論に忠実すぎる必要はない➤ デザイナーとTD/コーダー間で共通認識が持てているか？が重要➤ イレギュラーはもちろんあってOK➤ ⼤事なのは「理論に則ること」ではなく「よき成果物」➤ ただし「全てがイレギュラー」はただのカオス➤ イレギュラーをあぶり出すために多数のレギュラーがある46

Atomic Design Methodology実運⽤のポイント➤ Atomic Designをそのままコンポーネント設計に反映できる訳ではない➤ コンポーネント設計としては、⼤抵下記の2つの粒度があれば事⾜りる➤ 原⼦/原⼦よりの分⼦➤ 厳密には分⼦だが、原⼦レベルに使い回したいもの➤ 分⼦/分⼦よりの有機体➤ 厳密には有機体だが、分⼦レベルに使い回したいもの➤ 有機体はコンテキストによって多くのバリエーションを⽣み出す➤ 全てのパターンを定義するのはときにナンセンス
47

なぜ認識がブレるのか？
➤ ✔ 共通となる指針がない。共通認識、共通⾔語➤ ワークフローが各フェーズで断絶されている

48

典型的な⼀⽅通⾏のワークフロー
デザイナー

TD

コーダー

TDは基本降りてくるデザインに従うしかない49

典型的な⼀⽅通⾏のワークフロー
デザイナー

TD

コーダー

現状ここは問題ないので、ここより上流の話

50

フェーズとして捉え直す
情報設計（ディレクター/IA）

デザイン（AD/デザイナー）

マークアップ設計（TD）

51

典型的な⼀⽅通⾏のワークフロー
情報設計

デザイン

マークアップ設計

思考思考

思考

52

典型的な⼀⽅通⾏のワークフロー
情報設計

デザイン

伝達思考

マークアップ設計

伝達思考

思考

53

齟齬の壁54

典型的な⼀⽅通⾏のワークフロー
情報設計

デザイン

伝達
思考

マークアップ設計

伝達思考

思考

55

典型的な⼀⽅通⾏のワークフロー
情報設計

デザイン

伝達思考

マークアップ設計

伝達思考

思考

56

典型的な⼀⽅通⾏のワークフロー
情報設計

デザイン

伝達思考

齟齬

マークアップ設計

伝達思考

齟齬
思考

57

プロジェクトの成否をかけた
⼤⼈の伝⾔ゲーム🤪

58

シンプルなプロジェクトならまだいい。
仕様が複雑になればなるほど、思考の齟齬は致命的になる59

考えてから伝えても齟齬が発⽣する

⼀緒に考える60

典型的な⼀⽅通⾏のワークフロー
情報設計

デザイン

マークアップ設計

61

⼀緒に考えるワークフロー
情報設計

デザイン

マークアップ設計

62

⼀緒に考えるワークフロー
情報設計

デザイン

マークアップ設計

メイン作業者がいつつも、インタラクティブに密にやりとりする
63

⼀緒に考えるワークフロー
情報設計

デザイン

マークアップ設計

メイン作業者がいつつも、インタラクティブに密にやりとりする
64

⼀緒に考えるワークフロー
この⽮印を実現する➤ プラットフォーム➤ 運⽤体制が必要

メイン作業者がいつつも、インタラクティブに密にやりとりする65

複数⼈での思考サイクルを早く回すには➤ プラットフォーム
➤ 軽く
➤ 早く
➤ 扱いやすく➤ ブラウザで確認できて➤ コメントを付けられる➤ = XDのプロトタイプ共有とオンラインコメント

66

複数⼈での思考サイクルを早く回すには➤ 運⽤体制➤ もっと気軽に会話する➤ もっと気軽にコミュニケーションをとる➤ = 15分でもいいので⽇次の進捗共有➤ = 常⽇頃からコミュニケーションが⽣まれやすい雰囲気をつくる➤ ⼀緒にランチに⾏く➤ 部活を発⾜する➤ ランチ画像アップ専⽤Slackチャンネル、雑談専⽤Slackチャンネル67

コミュニケーションにばかり時間を取られるのでは？

68コミュニケーションを効率化するコツ➤ ⾮同期コミュニケーションを上⼿く活⽤する➤ 事前に要点をまとめ、テキストで伝えておく➤ 必要であれば画像・動画を⽤いる。百聞は⼀⾒にしかず➤ CloudApp/Recordit➤ ⾮同期コミュニケーションの⼼得➤ https://goo.gl/c7gHyq➤ https://goo.gl/5wBMkW

69

まとめ70XDの使い道は無限⼤
マークアップ設計にも使える71

XDの真価は「本質的なコミュニケーション」を増やすことにある72コミュニケーションをはやく
正確にインタラクティブに73

XDはアートボードベースのコミュニケーションプラットフォーム
assialiholic
atsushi.handa.374