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
デザイナーとコーダの溝を埋める、テクニカルディレクションにおけるXDの活用事例
Search
assialiholic
December 16, 2018
Design
3
760
デザイナーとコーダの溝を埋める、テクニカルディレクションにおけるXDの活用事例
2018/12/16 の札幌 Adobe XD meetingで発表したスライドです。
assialiholic
December 16, 2018
Tweet
Share
More Decks by assialiholic
See All by assialiholic
人生最強のコアスキル a.k.a 開発業務から日常にまで使える最強のスキルについて
assialiholic
0
770
地方都市でもできる! 最新ツールと泥臭さのブランディング
assialiholic
0
520
5年先も第一線で戦えるwebディレクターであるために
assialiholic
3
770
Adobe XDで始めるAtomic Design
assialiholic
6
4.2k
JBUG (札幌#3) LT「大事なことはコメントだけに書くなぁ!」
assialiholic
1
1.1k
ディレクション資料をXD化してわかった、XDのメリットと課題
assialiholic
2
560
Developer meetup for beginners 「札幌ITひよこ会」 webのミライ、web屋のミライ
assialiholic
0
360
webマーケティング手段のいままでとこれから〜ボストン直輸入の新鮮ピッチピチネタをお届けします〜
assialiholic
1
540
最近よく聞くマーケティングオートメーションって?なにがいいの?
assialiholic
1
480
Other Decks in Design
See All in Design
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
150
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
120
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
390
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
490
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
130
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
350
私とデザインの10年
iflection
0
130
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.8k
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
250
AI時代に淘汰されないデザインのしごと
akinen
0
120
harutaka Vision Deck
zenkigenforrecruit
0
130
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A better future with KSS
kneath
239
17k
For a Future-Friendly Web
brad_frost
179
9.8k
Faster Mobile Websites
deanohume
307
31k
Practical Orchestrator
shlominoach
188
11k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Raft: Consensus for Rubyists
vanstee
140
7k
4 Signs Your Business is Dying
shpigford
184
22k
Gamification - CAS2011
davidbonilla
81
5.3k
Why Our Code Smells
bkeepers
PRO
337
57k
Transcript
デザイナーとコーダーの溝を埋める テクニカルディレクションにおける XDの活⽤事例 1 2018/12/16 札幌 Adobe XD meeting #01
半⽥ 惇志 ➤ ձࣾɿ24-7/ύϯη ➤ ςΫχΧϧσΟϨΫλʔ/ γχΞΤϯδχΞ ➤ ϒϩάɿThinking Salad
➤ ཆ໋ञ͡Ί·ͨ͠ 2
#SBDLFUTָ㥨ֹ麓ֺג劤⳿׃ת׃կ 3
13&$44⡲ת׃կ 00$44ծ4."$44ծ#&.ك٦أח׃ ⚥鋉垷⟃♳ぢֽ$44،٦ؗذؙثٍ IUUQQSFDTTJPKB 4
5 ϚʔΫΞοϓઃܭʹ͓͚Δ9%ͷ࣮ྫ ςΫχΧϧσΟϨΫλʔ͕ඞཁͳཧ༝ ͜Ε͔Βࢦ͖͢ϫʔΫϑϩʔ
ςΫχΧϧσΟϨΫλʔ͕ඞཁͳཧ༝ 6
テクニカルディレクターの仕事 ➤ インフラの選定 ➤ ⾔語・フレームワークの選定 ➤ 要件→実装への落とし込み ➤ WFのチェック ➤
ミドルウェア・CMSなどの選定 ➤ 開発環境に使⽤する技術の選定 ➤ エンジニアのための情報整理 7
ひと⾔でいうと プロジェクトにおける技術的な 判断と整備をする⼈ 8
テクニカルディレクターの仕事 ➤ インフラの選定 ➤ ⾔語・フレームワークの選定 ➤ 要件→実装への落とし込み ➤ WFのチェック ➤
ミドルウェア・システム(CMSなど)の選定 ➤ 開発環境に使⽤する技術の選定 ➤ エンジニアのための情報整理 9
10
11 頻繁に編集するなら 更新しやすい仕組み作る? ・⼿動更新?⾃動更新? ・ブログ?カスタム投稿タイプ? ・横⻑のやつは⾃動?⼿動指定?
テクニカルディレクターの仕事 ➤ インフラの選定 ➤ ⾔語・フレームワークの選定 ➤ 与件の実装への落とし込み ➤ WFのチェック ➤
ミドルウェア・システム(CMSなど)の選定 ➤ 開発環境に使⽤する技術の選定 ➤ エンジニアのための情報整理 12
13 ϚʔΫΞοϓઃܭʹ͓͚Δ9%ͷ࣮ྫ
本スライドの登場⼈物 14 ディレクター デザイナー テクニカルディレクター (TD) コーダー
15
デザイナーの思考例 16 ➤ それぞれ異なるコンポーネント ➤ テキストのフォントサイズは共通 ➤ いいね・コメント数も共通
コーダーの思考例 17 ➤ フォントサイズは共通 ➤ いいね・コメント数も共通 ➤ →ここの部分だけでも共通化したい
コーダーの思考例 18 ➤ フォントサイズは共通 ➤ いいね・コメント数も共通 ➤ →ここの部分だけでも共通化したい ➤ しかしここの余⽩が明らかに異なる…
まずはテクニカルディレクターが⼊って、 全てのコンポーネントを洗い出す 19
DEMO 20
デザインプレビューから コンポーネントにプロトタイプ コーダーを迷わせない 21
この案件におけるワークフロー 22 デザイナー TD コーダー
この案件におけるワークフロー 23 ここで分解作業をめちゃめちゃ頑張る (つらい) XDがサクサク動くのが救い デザイナー TD コーダー
デザイナーとの共通認識を醸成する 24 ・コンポーネント整理したらこうなったんですよ ・ここの余⽩統⼀できると楽なんですけど、いいです? デザイナー TD コーダー
デザイナーにフィードバックして 何となく認識を合わせる 25
エレメントリストがある場合 26
DEMO https://bit.ly/2rRRMhY 27
この案件におけるワークフロー 28 予め整理してくれた 分解作業が楽になった デザイナー TD コーダー
かなりいい感じに なってきた 29 欲を⾔えば コンポーネントの粒度を もう少し揃えたい
コンポーネントの粒度 30 抽象化して 「認識」 に置き換えてみる
なぜ認識がブレるのか? ➤ 共通となる指針がない。共通認識、共通⾔語 ➤ ワークフローが各フェーズで断絶されている 31
32 ͜Ε͔Βࢦ͖͢ϫʔΫϑϩʔ
なぜ認識がブレるのか? ➤ 共通となる指針がない。共通認識、共通⾔語 ➤ ワークフローが各フェーズで断絶されている 33
34 http://atomicdesign.bradfrost.com/
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
典型的な⼀⽅通⾏のワークフロー 49 TDは基本降りてくるデザインに従うしかない デザイナー TD コーダー
典型的な⼀⽅通⾏のワークフロー 50 デザイナー TD コーダー 現状ここは問題ないので、ここより上流の話
フェーズとして捉え直す 51 デザイン (AD/デザイナー) マークアップ設計 (TD) 情報設計 (ディレクター/IA)
典型的な⼀⽅通⾏のワークフロー 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はアートボードベースの コミュニケーションプラットフォーム 74 assialiholic atsushi.handa.3