札幌 ADOBE XD MEETING #02
ディレクション資料をXD化してわかった
XDのメリットと課題半田 惇志➤ 会社：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

”どの部分のことを言っているのかわかりづらい”

Johnny Appleseed”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&画面設計書&デザイン統合 アンチパターン▸ 注釈に番号を付けない▸ 罫線と直線を引かない▸ 注釈をグループ化してまとめない

WF&画面設計書&デザイン統合 アンチパターン▸ 注釈に番号を付けない▸ 単純に⼿間▸ 1つ増えたり減ったりすると、芋づる式に連番を変えなければならない▸ 「A-1について…」という会話をすることもあまりない▸ 罫線と直線を引かない▸ 注釈をグループ化してまとめない

WF&画面設計書&デザイン統合 アンチパターン▸ 注釈に番号を付けない▸ 罫線と直線を引かない▸ 注釈をグループ化してまとめない

WF&画面設計書&デザイン統合 アンチパターン▸ 注釈に番号を付けない▸ 罫線と直線を引かない▸ やっぱり⼿間▸ 整頓されて⾒えるが、それは「本質」ではない▸ 整頓された印象よりも、無駄を省いて、とにかく情報を最新に、誤りがない状態にしておくのが重要▸ 注釈をグループ化してまとめない

WF&画面設計書&デザイン統合 アンチパターン▸ 注釈に番号を付けない▸ 罫線と直線を引かない▸ 注釈をグループ化してまとめない

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