UXデザインで必須のプロトタイピングを効率良くこなせる最新ツールまとめ。
プロトタイピングツールは以前からあったのですが、最近はUXデザインが主流になってきたこともあって、かなり実用的なものが増えてきています。
この記事ではよく使われるプロトタイプツール７つとそれぞれの評価をまとめてみました。
プロトタイピングツールの評価
プロトタイピングツールの中でもとくに高機能なもの７つを選びそれぞれ次のような項目で評価してみました。
- リソース: UIkitやライブラリの多さで評価
- デザイン: そのツールだけで細かいデザインを作れるか
- プロトタイプ: 画面遷移やキーボードの表示など実機に近いことができるか
- アニメーション: ボタンを押した時の反応などを細かく指定できるか
- プレビュー: 実機でプレビューできるか、コメントなどを追加できるか
- 無料枠: 無料で使えるか、期間限定は△
３段階でそれぞれ以下のように評価しました。
- △: できない、もしくは弱い
- ◯: できる
- ◎: かなりよくできる
| ツール名 | リソース | デザイン | プロトタイプ | アニメーション | プレビュー | 無料枠 |
|---|---|---|---|---|---|---|
| Adobe XD | ◎ | ◯ | ◎ | △ | ◯ | ◎ |
| inVision | ◯ | ◯ | ◎ | ◯ | ◯ | ◯ |
| Framer | ◯ | ◯ | ◯ | ◎ | ◯ | △ |
| Overflow | △ | △ | ◎ | △ | ◎ | ◎ |
| Sketch | ◎ | ◎ | ◯ | △ | ◯ | △ |
| Protpie | △ | △ | ◯ | ◎ | ◎ | △ |
| UXPin | ◯ | ◯ | ◯ | △ | ◯ | △ |
総合評価
- 最優秀賞: Adobe XD
- 優秀賞: inVision Studio
- これから注目賞: Framer,Overflow
使い勝手や導入しやすさ、ライブラリの豊富さなどで最優秀賞はXD。次いで無料枠もあるinVision Studio。
Framerはコードも書けるプロトタイプツールとして、Overflowはプロトタイピング特化でどこまでいけるかに注目。
最新プロトタイピングツール・サービスまとめ
Adobe XD
無料から使えるプロトタイプツール。リピートグリッドや簡単に登録、再利用ができるアセットなど使い勝手の良い機能が盛りだくさん。
パスツールがあるのでちょっとしたアイコンの作成とかも可能で、ワイヤーフレーミングからビジュアルデザインまでこなせます。
inVision Studio
無料から使えるプロトタイピングツール。XDよりも細かいアニメーションの作成ができ、レスポンシブデザインも作りやすいのが特徴。
バージョン管理機能があるので保存した後もデザインをやり直すことができます。
Studioの他にデザインシステムマネージメントやクラウドもあり総合的に使えるプロ御用達のツール。
Framer
Sketchのインポートができ、レスポンシブデザインにも対応。ここでつくったアイコンはSVG書き出しできるのがGood。
コードを使ったアニメーションの作成など他とは違った機能もあります。
Overflow
プロトタイピング（画面遷移などのユーザーフロー）に特化したツール。
Sketchから取り込んだアートボードを使ってユーザーフローを細かく設定可能。
Sketch
最近プロトタイピング機能が追加されたMacの定番デザインツール。元がデザインツールなので、ワイヤーフレームから細かいデザインまでこなせます。
プラグインが豊富でSketchにはない機能を追加できるのが魅力。inVisionCraftやOverflowと組み合わせて強力なプロトタイピングツールに拡張することができます。
Protopie
コードを書かずに細かいアニメーション、インタラクションの作成ができるツール。
アプリ制作向き。
UXPin
プロトタイピングだけでなく、デザインのドキュメントも含めたデザインシステム全体を提供しているツール。
デザインを作った後のスタイルガイドやドキュメントの作成はすごく手間のかかる作業ですが、UXPinを使うことで自動生成できます。
まとめ
WebでもアプリでもUXデザインが必須になってからツールもかなり進化してて、どれがいいか迷うほど。
プロトタイピングに関してはやっぱりXDが一番手軽で使いやすいですね。難しい機能もなく、何より無料でほとんどの機能が使えるのがポイント高いところ。
アニメーションが弱いところがマイナスですが、凝ったアニメーションのアプリでなければ十分使えるレベル。