プロトタイピング
AdobeXD

Adobe XDで300超のアートボードを管理していると何が起こるのか

More than 1 year has passed since last update.

一体どうなっちゃうの〜!?

モバイルファクトリー Advent Calendar 2017 8日目の記事です。

なぜこんなことになったのか

ゲームのUIをAdobe XD(以下XD)で作ってるんですけど、XDの画面をそのまま実装仕様として使えるようにするぞ!という方針にしてみたところ、プロジェクトの画面を丸ごと突っ込んだ情報設計だけでなく更に条件分岐も網羅してしまっています。ゲームは画面数がとても多い。そこに条件分岐が追加されると300は余裕で突破します。しない?

重さと領域限界

全然重くない。とても快適です。
XDの作業領域も、とても広大なので300のアートボードを置いても1/2も使っていない。
image.png
※ 中心にiOS6 375x667アートボードを置いた場合と全体の使用可能領域(更に上下にもう少し余裕がある)
※ 実際の画面はお見せできません

困ったこと

プロトタイプでアートボード同士を繋ぐ際、設定するターゲット一覧のビューが貧弱すぎて迷う

左上部から計算した位置によるソートでリストが並んでいるものの、複雑になってくると順番に一列で並べるなんてしないので、リンク先のアートボード一覧が使い物にならなくなる。
位置順だと整理が難しいので、せめて名前順にしてほしい。もしくはタグ付けさせて。

image.png
※ ひたすらこれが300並ぶと目的のアートボードを探せない

リストに並んでいる名前による管理が難しいため、アートボードの置き方に工夫が必要になってくる。
基本は左から右に進んでいき、分岐があったら上下に分かれるなどのルールで配置していますが、平面上でのこういう並べ方はスケールしない。自然と樹形図的模様になっていくのですが、下の枝と上の枝が衝突しそうになるとまた再配置が必要になってくるなどしてとても面倒。
前述の通り一覧から探すのは無理なので、リンクを繋ぐ際は「確かショップ画面は右上にあったな...」という感覚でリンクを繋いでいくことになります。

鳥瞰図はXDを持っている人間しか見れない

エンジニアにXDの成果物を見せても「本当にこの進み方で分岐が網羅できているか分からない」と言われてなるほどと思ったことが。アプリがあると全体を見ることもできるものの、無い人は迷う。

共同作業は可能か

Google Driveに管理して誰でも.xdファイルにアクセス出来るようにしていますが、複数人が一つのファイルを弄るのに向いてはいません。複数人で一つのプロダクトUIを編集する場合では、一つの纏まりごとにファイルを作ってから統合するためのファイルに合体という方法を採っています。
XDファイルは別ウィンドウで開いていても、プロトタイプモードでコピーすればリンクが保たれたまま別のXDウィンドウにペースト出来る。便利。

まとめ

Adobe XDは動作が軽量かつ出来ることが単純なため、仕様の変更に対して即座に対応できます。
そのためこのような大きなXDプロジェクトを管理するという選択を採用してみましたが、経過としては大量のアートボードを管理するのには機能が足りないなという印象です。
小さめのプロダクトの情報設計を最速で作るならばとても有用なのですが、アートボードが100を超え、しかもそれを管理するとなると厳しいものがありました。(特にアートボード一覧)
改善策としては、大量の画面数が予想されるならばファイルを機能ごとの小分けにして運用していくのが良いのではないでしょうか。