ディレクション資料をXD化してわかった、XDのメリットと課題

2019/1/26 の札幌 Adobe XD meeting #02で発表したスライドです。

Transcript

1. σΟϨΫγϣϯࢿྉΛXDԽͯ͠Θ͔ͬͨ XDͷϝϦοτͱ՝୊ ࡳຈ ADOBE XD MEETING #02
2. ൒ా ಯࢤ ➤ 会社：24-7/パンセ ➤ テクニカルディレクター/ シニアエンジニア ➤ ブログ：Thinking Salad ➤ 最近温活してます ➤ 冷え性を改善すると作業効率が 上がる ➤ ふくらはぎは第⼆の⼼臓
3. ओͳσΟϨΫγϣϯࢿྉͷ͓͞Β͍ ▸ サイトマップ/DFL（Directory File List) ▸ スケジュール/WBS（Work Breakdown Structure） ▸ WF（Wire Frame） ▸ 画⾯設計書 etc
4. ओͳσΟϨΫγϣϯࢿྉͷ͓͞Β͍ ▸ サイトマップ/DFL（Directory File List) ▸ スケジュール/WBS（Work Breakdown Structure） ▸ WF（Wire Frame） ▸ 画⾯設計書 etc
6. ”Ͳͷ෦෼ͷ͜ͱΛݴ͍ͬͯΔͷ͔ Θ͔ΓͮΒ͍” Johnny Appleseed
8. ”WFߋ৽ͨ͠Βɺը໘ઃܭॻͷ ΩϟϓνϟࡱΓͳ͞ͳ͖ΌͳΒͳ͍” Johnny Appleseed
9. ओͳσΟϨΫγϣϯࢿྉͷ͓͞Β͍ ▸ サイトマップ/DFL（Directory File List) ▸ スケジュール/WBS（Work Breakdown Structure） ▸ WF（Wire Frame） ▸ 画⾯設計書 etc
10. サイトマップ/DFL WBS/スケジュール WF 画⾯設計書
11. ৘ใͷ”֩”͸ Կ͔ʁ
12. Կʹ͍ͭͯϋοΩϦ ͍ͤͨ͞ͷ͔ʁ
13. サイトマップ/DFL WBS/スケジュール WF 画⾯設計書
14. サイトマップ/DFL ページ情報 WBS/スケジュール タスク WF 画⾯ 画⾯設計書 画⾯
15. サイトマップ/DFL ページ情報 WBS/スケジュール タスク WF 画⾯ 画⾯設計書 画⾯
16. “֩”͕ಉ͡΋ͷ ͸౷߹Ͱ͖Δ
17. ”͍ͭͰʹݴ͏ͱɺ ΋͏1ͭը໘Λʮ֩ʯʹ࣋ͭ΋ͷ͕͋Δ” Johnny Appleseed
18. サイトマップ/DFL ページ情報 WBS/スケジュール タスク WF 画⾯ 画⾯設計書 画⾯
19. サイトマップ/DFL ページ情報 WBS/スケジュール タスク WF 画⾯ 画⾯設計書 画⾯ デザイン 画⾯
20. ౷߹ͯ͠Έͨ
21. デモファイル https://bit.ly/2Ti0kKO
22. ౷߹͢Δ͜ͱͷϝϦοτ ▸ 「機能はWF/仕様書を参照して、⾒た⽬はデザインを参照し て…」という⼿間がなくなる ▸ WF/仕様書に書かれている機能を⾃分の脳内メモリに⼀時 保存して、デザインに照らし合わせるのは実はすごい負担 ▸ ⼀般に、ファイルは増えれば増えるほど抜け漏れが発⽣する ▸ あのファイルに書かれていること忘れてた（存在を忘れて た） ▸ あのファイルアップデートするの忘れてる
23. ౷߹͢Δ͜ͱͷϝϦοτ ▸ デザインも同じツール（XD）で作成されていることが望ま しい ▸ アップデート内容をゼロタイムで反映できる ▸ XD以外の場合は、単なるJPG/PNGキャプチャでもよい ▸ とにかく「デザインとWF/仕様書の注釈を統合する」こと が⼤事
24. WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 罫線と直線を引かない ▸ 注釈をグループ化してまとめない
25. WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 罫線と直線を引かない ▸ 注釈をグループ化してまとめない
27. WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 単純に⼿間 ▸ 1つ増えたり減ったりすると、芋づる式に連番を変えなけ ればならない ▸ 「A-1について…」という会話をすることもあまりない ▸ 罫線と直線を引かない ▸ 注釈をグループ化してまとめない
28. WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 罫線と直線を引かない ▸ 注釈をグループ化してまとめない
30. WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 罫線と直線を引かない ▸ やっぱり⼿間 ▸ 整頓されて⾒えるが、それは「本質」ではない ▸ 整頓された印象よりも、無駄を省いて、とにかく情報を最 新に、誤りがない状態にしておくのが重要 ▸ 注釈をグループ化してまとめない
31. WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 罫線と直線を引かない ▸ 注釈をグループ化してまとめない
33. WF&ը໘ઃܭॻ&σβΠϯ౷߹ Ξϯνύλʔϯ ▸ 注釈に番号を付けない ▸ 罫線と直線を引かない ▸ 注釈をグループ化してまとめない ▸ グループ化しておくと、まとめて⾮表⽰にできる ▸ すぐに純粋なデザインの状態が⾒られる ▸ でもやっぱり⼿間。クリック数が増える
34. Ͱ΋΍ͬͺΓ७ਮͳσβΠϯΛݟ͍ͨ ▸ 注釈をシンボルにする ▸ 透明度を0にすれば、全ての注釈が不可視になる ▸ 全てのアートボードを跨がって、1回の操作でOK ▸ グループ化よりも操作数が少ない
35. ՝୊
36. ՝୊ ▸ 注釈をコンテンツエリア外に書くと、プロトタイプの使⽤感 を損なってしまう ▸ 注釈が増えれば増えるほどカオスになる
37. ՝୊ ▸ 注釈をコンテンツエリア外に書くと、プロトタイプの使⽤感 を損なってしまう ▸ 注釈が増えれば増えるほどカオスになる
38. ϓϩτλΠϓը໘
39. ඍົ Johnny Appleseed
40. ϓϩτλΠϓͷ࢖༻ײΛଛͳ͏ ▸ 注釈をオンラインコメントにすればどうか？ ▸ ⼀覧性が悪い。全アートボードを跨がってゴリゴリ移動 したいときもある。 ▸ 本来のフィードバックコメントとも混同しそう。ボツ。 ▸ ちなみにオンラインコメントは矩形指定ができるように なって欲しい
41. ·ͣ͸ൣғΛ ߹Θͤͯ͸ʁ
42. ϓϩτλΠϓը໘ʢमਖ਼લʣ
43. ϓϩτλΠϓը໘ʢमਖ਼ޙʣ
44. ϓϩτλΠϓը໘ʢमਖ਼ޙʣ
45. ϓϩτλΠϓͷ࢖༻ײΛଛͳ͏ ▸ サイトのデザインにより、注釈の可読性が落ちる箇所がある ▸ XDで縁取り⽂字ができればよいのだが…… ▸ 縁取り⽂字が実装されるまで、注釈テキスト⾊を数パター ン作ってカバー ▸ できればやりたくない。悩み中ポイント
46. ՝୊ ▸ 注釈をコンテンツエリア外に書くと、プロトタイプの使⽤感 を損なってしまう ▸ 注釈が増えれば増えるほどカオスになる
47. サイトマップ/DFL ページ情報 WBS/スケジュール タスク WF 画⾯ 画⾯設計書 画⾯ デザイン 画⾯
48. ʮը໘ʯʹର͢Δ஫ऍͷछྨ ▸ 情報設計系 ▸ 「ここはこういう効果を狙って、こういう構成にしていま す」 ▸ webサイトとしての挙動系 ▸ 「最新3件表⽰」「ここはカスタムフィールド使⽤」 ▸ webアプリとしての仕様系 ▸ 「このアイコンをクリックで、お気に⼊りに追加」
49. Ͳ͏΍ͬͯ੔ཧ͢Δ͔ ▸ 現状、注釈ごとに⾊を変えるくらいしか思いついていない ▸ ただし「このグループの注釈だけ⾒たい」というときに、い ちいち他の注釈を⾮表⽰にするのが⼿間 ▸ webっぽくタブメニューが表⽰されていて、グループ名をク リックしたらそれが表⽰されればいいな…と妄想している
50. ·ͱΊ
51. ·ͱΊ ▸ 「共通の”核”を持つファイルはなるべく まとめる」という⽅針は少なくとも間 違ってないように思う ▸ 実際ある程度の規模までは、割とスムー ズに運⽤できる ▸ 画⾯数が100Pを超えたり、webアプリ 的な挙動も⼊ってくると注釈の数がエグ い ▸ ⼀応運⽤できるが、若⼲ユニークスキル であるため、属⼈化が発⽣し始める ▸ ドキュメントの運⽤ルールをしっかりと
52. ༨ஊ
53. サイトマップ/DFL ページ情報 WBS/スケジュール タスク WF 画⾯ 画⾯設計書 画⾯ デザイン 画⾯
54. λεΫ͸ͱ͖ʹʮϖʔδʯʹඥ෇͍ͯൃੜ͢Δɻ ʢτοϓϖʔδͷσβΠϯ࡞੒ɺίʔσΟϯά…ʣ Ͱ͋Ε͹ɺWBSͷதʹDFLΛऔΓࠐΉ͜ͱ΋Մೳɻ ฐࣾ͸͜ΕΛSMARTSHEETͱ͍͏πʔϧΛ࢖࣮ͬͯݱ͍ͯ͠·͢ɻ Johnny Appleseed
55. طଘͷ׳शతͳϫʔΫϑϩʔΛ࠶ߏஙͯ͠ ͍ΔͷͰɺ·ͩ·ͩࢼߦࡨޡ͕ଟ͍ஈ֊ɻ Johnny Appleseed
56. Զͨͪͷઓ͍͸ ͜Ε͔Βͩ assialiholic atsushi.handa.3