• MV_1120x330
  • MV_1120x330
  • MV_1120x330
  • MV_1120x330

WEBクリエイター必見。おすすめプロトタイピングツール8選

ほっしー ほっしー


LoadingMY CLIP

  • このエントリーをはてなブックマークに追加

こんにちは。Web制作において、プロトタイピングツールはもはや必須のアイテムとなってきました。今では機能や特性も様々なプロトタイピングツールが多数ありますが、今回はその中でもおすすめのプロトタイピングツールをそれぞれ比較しながら8つご紹介します。

比較・評価する観点は、以下の5点です。

  1. 再現性(ここでの「再現性」とはUIアニメーションが表現できるかということです)
  2. 操作性(学習コスト・使用感)
  3. PhotoshopやIlustratorなどとの互換性の有無
  4. プレビュー環境(実機でプレビュー可能かなど)
  5. その他(mac/winで使用できるか・簡単に共有できるかなど)

トランジション型

1. Prott

https://www.machikado-creative.jp/wordpress/wp-content/uploads/2016/10/Prott.png

Prottは私も仕事で一番使用しているプロトタイピングツールです。とにかく操作が簡単でサクッと作成でき、簡単に画面の遷移をチームやクライアントに共有することができます。

  • 再現性 ×
  • 操作性 ○
  • 直感的なUIで初めてでも簡単に使用できます。分からないとがあればGoodpatchの方にチャットで質問ができ、だいたい5分程度で返信が返ってきます。

  • 互換性 △
  • 現状はPhotoshopやIllustratorのデータをインポートすることはできませんが、今後、Photoshopとの連携が可能になるとのこと。

  • プレビュー環境 ○
  •  PC・スマホ共に実機でプレビューが可能。

  • その他
  •  URLで簡単に共有できます。無料で使用できます。

2. Adobe XD

https://www.machikado-creative.jp/wordpress/wp-content/uploads/2016/10/Adobe-XD.png

XDはAdobe製品なので、今後PhotoshopやIllustratorなどのグラフィックソフトとの連携ができるようになることを期待しています・・・!

  • 再現性 ×
  • 操作性 ○
  • 直感的なUIで、操作が簡単です。また、とにかく軽くて速いです。

  • 互換性 △
  • PhotoshopやIllustratorのデータをそのままインポートすることはできませんが、ベクターオブジェクトやテキストなど、一部のインポートは可能です。XDはまだプレビュー版なので、こちらも今後に期待です。

  • プレビュー環境 ○
  • PC・スマホ共に実機でプレビューが可能。

  • その他
  • URLで簡単に共有できます。Adobeに登録していれば無料で使用できます。

3. inVISION

https://www.machikado-creative.jp/wordpress/wp-content/uploads/2016/10/inVISION.png

こちらはオンライン上でプロトタイピングが手軽に作成できるサービスです。EvernoteやAirbnbといった有名企業も、アプリ開発の際にこのinVisionを使用しているとのこと。

  • 再現性 ×
  • 操作性 ○
  • 互換性 △
  • Photoshopプラグインの「LiveShare PS」をインストールすると一部可能になるとのこと。

  • プレビュー環境 ○
  • PC・スマホ共に実機でプレビューが可能。

  • その他
  • URLで簡単に共有できます。無料で使用できます。

4. Marvel

https://www.machikado-creative.jp/wordpress/wp-content/uploads/2016/10/Marvel.png

こちらもオンラインサービスです。Marvelの魅力は無料プランでもプロジェトを無制限で作成できることです。使用感としてはinVISONに似ています。

  • 再現性 ×
  • 操作性 ○
  • 互換性 △
  • Photoshopのデータをそのままインポートできるようですが、実際やってみたところ重いデータはうまくいかず・・・。

  • プレビュー環境 ○
  • PC・スマホ共に実機でプレビューが可能。

  • その他
  • URLで簡単に共有きます。無料で使用できます。

街角のクリエイティブ ロゴ



  • このエントリーをはてなブックマークに追加


TOP