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
740
デザイナーとコーダの溝を埋める、テクニカルディレクションにおける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
710
地方都市でもできる! 最新ツールと泥臭さのブランディング
assialiholic
0
500
5年先も第一線で戦えるwebディレクターであるために
assialiholic
3
760
Adobe XDで始めるAtomic Design
assialiholic
6
4k
JBUG (札幌#3) LT「大事なことはコメントだけに書くなぁ!」
assialiholic
1
980
ディレクション資料をXD化してわかった、XDのメリットと課題
assialiholic
2
550
Developer meetup for beginners 「札幌ITひよこ会」 webのミライ、web屋のミライ
assialiholic
0
340
webマーケティング手段のいままでとこれから〜ボストン直輸入の新鮮ピッチピチネタをお届けします〜
assialiholic
1
510
最近よく聞くマーケティングオートメーションって?なにがいいの?
assialiholic
1
450
Other Decks in Design
See All in Design
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
400
インターフェースのユーザビリティ概論および調査手法について
readymadegogo
0
180
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
740
富山デザイン勉強会_デザイナーの打ち合わせ術_打ち合わせをクリエイティブな時間にする方法.pdf
keita_yoshikawa
1
100
我做了一個詐騙網站...嗎?
crboy
1
140
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
1
330
Первая беседа о Карте реализации историй
ashapiro
0
230
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
390
root COMPANY DECK / We are hiring!
root_recruit
1
14k
Fleet Gas Station
joshtang
0
130
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
690
3 Reasons Why I Got into Design
harukausui
1
150
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
38
7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
46
4.9k
The Mythical Team-Month
searls
218
43k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Designing for Performance
lara
604
68k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Statistics for Hackers
jakevdp
796
220k
Automating Front-end Workflow
addyosmani
1365
200k
From Idea to $5000 a Month in 5 Months
shpigford
381
46k
Six Lessons from altMBA
skipperchong
26
3.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
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