Slide 1
Slide 1 text
時 間 が な い デ ィ レ ク タ ー の た め の 雑 な 活 用 法
2 0 1 8 0 2 1 9 ｜ A d o b e X D M e e t i n g # 1 3 ｜ U X M I L K 三 瓶 亮
Slide 2
Slide 2 text
三 瓶 亮
UX MILK (MINER STUDIO Inc.)
編集長 / プロデューサー
3mp brainmosh
1983年生まれ。東京生まれアメリカ育ち。
今の仕事に就く前は、ソシャゲのディレクター/デザイナーとかやっ
てました。
3年前くらいにUX MILK立ち上げました。
※UXやデザインに関しては勉強中ですので優しくしてください。
Slide 3
Slide 3 text
C A U T I O N
こ の プ レ ゼ ン で は X dのイケてるテクとか特 に でて き
ま せ ん 。 予 め ご 了 承ください。
Slide 4
Slide 4 text
C A U T I O N 2
X d に 関 し て は ろ く に使い方読まずに実務で使 い 始め て
し ま っ た た め 、 知 らない機能が多々ありま す。
（ あ る 意 味 す ご い ぞX d！）
い ろ い ろ 教 え て く ださい…
Slide 5
Slide 5 text
T O D A Y ’ S T O P I C
デ ィ レ ク タ ー 観 点 からみるAdobe X D
＝ ワ ー ク フ ロ ー 、 コミュニケーション重点
Slide 6
Slide 6 text
U X M I L K の 制 作 現 場 に つ い て
Slide 7
Slide 7 text
W H A T W E D O ｜ 何 を や っ て い る の か
PROJECT UX MILK
メ デ ィ ア イ ベ ン ト サ ー ビ ス
U X 界 隈 の 情 報 を
発 信 す る サ イ ト
U X デ ザ イ ン の 勉 強 会
と い う か 飲 み 会
ク リ エ イ タ ー 限 定 の
転 職 サ ー ビ ス
Slide 8
Slide 8 text
W H A T W E D O ｜ 何 を や っ て い る の か
Slide 9
Slide 9 text
W H A T W E D O ｜ 何 を や っ て い る の か
Slide 10
Slide 10 text
W H A T W E D O ｜ 何 を や っ て い る の か
Slide 11
Slide 11 text
ソ ー モ リ
フ ル ス タ ッ ク っ ぽ い
エ ン ジ ニ ア
イ ワ ヤ マ さ ん
企 画 も コ ー ド も 触 れ る
ス ー パ ー デ ィ レ ク タ ー
T E A M U X M I L K ｜ だ れ が や っ て い る の か
サ ン ペ イ
デ ザ イ ン も 結 構 や る
プ ロ デ ュ ー サ ー
Slide 12
Slide 12 text
ソ ー モ リ
フ ル ス タ ッ ク っ ぽ い
エ ン ジ ニ ア
イ ワ ヤ マ さ ん
企 画 も コ ー ド も 触 れ る
ス ー パ ー デ ィ レ ク タ ー
サ ン ペ イ
デ ザ イ ン も 結 構 や る
プ ロ デ ュ ー サ ー
T E A M U X M I L K ｜ そ れ ぞ れ の 担 当
企 画 ・ U X 設 計
フ ロ ン ト エ ン ド
U I デ ザ イ ン
ビ ジ ュ ア ル デ ザ イ ン
デ ー タ 分 析
広 告
バ ッ ク エ ン ド
情 報 設 計
イ ベ ン ト 企 画 ・ 運 営 イ ベ ン ト 運 営
編 集 ・ 執 筆 ・ 校 正
営 業 ・ 広 告 提 案
メ デ ィ ア
サ ー ビ ス
イ ベ ン ト
Slide 13
Slide 13 text
ソ ー モ リ
フ ル ス タ ッ ク っ ぽ い
エ ン ジ ニ ア
イ ワ ヤ マ さ ん
企 画 も コ ー ド も 触 れ る
ス ー パ ー デ ィ レ ク タ ー
サ ン ペ イ
デ ザ イ ン も 結 構 や る
プ ロ デ ュ ー サ ー
企 画 ・ U X 設 計
フ ロ ン ト エ ン ド
U I デ ザ イ ン
ビ ジ ュ ア ル デ ザ イ ン
デ ー タ 分 析
広 告
バ ッ ク エ ン ド
情 報 設 計
イ ベ ン ト 企 画 ・ 運 営 イ ベ ン ト 運 営
編 集 ・ 執 筆 ・ 校 正
営 業 ・ 広 告 提 案
T E A M U X M I L K ｜ そ れ ぞ れ の 担 当
Slide 14
Slide 14 text
M A N A G I N G T A S K S ｜ タ ス ク マ ネ ー ジ メ ン ト
ア ジ ャ イ ル も ど き な 開 発 体 制 、 毎 週 ス プ リ ン ト を 行 っ て タ ス ク 整 理 を す る
通 常 、 設 計 ・ デ ザ イ ン に か け
ら れ る 時 間 は 週 に ２ ～ ３ 時 間
開 発 が 止 ま ら な い よ う に 必 死
ぶ っ ち ゃ け X d な か っ た ら
死 ん で た
Slide 15
Slide 15 text
U X M I L K チ ー ム で の ワ ー ク フ ロ ー
Slide 16
Slide 16 text
ソ ー モ リ
フ ル ス タ ッ ク っ ぽ い
エ ン ジ ニ ア
イ ワ ヤ マ さ ん
企 画 も コ ー ド も 触 れ る
ス ー パ ー デ ィ レ ク タ ー
サ ン ペ イ
デ ザ イ ン も 結 構 や る
プ ロ デ ュ ー サ ー
H O W W E M A K E ｜ ワ ー ク フ ロ ー
０ ｜ 施 策 開 始
１ ｜ ワ イ ヤ ー フ レ ー ム 確 認 ＆ F B
２ ｜ デ ザ イ ン 確 認 ＆ F B
実 装
３ ｜ カ イ ゼ ン
Slide 17
Slide 17 text
ソ ー モ リ
フ ル ス タ ッ ク っ ぽ い
エ ン ジ ニ ア
イ ワ ヤ マ さ ん
企 画 も コ ー ド も 触 れ る
ス ー パ ー デ ィ レ ク タ ー
サ ン ペ イ
デ ザ イ ン も 結 構 や る
プ ロ デ ュ ー サ ー
H O W W E M A K E ｜ ワ ー ク フ ロ ー
０ ｜ 施 策 開 始
１ ｜ ワ イ ヤ ー フ レ ー ム 確 認 ＆ F B
２ ｜ デ ザ イ ン 確 認 ＆ F B
実 装
３ ｜ カ イ ゼ ン
Slide 18
Slide 18 text
T O O L S ｜ 使 用 ツ ー ル 、 迷 走 し て た
い ま ま で は ツ ー ル 難 民 で し た 。 い ろ い ろ 使 っ て み た け ど 、 い い 具 合 の も の が な い
そ も そ も デ ザ イ ン
ツ ー ル じ ゃ な い
が っ つ り デ ザ イ ン
す る 感 じ
Slide 19
Slide 19 text
も っ と 遷 移 と か 情 報設計とかを気軽に共有 して 、
そ の ま ま デ ザ イ ン できるやつないの？
Slide 20
Slide 20 text
ソ ー モ リ
フ ル ス タ ッ ク っ ぽ い
エ ン ジ ニ ア
イ ワ ヤ マ さ ん
企 画 も コ ー ド も 触 れ る
ス ー パ ー デ ィ レ ク タ ー
サ ン ペ イ
デ ザ イ ン も 結 構 や る
プ ロ デ ュ ー サ ー
H O W W E M A K E ｜ ワ ー ク フ ロ ー
０ ｜ 施 策 開 始
１ ｜ ワ イ ヤ ー フ レ ー ム 確 認 ＆ F B
２ ｜ デ ザ イ ン 確 認 ＆ F B
実 装
３ ｜ カ イ ゼ ン
Slide 21
Slide 21 text
実 際 ど う 使 っ て い る の か
Slide 22
Slide 22 text
1 W I R E F R A M E ｜ ワ イ ヤ ー フ レ ー ム
企 画 段 階 や デ ザ イ ン 方 針 が 決 ま っ て い な い 場 合 は 、
グ ラ フ ィ カ ル な 要 素 は 余 計 な 議 論 を 生 む か ら 入 れ な い 。 テ キ ス ト は あ る 程 度 具 体 的 に 入 れ る 。
Slide 23
Slide 23 text
1 W I R E F R A M E ｜ ワ イ ヤ ー フ レ ー ム
企 画 段 階 の も の は 情 報 設 計 や フ ロ ー を 確 認 す る た め 、 あ る 程 度 全 貌 が 見 え る よ う に つ く る
Slide 24
Slide 24 text
1 W I R E F R A M E ｜ ワ イ ヤ ー フ レ ー ム 確 認 ＆ 修 正
あ る 程 度 パ タ ー ン を 出 し た ら 企 画 側 の 二 人 で 画 面 上 で あ ー だ こ ー だ 並 べ 替 え た り す る
X d は そ の 場 で い ろ い ろ 取 り 回 し が し や す い ぞ （ 個 人 的 な 感 想 ）
ア ー デ ヨ
コ ー デ ヨ
フムフム
ナレバ…
ポ イ ン ト ： コ ン セ ン サ ス が 取 れ れ ば 多 少 汚 く な っ て も い い 、 と い う 気 分 で
Slide 25
Slide 25 text
2 V I S U A L D E S I G N ｜ ワ イ ヤ ー に そ の ま ま デ ザ イ ン を 施 す
ワ イ ヤ ー に そ の ま ま 意 匠 的 な 要 素 を 盛 り 込 み 、 ピ ク セ ル 単 位 で 整 え て い く
Slide 26
Slide 26 text
2 V I S U A L D E S I G N ｜ ワ イ ヤ ー に そ の ま ま デ ザ イ ン を 施 す
理 由 ： そ の ま ま コ ー デ ィ ン グ の 仕 様 書 と し て 、 フ ロ ン ト 担 当 に X d 見 な が ら つ く っ て も ら え る
コ ー デ ィ ン グ
ヨ ロ
エート、ココノ
サイズハ…
ポ イ ン ト ： X d な ら 非 デ ザ イ ナ ー に も 渡 し て も O K だ ！
Slide 27
Slide 27 text
3 K A I Z E N ｜ 機 能 ご と の X d フ ァ イ ル で ど ん ど ん 作 っ ち ゃ っ て も い い
理 由 １ ： す ぐ 古 く な る か ら
全 画 面 に お い て 最 新 版 と の 整 合 性 を と る 手 間 が 惜 し い の で 、 機 能 ご と に 最 新 の デ ザ イ ン ベ ー ス
で コ ミ ュ ニ ケ ー シ ョ ン す る
スクショとって自分のUIをトレースすることもある…
Slide 28
Slide 28 text
3 K A I Z E N ｜ 機 能 ご と の X d フ ァ イ ル で ど ん ど ん 作 っ ち ゃ っ て も い い
理 由 ２ ： 意 思 決 定 の ス ピ ー ド が 鈍 る
１ 機 能 に 対 し て 何 パ タ ー ン も 出 す と き に ほ か の フ ロ ー が 邪 魔 、 チ ー ム メ ン バ ー が 混 乱 す る
コ ン カ イ ノ
ヘ ン コ ウ 、 ド コ ？
ポ イ ン ト ： こ っ ち の 都 合 よ り 相 手 の 都 合 、 見 や す い 方 式 を 選 ぶ
Slide 29
Slide 29 text
C O M M U N I C A T I O N ｜ デ ザ イ ン の や り と り
貼る
戻し
確定後、実装
作成 共有 通知 調整
確認
Slide 30
Slide 30 text
D O C U M E N T A T I O N ｜ X d フ ァ イ ル を D o c B a s e に 埋 め 込 ん で 共 有
複 数 の 画 面 ・ 機 能 の 話 を す る と き に ま と め て 話 し や す い
Slide 31
Slide 31 text
【 P R 】 D o c B a s e に 関 し て は こ ち ら が 詳 し い
h t t p : / / u x m i l k . j p / 6 9 4 5 4
Slide 32
Slide 32 text
A D J U S T M E N T ｜ C h r o m e D e v T o o l s で 手 直 し
細 か い 調 整 な ど は エ ン ジ ニ ア な ど と C h r o m e で ス テ ー ジ ン グ 環 境 を 一 緒 に い じ っ て 決 め る ほ う が 早 い
Slide 33
Slide 33 text
S U M M I N G U P ｜ い い た い こ と
X d は 超 ナ イ ス な コ ミ ュ ニ ケ ー シ ョ ン ツ ー ル
① 非 デ ザ イ ナ ー も も っ と 活 用 す べ き 。
② ス ケ ッ チ ブ ッ ク み た い に 使 え ば い い 。
汚 く 使 っ て も い い じ ゃ ん 。
③ シ ン プ ル な デ ザ イ ン な ら ワ ン ス ト ッ プ で 出 来 ち ゃ う ぜ 。
Slide 34
Slide 34 text
い い ぞ
Slide 35
Slide 35 text
ありがとうございました
Ryo Sampei / UX MILK / 20180219
Twitter : @3mp / Facebook : brainmosh