Adobe XDに移行して良かったこと（導入篇）

ディレクターTです。とうとう2019年もあとわずかとなりました。
今年を振り返る意味でAdobe XDについて書こうと思います。

ちなみに、当ウェブサイトはXDでデザインしました。

というわけで今まで社内プロジェクトのみで限定的に使っていたXDですが、
少しずつクライアント向けのWebデザインにもXDを使うようになり
これがもう便利すぎてもうイラレ、フォトショは使わなくてもいいんじゃないか
ぐらいに思っています。（言い過ぎ）

そこで、XDについて使うのをためらっている方々に向けて
今すぐ移行したほうが良いと思うポイントをまとめました。

XDを使って良かったこと

１．コーダーへのデータ引継ぎがスムーズ
（クラウド上のデータで完結する）
２．デザイン確認とモック作成までがブラウザ上で完結するので
プロジェクトに関わるメンバーとの共有がスムーズ
３．アセット書き出しの手間が皆無

あらためてそれぞれ説明します。

１．コーダーへのデータ引継ぎがスムーズ

ちなみに今までは下記のようなフローでした。
===============================================
１．PhotoshopやIllustratorでデザイン作成
２．jpeg書き出ししてデザイン確認（クライアント向け）
—–ここからコーダーの作業—–
３．アセット書き出し
４．コーディング
===============================================

それがXDを使うと

===============================================
１．XDでデザイン作成
２．XDから「リンクを共有」（表示設定：開発）
→クライアント向けデザイン確認とコーダー、開発スタッフへの共有
すべてがこれで完結

—–ここからコーダーの作業—–
３．プラウザ上から素材をダウンロード
４．コーディング
===============================================

XDを使うとデザイン作成の後は、「リンクを共有」でXD専用のサーバにアップされた
デザインデータをブラウザで確認してもらうだけでOKとなります。
一旦生成されたURLをコーディング担当に伝えて
後はお願いね、で済みます。

そして社内でローカルファイルを管理する手間も省けます。
（社内サーバのどこにファイル置く？みたいなことが地味にストレス）

２．デザイン確認とモック作成までがブラウザ上で完結するので
プロジェクトに関わるメンバーとの共有がスムーズ

先述の２．のクライアントとのデザイン確認のやりとりで
jpegをメール添付したり、わざわざサーバにアップして
ブラウザから静止画像を確認してもらうというひと手間をするのも
地味に手間のかかる作業です。

それがXDを使うとやはり共有するURLを伝えるだけで済みます。

つまりブラウザ1つあればクライアントとのデザインやモックの確認と
開発スタッフとの素材やりとりまでが可能です。

コーディングや開発担当スタッフはXD自体をインストールしていなくても良いので
弊社のような複数の部署・メンバーで案件を進めているチーム編成には
大変助かります。

３．アセット書き出しの手間が皆無

アセット書き出しが全然苦じゃないよ！
という方は読み飛ばしてください（笑）

Photoshopだったらレイヤー名を設定したり
Illustratorだったらアセット書き出しのパネルにドラッグアンドドロップして
書き出し設定したりという手間が必要かと思いますが
XDだったら、共有したリンクから素材のダウンロードが可能です。

ブラウザでの共有画面。上記イメージのように選択した画像単体でダウンロードしたり、
画面内の複数画像をまとめてダウンロードも可能。

ちなみに、デメリットや課題もあり
デザインする際、フォントが視覚的に確認できないので
イラレで一度フォント選定したりデザインの作り込みをして
XDにパーツをコピペしたり、という使い分けはします。

また共有する際のリンクを更新する際、画面数が多かったり
配置画像が高解像度だったりするとブラウザでの表示に時間かかりすぎて
ファイルを分ければよかった…とか思うこともあります。

とはいえ、弊社のようなデザイナーと開発など複数メンバーで共有することが多いチーム編成だと
導入するメリットの方が大きいのではないでしょうか。

とりあえず今回はXDについて導入篇ということでサラっと書きましたが
今後XDの機能について更新していきたいと思います。（いつかな）

それでは皆さま良いお年を！