アプリケーションを製作する際、最近ではUIだけではなく、アプリのUXを検証するため、様々なプロトタイピングツールが使われるようになりました。その代表例がInvisionやAdobe XDなどで、2016年4月に開催されたFacebookの開発者向けイベント『F8』ではFacebookのプロトタイピングツール*「Origami Studio」*が発表されました。

MessengerやInstagramなど、様々な人気アプリを持つFacebook。
今回は、今年Facebookが投入した「Origami Studio」が持つ5つの魅力についてご紹介します。ぜひご覧ください。

※当記事公開時は「『Origami Studio』が持つ6つの魅力」とさせていただきましたが、内容の一部誤りがあったため「『Origami Studio』が持つ5つの魅力」へと訂正させていただきました。

Origami Studioとは

interface.png

*「Origami Studio」*はMacOS上で作動するネイティブアプリで、様々な構造のアプリも画面遷移や動作も含めて実際の画面を見ながら直感的に操作できるプロトタイピングツールです。

これまでのプロトタイピングツールは、UIアニメーションだけに特化したり、画面遷移だけに特化したり、と特徴が偏っている傾向がありました。

そこで、今年4月にFacebookがリリースした「Origami Studio」でした。
アプリケーションにとっては、アニメーションも画面遷移もどちらも重要な要素です。Facebookは自社アプリの改善・改良を行うために、独自に『Origami』というツールを2年前から外部向けにリリースし、従来の『Origami』の流れを汲みつつも、ゼロベースで開発し直してリニューアル。まさにそうした偏りというのを一掃しました。

Origami Studioの魅力

様々なプロトタイピングツールがありますが、既存のツールは操作が簡単がゆえに応用・拡張が難しいか、あるいは自由度が高すぎて操作が難しいものが多い印象です。「Origami Studio」では、そうした極端さを打開し、簡単に操作でき拡張性のあるツールになっています。

1. リアルタイムプレビュー

live.jpg

「Origami Studio」では、様々なコンポーネントを組み合わせてプロトタイプを作成していきます。多くのプロトタイピングツールは一度デプロイ(開発したプログラムを実際に動くように組み立て直すこと)を行いますが、「Origami Studio」はリアルタイムプレビューに対応しており、プレビューウィンドウで動作を確認しながらプロトタイプを作成することができます。

また、実際にプロトタイプを作成したら、iOSやAndroidアプリの*『Origami Live』*をインストールすることで、実機でプレビューを行うこともできます。
『Origami Live』は「Origami Studio」と接続することができ、作成したプロトタイプを『Origami Live』でもリアルタイムプレビューで表示することが可能です。『Origami Live』を使えば、実機のカメラやマイク、速度計や触感フィードバック(どれくらいの強度で画面を押しているかを測定)も使用することができます。

2. 豊富なUI＆ジェスチャー

window.jpg

ボタンやグリッド、リストなど、UIも豊富に用意されており、数クリックで簡単に設置できます。プロトタイピングツールの中には、ボタンやカルーセルなどの動きを確認するだけのものもありますが、「Origami Studio」ではレイヤーマスクやパーティクルシステム(コンピュータグラフィック技術の一つ)、ライブカメラといった動的でインタラクティブなUIも利用することができます。

「Origami Studio」では、*パッチ(Patches)*と呼ばれる細分化されたジェスチャーやロジックのブロックをつなぎ合わせることで、簡単に思いどおりの動きを再現することができます。また、AndroidやiOSで頻繁に使うコンポーネントは、あらかじめライブラリとして登録されているので、数クリックで簡単に設置することができます。よく使うコンポーネントは新規にライブラリに登録し、再利用することも可能です。

3. プレゼンテーションモード

presentation.jpg

「Origami Studio」ではプレゼンテーションモードが搭載されており、実際に作成したプロトタイプをプレゼンテーションソフトを使わずに発表することができます。Android・iPhone・iPadなどの実演するデバイスの種類、様々な背景、手を添えるかどうかなども選べ、デバイスなしで動作画面を全画面表示で見せることもできます。

プレゼンテーションモードでは、スクリーンショットをキャプチャーしたり、動画として保存することもできます。『Origami Live』で繋がったiPhoneやAndroidがあれば、プレゼンテーションをしながら参加者にプロトタイプを操作してもらうこともできます。

4. コードのエクスポート

export.png

こちらは「Origami Studio」の機能ではなく、旧版の「Origami 2.0」で実装されていた機能になります。
「Origami Studio」はコードのエクスポートに対応しています。作ったプロトタイプは、iOS用のファイル「.m」、Android用の「.java」、Web用の「.js」に変換して、UI・UXデザイナーがエンジニアに直接コードとして納品することができます。ワンクリックで行える動作も、コードに変換してしまえばエンジニアはコピー＆ペーストで実装することも可能になります。

5. Sketchとのシームレス連携

sketch.jpg

「Origami Studio」が持つ様々な機能の中でも非常に好評なのが、Sketchとのシームレスな連携機能です。Sketchが持つショートカットキーのほとんどが、「Origami Studio」でも対応しています。例えば、「Origami Studio」の基本的な画面編集の単位はレイヤーですが、Sketchで「Ctrl+C」でコピーしたレイヤーを、「Origami Studio」に『Ctrl+V』を押してそのまま貼り付けることも可能です。

ちなみにFacebookは大々的には宣伝していませんが、PhotoshopユーザーでもPSDファイルの連携が可能です。

6. 直感的で分かりやすいビジュアルプログラミングを採用

先述したように、「Origami Studio」ではパッチと呼ばれるブロックをつなぎ合わせることで、プログラムをテキストで記述するのではなく、視覚的なオブジェクトでプログラミングをしていきます。こうしたプログラミングの考え方をビジュアルプログラミング、またはグラフィカルプログラミングと呼び、デザイナーにも直感的でわかりやすく動きをコントロールすることができます。

例えば、多くの言語では、関数を書く時にこのような書き方をして、呼び出されたときに引数を入れて結果を求めます。

function name(input1, input2, input3) {
  code to be outputted
}

「Origami Studio」のパッチも、これと同じように、直感的に表すことができます。(左がインプット＝引数で、右がアウトプット＝返す値)

patch1.png

同様に、計算などのロジックもパッチで示すことができます。例えば、JavaScriptのような言語では、華氏温度から切歯温度への変換を行う関数は、次のように記述することができます。

function fahrenheitToCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
var text = fahrenheitToCelsius(86);

計算が終わったパッチはデフォルトで次のように表示されます。左側がインプット、右側がアウトプットです。

patch2.png

これを先ほどのコードと同じように表すと次のようになります。

patch3.png

このように書くことで、華氏温度を変更するとどのように摂氏温度が変化するかがはっきりとわかります。ただし、上記の例でもわかるように、計算順序は四則計算の時と同じく、掛ける(*)・割る(/)は、足す(+)・引く(-)よりも優先されるので注意しましょう。

以上の2つの例からもわかるように、「Origami Studio」ではパッチを利用したビジュアルプログラミングによって、デザイナーでも直感的にプロトタイプが作成できます。