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
750
デザイナーとコーダの溝を埋める、テクニカルディレクションにおける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
760
地方都市でもできる! 最新ツールと泥臭さのブランディング
assialiholic
0
510
5年先も第一線で戦えるwebディレクターであるために
assialiholic
3
770
Adobe XDで始めるAtomic Design
assialiholic
6
4.2k
JBUG (札幌#3) LT「大事なことはコメントだけに書くなぁ!」
assialiholic
1
1k
ディレクション資料をXD化してわかった、XDのメリットと課題
assialiholic
2
550
Developer meetup for beginners 「札幌ITひよこ会」 webのミライ、web屋のミライ
assialiholic
0
350
webマーケティング手段のいままでとこれから〜ボストン直輸入の新鮮ピッチピチネタをお届けします〜
assialiholic
1
530
最近よく聞くマーケティングオートメーションって?なにがいいの?
assialiholic
1
470
Other Decks in Design
See All in Design
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
170
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
150
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5.2k
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
130
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
2
170
LLMによるRAG評価用合成テストデータの生成
licux
6
810
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
10k
How to go from research data to insights?
mastervicedesign
0
250
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
280
Goodpatch Tour💙 / We are hiring!
goodpatch
31
810k
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
440
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
210
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
16
1.1k
How to Ace a Technical Interview
jacobian
276
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Become a Pro
speakerdeck
PRO
27
5.2k
Scaling GitHub
holman
459
140k
GraphQLとの向き合い方2022年版
quramy
45
14k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.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