はじめに

アイスタイル Advent Calendar 2018 17日目を担当します、デザイン部のhosoekです。

アイスタイルのデザイン部は主に、@cosmeのweb・アプリのUIを中心に@cosmeに関わる様々なサービスのUIを作成しています。今私はブランド様向けサービスの「ブランドオフィシャル」プロジェクトにて、ディレクション（と時々デザイン）を担当しています。

さて、去年のアドベントカレンダーはXDとPhotoshopの違いについて書いたのですが、今年は何にしようかと悩んで、またツールのお話をすることにしました。

ツールっていっぱいあるよね

昔のAdobe一強時代を経て、今では沢山のデザインツールが誕生しています。

弊社デザイン部では昨年はPhotoshopも活躍していましたが、主にUIのデザインをしているので画像加工の必要があまりなく、徐々にUIデザインに優れたXDやSketchに移行してきました。
最近ではAdobeやUIデザインツール以外にも便利なツールが沢山出てきて、何を使ったら良いんだろうという悩みも出てきました。

弊社でもいくつかツールを使ったり試したりしていますが、

• Photoshop
• Illustrator
• XD
• Sketch
• Prott
• Zeplin
• Figma
• Abstract
• InVision Studio

と多岐にわたり、何が何だかってぐらい乱立しています。
これだけ魅力的なツールが沢山あると、何を使っていいのか分からなくなりますよね。

今回は、UIデザインツールの有名どころであるXD、Sketch、Figma、InVision Studioをメインに、各種ツールの全体的な特徴と使える機能を比較してみました。

どのツールを使おうか、また、今使っているツールが自分の業務に合っているのか悩んでいる方の参考になればいいなと思います。

UIツールの比較

まずは、UIデザインツールの4種を比べてみます。
（※2018年12月17日現在の情報です）

• 軽さ（体感）
  いきなり感覚的な情報で申し訳ないですが、XDが圧倒的に軽い印象です。沢山アートボードを作っても重くなりません。
  　
• コンポーネント
  Sketchのコンポーネントは、コンポーネントだけで1画面にまとまっているので、確認や調整がしやすいです。
  　
• レスポンシブ対応
  基本どのツールも大差は無いです。
  　
• テキストの調整のしやすさ
  Sketchはmasterのテキストと変更後のテキストを簡単に確認できます（このあと記述のオーバーライド機能を参照）。他のツールはmasterに一度飛んで確認するか、変更したテキストを全てに反映するなどになるので、調整が少し難しいです。
  　
• プロトタイプの豊富さ
  InVision Studioはトリガーが沢山あり、web用（マウスの動き）、スマホ用（指の動き）、キーボード操作、タイマーの4種でトリガーを決められる所が特徴です。
  　
• アニメーション
  XDでは簡単なモーションアニメが作成でき、重宝します。
  もっと細かくモーションを指定したい場合は、InVision Studioを使用すればAfter Effectsのようにタイムラインを使ってアニメーションを作ることができます。（ちなみにSketchでもプラグインを入れれば詳細なアニメーションを作ることが可能なようです◎）
  　
• プラグイン
  プラグインを使ってカスタマイズする場合、一番プラグイン登録数が多いSketchがおすすめです。
  XDも最近のアップデートでアドオンが使えるようになり、そのアドオンもjsを使って作れるようです。
  アドオンを作る勉強会も活発みたいなので、今後は沢山増えていくんじゃないかなーと思います。
  　

また、上記以外にもツールを代表する機能がありますのでご紹介します。

• XD：リピートグリッド
  選択した要素を、縦横に新規で配置してくれる機能です。隙間も一気に変更することができます。
  　
  

• Sketch：オーバーライド機能
  作ったシンボルの要素を、簡単に、分かりやすく差し替えることが可能です。大人数でデータを触る場合は、他の人にどんな情報を埋めてほしいかが分かりやすくなります。
  　
  

• Figma：コンテンツの入れ替え
  作ったコンテンツ間の幅調節と、ポジションの入れ替えが容易にできます。
  　
  

• InVision Studio：詳細なアニメーションの作成
  読み込まれるタイミングやスピード、イージングまで簡単に調整することができます。
  　
  

各種ツールの特徴

続いて、業務ツールを含めてざっくりと違いをまとめてみました。
（※2018年12月17日現在の情報です）

　
Prottはプロトタイプ用のツールですが、最近は他のUIデザインツールから直接プロトタイプを作成したほうが早い & 出来ることが多い印象です。
ですがProttにはプロトタイプのトリガーが多く、特にピンチイン・アウトを使用したい場合はProttにしかそのトリガーが実装されていないため、そのトリガーを使用して確認したいときはProttを使用するのが良いのではないかと思います。

ちなみにSketchのコメントについては、Sketch Cloudにてコメントが可能なため、△としています。
XDのリアルタイム共同作業とバージョン管理については将来実装予定とのことなので、とても楽しみです！

で、結局どれ使う？

今まで比較してみたものをまとめると、下記のような特徴が見えてきます。

個人的には「UIデザイン」「プロトタイプ」「バージョン管理」「共同作業」「コードの書き出し」と全ツールの良いとこどりをしているFigmaを推しているのですが、

• 全員が同じ環境でない事による不具合（有料フォントの有無などで表示崩れがある）
• データを恒久的に取っておきたい（.figで書き出せるが、FIgmaで開けない謎現象がある）

といった事がネックとなり、現在はXDだったり、Sketch＋Zeplinを使用したりして対応しています。
（Abstractも使いたいですが、大人数で作業することが直近で無いため一旦保留中…）
将来的にはXDもリアルタイム共同作業とバージョン管理が使えるようになるとの噂もあるので、そうなると今度はXDが優勢？と思ったりして日々ワクワクしています。

ちなみにとある調査では、Sketchがダントツ人気、次いでFigma、XDが人気なようですよ?
http://uxtools.co/survey-2018

お仕事に便利なツールを紹介しましたが、お仕事以外にも沢山遊べるツールたちです！
ぜひ色々試したり組み合わせたりして、自分に合ったツールを探してみてください！