(cache)"Protopie"を使って簡単に動的なプロトタイプを作ろう　Part1.スクロールに応じて動くナビゲーションバーとローディング

Protopieで色々作ってみましたので紹介します

動画プレーヤー

こんにちわ、Nagisaのデザイナーリーダーの川畑です。
最近FramerやInvisionSTUDIOを筆頭にインタラクション・アニメーションデザインのツールが続々登場して賑わっていますね。
弊社でも各デザイナーが新しいツールを手に取り、どのような制作ができるのかとワクワクしながら積極的に試しています。

その試みの一環として“Protopie”というツールを触っていたのですが、
評判通りとても使い勝手がよく、せっかく触るなら!と公式チュートリアルで紹介されていない動きもチャレンジしてみたので、その作例と手順を紹介したいと思います。

ProtoPieの概要や優れている点を知りたい!という方は公式サイトやこちらの記事をご覧になってください。
・ProtoPie – 公式サイト
・“最も早くプロトタイプが作れる”と噂のプロトタイピングツール「ProtoPie」を使ってみた

今回紹介するもの
スクロールに応じて動くナビゲーションバーとローディング

動画プレーヤー

ファイルをダウンロード

実際に触ってみたい方はコチラ

下へのスクロールに応じてナビゲーションバーが縮小し、
最下部に到達するとスピナーがぽわっと出てきて追加でスクロールできるようになる
といったモックアップです。
よくある挙動ですが、他のツールではスピナー部分などやや手間がかかるな、というものもProtoPieでは数分程度でサクッとできて良かったです。

作成手順

この挙動の制作にあたって以下のようなステップに分けて進めました。

0.Sketchで制作した画面をProtoPieへインポート
1.画像一覧部をスクロールできるようにする
2.スクロールに合わせてナビゲーションバーを拡大,縮小させる
3.最下部までスクロールした後スピナーを回す
4.スピナーを回した後に次の一覧を表示する

順を追ってひとつずつ作ってみましょう！
各ステップの理解と作業は本当に簡単です。

0.Sketchで制作した画面をProtoPieへインポート

動かす画面素材として

A.初期状態
B.ナビゲーションバーが縮小し、次の一覧が読み込まれた状態

の画面をSketchでアートボードに準備しましょう。

A.の画面にProtoPie上で変更を加えてB.の状態の画面を目指すので、
座標や要素の高さを参照できるようSketch上でしっかり作り込めるほどより後の作業が楽になります。

またProtoPieはSketchのレイヤーの命名とグループ階層を保持したままインポートできるので
動かしたいパーツ単位でのわかりやすい命名とグループ分けしていきましょう。(今回は右図の緑枠が最小レイヤー、赤枠がグループとして分けています)

ここまで準備できたら
ProtoPieの[File] > [Import from Sketch]を選択して取り込みましょう。
最前面に開いているSketchファイルの中からインポートしたいアートボードを選ぶことができます。

先ほど作成した初期状態画面のアートボードを選択しIMPORTを実行。
ProtoPieで動きをつける準備ができました。
(今回はiPhoneX用に作っているのでImportSizeを@3xにしています)

1.画像一覧部をスクロールできるようにする

いよいよProtoPie上で動きをつけていきます。

特定の要素をスクロールできるようにするには、
左上のメニューの[Contaier] > [Scroll Container]で作成されるレイヤー階層下に
スクロールをさせたい要素をドラッグ&ドロップするだけで可能です。

Scroll Containerのレイヤー範囲 = スクロール表示エリアとなっているので、
レイヤーの大きさをぐいっと引っ張って変えてみましょう。
今回は全画面がスクロール表示範囲なのでデバイスサイズいっぱいまで広げます。

完了したら、右上のPreviewから確認してみましょう。
スクロールできるはずです…!

2.スクロールに合わせてナビゲーションバーを拡大,縮小させる

次に前回設定した要素のスクロール量に応じて別要素を動かします。

ProtoPieにおいてインタラクションは
Object(対象レイヤーまたはグループのプロパティ)、Trigger(発生条件)、Response(応答結果)の3つを指定することで制御することができます。

今回のスクロールによってナビバー内ではテキストの位置、テキストのサイズ、背景短形の透明度、背景短形の高さの4つに対してプロパティ変更が加えられています。

例として、テキストの位置の変更をObject、Trigger、Responseにあてはめると

Trigger : “Scrollレイヤー” がYpxスクロールしたとき
Object : “title” の座標( x1 , y1 )が
Response : 座標( x2 , y2 )になる

と表すことができます。
続けてテキストの位置の変更の動きを指定していきましょう。

Triggerを設定

ProtoPieではまずTrigger(発生条件)から設定してゆきます。
他の要素のプロパティを参照して条件分岐を作る際は、中央右側の[Add Trigger] > [Chain]を選びましょう。
ここでChainで参照する要素(=前項のscrollcontainer)のProperty(=scroll)を選択します。
これでscrollcontainerのスクロールした量に応じてRecponseを返すというTriggerが設定できました。

Responseを設定

次にChainの基に座標( x2 , y2 )になるというObjectの座標を変更するResponseを指定しましょう。

先ほど作成したChainの下にある+ボタンからMoveを選択します。
右側で対象Object(=titleレイヤー)とResposeの詳細として対応するChainのscroll量と変更後の座標を入力します。
この時はSketchで作成していた変更後の画面見本を参照しながら座標入力しています。

これでChainの条件(“Scrollレイヤー” がYpxスクロールしたとき)で、Move(“title”が座標( x2 , y2 )になる)が実行されるインタラクションができました。

ここまでできたらPreviewで見てみましょう。こういった画面になっているはずです…!

まだ味気ないですが、その他のテキストのサイズ、背景短形の透明度、背景短形の高さも
Triggerはすべて同じ対象のスクロール量を参照しているので、Chain下の+ボタンでResponseを追加してゆくことで同一条件下で指定できます。

テキストのMoveをScale,Opacity(透明ど)に置き換え、それぞれSketchを参考に数値を入力してゆきます。

このように設定されていれば下のような動きになるかと思います。

基本的にProtoPieではこのTrigger、ResponseをそれぞれObject対象設定を繰り返して、インタラクションを作り上げてゆくことができます。

3.最下部までスクロールした後スピナーを回す

スクロールを仕切った時にスピナーがぽわっと出てきて回る表現です。

次に一定範囲のスクロール量でResponseを返す表現では”Range”を使いTriggerを設定します。
前項のChainと同じようにスクロール量を参照対象として選択するのは同様ですが、RangeではResponseを返す条件の範囲を指定することができます。
今回は図の青字のようにスクロール量が560px以下の場合にResponseを返しているようにしています。

このTriggerを使って、
スピナーのサイズ(Scale)、スピナーの回転(Rotate)、スピナーの透明度(Opacity)のResponseを返すことで
ぽわっと出て回り、すっと消える表現をしています。

すっと消えるスピナーの透明度のResponseのタイミングはTriggerを満たした時から時間差で返す(=Start Delay)ことで表現しています。
直感的にタイムライン上でドラッグでもResponseのタイミングを変更することができます。

この設定ができたらこのようにスピナーが表示されると思います…!

4.スピナーを回した後に次の一覧を表示する

最後です!
当初はスピナーが消えた後に一覧ぶが表示される、というのであれば
前項目で設定したRange条件下のスピナーのResponseに続けて
スピナーの透明度が0 → Start Delayをかけて一覧部の画像の透明度の変更で表示されるように見せる
…と思っていたのですが、
透明度0の一覧部でもスクロール対象として判定されるので、スピナーが回っている最中もダラダラと空白をスクロールしてしまう、なんとも心地よくない挙動になってしまいます。

そこでスピナーが回転するまでの短い一覧部のSceneと、スピナーが消えた後の長い一覧を持ったSceneを2つくりその画面を切り替えることで違和感なく触れるようにしてみました。

これまでのスピナーが回転するまでの短い一覧部のSceneを複製し、それに少し手を加えて長い一覧が表示された状態の画面を作ります。

まず、Sceneの複製をしましょう。
複製は画面中央のManage Sceneから行うことができます。
ここでは”Scene1 -loaded”と名付けて切り替えるScene先にします。

“Scene1 -loaded”ではTriggerなどの条件も複製されています。
スピナーが消えた後のSceneを作りたいので、スピナーがでるRange条件をまるごと削除します。
ナビゲーションバーの拡大縮小のChainはそのまま活かしましょう。
誤って消したり、修正によってシーン間で挙動がずれてしまっても、Triggerのコピー&ペーストもシーンを超えてできます。ProtoPieの良いところです。

また、スクロールが途中までされている状態にするには”Scroll Container”レイヤーを選択した状態でScrollのプロパティを入力すると変更できます。

シーン切り替え先の画面はこれで完成しました。

スピナーが回る”Scene１”に戻り、Sceneを切り替えるResponseJumpを設定します。
スピナーが消えた後にJumpのResponseを設定し、Jump toの項目に”Scene 1 -loaded”を選択し、
Opacityの変更の直後にResponseのタイミングを設定します。

これで完成です。お疲れ様でした！
コチラのようになっていたら成功です!

まとめ

ProtoPieいかがでしたでしょうか。
制作が簡単にできることに加えて、共有もURLベースで気軽にできるので弊社ではとても評判が良いです。
(特にweb上で速度の切り替えによってアニメーションをじっくり見ることができることがエンジニアさんに好評です)

字面で見るより色々触った方が表現できることが見つかって楽しいと思うので是非手にとって試してください。
この他TinderのようなUIなども作っていたのですが、長くなってしまうので次の機会に紹介できれば幸いです。

今年はますますインタラクション,アニメーションツールやデザイナーに求められる成果物など大きく変化がありそうです。
より良い制作ができるよう一層Nagisaデザイナー一同スキルを磨いて励んでまいります。

そんな環境と仲間に囲まれて働きたい方、是非弊社にお越しくだい！