スマートフォンのデザインで面倒なのが、UIは確認できてもUXが確認できなことです。タップした時にどういったアニメーションをしながら表示されるのか、どういう画面遷移をするのかが画面ごとに分かれたデザインではピンとこないかも知れません。 そこで使ってみたいのがOrigami Studioです。Facebook製のプロトタイピングソフトウェアです。

Origami Studioの使い方

起動したところです。

メイン画面です。基本的にはパーツを貼り付けて、アニメーションを設定するという順番になります。

こちらがサンプルです。要素に対して様々なイベントが設定できるようです。

実際に動かせます。パッと見ただけでは普通のアプリと変わりません。

かなり複雑な指定がされています。

マウスアイコンが丸になっていて分かりやすいです。

デザインパーツは階層、レイヤーを使って管理できます。

さらに操作を録画できます。

録画した内容は動画として保存できます。

Origami Studioではかなり細かくUXが制御できるようです。覚えるべきポイントが多そうですが、これくらいUXがプロトタイピング時点で実現できていると、ユーザとの齟齬がなくなるのではないでしょうか。

Origami StudioではSketchとの相性が良く、Sketchでデザインした内容をそのままOrigami Studioへコピー&ペーストできるとのことです。デザイナーの方は見逃せない機能でしょう。

Origami StudioはmacOS用のソフトウェアです。

Origami Studio — Design Prototyping