こんにちは。Web制作において、プロトタイピングツールはもはや必須のアイテムとなってきました。今では機能や特性も様々なプロトタイピングツールが多数ありますが、今回はその中でもおすすめのプロトタイピングツールをそれぞれ比較しながら8つご紹介します。
比較・評価する観点は、以下の5点です。
- 再現性（ここでの「再現性」とはUIアニメーションが表現できるかということです）
- 操作性（学習コスト・使用感）
- PhotoshopやIlustratorなどとの互換性の有無
- プレビュー環境（実機でプレビュー可能かなど）
- その他（mac/winで使用できるか・簡単に共有できるかなど）
トランジション型
1. Prott
Prottは私も仕事で一番使用しているプロトタイピングツールです。とにかく操作が簡単でサクッと作成でき、簡単に画面の遷移をチームやクライアントに共有することができます。
- 再現性 ×
- 操作性 ○
- 互換性 △
- プレビュー環境 ○
- その他
直感的なUIで初めてでも簡単に使用できます。分からないとがあればGoodpatchの方にチャットで質問ができ、だいたい5分程度で返信が返ってきます。
現状はPhotoshopやIllustratorのデータをインポートすることはできませんが、今後、Photoshopとの連携が可能になるとのこと。
PC・スマホ共に実機でプレビューが可能。
URLで簡単に共有できます。無料で使用できます。
2. Adobe XD
XDはAdobe製品なので、今後PhotoshopやIllustratorなどのグラフィックソフトとの連携ができるようになることを期待しています･･･！
- 再現性 ×
- 操作性 ○
- 互換性 △
- プレビュー環境 ○
- その他
直感的なUIで、操作が簡単です。また、とにかく軽くて速いです。
PhotoshopやIllustratorのデータをそのままインポートすることはできませんが、ベクターオブジェクトやテキストなど、一部のインポートは可能です。XDはまだプレビュー版なので、こちらも今後に期待です。
PC・スマホ共に実機でプレビューが可能。
URLで簡単に共有できます。Adobeに登録していれば無料で使用できます。
3. inVISION
こちらはオンライン上でプロトタイピングが手軽に作成できるサービスです。EvernoteやAirbnbといった有名企業も、アプリ開発の際にこのinVisionを使用しているとのこと。
- 再現性 ×
- 操作性 ○
- 互換性 △
- プレビュー環境 ○
- その他
Photoshopプラグインの「LiveShare PS」をインストールすると一部可能になるとのこと。
PC・スマホ共に実機でプレビューが可能。
URLで簡単に共有できます。無料で使用できます。
4. Marvel
こちらもオンラインサービスです。Marvelの魅力は無料プランでもプロジェトを無制限で作成できることです。使用感としてはinVISONに似ています。
- 再現性 ×
- 操作性 ○
- 互換性 △
- プレビュー環境 ○
- その他
Photoshopのデータをそのままインポートできるようですが、実際やってみたところ重いデータはうまくいかず･･･。
PC・スマホ共に実機でプレビューが可能。
URLで簡単に共有きます。無料で使用できます。
