Sketch, XD, Figma, Studio を比較する連載記事の6番目です。今回で終わりです。

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

今回はまとめです。各ツールの総括と、補足的な情報、ここまで比較しての結論などを書きます。

各ツールの総括

各ツールについて、特徴などの総括です。詳細はいままでのnoteでぜひ。

Sketch:
★ 歴史が長く、ユーザーも最多であるため、安定して使いやすく全体的な完成度が非常に高い。リファレンス・リソースもたくさんある
★ 大規模なUIドキュメントにも耐えうるすぐれた保守・管理性能を持つ
★ 複数人でSketchを使うならAbstractの導入がオススメ。VCS、コラボレーション、ハンドオフなど、運用面を劇的に改善してくれる

XD:
★ 無料でも大半の機能を使え、Adobe CC に加入しているならフル機能を使える
★ 高速に、高品質なプロトタイピングを行える。アニメーションの表現力に関してとてもすぐれている
★ とりあえずUIをすばやく形にして、明確なイメージを作り上げるのには最適
★ シンプルな分使いやすい。日本語のリファレンスも多いし安心
★ 大規模なUIカンプ作成・運用には向いていない

Figma:
★ VCSや複数人でのリアルタイム編集など、他のツールには無い魅力的な機能を多く備えている
★ Webツールでありながら優れた完成度を誇り、安定して使用できる
★ 大規模なUIドキュメントにも耐えうるすぐれた保守・管理性能
★ ひとつのツールで運用がほぼ完結するため、運用を圧倒的シンプルにできる
★ 個人で使うならTeamLibrary以外のほとんどの機能を無料で使える

Studio:
★ 無料でフル機能が使える
★ 残念ながら現状完成度はあまり高くない
★ 高速に、高品質なプロトタイピングを行える。アニメーションの表現力はXD以上
★ XD同様、大規模なUIカンプ作成・運用には向いていない
★ 単に動画作成ツールとして使うのはけっこうおすすめ。XDと比べてSketchに操作性・思想がかなり近いので、Sketchのサブツールにもいいかも

将来性

運用の中で長く使う以上、ツールがこれからどうアップデートされていくかは重要なポイントだと思います。各ツールの将来性について、私の所見で紹介します。

Sketch:
★ Bohemian Coding 社が2000万ドル調達しており、まだまだこれから盛り返すと思われる
★ アプリ内でのコラボレーション、ブラウザ上での機能が大きく進化する予定らしい
★ あからさまにFigmaを意識した機能を開発している模様

XD: 
★ Adobe Fireworks の前例はあるものの、現状では相当人気あるしまだまだこれからがんばってくれるはず
★ 以前紹介したとおり、シンボルのオーバーライドについて大幅なアップデートが予定されており、大規模なUIにも対応できるようになるかも

Figma:
★ Figma社は4000万ドル調達した模様
★ いまノリにのっています。これからも期待大

Studio: 
★ 正直いちばん不安
★ InVision社自体は成長しているものの、BohemianCoding, Figmaと違い、StudioはInVisionの主軸サービスでないため、切り捨てられる可能性はある
★ もともと謳っていた機能の大半はまだ出ていないので、今後ちゃんと実装されていくなら可能性は秘めている

余談1: 柔軟なプロトタイプ機能の必要性

ツール選択に関連する、ちょっとした余談を書かせてください。

昨今、スマートフォンの大型化に伴い、UIのトレンドは大きく変わりつつあります。ディスプレイの大型化に伴い、画面の下半分で操作が完結するUIがiOS, Android両方で重視されるようになり、画面遷移とモーダルUIの中間のような、曖昧な状態のUIが多用されるようになっています。

これらのUIの動きは、従来のInVisionやProttのようなプロトタイピングツール、SketchやFigmaでの表現は難しいです。Origami Studio やAfterEffectsでの再現は可能ですが、学習や手間の面で多少コストがかかります。

「5. プロトタイピングとコラボレーション」で紹介したように、XDやStudioのような差分アニメーション機能を持つ柔軟なツールなら本領を発揮できます。

余談2: デザインの保守とSST

大規模なデザインの運用であるほど、作成されたデザインのアウトプットは、様々な形で複数箇所に散らばります。

- コンポーネントライブラリ ( ex. Sketch Libraries )
- デザインシステム ( ex. HTML )
- UIデザイン ( ex. Sketch )
- ハンドオフ共有 ( ex. Zeplin )
- ドキュメント ( ex. Confluence )
- 実装 ( ex. iOSアプリ, Webページ )

デザインが日々アップデートされていく中で、これらのいずれかの情報は古くなってしまいがちです。例えば、Webページで文言だけ修正して、デザインに反映させない場合などです。特にドキュメントはsketchや実機アプリのスクショを貼っているだけのことが多く、修正のコストが高い（めんどくさい）ため放置されやすいです。

この状態は意識の食い違いや先祖帰りなどの事故を起こしやすく、不健全な運用です。理想を言えば、どのデザインが正しいのか常に担保されているべきです。デザインシステムではよく SST (Single Source of Truth/信頼できる唯一の情報源) という言葉が引用されますが、これも同じような哲学です。

各UIツールもこの問題は意識しており、特にFigmaはSSTを実現しやすいです。他の3つのツールと違いコラボレーションツールとしての側面が非常に強く、iframeでのEmbed, Figma単体でのハンドオフ機能など、実機の実装以外のほとんどのフェーズがFigmaだけで完結するため、情報の散らばりをかなり抑制できます。先述の通り、Sketchも同じような機能を実装予定です。

ざっくり結論

ツールを選ぶ際は、運用される環境・背景と、作成するデザインの規模・目的などで考えましょう。

★ 予算はいくらか？
★ ツールに関わるデザイナー、エンジニアは何人くらいいるのか？
★ デザイナーのスキルは？
★ 作成するデザインの規模は、その後の運用は？
★ 動くプロトタイプが必要か？

いずれにせよ「Sketch・Figma」と「XD・Studio」にそれぞれ別の特徴があるため、それぞれからひとつずつ使えるようになっとくと重宝します。個人的な好みも含めて言ってしまうと Figma と XD を使うのがオススメです。

Sketch or Figma → 大規模なデザインの運用
XD or Studio → 高品質にアニメーションするプロトタイプの作成

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

以上です。シリーズ通じて非常に長い文になりましたが、もし全部読んでくれた方がいるならとても嬉しいです。感想やご指摘等、お気軽にコメントやTwitterへのリプライでいただければ幸いです。普段はブログにていろいろ記事を書いているので、そちらも見ていただけると励みになります。

ありがとうございました。