XDとSketch、デザインツールどう使い分ける？

WebデザイナーとしてずっとSketchを使ってきましたが、2018年はXDが活躍する機会も増え、現在はほぼ半々の頻度で使っています。どんなケースでどのツールを使っているかをまとめてみました。

この記事を書いているデザイナーの属性

ひと口に「Web/UIデザイナー」と名乗っても人によってしているお仕事はさまざまです。この記事を書いている人間の属性は下記の通り。

ようするに、受託制作メインのWebとUIのなんでも屋さんです。最近はストーリーボードを作ったり仮説検証をしたりもしているので、UXデザイン分野にも片足突っ込んでいます。（個人的に、デザイナーはみんなUX考えてると思っていますが）

最初に書いた通り、2017年は完全にSketchユーザーだったので、XDはプロトタイプを作るためのツールだと思っていました。しかし、2018年夏に主催したWebデザイナーさん向けイベントでXDを本気で運用されているお話を聞いて「これは使えるのでは…？」と思い、部分的にXDに乗り換えました。

基本が受託制作のフリーランスなので、クライアントさんのご指定のツール次第という側面もあります。とはいえ「XDかSketchならどっちでもいいよ」と言っていただくケースは多いです。

今後がらっと変わる可能性が高いもの、プロトタイプを動かして考えたいものはXDで作ります。

比較的上流工程から関わらせてもらう案件では、XDが多いです。（上流のみ関わって下流は別のデザイナーさんにお任せするケースもあり）このタイプのお仕事では、おもにスマートフォン用アプリに関わらせていただくことが多いです。

XDを選ぶ理由は以下の通り。

共有方法については、ディレクターさんやお客さまには手元のパソコンやスマートフォンで動かせる「プロトタイプ」、コーダーさんやエンジニアさんにはすぐ作業に取り掛かってもらえる「デザインスペック」をお渡ししています。
これを1つのXDファイルから1クリックで作れるのは助かります。

ある程度画面の設計が固まっているもの、デザインを作り込みたいものはSketchを使っています。

ワイヤーフレームがすでにできているデザイン案件で活躍する機会が多いです。XDで納品するケースでも、デザインカンプはSketchで仕上げて最終的にXDファイルに変換したりしています。（細かいところが微妙に変わったりもするので、XDで開いたときのチェックはしましょう）

Sketchを選ぶ理由は以下の通り。

XDにもシンボル（同じパーツを使い回せる）機能は搭載されましたが、Sketchのシンボルを一覧で見られる機能は手放せません。あさぎデザインでは基本的にデザインをパーツ単位で管理するAtomic designを採用しているので、パーツ単位でレベル別に整理できるのはとても便利。

基本方針としては、動かして検討するもの（上流工程が多い）はXD、作り込みが必要で修正にも強くしたいもの（下流工程が多い）」はSketchを使っています。

将来的には一本化するかもしれませんし、しないかもしれません。道具にあまりこだわりはなく、ようするに「良いものが早くできればいいよね！」というスタンスです。

XDもSketchも気がつくと新機能が搭載されていて、びっくりすることが多い2018年でした。

Sketchについては開発スタッフさん公式Mediumがおすすめです。英語を読む気力がない時も、新機能の操作方法はGIFアニメーションにしてくれていたりするので「最低限の操作だけ知りたい！！」という時もおすすめ。

XDは日本法人があるAdobeのツールなので、日本語の情報発信が頼りになります。Adobeの轟啓介さん、コミュニティエヴァンジェリストの湯口りささんのTwitterは追いかけています。
AdobeMAX Japanで知ったことも多かったので、アーカイブ動画やスライドを見るのはおすすめです。

まだ全然情報に追いつけていないんですが、個人的には「Figma」も気になっています。来年もツールの進化を楽しみに、ほどほどに追いかけていこうと思っています。