LOGzeudon

名古屋で働いているWebデザイナーのブログです

Webデザイン制作を快適・円滑にする Adobe XD の役割について

Webデザイン制作における Adobe XD の役割・活用方法について

Adobe Experience Design (XD) というデザインツールがある。未だベータ版だが、公開されてから1年半程度経って機能も充実してきている。

www.adobe.com

私は基本的に Photoshop を使うが、以前あるWebサイト制作案件で XD を使ってみたらとにかく軽くて快適だった。デザインの確認・修正もスピーディになり、プロジェクト全体の質も上がったように思う。

XDはMac版・Windows版があり、今のところ無料。Adobeアカウントさえあれば誰でも使える。ただし、なんでもできる万能なツールではない。他のデザインツールを併用しつつ、圧倒的に軽快なXDがそれらの中心的な役割を担うことで、従来より快適かつ円滑に制作を進められると感じている。

XDのメリットとデメリットをざっくり整理し、どのように付き合うのが良いのかまとめてみた。

チームでXDを使うメリット

習得が楽、誰でも使える

f:id:rokuzeudon:20171006013135j:plain

これは実際の画面。かなりスッキリしている。XDでは、何か選択したらそれに関連する情報が右側に表示され、編集できる設計になっている。

f:id:rokuzeudon:20171006013206j:plain

ワイヤーフレームをつくる程度なら、初めてでもすぐ使えるだろう。左にあるツールバーの「□」が四角ツール、「T」が文字ツールだ。スポイトやスマートガイドは使いやすいし、画像もペタペタ自由に貼れるので、それなりに整った資料を早く作れる。

ディレクターがXDでワイヤーを作ると、デザイナーもそのまま制作へ移行できて効率が良い。エクセルが開ける開けないみたいな無駄なやり取りも減る。

とにかく「軽い」

f:id:rokuzeudon:20171006013227j:plain

100枚以上のアートボードを配置しても軽快に操作できる。高画質の写真を大量に配置するとデータ容量100MBを越えることもあるが、操作自体にはあまり影響がないという不思議。

そして写真を全く使わなければだいたい10MB以内に収まる。(ちなみにSketchのデータもだいぶ軽い)

共有・確認が楽

f:id:rokuzeudon:20171006013244j:plain

共有URLを発行すると、それを送るだけで相手にデザインを確認してもらうことができる。
ひとつのURLでデータ内のアートボード(ページ)を全て確認できるし、気になった箇所に直接コメントを残してもらうことも可。Adobeアカウントが無くても良い

f:id:rokuzeudon:20171006013504j:plain

必要あれば、「プロトタイプモード」にして画面をリンクさせ、想定している導線設計に問題がないか実機感覚で確認する。デザインカンプだけだと共有しづらい部分をカバーできる。

デザイナーがXDを使うメリット

「あくまでプロトタイピングツールでしょ?」と思われている方が多いかもしれないが、XD単体でもデザインのベース(レイアウトや配色)についてはリリースに近い状態まで作り込める。
また、デザインツールとして優れた以下の特徴がある。

  • 複数ページ、複数デバイスのデザインをひとつのデータ内にまとめてそのまま編集できるほどに軽い!
  • シンボル機能(オーバーライド可)やカラー・文字スタイルを活かし、一括編集できて後からの修正に強いデータがつくれる
  • リピートグリッド機能がすごい、写真とテキストの流し込みも手軽
  • めったに落ちない(過去1度だけ落ちた)

(細かいところは別途記事にしてまとめようかと思う)

今のところ苦手なところ

「デザインのベースは作り込める」と書いたが、つまりそれ以外の要素については別のツールを併用する必要がある。

グラフィックの作り込み

メインビジュアルやバナーなどの制作には向いていない。画像と文字について、次の要素の調整しかできないからだ。

  • 画像:不透明度調整、ぼかし(画像全体)、クリッピングマスク、ベクトルマスク
  • 文字:サイズ・色、ブロック単位での文字間・行間、左・中央・右揃え

また、ペンツールでベクターデータ(イラスト、アイコン)の作成もできるが、 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制作のスタンダードになる日を楽しみにしている。ベータ版からリリース版に早くならないかなァ。