いまいりさこ 
WebデザイナーとしてずっとSketchを使ってきましたが、2018年はXDが活躍する機会も増え、現在はほぼ半々の頻度で使っています。どんなケースでどのツールを使っているかをまとめてみました。
本記事は「Design Tools Advent Calendar 2018 – Adventar」の8日目の記事です。
この記事を書いているデザイナーの属性
ひと口に「Web/UIデザイナー」と名乗っても人によってしているお仕事はさまざまです。この記事を書いている人間の属性は下記の通り。
- フリーランスのWebデザイナー
- 地方在住なので、基本は100%リモートワーク
- Macユーザー（お取引先もMac率高め）
- コーポレートWebサイト制作、Webサービス制作、アプリのUIデザインなど、なんでもやる
- デザインカンプ制作とプロトタイプ制作を同じくらいやってる
- HTML/CSSコーディングもわりとやる
ようするに、受託制作メインのWebとUIのなんでも屋さんです。最近はストーリーボードを作ったり仮説検証をしたりもしているので、UXデザイン分野にも片足突っ込んでいます。（個人的に、デザイナーはみんなUX考えてると思っていますが）
XDとSketch、両方とも大活躍しています
最初に書いた通り、2017年は完全にSketchユーザーだったので、XDはプロトタイプを作るためのツールだと思っていました。しかし、2018年夏に主催したWebデザイナーさん向けイベントでXDを本気で運用されているお話を聞いて「これは使えるのでは…？」と思い、部分的にXDに乗り換えました。
[card2 id=”56″]
基本が受託制作のフリーランスなので、クライアントさんのご指定のツール次第という側面もあります。とはいえ「XDかSketchならどっちでもいいよ」と言っていただくケースは多いです。
検討段階、プロトタイプ作成ならXD
今後がらっと変わる可能性が高いもの、プロトタイプを動かして考えたいものはXDで作ります。
比較的上流工程から関わらせてもらう案件では、XDが多いです。（上流のみ関わって下流は別のデザイナーさんにお任せするケースもあり）このタイプのお仕事では、おもにスマートフォン用アプリに関わらせていただくことが多いです。
XDを選ぶ理由は以下の通り。
- シンプルなUIキットが揃っているので、簡単な画面を手早く作れる
- 固定バーやモーダルウィンドウ、時間遷移などをプロトタイプに盛り込める
- 「プロトタイプ」「デザインスペック」の2種類の共有方法がある
共有方法については、ディレクターさんやお客さまには手元のパソコンやスマートフォンで動かせる「プロトタイプ」、コーダーさんやエンジニアさんにはすぐ作業に取り掛かってもらえる「デザインスペック」をお渡ししています。
これを1つのXDファイルから1クリックで作れるのは助かります。
ワイヤーフレーム、デザインカンプ作成ならSketch
ある程度画面の設計が固まっているもの、デザインを作り込みたいものはSketchを使っています。
ワイヤーフレームがすでにできているデザイン案件で活躍する機会が多いです。XDで納品するケースでも、デザインカンプはSketchで仕上げて最終的にXDファイルに変換したりしています。（細かいところが微妙に変わったりもするので、XDで開いたときのチェックはしましょう）
Sketchを選ぶ理由は以下の通り。
- シンボルやカラーパレットの管理が楽なので、デザインに揺らぎが生じにくい
- シャドウやテクスチャなど、ビジュアルの作り込みはまだXDより得意
- 慣れている、過去のデザインファイルを活用できる
XDにもシンボル（同じパーツを使い回せる）機能は搭載されましたが、Sketchのシンボルを一覧で見られる機能は手放せません。あさぎデザインでは基本的にデザインをパーツ単位で管理するAtomic designを採用しているので、パーツ単位でレベル別に整理できるのはとても便利。
詳しくは「Atomic Designの概念を参考にSketchのシンボルを効率的に管理する方法 | UXデザイン会社Standardのブログ」がおすすめです。
動かすものはXD、作り込むものはSketch
基本方針としては、動かして検討するもの（上流工程が多い）はXD、作り込みが必要で修正にも強くしたいもの（下流工程が多い）」はSketchを使っています。
将来的には一本化するかもしれませんし、しないかもしれません。道具にあまりこだわりはなく、ようするに「良いものが早くできればいいよね！」というスタンスです。
気がつくと新機能がリリースされているので、情報収集がんばろう
XDもSketchも気がつくと新機能が搭載されていて、びっくりすることが多い2018年でした。
Sketchについては開発スタッフさん公式Mediumがおすすめです。英語を読む気力がない時も、新機能の操作方法はGIFアニメーションにしてくれていたりするので「最低限の操作だけ知りたい！！」という時もおすすめ。
XDは日本法人があるAdobeのツールなので、日本語の情報発信が頼りになります。Adobeの 轟 啓介さん、コミュニティエヴァンジェリストの 湯口 りさ さんのTwitterは追いかけています。
AdobeMAX Japanで知ったことも多かったので、アーカイブ動画やスライドを見るのはおすすめです。
[card2 id=”381″]
まだ全然情報に追いつけていないんですが、個人的には「Figma」も気になっています。来年もツールの進化を楽しみに、ほどほどに追いかけていこうと思っています。