Principle

Web サイトに「Principle makes it easy to create animated and interactive user interface designs.」と書いてあるように、アニメーションを重視した、インタラクティブな UI を設計するのに向いているツールです。

• 要素をタップした時のアニメーションエフェクトが細かく設定できる
• アニメーションのシミュレーションがアプリ内でできる
• iPhone とのミラーリングができる( Principle Mirror を iPhone に落とす必要あり)
• 作ったものを gif アニメにして共有できる

動画では、上記のことをたったの5分でやってのけています。さくっとアニメーションが作れて共有も簡単だよーという感じでしょうか。

14日間の無料お試し版があり、[ FREE TRAIAL ] を押すと zip でダウンロードできます。有料版は99ドルなので日本円だと約12000円ですね。

InVision

こちらは画面遷移系の Web アプリです。Principle のようなネイティブアプリではなく、Web で完結します。

試しに登録してログインしてみると、モバイルアプリ、Web アプリ、ワイヤーフレームの3つのサンプルが用意されていました。自分で作らなくても触って試せるので親切ですね。

料金は下の図の通りで、無料版はひとつまで。以降、プロトタイプの数ごとに料金が設定されています。

Silverflows

Sketch のプラグインで、画面遷移やアニメーションを設定でき、Sketch で作ったカンプがそのままプロトタイプになります。他のツールと違って Sketch 内だけで完結するのが魅力かもしれません。Principle と InVision を紹介したあとなので、何ができるか大方予想がつくと思います。言葉で説明するよりも動画を見てもらった方が早いので、ぜひ見てみてください。

こちらはまだリリースされておらず、近々ベータ版が公開されるようです。気になる方は登録しておくとメールで通知が受け取れます。

まとめ

ここで取り上げているのはたった3つなので、他にも便利なツールはたくさんあると思います。実際、「design prototype tool」でググると、今回紹介したツール以外のものがたくさんヒットします。日本製だとグッドパッチの prott が上位に入っていますが、これだけたくさんあると何を使えばいいのかわからなくなりますね。

私は普段 Photoshop または Sketch をメインで、Illustrator はサブで使っていますが、こういったプロトタイピングツールも必要に応じて併用していきたいなと思いました。Silverflow に関しては Sketch のプラグインで導入もしやすそうなので割と期待しています。

というわけで、もしいいものを見つけたらまた紹介したいと思います。