Adobe XDを中心としたフローでWeb制作やデザインを円滑に進めよう
Updated
2022.10.15
Published
2017.10.16
※2017年10月に書いた記事です。XDは毎月アップデートが実施され、どんどん新しい機能が実装されています。日本語の最新情報はAdobe Creative Station からチェックできます！
Adobe Experience Design (XD) というデザインツールがある。未だベータ版だが、公開されてから１年半程度経ち、機能も充実してきた。
私はWebサイト制作では基本的にPhotoshopを使うが、ある案件で XD を使ってみたらとにかく軽くて快適だった。デザインの確認・修正などいわゆる上流工程がスピーディになり、結果プロジェクト全体の質も向上したように思う。
XDはMac版・Windows版があり、現在なんと無料。Adobeアカウントさえあれば誰でも使える。
ただし、なんでもできる万能なツールではない。他のデザインツールを併用しつつ、圧倒的に軽快なXDが中心的な役割を担うことで、従来より円滑に制作を進められると感じている。そんなXDのメリットとデメリットをざっくり整理し、どのように付き合うのが良いのかまとめてみた。
チームでXDを使うメリット
習得が楽、誰でも使える
これは実際の画面なのだが、他のツールと比べて、かなりスッキリしていると感じないだろうか。
画面上にテキストや図形を配置し選択すると、そのオブジェクトに紐づく情報のみが右側のプロパティパネルに表示される。
左にあるツールバーの「□」が四角ツール、「T」が文字ツールだ。Excelの代わりにワイヤーフレームをつくる程度なら、初めてでもすぐ使えるだろう。
スポイトやスマートガイドといった制作補助の機能も使いやすく、画像もストレスなく自由に配置できるので、それなりに整った資料を手早く作れるはずだ
ぜひディレクターにも使ってほしいと思う。ワイヤーフレームがXDでつくられていれば、デザイナーもそのまま制作へ移行できるし、エクセルが開ける開けないみたいな無駄なやり取りも減って効率が良い。
とにかく軽い
100枚以上のアートボードを配置しても軽快に操作できる。どういう状況かというと、こういうことだ。
Photoshopではこの状態だと操作が困難だろう。XDでは全く動作に影響がない。
高画質の写真を大量に配置するとデータ容量100MBを越えることもあるが、それでも操作はあまりもたつかない。
データ容量も、写真がなければだいたい10MB以内に収まる。これは意外と大事で、受け渡しやバックアップなどの時短に繋がるのは、時間に追われている制作現場としては大変ありがたい。
共有・確認が楽
共有URLを発行して送るだけで、相手にデザインを確認してもらえる。
アートボード（ページ）を全て確認できるし、気になった箇所に直接コメントを残してもらうことも可。Adobeアカウントが無くても良い。
必要あれば、「プロトタイプモード」にして画面をリンクさせ、想定している導線設計に問題がないか実機感覚で確認する。デザインカンプだけだと共有しづらい部分をカバーできる。
デザイナーがXDを使うメリット
「あくまでプロトタイピングツールでしょ？」と思う方もいるかもしれない。しかし、昨今のWebデザインはフラットデザイン主流で、ことUIに限ってはゴリゴリの画像加工が必要な場面はほとんどない。その意味で、XD単体でもデザインのベース（レイアウトや配色）はリリースに近い状態まで作り込める。
また、デザインツールとして優れた以下の特徴がある。
複数ページ、複数デバイスのデザインをひとつのデータ内にまとめてそのまま編集できるほどに軽い！
シンボル機能（オーバーライド可）やカラー・文字スタイルを活かし、後からの修正に強いデータがつくれる
リピートグリッド機能がすごい、写真とテキストの流し込みも手軽
めったに落ちない（過去１度だけ落ちた）
現時点で不得意なところ
「デザインのベースは作り込める」と書いたが、つまりそれ以外の要素については別のツールを併用する必要がある。
グラフィックの作り込み
メインビジュアルやバナーなどの制作には向いていない。画像と文字について、次の要素の調整しかできないからだ。
画像：不透明度調整、ぼかし（画像全体）、クリッピングマスク、ベクトルマスク
文字：サイズ・色、ブロック単位での文字間・行間、左・中央・右揃え
また、ペンツールでベクターデータ（イラスト、アイコン）の作成もできるが、 Illustrator の方が機能豊富で扱いやすいし、XD で作成したパスはSVGかPDFで書き出さないと Illustrator で編集できずちょっと手間なのでオススメはしない。（ Illustrator から XD へ移すのはコピペだけでいけるのだが）
ということで、グラフィック（バナーなど）やベクター（イラストなど）は Photoshop or Illustrator で作成して配置するのが一番良い。
…が、残念ながら、まだファイルの外部リンク機能がないので、更新時は都度手動で置き換える必要がある。ここは将来ライブラリ機能の進化なりリンク機能実装なりで楽になってほしい。
プロトタイピングの作り込み
「XDってコーディング前に実際の画面遷移を完璧にチェックできて便利だね！！」みたいなノリで、プロトタイピング制作を主目的にすると（されると）結構しんどい。
できるのはページ間の遷移だけだし、ひとつひとつのリンクを繋げていくのはそれなりに手間だからだ。精度の高いプロトタイピングツールではなく、あくまでコミュニケーションの補助ツールとして活用するのがちょうど良い。
なので、XDのプロトタイピングでどこまで確認できるのかの把握と、それで何を確認したいのかという目的の共有は欠かせない。
また、より精度の高いプロトタイピングが必要であれば別のサービスを併用したほうが良さそう。PNGで各アートボードを書き出して流し込めばなんとかなると思う。
縦書き
他のデザインツールを使おう。（完）
大量の画像書き出し
XDの画像書き出しでは、PNG・SVG・PDFに対応し、@2x・@3xなどの倍率指定もできる。ただし、「選択したレイヤー（グループ）を書き出す」というベーシックな方法であり、数が少なければ問題ないが、多いなら Photoshop の自動アセットの方が圧倒的に楽。
あとJPG未対応なので、デザイン内容や納品ルールによっては不便。私の場合は必要なケースが多いので、Macのフォルダアクションを使って PNG → JPG に一括変換している。
まとめ
メリット・デメリットをいろいろあげたが、要するにXDで完結しようと無理をしなければ従来の制作フローよりも断然効率が良いと感じている。ビジュアル・スタイリングを重要視する案件及び制作フローではデメリットの印象が強いかと思うが、ワイヤーフレームを起点にしたUIの作り込み → グラフィックの配置…という手順で進めるなら特別困る場面はなかった。
Sketch ならスムーズに解決できることも多いが、そもそも導入できない制作現場も多いだろう（Adobeの影響力強し）。
ベータ版からリリース版になり、これから普及して、Web制作のスタンダードになる日を楽しみにしている。