近年アプリ制作者の間では、UIだけでなくアプリのUXを検証すべく、プロトタイピングツールの需要が年々高まっています。国内ではPrott、国外ではInvisionやPixate、Flintoなどがありますが、最近だとAdobeもAdobe XDというツールを発表するなど、大手も積極的に業界に参戦しています。
そんな中、Facebookの開発者向けイベント「F8」にてFacebookのプロトタイピングツール「Origami Studio」についてのプレゼンテーションがありました。FacebookやFacebook Messengerのみならず、Instagramやその関連アプリなど、多数の人気アプリを持つFacebookが社内で開発したツールとはどのようなものなのでしょうか?
今回はOrigami Studioが他ツールに比べて何が優れているのか、F8でのプレゼンテーションの動画を簡単にまとめました。
Origami Studioとは
Origami StudioはMacで動くネイティブアプリで、複雑な構造のアプリも実際のアプリ画面を見ながら直感的にプロトタイピングできるツールです。
従来のプロトタイピングアプリは遷移に特化したものだったり、逆にアニメーションに特化したものだったり、一辺倒の印象がありました。ですが、近年のアプリは遷移もアニメーションも、どちらも検証不可欠な要素です。Adobe XDもそういった流れを汲んだハイブリッドなツールとなっていましたが、Origami Studioも同様に動的な遷移を作るためのツールとなっています。
・プロトタイプがリアルタイムに編集できる
・スムーズな動画再生
・全ての要素をダイナミックに動かせる(アニメーション可能)
・iOSとAndroidの汎用的なパーツが簡単に組み込める
元々Facebookは自社アプリの改善を行うべく独自にツールを開発しており、「Origami」というツールを2年前に外部向けに無償でリリースしていますが、今回の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に対してどう表示するかパラメータで指定することができます。

列数やマージン幅を簡単にいじれる
従来の方式では同じ画像の羅列をした場合、実際の画像でデザインが成り立たないこともありますが、連続する写真やリストビューをダミーではなく、リアルなデータを扱うことで、よりリアルなデザイン検証が可能です。
5. iOSとAndroidの汎用的なコンポーネント完備

よく使うコンポーネントが簡単に挿入できる
iOSやAndroidでよく使うパーツがあらかじめライブラリとして登録されており、数クリックで実装でき、各種のパラメータや挙動もきちんと指定できます。
より「リアル」なプロトタイピングが可能なツール
Origami Studioは私たちが待ちわびたプロトタイピングツールなのかもしれません。
パーツを組み合わせて簡単な遷移確認のプロトならすぐ作れそうですし、そこから演出などを作りこむことも可能のように思えます。煩わしい作業は極力なくしつつも、よりリアルで、実物に近いプロトをハイスピードで回すための配慮がいたるところに見られます。
Origami Studioは今年中に一般向けに公開されるそうで、しかも無料とのこと。
この記事ではF8のプレゼンテーションの軽いまとめとしてお送りしましたが、アプリのデザインプロセスのデファクトスタンダードにもなりうる有用なツールのように思えます。続報を期待して待ちましょう。