アニメーション型
6. Pixate
ProttやAdobe XDほど直感的にサクッとプロトタイプが作成できる、というわけではありませんが、Pixateは詳しいUIアニメーションを表現することができます。デモムービーも豊富なので、参考になります。
- 再現性 ○
- 操作性 △
- 互換性 ×
- プレビュー環境 △
- その他
JPEG、TIFF、PNG、MP4(3)には対応。
デスクトップではできません。
共有がQRコードを読み取らなければいけないので面倒かもしれません。無料で使用できます。
7. Framer
FramerはPixate同様、UIアニメーションを表現することができるプロトタイピングツールです。ただ、CoffeScriptでプログラミングをしてアニメーションを作成する必要があるので、難易度は高めです。
- 再現性 ○
- 操作性 △
- 互換性 △
- プレビュー環境 ○
- その他
基本的にプログラミングする必要あります。常にプレビューしながら作業ができます。
「Photoshopからインポート可能」とありますが、
やってみたら重いPSDはエラーがでて読み込んでくれませんでした。
様々なデバイスで可能。
URLで簡単に共有できます。有料です。
8. Adobe Muse
Museはパララックスを表現するのに適しているようです。操作は慣れるまでは難しそうですが、チームやクライアントとの認識合わせが難しい「動き」についてできるだけわかりやすく説明できるように、ぜひ使っていきたいツールの一つです。
- 再現性 ○
- 操作性 △
- 互換性 △
- プレビュー環境 ○
- その他
難しそうではあるものの、Adobe製品なのでPhosothopやIllustratorなどにUIが似ており、慣れるのは早そうです。
「Photoshopボタン」機能や「CC Libraries」等は一部あり。
様々なデバイスで可能(パブリッッシュ機能)。
クライアントへの共有・社内共有もパブリッシュ機能で可能です。
Museのスクロールエフェクトのデモはこちらよりご覧いただけます。
今では様々なプロトタイピングツールがリリースされており、どれを使用するべきか悩みますよね。しかし、画面の遷移とUIアニメーションの両方の機能が完璧に備わっているものはまだ存在しません。「プロトタイピングツールで何を表現したいのか・説明したいのか」という目的に応じて、最適なものを選択していく必要があるでしょう。