XDでつまづくディレクターが一人でも減りますように……！

Webディレクターをしていて、提案時や要件定義時にワイヤーフレームを引くことって多いと思います。
※デザイナーが引く文化もあるし、それはそれで最適化された形だと感じてます

最近はAdobe XDを用いてワイヤー引くことが多く、その波に乗っかって使い始めたのですが、これまでAdobe系のツールを通って来なかった身としてはツールの持つ癖に結構苦しみました……。
PPTやExcelのオブジェクトでお絵かきはしたことあるけど、なレベルなので、まあツール分かる人にはお察しかと思います。てへぺろ。

そんなわけで、パワポとエクセルばっかり触ってきたディレクターがXDでワイヤーを引くにあたり躓いたポイントを解説していきます。

目次

- アートボードってなんだ！
- オブジェクトが書けない！
- パワポだとうまくいくのに！
- px数まで揃えるのか！
- プラグインが分からない！
- 打合せ資料が作れない！

アートボードってなんだ！

まずこれですよね。
XDというキャンパスは広いですが、広い海のような画面を前にして「さて、どうするべきか…」みたいにぼくはなりました(情弱

XDが海だとすると、その中にはちゃんと島(アートボード)を作ってあげて、その島の中にオブジェクトなりテキストボックスなりを配置していく必要があります。
とりあえず横1920px × 縦1080pxでPC版、横320px × 縦568pxでSP版(諸説あるけど個人的にはいつも最小サイズで作ってます)のアートボードを新規作成していけば良いのではと思います。

また、カーソルがアートボード新規作成モードになったままオブジェクトを編集などしようとしてアートボードを無駄に量産し「あばばばば……！」となるのも初期によくやらかしたので、ちゃんと「V」とか「T」あたりのショートカットでモード切替するのは最初から癖づけた方が良いですな。

※アートボードの編集は左上のアートボード名のとこをクリックするといけます。これも初期につまづきました

オブジェクトが書けない！

アートボードを作成し、さあお絵かきだとなったものの、「これ、ワイヤーに必要なもの全部オブジェクトとか組み合わせて書くのか…？」という次の壁にぶち当たりますよね。ぼくだけだったらごめんなさい
ともあれ、世の中にはUIキットという便利な素材集があるので、それを利用しない手はありません。
https://blogs.adobe.com/japan/web-adobe-xd-ui-kit-wires-jp/

ワイヤーってどの程度作り込んでいれば正解なのか、という終わりのない議論はありますが、最初はまずUIキットを全力でコピペして使い倒していくことに集中すれば幸せになれる気がします。

パワポだとうまくいくのに！

えるしっているか　XDの解説記事はデザイナー向けのが大半だ

こればっかりはしょうがないです。デザイナー向け＝Adobeのクセを前提としてるから、彼らの中で常識となっていることはあまり言語化されていません。

個人的にぶつかった「パワポと違う！」案件は、主に以下の4つでした

ドラッグして、少しでも触れたらオブジェクト選択されちゃう
→パワポみたいにする手段は現在無さそうです。動かしたくないオブジェクトをあらかじめロック(Cmd/Ctrl+L)しておくことで対処できます

Cmd/Ctrl+Yが効かない
→Cmd/Ctrl+Zは効くのになんで！ってなりました。Cmd/Ctrl+Shift+Zで元に戻せます。

テキストボックスが2種類ある(ポイント/エリア内)
→ 個人的にもまだうまく使い分け出来てないのですが、基本はエリア内で作ってしまった方が便利だと感じます。

画像を単純にトリミング出来ない
→四角形のオブジェクトを作り、そこにpngをドラッグするとトリミング可能です。調整面倒なので、もっと良い方法無いのかなあ…とここは悩み中です(知ってる方いればご教示ください…！)

px数まで揃えるのか！

いろんなガイド線が出てきて、px単位できっちり揃えたくなる(揃えなきゃだめな)ように感じますよね。
デザインという完成形を作り上げるならば必要なのですが、個人的にはそのあたりgdgdで良いと思ってます。
打合せを経て日々修正していくものだし、ワイヤーの精緻化よりも時間を使うべきことってディレクターにはたくさんあるはず……！
塩梅は人によりますが、情報設計のレベル感が分かれば大きさやマージンは揃っている必然性はないのではないでしょうか。

プラグインが分からない！

プラグインって応用編のイメージあるかもしれませんが、格段に作業が効率化されるプラグインも多いので、作りたいものに合わせて「XD　プラグイン　おすすめ」とかで調べると幸せになれそうです。決して応用知識ではないし、プラグイン探す工数より非効率にやるタイムロスの方がもったいないかと。

ikono
アイコンをフォント扱いで挿入出来る神プラグインだと個人的に感じてます。他人にファイル共有するときは同じフォントを持っていないことが多いので、フォントをインストールしてもらう必要ありですが。

残念ながら経験不足により、その他いけてるプラグインの紹介までは叶わず……

Quick Mockup
【12/9追記】
まだベータ版ですが、これも相当使えるニオイがします…！

 打合せ資料が作れない！

URLで共有したり出来る環境なら必要ないですが、打合せ資料としてちゃんと作らなきゃいけない状況もあると思います。
流派はそれぞれですが、ぼくは縦のA4資料(pdf)でよく出しています。紙で欲しいお客さんも多いので。

みんな大好きパワポで作っても良いのですが、XDからpng書き出し→PPT貼り付けすると解像度が下がってしまうのでお勧めは出来ないです。
そこで、XDの中にA4相当のアートボード(2480 × 3508)を作っておき、そこにpng書き出ししたワイヤーを貼り付けると解像度高めで資料が作れます。

おわりに

XD知ってる風に受け取れそうな文章を書きましたが、個人的にも修行中の身(ちゃんと使い始めて数ヶ月)なので、まだまだ効率悪い部分もあると思います。

また、XDってツールとしてまだ日進月歩なものなので、今後のアップデートによって選択肢が増えることもありそうです。
現時点で「こう使うべき！」って決定版は無いと思っているので、各人が最適解を模索していくことが良いのではと思います。