TokyoFacebookTwitterHatenaPocket各社から続々と新プロダクトがリリースされるプロトタイピングツール戦国時代。Composerの付属ツールに過ぎませんでした。Composerの要件に戸惑う人が多かったのも事実です。Origamiとはいったいどのようなツールで、どんな人が利用するのでしょうか?「よく使っているソフトとOrigamiだけを使いたい。Sketchと連携してくれたら!」こんなことをFacebookで聞いたり、少なくとも同じことを考えたりしている人は多いでしょう。2017年のはじめにFacebookのOrigamiは全面的に見直され、スタンドアローンアプリとして生まれ変わりました。Xで動作させるためになにか他のソフトをインストールする必要はありません。Origamiは静的なSketchファイルを取り込み動作します。UIは大幅に変更されていますが、パッチを結合したり、プロトタイプを動かす基本的な考え方は変わっていません。UIファイルをプロトタイプとして使う方法を紹介します。はじめに作業に取りかかる前に、Origamiをまだインストールしていない場合、ここからWebサイトを開いてダウンロードボタンを押してください。Origamiは無料です。UIファイルを利用します。コーヒーを注文するアプリを例に使って説明しましょう。このアプリにはたくさんのアートボードが使われていますが、記事ではOrigamiとSketchを使ったプロトタイピングの基本について説明するだけなので、すべてを利用する必要はありません。利用するアートボードは次の3つです。これ以外は利用しません。利用するアートボード下のアニメーションはデモが完成したときに表示される画面です。Origamiの概要OrigamiのナビゲーションOrigamiには作業に必要なパネルが4つあります。■ビューワービューワーではプロトタイピングができます。■レイヤー+インスペクターOrigamiのレイヤーはSketchのレイヤーに非常によく似ています。各レイヤーには独自の属性があり、順序付けや入れ子構造にできます。インスペクターでは属性を変更して動作を調整できます。■パッチライブラリーコマンド+Enterのショートカットキーを利用するか、パッチエディター領域を2度タップすると、いつでもパッチライブラリーを利用できます。パッチを選択・追加するには、パッチを選択しEnterキーを押します。■パッチエディターパッチエディターはなにもないように見えますが、このパネルでブロックを使ってインタラクション、アニメーション、ビヘイビアを組み合わせてプロトタイプを作成できます。Studioの注目点がSketchとの連携であることには異論ないでしょう。Sketchのデザインをコンポーネントやビューに変えるのは簡単になりました。コンポーネントを組み合わせて、ゼロからプロトタイプを作成できます。1:SketchのレイヤーをOrigamiにインポートSketchのデザインファイルのレイヤーをOrigamiプロジェクトウィンドウに下のアニメーションのようにコピー&ペーストするだけです。ペーストするときは、必ずOrigamiレイヤーインスペクターを利用し、ペーストするレイヤーの位置を調整します。ペーストしたレイヤーは、対応する画面レイヤーに入れ子にすることも忘れないでください。1のすべての要素をSketchからOrigamiへペーストし、位置を整えたら、Screenレイヤーを追加し、ペーストしたすべての要素を入れ子にします。4、5も同様に、すべての要素をSketchからOrigamiへコピー&ペーストし、インスペクターパネルで正しく位置調整し、Screenレイヤーを追加してすべてのペーストした要素を入れ子にします。この2つの新規の画面のスタート状態は変更されません。いうのは、プロトタイプが動作を開始しても、画面が表示されないからです。次の手順は、複数の画面の結びつけです。2に遷移するようにします。Origamiを使えばこれが簡単にできます。作業するレイヤーの右側に「Touch」という言葉が書かれた小さなラベルがあります。これをクリックすると利用できるすべてのtouchインタラクションがドロップダウンで表示されます。必要なのはシンプルなTapインタラクションだけです(言うまでもなく、よく利用するインタラクションです)。2レイヤーの属性と結びついている、というのが基本的な考え方です。これらを結びつけたらプロトタイプの出来上がりです。戻る場合はどうすればよいでしょうか。内容の追記はあるにせよ考え方はほとんど同じです。2を拒否する必要があります。2にモーダルパネルを表示することです。デモを簡潔にするために、選択肢の全グループをTapインタラクションに限定します。デモでは、自由に選択肢を結びつけて別々の画面に表示します。モーダルを開始する基本的な考え方は紹介してきた内容と似ています。2を拒否してモーダルが最前面に表示されるようにはしません。ヒント:すべてのプロトタイプをテストできるように画面をリセットするには、ビューワーパネルのリフレッシュ(再読込)アイコンをクリックします。最後にOrigamiは新しくなり、以前よりも確実に連携が容易になっています。各レイヤーをプロジェクトに個別にインポートする必要なしにSketchファイルを利用できるようになり、手間や労力がかなり省けました。Origamiにはたくさんの型にとらわれないインタラクションやアニメーションが備わっています。基本的なアプリケーションの仕組みが分かれば探究の余地が豊富にあります。このデモでは意図的に、単純にクリックするだけにしました。Origamiを利用して作成できるインタラクションの種類には限りがありません。InvisionまたはMarvelAppなどのツールでは作成不可能な洗練された機能を存分に利用してください。UIファイルは、こちらからダウンロードできます。Prifti人びとの生活がより良くなる製品を常に考え、制作している学生です。その目標のためにあらゆること、たとえば、プログラミングやデザイン、ビジュアルアートなどに取り組んでいます。現在特にユースアントレプレナーシップや技術スタートアップに興味があります。