Web制作の現場では、どのツールを使って効率よく仕事を進めるかは大きなポイントと思います。
今回は、デザイナーの立場で、最近ProとなってリリースになったAdobe XD CCについて、実際にブログのデザインに使ってみた感想を共有したいと思います。

※弊社は分業の体制が多く取られる為、あくまでもサイトのプロトタイプ作成ではなく、制作チームのデザインカンプの作成という視点で検証しています。

Adobe XD(Experience Design) CCとは

UIやUXデザインに最適なように、簡単にワイヤーフレーム作成からデザイン、ページ遷移のシュミレーションができる、多目的なデザインツールです。
デザイン→検証→調整がやりやすいように作られているツールと思います。

WebデザインをPhotoshop→Illustrator→Fireworks→Photoshopというツールジプシーをしている私の経験から上記のツールとの比較を交えて主な機能を紹介したいと思います。

 

Adobe XD CCの便利な機能

リピートグリッドの色々な使い方

現時点でXDで最も便利な機能。
よくダイジェストでも使われているので、興味がある方はご存知だと思いますが、ブログなどで同じパーツが繰り返される時に使える、リピートグリッド。
そのまま編集もできるので、調整も自由自在。でも、実はそれ以外にも使い道があります。

基本 : リピートグリッドの使い方

繰り返したいオブジェクトを選択して、リピートグリッドボタンをクリックして、エリアを広げるだけ。
中のエリアをクリックして、画像の一括はめ込みも可能です。

応用(1) : 点線

長方形をリピートグリッドで繰り返すだけで点線ができます。
調整する時も見ながら調整できるので、感覚的に調整ができます。

応用(2) : パターン

背景に画像を置く場合にも、一定の画像を繰り返しで使うことが主だと思います。
Photoshopの場合、パターンに微調整を加える時は、その都度パターンを登録しなおす必要があり、とても不便。
それがXDなら、ページ内で見ながら調整できるので、とても便利です。

 

編集しやすいシンボル機能

Fireworksではシンボル、Photoshopではスマートオブジェクト、1つを編集すれば同じページのパーツが一気に変更される便利機能。XDにもついてきています！
さらに、他のツールと違うのは、ダブルクリックをして別ウインドウを立ち上げずに、ページのバランスを見ながらそのまま調整できるところです。他のパーツとのバランスを見ながら調整できるので微調整がしやすいです。

 

画面が切れる位置がわかる

表示デバイスを指定すると、そのデバイスのファーストビューで見れるエリアにガイドを引いてくれています。
大量のページを扱う場合、変更をかけるたびにそれぞれのデバイスでチェックするのは、以外と面倒な作業。小さいけれど、大きな親切です。
もちろん、専用アプリをダウンロードして接続し、画面右上のデバイスアイコンをクリックすれば、Photoshop同様に実機でのプレビューも可能です。

 

戻ってきたグラデーション機能

FireworksメインからPhotoshopメインに変わった時に、何が一番不便だったか…それは角度や当たり方が感覚的にできないグラデーション機能。
それが戻ってきました！色味、角度、当たり方、とっても調整がしやすいです。
ただ、ポイント毎に透明度を変えたりはできないので、やっぱり細かいデザインは難しいかも知れません。

 

Adobe XD CCではできない機能

ガイド機能がない

もっとも不便です。この機能さえあれば、そんなにストレスはないかもしれません。
グリッドを使い慣れている方は、ピクセルグリッドが使えるのでに不便ではないかもしれません。
また、プラグインなども出てくるかも知れませんね。

リピートグリッドでも数字は増やしてくれない

リストやランキングなどでよく使う続き番号。さすがに増やしてはくれないようです。

クリッピング画像は編集できない

XDは一度クリッピングした画像に対しての微調整は、できません。
微調整を行いたい場合、あらかじめクリッピングする時に、Adobe CCのアセットライブラリから元データを読み込ませて置き、CCのデータを編集して微調整する必要があります。

実寸でオンライン共有ができない

デザインカンプができて、社内でチェックしてもらう時などはコメント可能なXDの共有機能を使いたいと思います。
しかし、PCに関しては、データサイズが大きすぎるのか、実際の作成したサイズよりも小さいサイズで共有されてしまうので、デザインチェックをするには、役不足です。結局、ページのpngを書き出して確認してもらう形になりました。

Photoshopへの書き出しがイマイチ

弊社のマークアップは基本Photoshopからがメインなので、Photoshopに書き出そうとしたのですが、書き出しオプションがPNG,SVG,PDFしかない為、XDからコーディングできる環境が必要になります。

 

マークアップの感想

今回はブログデザインだったので、コーディングする時に特に不便な部分はなかったとの事。
画像書き出しについては「２x」「３x」と選択をすると、自動で2倍書き出しできるので、一見便利そうですが、書き出す画像をいちいち選択しないと一括書き出しができなかったりするので、photoshopのアセット機能の方が使いやすいと思います。

まとめ

以上、長くなりましたが、Adobe XD CCの感想でした。
全体的に動作が軽いので使用感がとても快適ですが、やはり作り込んだデザインや画像として使用するパーツについてはPhotoshopで使うのがいいなと思いました。
今回のようなブログデザインや、モジュールベースのデザインなどでは、特にガイドが使えないことさえ目をつぶれば、Photoshopより軽くて作業効率はよくなる可能性もありそうです。