Visional Designer Blog
福山 憲司
ビズリーチサービスのプロダクト開発チームにおいて、IAをやっている福山です。
昨年の夏からデザイン・プロトタイピングツールとしてXDを全面導入してみました。Preview版だが機能は十分という噂の検証も兼ねて、SPapp、SPweb、PCwebの設計デザインにおいて使用。1年弱使ってみて感じた、良かった点を紹介します。「現在は別のツールを使っているけど、XDが気になっている」という方の参考になればと思います。
基本的にデザインの流れは、ペーパープロト（というかラフスケッチ）→XDで設計→パーツのデザイン含めたモック作成→実装、を想定していましたが、予想より高機能だったので、デザインモックまでXD上でほぼ完結しました。そしてこれは「デザインの品質」にも影響することになったのですが、それは後述。
おすすめする新しいショートカットは、主に新機能の部分がほとんどなので、そのまま新しい機能の使い勝手の良さとセットになっています。
他にもいわゆるAdobeショートカットで言うと「最前面／最背面」や「グループ」、各種ツール選択のショートカット（V, P, T…）、手のひら、暫定ズームなど、身体に馴染んでいるユーザーにとってはストレスなく操作できる環境なのも魅力。
前項でも触れましたが、XDの大きな特徴である、デザインとプロトタイピングを1アプリケーション上で行えるという点、さらにオンライン上で手軽に共有できることは、開発におけるデザインのスピードを激変させました。例えばSketchなどの場合、Prottなどの外部ツールにアップロードし、そこからブラウザを通じた編集作業が必要。一気通貫でUIが最適化されているXDに比べ、時間と手間がかかる作業です。また、煩雑なアップロード作業を端折って、Sketchファイルをチャットで共有したこともあるのですが、アプリは入ってても、わざわざ開いてくれるエンジニアはいませんでした。
現在は、プロトタイプを共有された人間がコメントを書き込める機能も実装され、素早いコミュニケーションと、フィードバックの内容をログとして残せるメリットが追加されました。現在は社内のデザインレビュー会の議事録はこれで十分となってます。
100枚近いアートボードでも、アプリケーションが落ちるどころか、体感的にはまったく重くなりません。先日のAdobeMaxJapanでは、Adobeの担当者の方は数千のアートボードでも大丈夫と仰っていましたが、たしかに納得です。スクロールや表示切り替えで、広大な作業エリアの中を移動する際も、サクサク動きストレスがないです。ピクセルのレンダリングもキレイで、ありがちな日本語環境特有のバグみたいなものもない。きちんとローカライズされたというより、日本語版として一から作ったかのようです。
反応速度が速いアプリケーションというのは、熟練ユーザーにとって特に大きな価値を感じるのではないでしょうか。
はじめは人柱として自ら試したものの、これは使える！と手応えを感じてから、チームのメンバーにすすめてみました。すると大抵は1日もあれば基本を覚え、翌週には使いこなしていました。使うために学校に行ったり、分厚い本を読んだり、研修を受けたりする必要がない・・・。それほど直感的に使えるよう、機能とデザインが洗練されています。
これは思わぬ二次的な恩恵でした。XDはPreview版だからなのか、または設計思想なのか、機能が極限まで削られています。使い始めた当初は、レイヤー機能、シンボル機能、グラデーション機能さえなく、描画については塗りと線、角丸、シャドウくらいしか設定できませんでした。画像のサイズ別書き出し機能もないので、正直心もとないときもあります。しかし新機能が魅力的で、制約はあるがXDを導入してみよう、となりました。
結果、余計な装飾を削ぎ落とし（できないので）、細かな余白や色の調整で、本質的にデザインと向かい合うことができました。実際、Googleのマテリアルデザインやコンプレクション・リダクションのようなテイストは、XDの機能で十分に再現できます。私たちは新しいトンマナのアプリケーションを作っていたので、この制約のおかげで、洗練されたデザインに落とし込むことができました。（ちなみに画像の使用も制限があるので、アイコンはWebフォント化した）
今回メリットとして5点を並べてみましたが、もちろん導入にはデメリットもあるかもしれません。そしてそれは現場やチームによって様々でしょう。あくまで私達のチームとして感じた事なので、何かの参考になればと思います。
