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化してわかった、XDのメリットと課題
Search
assialiholic
January 26, 2019
Design
2
530
ディレクション資料をXD化してわかった、XDのメリットと課題
2019/1/26 の札幌 Adobe XD meeting #02で発表したスライドです。
assialiholic
January 26, 2019
Tweet
Share
More Decks by assialiholic
See All by assialiholic
人生最強のコアスキル a.k.a 開発業務から日常にまで使える最強のスキルについて
assialiholic
0
670
地方都市でもできる! 最新ツールと泥臭さのブランディング
assialiholic
0
480
5年先も第一線で戦えるwebディレクターであるために
assialiholic
3
740
Adobe XDで始めるAtomic Design
assialiholic
6
3.9k
JBUG (札幌#3) LT「大事なことはコメントだけに書くなぁ!」
assialiholic
1
930
デザイナーとコーダの溝を埋める、テクニカルディレクションにおけるXDの活用事例
assialiholic
3
730
Developer meetup for beginners 「札幌ITひよこ会」 webのミライ、web屋のミライ
assialiholic
0
340
webマーケティング手段のいままでとこれから〜ボストン直輸入の新鮮ピッチピチネタをお届けします〜
assialiholic
1
500
最近よく聞くマーケティングオートメーションって?なにがいいの?
assialiholic
1
440
Other Decks in Design
See All in Design
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
素晴らしき余白の世界
kasumidyaya
1
100
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
22
7.7k
文化に寄りそうデザイン
recruitengineers
PRO
4
910
WHAT ARE ME?
takuro_nakajima
PRO
0
1.2k
今日から始めるDesignOpsのヒント
isaikaori
1
410
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
450
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
220
Resolving text accessibility dilemmas in UIs
romanshamin
0
130
Wishing Star Comic
torije
2
1.1k
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
240
Featured
See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
27
1.8k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Clear Off the Table
cherdarchuk
83
310k
Principles of Awesome APIs and How to Build Them.
keavy
120
16k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Docker and Python
trallard
33
2.7k
Optimizing for Happiness
mojombo
370
69k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Ruby is Unlike a Banana
tanoku
96
10k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
Transcript
σΟϨΫγϣϯࢿྉΛXDԽͯ͠Θ͔ͬͨ XDͷϝϦοτͱ՝ ࡳຈ ADOBE XD MEETING #02
ా ಯࢤ ➤ 会社:24-7/パンセ ➤ テクニカルディレクター/ シニアエンジニア ➤ ブログ:Thinking Salad
➤ 最近温活してます ➤ 冷え性を改善すると作業効率が 上がる ➤ ふくらはぎは第⼆の⼼臓
ओͳσΟϨΫγϣϯࢿྉͷ͓͞Β͍ ▸ サイトマップ/DFL(Directory File List) ▸ スケジュール/WBS(Work Breakdown Structure) ▸
WF(Wire Frame) ▸ 画⾯設計書 etc
ओͳσΟϨΫγϣϯࢿྉͷ͓͞Β͍ ▸ サイトマップ/DFL(Directory File List) ▸ スケジュール/WBS(Work Breakdown Structure) ▸
WF(Wire Frame) ▸ 画⾯設計書 etc
None
”Ͳͷ෦ͷ͜ͱΛݴ͍ͬͯΔͷ͔ Θ͔ΓͮΒ͍” Johnny Appleseed
None
”WFߋ৽ͨ͠Βɺը໘ઃܭॻͷ ΩϟϓνϟࡱΓͳ͞ͳ͖ΌͳΒͳ͍” Johnny Appleseed
ओͳσΟϨΫγϣϯࢿྉͷ͓͞Β͍ ▸ サイトマップ/DFL(Directory File List) ▸ スケジュール/WBS(Work Breakdown Structure) ▸
WF(Wire Frame) ▸ 画⾯設計書 etc
サイトマップ/DFL WBS/スケジュール WF 画⾯設計書
ใͷ”֩” Կ͔ʁ
Կʹ͍ͭͯϋοΩϦ ͍ͤͨ͞ͷ͔ʁ
サイトマップ/DFL WBS/スケジュール WF 画⾯設計書
サイトマップ/DFL ページ情報 WBS/スケジュール タスク WF 画⾯ 画⾯設計書 画⾯
サイトマップ/DFL ページ情報 WBS/スケジュール タスク WF 画⾯ 画⾯設計書 画⾯
“֩”͕ಉ͡ͷ ౷߹Ͱ͖Δ
”͍ͭͰʹݴ͏ͱɺ ͏1ͭը໘Λʮ֩ʯʹ࣋ͭͷ͕͋Δ” Johnny Appleseed
サイトマップ/DFL ページ情報 WBS/スケジュール タスク WF 画⾯ 画⾯設計書 画⾯
サイトマップ/DFL ページ情報 WBS/スケジュール タスク WF 画⾯ 画⾯設計書 画⾯ デザイン 画⾯
౷߹ͯ͠Έͨ
デモファイル https://bit.ly/2Ti0kKO
౷߹͢Δ͜ͱͷϝϦοτ ▸ 「機能はWF/仕様書を参照して、⾒た⽬はデザインを参照し て…」という⼿間がなくなる ▸ WF/仕様書に書かれている機能を⾃分の脳内メモリに⼀時 保存して、デザインに照らし合わせるのは実はすごい負担 ▸ ⼀般に、ファイルは増えれば増えるほど抜け漏れが発⽣する ▸
あのファイルに書かれていること忘れてた(存在を忘れて た) ▸ あのファイルアップデートするの忘れてる
౷߹͢Δ͜ͱͷϝϦοτ ▸ デザインも同じツール(XD)で作成されていることが望ま しい ▸ アップデート内容をゼロタイムで反映できる ▸ XD以外の場合は、単なるJPG/PNGキャプチャでもよい ▸ とにかく「デザインとWF/仕様書の注釈を統合する」こと
が⼤事
WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 罫線と直線を引かない ▸ 注釈をグループ化してまとめない
WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 罫線と直線を引かない ▸ 注釈をグループ化してまとめない
None
WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 単純に⼿間 ▸ 1つ増えたり減ったりすると、芋づる式に連番を変えなけ ればならない ▸
「A-1について…」という会話をすることもあまりない ▸ 罫線と直線を引かない ▸ 注釈をグループ化してまとめない
WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 罫線と直線を引かない ▸ 注釈をグループ化してまとめない
None
WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 罫線と直線を引かない ▸ やっぱり⼿間 ▸ 整頓されて⾒えるが、それは「本質」ではない
▸ 整頓された印象よりも、無駄を省いて、とにかく情報を最 新に、誤りがない状態にしておくのが重要 ▸ 注釈をグループ化してまとめない
WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 罫線と直線を引かない ▸ 注釈をグループ化してまとめない
None
WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 罫線と直線を引かない ▸ 注釈をグループ化してまとめない ▸ グループ化しておくと、まとめて⾮表⽰にできる
▸ すぐに純粋なデザインの状態が⾒られる ▸ でもやっぱり⼿間。クリック数が増える
ͰͬͺΓ७ਮͳσβΠϯΛݟ͍ͨ ▸ 注釈をシンボルにする ▸ 透明度を0にすれば、全ての注釈が不可視になる ▸ 全てのアートボードを跨がって、1回の操作でOK ▸ グループ化よりも操作数が少ない
՝
՝ ▸ 注釈をコンテンツエリア外に書くと、プロトタイプの使⽤感 を損なってしまう ▸ 注釈が増えれば増えるほどカオスになる
՝ ▸ 注釈をコンテンツエリア外に書くと、プロトタイプの使⽤感 を損なってしまう ▸ 注釈が増えれば増えるほどカオスになる
ϓϩτλΠϓը໘
ඍົ Johnny Appleseed
ϓϩτλΠϓͷ༻ײΛଛͳ͏ ▸ 注釈をオンラインコメントにすればどうか? ▸ ⼀覧性が悪い。全アートボードを跨がってゴリゴリ移動 したいときもある。 ▸ 本来のフィードバックコメントとも混同しそう。ボツ。 ▸ ちなみにオンラインコメントは矩形指定ができるように
なって欲しい
·ͣൣғΛ ߹Θͤͯʁ
ϓϩτλΠϓը໘ʢमਖ਼લʣ
ϓϩτλΠϓը໘ʢमਖ਼ޙʣ
ϓϩτλΠϓը໘ʢमਖ਼ޙʣ
ϓϩτλΠϓͷ༻ײΛଛͳ͏ ▸ サイトのデザインにより、注釈の可読性が落ちる箇所がある ▸ XDで縁取り⽂字ができればよいのだが…… ▸ 縁取り⽂字が実装されるまで、注釈テキスト⾊を数パター ン作ってカバー ▸ できればやりたくない。悩み中ポイント
՝ ▸ 注釈をコンテンツエリア外に書くと、プロトタイプの使⽤感 を損なってしまう ▸ 注釈が増えれば増えるほどカオスになる
サイトマップ/DFL ページ情報 WBS/スケジュール タスク WF 画⾯ 画⾯設計書 画⾯ デザイン 画⾯
ʮը໘ʯʹର͢Δऍͷछྨ ▸ 情報設計系 ▸ 「ここはこういう効果を狙って、こういう構成にしていま す」 ▸ webサイトとしての挙動系 ▸ 「最新3件表⽰」「ここはカスタムフィールド使⽤」
▸ webアプリとしての仕様系 ▸ 「このアイコンをクリックで、お気に⼊りに追加」
Ͳ͏ͬͯཧ͢Δ͔ ▸ 現状、注釈ごとに⾊を変えるくらいしか思いついていない ▸ ただし「このグループの注釈だけ⾒たい」というときに、い ちいち他の注釈を⾮表⽰にするのが⼿間 ▸ webっぽくタブメニューが表⽰されていて、グループ名をク リックしたらそれが表⽰されればいいな…と妄想している
·ͱΊ
·ͱΊ ▸ 「共通の”核”を持つファイルはなるべく まとめる」という⽅針は少なくとも間 違ってないように思う ▸ 実際ある程度の規模までは、割とスムー ズに運⽤できる ▸ 画⾯数が100Pを超えたり、webアプリ
的な挙動も⼊ってくると注釈の数がエグ い ▸ ⼀応運⽤できるが、若⼲ユニークスキル であるため、属⼈化が発⽣し始める ▸ ドキュメントの運⽤ルールをしっかりと
༨ஊ
サイトマップ/DFL ページ情報 WBS/スケジュール タスク WF 画⾯ 画⾯設計書 画⾯ デザイン 画⾯
λεΫͱ͖ʹʮϖʔδʯʹඥ͍ͯൃੜ͢Δɻ ʢτοϓϖʔδͷσβΠϯ࡞ɺίʔσΟϯά…ʣ Ͱ͋ΕɺWBSͷதʹDFLΛऔΓࠐΉ͜ͱՄೳɻ ฐࣾ͜ΕΛSMARTSHEETͱ͍͏πʔϧΛ࣮ͬͯݱ͍ͯ͠·͢ɻ Johnny Appleseed
طଘͷ׳शతͳϫʔΫϑϩʔΛ࠶ߏஙͯ͠ ͍ΔͷͰɺ·ͩ·ͩࢼߦࡨޡ͕ଟ͍ஈ֊ɻ Johnny Appleseed
Զͨͪͷઓ͍ ͜Ε͔Βͩ assialiholic atsushi.handa.3