こんにちは。デザイン部部長の小野木です。
昨年プレビュー版としてリリースされた、Adobe XD（ Adobe Experience Design ）。現在（2017年3月現在）ではバージョンアップされて、さらに使いやすくなっています。

Adobe XD とはモックアップ・プロトタイプのデザインを素早くつくることのできるアプリケーション。とても動作が軽く直感的で、今後 Webデザインや UI/UXデザインの主流になるであろうツールだと感じています。

機能や詳しい使い方については、公式ページや他のブログなどでも紹介しておりますので、今回は実際の案件で導入によるメリットと注意点についてお伝えしたいと思います。
 

Adobe XDを使うことになった経緯

以前からデザイン部では、デザインやモックアップをより効率的に作る方法がないか探していました。レスポンシブデザインが主流になった今、Webデザインには柔軟性が求められ、様々なデバイスでのデザインカンプが必要になってきています。同時に工数がかなり膨らんできている現実があり、なにかもっと直感的で、UI / UX（ User Interface / User Experience ）に力を注げるツールがないか？ そんなとき現れたのが Adobe XD でした。

ちょうど Food Hub Project の Webサイトを立ち上げる話が社内にあり、「これは実作業で実験してみるには丁度良い！」ということで、導入したのがきっかけでした。

実際使ってみると、大きなメリットといくつかの注意点が垣間見えてきました。
 

メリット1：
全てのページデザインを1ファイルで。

今回はページ数が 30ページ＋パーツと、そこまで多くなかったので、全ての PC・スマートフォンのデザインを1ファイルにずらっと並べました。いつでも他のページを確認できる利便性と、スマートフォン用のデザインを作る際のコピペして縮小・調整という流れがとてもスムーズなので、格段に作業スピードが向上しました。

各ページを階層に分けて並べ、パーツなどもひとまとめにし、すぐに他のページのデザインを振り返ることができるようにした。

現在では Photoshop もアートボードを使えるので、デザインを並べて一覧で見ることはできますが、増えてくると重くて正直使いづらいです。しかし Adobe XD は写真などのビットマップ以外は全て illustrator のようにベクターになっているので、とんでもなく軽い。そして動作が早い！

ストレスなくデザインができるのは大きなメリットです。
 

メリット2：
オンライン共有によるスピード感。

Food Hub Project の Webサイト構築ということで、その支配人である真鍋とデザインをすり合わせながら進めていく必要がありましたが、真鍋は徳島県の神山在住。東京にいる私と対面で打ち合わせできる機会はかなり少ないことが予想されました。

そこでとても便利だったのが、オンライン共有機能。今作っているデザインをそのままオンラインで共有することが可能で、遠方にいる真鍋の指摘に対し、即座にデザイン反映・共有できるスピード感は素晴らしいものがありました。

例えば、

真鍋：「この文字組をもう少し詰めると、どう見えるんだろう？」

私：「はい、詰めました。どうでしょう？ たしかに塊感がでて、読みやすくなりましたね。」

というように、共有しているデザインURLを見ながら、即座に反映・決定できたことが多々ありました。

社内メンバーへのデザインレビューや、大規模サイトの量産作業など、とても役に立つ機会が多いように思います。

補足）このオンライン共有ですが、2017年3月現在ではパスワードなどの機能がありません。リンク先さえ分かれば誰でも見れてしまうので注意が必要です。

XDの右上のボタンからプレビュー用のリンクが発行できる。それを共有するだけで、いつでも誰でも閲覧可能。デザインに対してのコメント機能もついている。もはやライブデザイン！
 

メリット3：
実際にページ遷移できるので、コーディング後との使い勝手の差異が少ない。

たぶん、最大のメリット。

プロトタイプの機能で任意のパーツから別ページのデザインにリンクを貼ることができます。つまり、実際にWebサイトを回遊する（ような）ことができます。もちろん上記のオンライン共有にも反映されるため、コーディング後の状態に近い印象で確認してもらうことができるので、コーディング後に「あれ？ちょっと使い勝手悪いかも？」というようなことを未然に防ぐことができます。

デザイン確認をしていた真鍋も、「今までみたいに紙やデータを1枚ずつ見ているのとは全然違い、とてもイメージしやすく、細かいことまで事前に気づくことができるから、かなりいいね！」と言っていました。

ロールオーバーや複雑なモーションの設定などはできないので、今後実装してほしいという気持ちはありますが、それでも従来にくらべ格段に精度が上がるので、大きいメリットだと感じています。

XDから吐き出した、プロトタイプ画面。このように実際にサイトを訪れているかのようにページ遷移できるので、サイト全体のUXを検討しやすい。

ただ、デメリット？というほどでもないですが、リンクを貼る作業は結構大変です・・・。約30ページのレスポンシブなので、なんとかなりましたが、かなりページ数が多い場合は、最低限のリンクで精度を高める努力と工夫が必要だと感じました。

ページ間を縦横無尽に駆け巡るXDのリンク導線。大規模サイトなどでは、どこまでプロトタイピングするかを入念に検討すべし！

まとめ

いかがでしたでしょうか？
デザイナーでなくてもメリットを感じる部分があったのではないでしょうか。むしろ、ワイヤーを作る機会があるプランナーやディレクターにも、是非体感して欲しいです。（使った感じはPowerPointやKeynoteに近いので直感的でカンタンです！）

現在、プロトタイピングのできるUXデザインツールは他にもありますが、「Adobeがリリースした」という事実は選択理由として大きいです。やはり、今までAdobe製品でデザインしていたので、それらとの連携を期待してしまうんですよね・・・。

正直、プロトタイピングとしての機能は他社のほうが勝っている場合もありますが、UXデザインツールとしては 1 位 2 位を争う使いやすさだと私は思っています。

ここまで便利なのに、まだまだベータ版。製品版になったとき、どれほどの進化を遂げてくれるのか楽しみです。
 

ここからはデザイナー向け！
XDデザインの豆知識。

1. オブジェクト間の距離を計測

Photoshopでもできます。できますが、Photoshopはガイドを表示している状態でないと計測できません。正直ガイドってデザインのトンマナ見てる時、邪魔です。XDならいつでも、オブジェクトを選択している状態で、もう一方のオブジェクトへ「option押しながらマウスオーバー」するだけで確認できるので、とても便利。

上記の「100」というピンクの文字が距離（px）。文章と写真の距離をカンタンに確認できるので、全体を通しての余白の揺れが少なく、ルールを定めやすい。

2. XDと画像の管理の仕方

そもそもXDで画像加工はできません。Photoshopみたいに写真を加工したり、パス切りしたり・・・そんなことは出来ません。あくまで UI / UXのデザインツールなのです。

ですから、必然的にデザインに反映する画像データは外で管理しておかなければなりません。私はページごとにimageフォルダのようなものを用意してPothoshopのPSDデータとjpgを管理していました。

左下の「FHP12.xd」というのが元になるXDのデザインデータ。これに全ページのデザインが入っている。それに対し、「asset-ページ名」という形でimageフォルダを用意して画像を管理した。

で、これの何がメリットかというと、必然的にデザイナー側で、レスポンシブに対応した「最大サイズ」の画像を用意しているため、コーダーが実際にコーディングする際に画像の大きさで悩まなくてよくなります。「PCのデザイン、タブレットのデザイン、スマートフォンのデザイン・・・さて、どのデータの画像をスライスすれば一番綺麗かな？」なんてことを考えなくて済みます。そのままimageフォルダにあるものを使えばよいのですから。

3. ピクセルグリッド整合と注意点

これは今後Adobeが改善してくれるかもしれませんが、XDはベクターデータで構成されているので、全ての作業工程に対してピクセルパーフェクトでデザインできない場合があります。例えば複数のオブジェクトを選択してまとめて縮小したとき、座標と大きさに小数点が発生してしまいます。

これだと、コーダーがサイズに迷うし、デザイナーもマージンを測り辛いです。なにより、デザインデータとして汚い。

そんなときは右クリックで、「ピクセルグリッドに整合」を選択。

一発で小数点が消え、綺麗な数値に。ピクセルパーフェクトなデータになります。

ただし、注意があります。Illustratorなどで作成したベクターデータの画像に対して「ピクセルグリッドに整合」をしてしまうと…

盛大にジャギります。保持しているアンカーポイントも整合された際にズレてしまうからです。ですので、整合したいデータにベクターデータのデザインがないかどうか確認した上で、活用していただければよいかと思います。