現在、Prottや、InVision、などのWebアプリケーション型のプロトタイピングツールをはじめ、Adobe XDなどのデスクトップアプリ型、sketchのプラグインとして提供されているCraft、などなど、プロトタイピングツールが山ほどリリースされています。

どのツールも月額制や買い切りの違いはあれど、基本的には有料でなので、あれもこれもと導入するのは難しいところです。
以前に書いた『Flinto と Principleを比較』にもある通り、各ツールとも微妙に機能や使い勝手が異なるので、どのツールを学習し、導入するかは迷いどころかと思います。

そんな豊作のプロトタイピングツール群の中で、機能制限なく無料で使用できるものは、Pixateのみでしたが、公式サイトでサービスの終了が告知されました。（Adobe XDも現在無料で使用できますが、後々はCreative Cloudに組み込まれるそうです。）

そんな中、先日リリースされたのがFacebook製プロトタイピングツール 「Origami Studio」 です。もともと「Origami」という名前でQuartz Composerのプラグインとして存在はしていたのですが、「Origami Studio」と名前を変え、純粋な(?)デスクトップアプリとしてリリースされました。

まだほんの少ししか触っていませんが、リリースされて間もないことと、「サービス終了しないでほしい」という応援の意を込めて紹介したいと思います。

結構待ちに待ったリリース

もともとは、2016年4月のFacebookの開発者向けカンファレンス「F8」で発表されたニュースを見て知りました。「Origami Studio」は年内リリースとのみ告知されていたので、発表から約6ヶ月後のリリースになりますでしょうか。その間、PrincipleやCraftをいじっていたりしたのですが、「Origami Studio」が頭から離れず、リリースを粛々と待っておりました。発表から約6ヶ月って結構早いのかもしれませんが、なぜか長く感じる6ヶ月でした。

作動環境

2017年1月現在は、MacOSのみの対応となっています。

また、実機でのプレビュー用にiOS用アプリとAndroid用アプリが用意されています。

Origami Live for Abdroid

Origami Live for iOS

どのアプリも無料で提供されています。

早速触ってみよう！

「Origami Studio」は他の主要なプロトタイピングツールとは、少し異なるインターフェイスをしています。

他のツールが
1. 「画面A」を作成
2. 「画面B」を作成
3. 「画面A」「画面B」をつなげる

というようなフローで作っていくのに特化したインターフェイスなっているのに対し、「Origami Studio」は「パッチ（patch）」と呼ばれるものを追加して、インタラクションを作っていきます。

こちらは、言葉で説明すると冗長になってしまうので、下記ページの動画をご覧ください。

Origami Studio -Getting Started-

なかなか見慣れないインターフェイスですね。おそらくはQuartz ComposerのGUIを引き継いだのだと思いますが、シンセサイザーっぽい感じで、「パッチAとパッチBをつなげて、その間にパッチCを噛ませて…」みたいになんかカッコいいです。

自分は、上記動画のチュートリアル分しか触っていないですが、そこまで難しい印象は受けませんでした。
しかし、他のツール程手軽ではないことは確かです（汗）まず、直観的ではないですし、「タップ→拡大」みたいな単純なインタラクションでも、数個のパッチをつなげることになるので、他のツールよりは作成スピードが落ちるかもしません。

しかし、画面遷移特化型のツールだとなかなか埋もれがちになってしまう、「どんなトランジションをかけたか」が一覧で分かるので、そこはすごく便利かもしれません。
Framerのようにコードベースのツールは少し敷居が高いですが、レイヤー操作＋パッチの「Origami Studio」ならコードが書けなくても、プログラミングライクにプロトタイプを作成することが可能です。

いろいろ出来るぞ！Origami Studio

同じく無料で提供されていた「Pixate」は、一画面のインタラクションに特化していて、画面遷移は作りにくいそうです。
そして、その他の画面遷移に特化したツールは細かいインタラクションが作りにくいなど、どのツールもある程度の一長一短という感じです。その点、「Origami Studio」はまんべんなく、色々なことができそうです。

下記のチュートリアルページでは、アプリなどにある一般的なインタラクションの作り方が紹介されています。

Origami Studio -Learn-

• 論理演算の追加
• 垂直スクロールビュー・水平スクロールビュー
• 画面遷移のトランジション
• タイムラインアニメーション
• 複数のステータスを設定
• レイヤーマスク
• パーツのループ
• ループされたパーツに対してインタラクション設定

パッと見ただけでは、理解が追いつかない機能も多々ありますが、パッチの組み合わせ次第で、どんなことも出来そうですね。（どれくらい時間がかかるかは、分かりませんが…）特に、「論理演算の追加（Adding Logic）」の機能は、他のツールでは見かけない機能、かつ実装時には必ず使うであろうものなので、より実物に近いプロトタイピングが作れるのではないでしょうか。

まとめ

最近ではデザイン系の学校でもプロタイピングの授業があったりするので、プロトタイピングツールは近い将来必須のツールになっていくのかもしれません。たくさんのツールがあり、どのツールを学習するか迷うところではありますが、「Origami Studio」は一通りのことが出来、利用制限もないので、最初の一歩には最適なのではないかと思います。