2017/8/4更新

Facebookのプロトタイピングツール、Origami Studio発表

三瓶亮

UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。

近年アプリ制作者の間では、UIだけでなくアプリのUXを検証すべく、プロトタイピングツールの需要が年々高まっています。国内ではPrott、国外ではInvisionやPixate、Flintoなどがありますが、最近だとAdobeもAdobe XDというツールを発表するなど、大手も積極的に業界に参戦しています。

origami_ss1

そんな中、Facebookの開発者向けイベント「F8」にてFacebookのプロトタイピングツール「Origami Studio」についてのプレゼンテーションがありました。FacebookやFacebook Messengerのみならず、Instagramやその関連アプリなど、多数の人気アプリを持つFacebookが社内で開発したツールとはどのようなものなのでしょうか？

今回はOrigami Studioが他ツールに比べて何が優れているのか、F8でのプレゼンテーションの動画を簡単にまとめました。

Origami Studioとは

Origami StudioはMacで動くネイティブアプリで、複雑な構造のアプリも実際のアプリ画面を見ながら直感的にプロトタイピングできるツールです。

従来のプロトタイピングアプリは遷移に特化したものだったり、逆にアニメーションに特化したものだったり、一辺倒の印象がありました。ですが、近年のアプリは遷移もアニメーションも、どちらも検証不可欠な要素です。Adobe XDもそういった流れを汲んだハイブリッドなツールとなっていましたが、Origami Studioも同様に動的な遷移を作るためのツールとなっています。

origami_ss_2

・プロトタイプがリアルタイムに編集できる

・スムーズな動画再生

・全ての要素をダイナミックに動かせる（アニメーション可能）

・iOSとAndroidの汎用的なパーツが簡単に組み込める

元々Facebookは自社アプリの改善を行うべく独自にツールを開発しており、「Origami」というツールを２年前に外部向けに無償でリリースしていますが、今回のOrigami Studioはそのツールを一から開発しなおしてリニューアルしたものになります。

プレゼンテーションにてFacebookのエンジニアのAndrew Pouliot氏は、既存のプロトタイピングツールは簡単に使えるが故に拡張性に欠けている、もしくは自由度が高すぎて難易度が高すぎるものしかないと語ります。Origami Studioはその極端な状況を打破する、簡単かつ拡張性のあるツールを目指しているそうです。

Origami Studioの特徴

1. アプリ画面をリアルタイムで動的にプレビューできる

アプリのGUIをアニメーション含めて確認しながら作れる

左の画面が実際のアプリの画面で、真ん中がコンポーネントと各種パラメータ、右がレイヤーのビューです。マウスを左に持って行くとそのままタッチのUIになっており、挙動をリアルタイムで確認できます。

2. 実機プレビューをすぐに持ち出せる

作ってそのまま持ちだし、すぐテストできる

PC画面でもアプリ画面が出ていますが、つないでいるモバイルデバイスにもリアルタイムで反映されます。こういった機能はどのツールでもある機能ですが、Origami Studioではそのまま簡単にケーブルを抜いて持ち出すことができ、ミーティングなどでさも実際のアプリのようにテストすることができます。

3. レイヤーでコンポーネント管理

Photoshopで馴染みのあるレイヤー文脈

Adobe XDとほぼ同じですが、右側のレイヤービューはPhotoshopやSketchなどのUIに合わせて作ってあります。従来のOrigamiではこのレイヤービューはなく、コンポーネント同士の階層構造が見えづらい問題がありました。

4. 写真群、リストを手軽に管理できるLoop・Grid機能

写真の入ったフォルダをそのままドラッグ＆ドロップ

こちらもAdobe XDで採用されたRepeat Grid機能に少し似ていますが、従来、複数の画像があるUIなどでは画像コンポーネントを切り貼りしなければなりませんでした。Origami Studioでは画像の入ったフォルダをドラッグ＆ドロップするだけでLoopというパーツが作られ、Loopに対してどう表示するかパラメータで指定することができます。