Facebook Origamiを使ったプロトタイプ習作

一昨日からOrigamiでのプロトタイプ作成を勉強し始めたので軽くメモ。

1日目

何しろ初めてだったのと、ドキュメントやサンプルが全くと言ってないこともあり、これだけを作るのに4時間近くかかった。Briefsとかならものの数分でできるので、以前記事にも書いたように、単なる画面遷移が目的ならOrigami（というかQC）は不利だと思う。

とは言えポップアップが出てきた時のようなアニメーションはBriefsには無理なので、もしそのあたりのインタラクションの確認が目的であるのなら適任とも言える。

まあアニメーションの始点が吹き出しの口の部分ではないのが残念だけど。これはチューニングすれば直るものなのだろうか。。

↑初めてOrigamiやる人はこの動画見て勉強すると◎。

構成はこんな感じ。OrigamiのサンプルにあったTabのような画面切り替えではないのでそこそこシンプル。

2日目

2日目はとりあえずサムネイルのスクロール+拡縮がやりたかったのでシンプルにそれだけ。

構成もこれだけ。

小指の先ほどだけどコツが分かってきたので、この時点で「リストの中からサムネイルをタップすると拡大表示される」みたいなことをやりたくなった。

3日目

というわけで今日作ってたのがこれ。

リストの中に拡大されるサムネイルを紛れ込ませることはできたけど、問題は拡大された後もスクロールが聞いてるっていうね…画面の中央で固定されないっていうね…

あれ？ひょっとしてこれ難しいのでは？とちょっと考え込んでしまった。キャンバスの半分の値を取得してそれをxに入れないと無理なのでは？とか思った。

構成はこんな感じ。

まだまだQCに慣れてないのと、Origamiのパッチ内部を深く見ていないので、きっと頑張ればなんとかなるんだろうと楽観視してる。

さてひとまず3日間Origamiを触って感じたのは、やっぱインタラクティブなプロトタイプは『誰に何を伝えるか』を明確にしておかないと、ツール選びで失敗するな、ということ。別にOrigami使うのがよろしくないってわけじゃないですよ。

例えば最初に作ったやつはBriefsとかFlintoでも全然代用できる内容だし、3日目のは、ひょっとしたらAfter Effectsで作ってしまったほうが目的は素早く達成できるかもしれません（エンジニアに動きを見てもらう、とか）。

ちなみになんでこんなにいきなりOrigamiを勉強し始めたのかと言うと、これを題材にした勉強会を3月にやろうとしているのですよね。

あんまり教えられるようなレベルではありませんが（むしり自分が教わりたいｗ）、詳しい日時が決まったら告知するので興味ある方は覗きに来てみてください。