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
550
ディレクション資料を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
710
地方都市でもできる! 最新ツールと泥臭さのブランディング
assialiholic
0
500
5年先も第一線で戦えるwebディレクターであるために
assialiholic
3
760
Adobe XDで始めるAtomic Design
assialiholic
6
4k
JBUG (札幌#3) LT「大事なことはコメントだけに書くなぁ!」
assialiholic
1
980
デザイナーとコーダの溝を埋める、テクニカルディレクションにおけるXDの活用事例
assialiholic
3
740
Developer meetup for beginners 「札幌ITひよこ会」 webのミライ、web屋のミライ
assialiholic
0
340
webマーケティング手段のいままでとこれから〜ボストン直輸入の新鮮ピッチピチネタをお届けします〜
assialiholic
1
510
最近よく聞くマーケティングオートメーションって?なにがいいの?
assialiholic
1
450
Other Decks in Design
See All in Design
Карта процесса-опыта. Презентация метода
ashapiro
0
240
Les petites aventures de CSS, saison 2024
goetter
2
3.8k
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
160
Первая беседа о Карте реализации историй
ashapiro
0
230
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
370
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
0
1k
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
270
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
3.3k
What Was UX Design All About?
ykazu
3
720
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2.3k
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
5
4.2k
富山デザイン勉強会_デザイナーの打ち合わせ術_打ち合わせをクリエイティブな時間にする方法.pdf
keita_yoshikawa
1
100
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Done Done
chrislema
181
16k
The Language of Interfaces
destraynor
154
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
362
19k
From Idea to $5000 a Month in 5 Months
shpigford
381
46k
Being A Developer After 40
akosma
84
590k
Gamification - CAS2011
davidbonilla
80
5k
Fireside Chat
paigeccino
32
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Scaling GitHub
holman
458
140k
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