こんにちは、デザイナーのスライです。
夏が終わってしまいましたね。
夏が恋しいです、、、

さて、UIやUXを効率的に検証できるツールとして、
プロトタイピングツールの需要が高まっています。

今回はそんなプロトタイピングツールの中で、
無料で使えるものをまとめてみました。

怒りのUI第7回目「プロトタイピングツールを比較してみた」です。
（※スマホサイトを作成する想定での比較です）

Prott

Prott
恐らく、国内で最も有名なプロトタイピングツールだと思います。

株式会社グッドパッチが提供しているツールで、
日本語環境で利用できる点が大きな魅力です。

無料版は1プロジェクトのみ作成可能です。

画面遷移と遷移させるためのアニメーションを、
直感的に設定できるのが特徴です。

作成したプロジェクトにはURLが生成され、
下記の流れで実機での確認ができます。

1. URLへアクセス
2. ホーム画面に登録
3. ホーム画面からアイコンをタップ

また、Hipchat、Slackといったチャットツールと連動可能で、
業務で使用している場合は、確認作業をより効率化できます。

Marvel

Marvel
最大の特徴は、無料版でプロジェクトを無限に作成可能な点です。

画面遷移と遷移させるためのアニメーションを、
直感的に設定することができます。

画像の読み込みは、使用端末、Box、Dropbox、Google Driveと豊富。
また、Web上でのワイヤーフレームが作成可能な優れものです。

作成したプロジェクトは、下記の流れで実機確認が可能です。

1. URLへアクセス
2. ホーム画面に登録
3. ホーム画面からアイコンをタップ

InVision

InVision
無料版で1プロジェクトのみ作成可能です。

使用感はProttやMarvelと比較すると、直感的とは言えません。

しかし、ワークフローや更新履歴が視覚的で非常に分かりやすいです。
私がイメージしたものは、GitHubのそれに近いと感じました。

リリースまでのワークフローが確立されていて、
多くのメンバーが携わるプロジェクトに最適かもしれません。

また、プロジェクトをソースとして丸ごとDLできるので、
ローカル環境でも確認することが可能です。

生成されたURLをブラウザで表示するか、
アプリをDLすることで実機での確認が可能です。

Atomic

atomic
30日間限定で利用可能です。

最大の特徴は、インタラクションによる詳細なアニメーションを設定できる点です。
テンプレートから選ぶのではなく、タイムラインの要領で設定します。

アニメーションが重要なマテリアルデザインを作成する際に、重宝しそうです。

また、アニメーションだけでなく、デザインも作成することができます。
CSSをベースにしたもので、作成したパーツはCSSで出力することができます。

生成されたURLをシェアすることで、実機での確認が可能となります。

機能が多い為、操作性はあまり良くないですが、デザインの自由度はとても高いです。

Pixate

Pixate
完全無料で使用可能なツールです。

Atomic同様、インタラクションによるアニメーション設定が可能です。

無料ですが、これまでのツールと違い、Web上で編集ができません。
ローカル環境で安定して動作できる点はメリットですが、
それ以上に下記のデメリットが気になってしまいました。

• 確認端末をPCに接続しなければならない
• 作成したプロジェクトをクラウド上にアップしなければならない

また、1つのプロジェクトにつき1つの画面しか作成できず、
画面遷移ができない点は大きな欠点に感じます。

まとめ

今回5つのプロトタイピングツールを利用、比較しました。

「プロトタイプを作る」という本来の目的を考えると、
下記の点から、Marvelが最も優れていると感じました。

• 無料版で無制限にプロジェクトの作成が可能
• 直感的でストレスレスな操作性
• Web上、アプリの両方でプロジェクトの編集が可能
• ワイヤーフレームの作成が可能
• BOX、Dropbox、Google Driveから画像の読み込みが可能

多くのオンラインストレージに対応しているという点、
無料版でも機能の制限が少ない点、は大きな魅力と言えます。

初めてプロトタイピングツールを利用する方には、
日本語環境のProttでプロトタイピングツールに慣れた上で、
Marvelに移行するのも良いでしょう。

機能比較

最後に、今回の記事で紹介した5つのプロトタイピングツールについて、
簡単な機能比較を記載します。