AdobeXDは何ができるのか？詳しく知りたい。
photoshopやillustratorとはどう違うの？
という方むけの記事です。
私はフリーランスでwebデザイン+フロントエンドエンジニアをしています。
期間は10年くらいです。
今までphotoshopでwebデザインデータの制作をしていました。
今回、制作ツールの見直しを行おうと思い、 AdobeXDを以下書籍で勉強しました。
特徴的なソフトだなと感じたので詳しくまとめたいと思います。
AdobeXDとは
AdobeXDはAdobe社から販売されているデザインとプロトタイプの作成ツールです。
Webサイトやアプリなど、スマートフォンやPC向けメディア制作用のデザイン制作を行うことができます。
デザインだけではなく、各ページにモーションやボタンリンクなどを設定して、実際の操作を検討、検証することもできます。（プロトタイプ作成）
また、web上の公開（パスワード設定可）、共有が可能で、プロジェクトとしてチーム内でコメントを書いたり、コミュニケーションをとって調整することができます。
AdobeXDの特徴（Photoshopやillustratorとの比較も）
1.仕様がwebやアプリ向けに作られている。
Photoshopやiillustratorは、web用にカンバスや単位、カラーモードなどweb制作用に調整して使うことが多いかと思います。
XDは、もともとwebやアプリ向けに作られているソフトなので、設定不要で勝手がいいです。
px、ptに加え、dp（density-independent pixels）という単位も使用可能です。
また、操作性はアートボードの部分が簡単に増やせて並べるIllustratorの良い部分と、要素をシンボル化できるAnimateCCの良い部分、細かい要素間隔の数値を表示してくれるphotoshopの良い部分など、いいとこどりな感じです。
また、専用アドオンで機能拡張したり、他のサイトで提供されているUIキット素材を使うことも可能です。
2.リピートグリットが便利
記事一覧が並んだり、サムネイルがたくさん並んだり、webデザインをしていると要素が並ぶデザイン部分は多くあります。
そういった部分の制作に便利なのがリピートグリットです。
特定のアイテムをリピートグリットとして登録すると、連続して1つの項目を増やすことができます。
差し替えも簡単。
複数画像やテキストも一気に書き換えることができます。
勉強しながらこれはいい！と思った部分でした。
3.プロトタイプ機能
プロトタイプを使うと、ボタンにリンク設定をしたり、モーション設定をしたり、実際の動きを設定、検証することができます。
簡単な設定で動かすことができてとても楽しかったです。
プログラム入力は不要なので、ノンプログラマーでも問題ないと思います。
プロトタイプ機能についてはこちらの記事をどうぞ。
4.バッチ機能
photoshopでいう画像アセット、illustratorのスライス機能です。
要素にバッチ設定をすると、画像として一括に書き出すことができます。
また、設定によって、2xの倍サイズ画像を書き出すことも可能です。
AdobeXDを使って意外だと感じた部分や注意点
1.グリッドはあるがガイドとルーラー（定規）がない
[レイアウトグリット]
[方眼グリット]
XDには、レスポンシブを念頭に置いたレイアウトグリッドと方眼グリットがあります。
どちらも細かく設定できて大変便利。
でも、ルーラーや自分で1本ずつ引くことができるガイドがないのは意外でした。
実際に制作する際、慣れない感じが…。
操作方法を検証して使いやすくする方法を検討していきたいなと感じました。
2.AdobeXDから実装用のプログラムが書き出されるわけではない。
デザインスペックという色やフォント、間隔などのデザインの情報は共有ファイルがあります。
デザインスペックについてはこちらをどうぞ。
また、サイトに埋め込めるiframeの書き出しも可能です。
ただ、htmlの中にdivがあって…とか、実装用のプログラムが自動で書き出せる仕様ではないです。
1部のアドオンを通すと、CSSが取り出せるそうなので、また検証してみたいです。
3.動くプロトタイプをクライアントに見せるかは悩む
制作チームでの検証やクライアントが望んでいるのであれば、動きが入ったプロトタイプを共有し、活用するのはとても良いと思います。
しかし、クライアントによっては、
「あ、できたの？いいね！これだけできてれば、明日には公開できるね！」
とおっしゃりそうな方もいます。
また、本プログラム実装状態の方が表現の幅は広いかもしれません。
（どうしても自動アニメーションなので制限があるかと）
4.画像を書き出せるのが1種類
photoshopの画像アセット、illustratorのスライス機能では、各画像ごとにjpg、png、svgなど拡張子をかえて書き出すことが可能でした。
XDは1種類（png、jpg、svg）を選んで一括で書き出す方式です。（pngを選んだら全てpngで書き出されます）
Avocodeというソフトを使うとXDを開くとができ、連携して画像の書き出しができるようです。
まだ未検証ですが、また、検証してみたいですね。
5.細かい作り込みや表現には別ソフトとの連携が必要
いろいろな機能を搭載しているXDですが、photoshopのブラシやレイヤー効果など、色調補正などの機能はなく、illustratorほど細かな変形、効果などは持ち合わせていません。（ソフト機能の住み分けかもしれません）
グラフィックの作り込みといった点では、photoshopやillustratorの連携が必要になるかなと感じました。
まとめ
はじめて取り組んで、色々なことを感じたXDでしたが、今のところ、今後、本格的に使ってみたいなと感じています。（photoshopから移行予定）
そう思う1番の理由はUIを作るために設計されているソフトだからです。
やはり、それように作られているだけあって、使いやすく、理にかなっている部分が多いと感じました。
他ソフトとの連携も含め、デザインの作りこみをどのように行い、展開していけるかは、制作の練習を行い、検討していきたいと思います。
