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
750
地方都市でもできる! 最新ツールと泥臭さのブランディング
assialiholic
0
510
5年先も第一線で戦えるwebディレクターであるために
assialiholic
3
770
Adobe XDで始めるAtomic Design
assialiholic
6
4.1k
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
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
300
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
210
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
150
Dive Deep into Communication
yomtsu
0
220
OLTA株式会社/デザイン紹介資料
taxy
0
120
Rayout Pattern 01
one0
0
1.5k
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
250131_product meetup
motokoishida
0
120
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
290
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
70k
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
200
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
400
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
540
The Art of Programming - Codeland 2020
erikaheidi
53
13k
How STYLIGHT went responsive
nonsquared
99
5.4k
How to Ace a Technical Interview
jacobian
276
23k
Writing Fast Ruby
sferik
628
61k
Designing for Performance
lara
605
68k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
Six Lessons from altMBA
skipperchong
27
3.6k
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