プロダクト開発にAdobeXDを導入して感じた5つのメリット

ビズリーチサービスのプロダクト開発チームにおいて、IAをやっている福山です。
昨年の夏からデザイン・プロトタイピングツールとしてXDを全面導入してみました。Preview版だが機能は十分という噂の検証も兼ねて、SPapp、SPweb、PCwebの設計デザインにおいて使用。1年弱使ってみて感じた、良かった点を紹介します。「現在は別のツールを使っているけど、XDが気になっている」という方の参考になればと思います。

基本的にデザインの流れは、ペーパープロト（というかラフスケッチ）→XDで設計→パーツのデザイン含めたモック作成→実装、を想定していましたが、予想より高機能だったので、デザインモックまでXD上でほぼ完結しました。そしてこれは「デザインの品質」にも影響することになったのですが、それは後述。

1.痒いところに手が届くショートカット

おすすめする新しいショートカットは、主に新機能の部分がほとんどなので、そのまま新しい機能の使い勝手の良さとセットになっています。

AdobeXDの便利すぎる新ショートカットベスト5

• Ctrl + Tab

  • ワークスペース切り替え
  • デザインとプロトタイプのモード切替。使いどころは、プロトタイプ作業に入るためというより、プロトタイプ作成中にデザインの細かい変更をする時。そもそも同一アプリケーションに2つの機能が同居していることがXD最大の売りですが、そのメリットを最大化するショートカット。使ってみないと想像しづらいけど本当に便利です。

• Command + R

  • リピードグリッドにする
  • XDの目玉機能、リピードグリッドは、Webプロダクトのデザインにおいても使える場面が多いです。リピードグリッドをドラッグで拡げ、グループ解除（Command + Shift + G）で沢山の複製を素早く作る技も地味に有効。

• Command + Ctrl + ←, →, ↑, ↓, C, M

  • 整列
  • このショートカットを待っていた！Sketchにも存在しなかった整列。矢印は言わずもがな、MiddleとCenterも直感的に理解できて便利。個人的にはIllustratorでアクションを設定しFanctionキーを使っていたのが懐かしいです。ちなみに分布としてHorizontallyとVerticallyも存在していて、こちらはSketchと同様のショートカット。
  • ちなみにMacでEvernoteをインストールしている方は注意が必要です。Command + Ctrl + Cが重複し、XD上で効かない場合があります。これはEvernoteの設定から解除することで回避できます。

• Command + Shift + E

  • オンラインで共有
  • これも目玉機能の、CreativeCloud上でのオンライン共有。URLが発行され、ブラウザ上で誰もがプロトタイプを触ることができます。チーム開発で一番の恩恵を受けてた機能。ここから「再共有」→「リンクを更新」を選ぶことで、一度発行したURLを変更することなく、リンク先のプロトタイプの内容を更新できます。開発中は日に何度も使う機能であり、欲を言えばリンクを更新するまでの操作にもショートカットが欲しいくらいです。

• Command+ 3

  • 選択範囲に合わせてズーム
  • SketchでいうところのCommand + 2。デザインツール全般において、表示倍率切り替えは頻繁に行うもの。特に近年は、1つのファイルに複数のアートボードを並べて作業できるツールが主流なので、ビューのコントロール効率は作業効率に直結します。狙った部分を最大に表示するのは、Command + Spaceによる暫定ズームツールからの範囲ドラッグが往年のAdobeユーザーには便利なのですが、こちらも負けずに早いです。

他にもいわゆるAdobeショートカットで言うと「最前面／最背面」や「グループ」、各種ツール選択のショートカット（V, P, T…）、手のひら、暫定ズームなど、身体に馴染んでいるユーザーにとってはストレスなく操作できる環境なのも魅力。

2.プロトタイプ化からシェアまでが激速

前項でも触れましたが、XDの大きな特徴である、デザインとプロトタイピングを1アプリケーション上で行えるという点、さらにオンライン上で手軽に共有できることは、開発におけるデザインのスピードを激変させました。例えばSketchなどの場合、Prottなどの外部ツールにアップロードし、そこからブラウザを通じた編集作業が必要。一気通貫でUIが最適化されているXDに比べ、時間と手間がかかる作業です。また、煩雑なアップロード作業を端折って、Sketchファイルをチャットで共有したこともあるのですが、アプリは入ってても、わざわざ開いてくれるエンジニアはいませんでした。

現在は、プロトタイプを共有された人間がコメントを書き込める機能も実装され、素早いコミュニケーションと、フィードバックの内容をログとして残せるメリットが追加されました。現在は社内のデザインレビュー会の議事録はこれで十分となってます。

3.高速で安定している（超重要）

100枚近いアートボードでも、アプリケーションが落ちるどころか、体感的にはまったく重くなりません。先日のAdobeMaxJapanでは、Adobeの担当者の方は数千のアートボードでも大丈夫と仰っていましたが、たしかに納得です。スクロールや表示切り替えで、広大な作業エリアの中を移動する際も、サクサク動きストレスがないです。ピクセルのレンダリングもキレイで、ありがちな日本語環境特有のバグみたいなものもない。きちんとローカライズされたというより、日本語版として一から作ったかのようです。

反応速度が速いアプリケーションというのは、熟練ユーザーにとって特に大きな価値を感じるのではないでしょうか。

4.シンプルなUIで習得コストがかからない

はじめは人柱として自ら試したものの、これは使える！と手応えを感じてから、チームのメンバーにすすめてみました。すると大抵は1日もあれば基本を覚え、翌週には使いこなしていました。使うために学校に行ったり、分厚い本を読んだり、研修を受けたりする必要がない・・・。それほど直感的に使えるよう、機能とデザインが洗練されています。

5.作るものがミニマルデザインになる

これは思わぬ二次的な恩恵でした。XDはPreview版だからなのか、または設計思想なのか、機能が極限まで削られています。使い始めた当初は、レイヤー機能、シンボル機能、グラデーション機能さえなく、描画については塗りと線、角丸、シャドウくらいしか設定できませんでした。画像のサイズ別書き出し機能もないので、正直心もとないときもあります。しかし新機能が魅力的で、制約はあるがXDを導入してみよう、となりました。

結果、余計な装飾を削ぎ落とし（できないので）、細かな余白や色の調整で、本質的にデザインと向かい合うことができました。実際、Googleのマテリアルデザインやコンプレクション・リダクションのようなテイストは、XDの機能で十分に再現できます。私たちは新しいトンマナのアプリケーションを作っていたので、この制約のおかげで、洗練されたデザインに落とし込むことができました。（ちなみに画像の使用も制限があるので、アイコンはWebフォント化した）

今回メリットとして5点を並べてみましたが、もちろん導入にはデメリットもあるかもしれません。そしてそれは現場やチームによって様々でしょう。あくまで私達のチームとして感じた事なので、何かの参考になればと思います。

#おまけ：細かいけれどXDの気が利いているところ

• デバイスプレビューが標準搭載

  • iPhoneやiPadにUSB経由でXDに接続できる。便利。

• 正しい位置へのペースト

  • アートボード間でのオブジェクトのやりとりは、とてもスムース。

• 前の画面に戻る設定

  • プロトタイプ画面での遷移設定。これをボタンなどのオブジェクトに設定しておくと、複数画面からの流入にもきちんと対応するバックリンクになる。

• ellipse > oval

  • 楕円形ツールのショートカットはellipseのE。ovalよりはいい。（ここは伝わる人だけ）