Adobe XDを導入した時のお話

　今UI/UXデザインに使うツールというのは数多く存在している。ワイヤーフレームだけでも何個もあり、有料無料問わず使おうとするならば選択肢も豊富だ。弊社もその例に漏れずあらゆるサービスを利用して試してきた。サービスを使用することで業務の高速化や、改善などの期待ができ更にクオリティが上がれば非常に素晴らしいことである。
　そのため、Adobe XDを導入した弊社で起きたことと実際の導入までの流れを記事で振り返って見たい。

制作環境の改善とクオリティは直結する

　入社後に一番最初に私が行なった仕事がワークフローの改善で、特にデザイナーとエンジニアのやりとりでの負担を軽減する所から始めなければならなかった。以下、当時の問題点を挙げてみよう。

PhotoshopとIllustlatorだけでの作業完結はエンジニアにもデザイナーにも優しくない

　当時の弊社は先方との校了後。必要な素材をエンジニアに渡す際にエンジニアがカンプを確認する作業などに非常に時間がかかっていた。素材が足りない、大きなPNGからマージンを測って･･････とWebデザインを実装するだけでも双方に手間がかかり過ぎていた。
　そのため、業務改善の主軸は双方の負担を如何に軽減させるかが課題となった。

ディレクションは誰が決めるのか、同様にデザインルールは誰が決めるのか

　同様に問題点としてデザインにおける必須のルールが各員それぞれバラバラで定義化されていない問題点も浮き彫りになってしまった。そのため、ファイル名から先方への確認方法、CSSの定義化といったルール化も同様に行なうのだが、何か一つピースが埋まらない状況であった。そこに現れたのがAdobe XDであった。

Adobe XDを使おう

　ちょうどその時期にAdobe XDが無料化されるというニュースが話題になった。正直あまり期待していなかったのだが、Adobe CC内なのでデザイナーは元々無料で使えたことから無料化前から壇上には上がっていたのだ。この時にはワイヤーフレームがデザインでいうラフになるということも恥ずかしながらそれも知らなかった頃である。
　そして導入に踏み切った理由が正に無料化という部分に加え、エンジニアに渡す際にもデザインスペックで詳細情報も一緒に渡せるメリット。そして導入後に一番効果が大きかったのがデザイナー、エンジニア双方の習熟難度の圧倒的な低さである。画像の切り抜きが必要であればエンジニア側でも行え、実装の際にはXD上でデータを実際に目視しながら作業できるため一つの案件にかかる時間も大幅に短くなった。

導入時のメリット

• クライアントに直接イメージを持たせる
  　営業を通じてこちらの要望を伝えるのに限界があり、あれを忘れた、これを忘れたと言う事案が避けるためXDを用いて実際のワイヤーフレームやカンプイメージ、コメントで示すことができる。
• クライアントが使用可能であれば直接訂正や要望を受け取れる
  　XDのWebプレビューを使用すれば実際の展開イメージをアニメーション付きで示すことができ、ピンを用いてコメントで要望や修正を伝えることができる。
  　また、ダミーテキストや画像/写真が入るというのも示すことができるので営業にもクライアントにも何が必要かを逆に要望としてしっかりと提案が可能。そのため、「文字がここに入る」「画像が入ります」というラフ/フレームワークの段階でもクライアントに方向性やイメージの確認も取れる。
• 制作側からフロントへ要望を残すことができる
  XD自体がAdobe製品と思えないほど身軽なためフロントにも負担をかけにくい。CreativeCloudの共有機能を使えば制作スタッフ全員で制作ファイルを共有可能。
• 営業が習熟すればワイヤーフレームを客先で定義できてしまう
  　XDが非常に軽いので話しながらイメージを示して営業がワイヤーフレームを定義できる。習熟の問題はあるが、スムーズに作業が進められる
• ファイルサイズが軽い
  　Adobe製品とは思えないほど軽い、1Gを超えるPSDをコンバートしても重くても300M程度。
• デザイナー陣は習得が容易
  　普段Photoshopを使っていれば習熟は簡単に行える。当時と違って今は知見やサイトも多いため習熟も遥かに楽になっている。

導入時のデメリット

• 製作・フロント共にXDの習熟が必要
  　製作はPhotoshopの感覚で使用可能のためAdobe製品を使っていれば問題はないが、デザイナー陣以外に簡単な操作習熟を行う必要性はある。フロント側は想定の使い方であればズームとプレビュー機能さえわかっていればいいのでデメリットではあるが簡単に解決は可能。また、CSS記述に必要なマージン幅などもライブプレビュー機能を使えばXD側から取得可能。習熟が進めばXD側から切り出しも可能なためフロント側で非常に簡単なデザイン修正も可能となる。
• Photoshopとの互換性がまだ甘い
  　レイヤースタイルの一部に互換性がないためデザインが崩れる場合がある。スタイルの結合などで対応は可能だが、カンプ製作のPSDは結局は捨て去れない。
  　XD一本だけで製作は難しいがXDをメインにしてPhotoshopを編集ソフトに変えれば今まで以上に容易。
• デザインツールではない
  　UI/UXデザインツールとして開発された経緯があり、デザインを行うツールではない。詳しくは後述するがデザインをワントップで完結させるにはかなり工夫が必要。

　ただし、デメリットを見てもあまりあるメリットがXDにはあり導入後の案件の加速はめざましいものであった。特に、実際の動きに近いプロトタイプでの確認は圧倒的で今まで時間のかかっていた確認作業が目に見えて早くなった。

　目玉でもあるプロトタイプと呼ばれる実際の動きを模した物をオンラインで共有できるのがXDの強みの一つで、単純なアニメーションやモーダルウインドウを実際にイメージとして持ってもらえるのは非常に強いメリットで、弊社が導入の決め手になった部分もこの点である。特にAdobeのクラウドサーバーにアップしてプライベートメンバーでも公開でも見せられるのは特筆に値する。

　デザインスペックはカンプの確認が用意になったことやマージンの確認や画像カンプと違いテキストのコピーが可能になったことで実装作業が楽になったとエンジニアに好評だった。

導入時に行わなければならないこと

　じゃあ「良いじゃないか導入しよう。」と考えたディレクター、デザイナー諸氏は一旦落ち着いてほしい。Adobe XDは素晴らしいツールではあるがデザインツールとは言い切れない。
　前述のようにUI/UXデザインツールがベースとなっているため、細かなデザインを行うときは結局はPhotoshopやIllustrator、Sketchと組み合わせなければならない。ラグジュアリーな見た目やデザインを追求しだすと結局はXDで完結できないが、スマートフォンやモバイルアプリでの開発においては遷移や見た目の再現するだけであれば非常に大きな力を秘めている。
　では難しいのは何かと問われれば、それこそが導入で、人数が増えれば増えるほど組織では導入が難しく、制作環境を一変させるのは大きな説得力が必要となってくる。弊社ではエンジニアも上司も全てを巻き込んで私が、プレゼンから実際の作成までをワークフローで示すことで「すごく良いですね。」とエンジニアからも好評だったため導入できた。もし、導入を考えているのであれば私の記事を根拠の一つとして示していただけると良いだろう。

　記事の締めとしてAdobeの広報である轟氏のXDのセミナーでもお話頂いた金言を持って締めとしたい。

思考と同じ速度でデザインする、それがXDです。