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
770
デザイナーとコーダの溝を埋める、テクニカルディレクションにおける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
790
地方都市でもできる! 最新ツールと泥臭さのブランディング
assialiholic
0
520
5年先も第一線で戦えるwebディレクターであるために
assialiholic
3
780
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
550
最近よく聞くマーケティングオートメーションって?なにがいいの?
assialiholic
1
490
Other Decks in Design
See All in Design
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.2k
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
390
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
140
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
850
UXデザインはなぜ定着しないのか?
designstudiopartners
0
1k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.6k
decksh object reference
ajstarks
2
1.3k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.7k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
280
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
860
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.2k
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.8k
Navigating Team Friction
lara
189
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Balancing Empowerment & Direction
lara
4
680
Music & Morning Musume
bryan
46
6.8k
Designing for Performance
lara
610
69k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Cult of Friendly URLs
andyhume
79
6.6k
Writing Fast Ruby
sferik
629
62k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Become a Pro
speakerdeck
PRO
29
5.5k
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