Sketch, XD, Figma, Studio を比較する連載記事の2番目です。

1. 導入と背景知識
2. 基本項目の比較    ◀イマココ
3. デザイン機能比較
4. シンボルとスタイル 
5. プロトタイピングとコラボレーション
6. まとめ

今回は料金や利用環境など、各ツールの基本的な項目についての比較を紹介します。

対応デバイス環境

Figmaのみ、ブラウザ上で動くWebアプリケーションです。MacOS, Windows用のデスクトップアプリもありますが、こちらも中身はWebアプリケーションであり、オフライン環境では利用できません。反面、インターネットさえあればUbuntu系OSですら利用可能です。iOS・AndroidでもPCと同じ画面を表示できますが、残念ながら現状デザインの編集はできません。

XDとStudioはネイティブのデスクトップアプリとしてWindows, MacOSの両方で使用可能です。

SketchはMacOSのデスクトップアプリしか提供されていません。一応、Lunacyという非公式のWinowsアプリはあります。

利用料金

Studio, XD, Figmaに関して言えば、無料でもかなりの機能を使用できます。Sketchは30日間の無料体験のみです。いずれもライセンスはサブスクリプションです。Sketchはすこし特殊で、アップデート権のために年額を払うような仕組みです。

- https://www.sketch.com/pricing/
- https://www.adobe.com/jp/products/xd/compare-plans.html
- https://www.figma.com/pricing/
- https://www.invisionapp.com/studio

ツール間の互換性・他形式のサポート

基本的に、Sketchから他のツールへの移行はわりと楽に行なえます。他はまず無理です。

XD, Figma, Studioは後発の利点で、.sketchファイルをそのまま読み込むことができます。ただしシンボル構造、オーバーライド、日本語テキストなどはおかしくなりがちです。

他の経路 ( XD → Figma や Studio→Sketch など) での移行はどれもまともに動作しません。ファイルを開くことはもちろん、オブジェクトのコピー&ペースト、SVGの書き出し→読み込みなど、どうやってもかなり崩れます。Skechから他のツールへ移行する場合以外は、作り直すことになると考えたほうが良いでしょう。

ファイルの実態・管理

保存されるファイルの形式や管理についてです。各ツール、ファイルは以下のように管理されます。

FigmaはWebアプリケーションなので、基本的にブラウザ上で管理され、ファイルの実態がありません。.figというファイルに書き出すこともできますが、これは主にバックアップ用に使うような一時ファイルで、この形式でデザインを運用するのには向かないと思います。

Figma, XDのクラウドドキュメントは、バックアップの必要がない、共有が楽などの利点があります。反面、通常のフォルダ管理での運用はできなくなります。GitなどのVCS, Dropboxなどのクラウドストレージは当然使えません。フォルダの階層にも限界があるため、整理もすこし難しいです。

いずれも一長一短です。XDはどちらを選んでもそれなりに使いやすく、便利です。

## ファイルの実態

実は .sketch と .studio ファイルの正体はただのZIPファイルであり、中身はJSONと画像です。拡張子を.zip に変えれば解凍できます。.xd は解凍はできませんが、中身はJSONとXMLと画像などがまざった独自形式の模様です。.fig は不明ですが、ファイル容量的に近い構成だと思われます。

学習リソース

ツールの学習のしやすさについてです。そもそもですが、どのツールもPhotoshopやIllustratorに比べれば簡単です。いずれのツールも公式ドキュメントはかなりしっかりしており、困りはてることは無いと思います。また、いずれのツールも実際に触りながら覚えられるチュートリアル用のファイルが用意されており、それを触るのがおすすめです。

## Sketchの学習
「UIデザイナーのためのSketch入門＆実践ガイド 改訂第2版」を読めばOKです。ほかに日本語の書籍は(たぶん)無いですし、この本だけちゃんと読めば十分です。仕様に謎があったら公式ドキュメントを見に行けば良いですし、ネットにも日本語・英語で大量に情報があるのでまず困りません。

## XDの学習環境
とりあえずXDの起動画面に表示される「チュートリアル」か、公式で配布されている「スターターキット」を触るのが超オススメです。また、公式ドキュメント・動画の多くが唯一日本語で公開されています。日本語の書籍もいくつかありますし、勉強会も盛んです。

## Figmaの学習環境
とりあえずファイル一覧に初期表示される「Sample File」を触って、その後公式ドキュメントにひととおり目を通すのがおすすめです。日本語の記事も増えていますが、思想や運用改善に触れたものが多めです。しっかり機能をマスターしたければ公式ドキュメントを読んだほうが早いです。ドキュメントに無いことや、ちょっとしたテクニックについてはSpectrumのコミュニティでよく見つかります。

## Studioの学習環境
Figma同様、チュートリアルを触った上で、公式ドキュメントにさらっと目を通すのがオススメです。が、正直先にSketchを学習してしまったほうが早いです。Studioは他のツールに比べてもSketchにそっくりなので、Sketchを覚えればStudioもすぐ使えるようになります。

▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼

今回は以上です。次回は 3. デザイン機能比較 です。よかったら続きもお読みいただけると嬉しいです。ありがとうございました。