UIデザインツール、結局どれ使ったらいいの問題

はじめに

アイスタイル 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 Figma InVision Studio
軽さ(体感)
コンポーネント
レスポンシブ対応
テキストの調整のしやすさ
プロトタイプの豊富さ
アニメーション
プラグイン
  • 軽さ(体感)
    いきなり感覚的な情報で申し訳ないですが、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日現在の情報です)

Ps Ai XD sketch Figma InVision Prott Zeplin Abstract
画像加工
ベクター
UIデザイン
プロトタイプ
デザインスペック
コードの書き出し
コメント
リアルタイム共同作業
バージョン管理
OS指定
UIの言語 英語 英語 英語 英語 英語
デザインスペックとは

 

デザインスペックは、制作物の詳細な情報を記述した文書です。見た目のデザイン(色、文字スタイル、配置)や情報(フロー、振舞い、機能)等が含まれます。開発者はこの文書から仕様を取り出し、開発を行います。

引用元:Adobe Blog

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

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

で、結局どれ使う?

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

tool 特徴 懸念点
Photoshop ・写真・画像の加工に特化
・ぼかしやエフェクトがキレイに反映される
Illustrator ・ベクターを使用したイラスト作成やアイコン作成に特化
・アイコンを作るならイラレで作るのが一番早くて作りやすい
XD ・プロトタイプ、UIデザインに特化
・動作が軽くて、学習コストがかからず誰でも扱える
・PhotoshopとSketchのデータを取り込める
・声によるトリガーをセットできる(英語のみ)
Sketch ・UIデザインに特化
・使用者が多い
・プラグインの種類が豊富
・コンポーネントの編集が容易
・macのみ
Figma ・プロトタイプ、UIデザインに特化
・簡易なバージョン管理が可能
・コードの書き出しが可能
・ブラウザ上で起動(アプリもある)し、リアルタイムで共同作業ができるので、いつでも最新が確認できる
・sketchデータを取り込める
・データを恒久的に取っておけない
・ブラウザで開いた時、フォントが入っていないとフォントが無い人にデータが引きずられ、崩れる
InVision Studio ・プロトタイプ・UIデザインに特化
・アニメーションが詳細に作れる
・コードの書き出しが可能
・上記のUIデザインツールの中では比較的webライク
・macのみ
Prott ・トリガーが多い ・画像を取り込んで範囲を指定して…と、作業負担が大きい
Zeplin ・photoshopやXD、sketchで作成したデータのデザインスペックを確認できる
・コードの書き出しが可能
Abstract ・バージョン管理ツール
・githubのデザイン版
・デザインのコミットやマージができるので、大人数での編集時に便利

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

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

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

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

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

ディレクター&デザイナーとして日々もくもくとお仕事。アイスタイル屈指のツールオタクだと勝手に思ってます。趣味はお散歩です。