Adobe XDを最短で習得する方法

エムスリーキャリアアドベントカレンダー1日目。ハードル低くしていく所存。
https://qiita.com/advent-calendar/2019/m3c

なぜAdobe XD

Adobe XDを活用して、新規サービスの画面設計、既存サービスの機能追加、機能改善を積極的に行っており、手戻りが大幅に減っている。

最終成果物とのイメージのズレが少ない

スプレッドシート等で画面イメージを作っていた時期もあったが、フォントサイズ、画面サイズ等、実際のWebイメージとの乖離が大きく、あとからHTMLの画面にした際に、「やっぱちょっと違うな」とか、「やっぱこのメニュー入り切らないね・・」とか気づいて、手戻りが発生してしまう。
自分のチームでAdobe XD利用推奨をしていた際に、メンバーが貼り付けた画面キャプチャを見て、「Adobe XD使ってみなかったんですか？」と聞いたら、実は、Adobe XDを使っていたみたいな、リアルな画面イメージを作ることができる。自分も、Adobe XDでデモしていたら、「あれ？もうシステム作ったんですか？」みたいなことを他のエンジニアに言われたことがある。

効率的に作れる

「railsで開発するからプロトタイプをすぐ作れますよ」みたいなことをやっていたら、プロトタイプ作るのもそこそこ時間がかかって、プロトタイプをビジネスサイドに見てもらったら、大きく変更が入って。。それって、手戻りでしょうと。スタイルシート変更するのも面倒だし。
Adobe XDなら、ささっと作れる。また、複数パターンを作って、比較することもできる。システムで直接プロトタイプを複数パターン作るのはさらに面倒なので、大きなメリットだと考える。

習得しやすい

Photoshop、Illustrator等と比較して、習得しやすい。
チームのエンジニアにAdobe XD試してもらったら、特にサポートも無く、身につけていたので、エンジニアでも習得しやすいはず。

無料

同じようなツールであるSketchと比較して、無料であるため、試しやすい。
（最近、流行っているfigmaも無料ではあるけど）

そんなAdobe XDを社内でも普及するために、勉強会等を行っており、どうやったら、Adobe XDを最短で習得できるか記載する。

概要理解

2019年12月現在、書籍も3種類ほどあり、全て読んだのだが、意外と公式サイトの動画が、概要をささっと理解するのに、便利で、十分である。
https://helpx.adobe.com/jp/xd/how-to/what-is-xd.html

使えるようにする

公式のスターターキットがあり、自学自習で2時間程度あれば、一通りの操作を身につけることができる。
https://www.adobe.com/jp/products/xd.html#starterkit

初級編と中級編とあるが、
初級編だけでも、十分、機能追加、機能改善レベルであれば、十分、対応できる。

中級編はコンポーネントの概念があり、新規サービスで大量の画面の設計が必要になる場合に有用である。逆に、大量の画面設計をする際に、コンポーネントを使いこなしていないと、メンテナンスで死ぬ。

スターターキットに載っていないけど、重要なこと

UI-KIT

UI-KITというものがあり、HTML部品のパーツが予め用意されている。
わざわざ自分で作るのも面倒だし、提供されているものを使うほうが品質もよいので、活用するとスムーズに設計できる。
特に、日本語のKITであるWires jpを使うとよい。
https://www.behance.net/gallery/67284971/Wires-jp

既存システムの機能追加、機能改善の画面イメージ

当たり前な気もするのだけど、わざわざすべての画面イメージをAdobe XDで作るのではなく、既存の画面をキャプチャして、貼り付けて、修正する箇所だけAdobe XDでボタン等を作ると効率的である。

あとは、実践あるのみ・・。
機会を作って、Adobe XDをためそう。