みなさんこんにちは、クリエイティブ部でデザインを担当しているさーやです。昨今、プロトタイピングはアプリ開発において重要なステップのひとつになっていますよね。 これに合わせてプロトタイピングツールも数多く登場し、さながら戦国時代の様相を呈しております。 そのひとつ、Pixate は高機能かつリッチなアニメーションが利用できるツールとして注目されています。 POP や prott と比較して機能が豊富な一方、複雑かつ設定できる項目が多いため、ややとっつき辛い印象を持っている方もいるのではないでしょうか？
公式のユーザーガイドやチュートリアルも用意されていますが、いまのところ英語のみのようです。 英語ができる人なら問題ないと思いますが、私のように学生時代の英語の成績が目も当てられなかった人はツライ事この上ないですよね…
そんな私ですが、「それでも Pixate 使いたい！」と思い立ち、その成果を記事にしてみました！ 同じ思いで Pixate の使ってみたいと考えていた方の一助になれば幸いです。
とりあえず準備
新規プロジェクト
Pixate を起動し新規作成、保存場所を決めると、ターゲットとなる端末を決める画面が出ます。 ここは作成したい画面のサイズを選びましょう。
ちなみに選ばなかった端末でもプレビューすることはできます（拡大or縮小されて表示されます）。
編集画面
でました。これが作成画面です。 詳しい使い方は後述しますが、「POP」とか「Prott」と比べると画面要素が多くて、最初この画面を見た時は「何がどうなっているんだ…」って思いました。 しかし「pixateはプロトタイピングツール」と思い込んでいるからややこしいだけで、「どっちかというとKeynoteに近いもの」と認識を改めれば、なんとなく使い方のコツが掴めるんじゃないかと思います。
動作確認用の端末を設定
Pixate は iOS シミュレータでも動作確認が行えますが、iOS/Android 端末にアプリをインストールしておくことで、実機で動作確認することができます。
アプリを起動し、コネクティングしましょう。Direct connection と Network connection が選べますが、前者のほうが安定するようなのでオススメです。 後者を利用する場合は、同一の WiFi ネットワークに接続する必要があります。
PCに戻って右上の DEVICES ボタンを押すと、接続中の端末が表示されますのでチェックボタンをクリック。繋がるとリアルタイムでデバイスの画面に反映されます。
iOS シミュレータで動作確認する場合
Xcode をインストールしておけば、iOS シミュレータで動作確認することができます。 「Simulator」→「作成したデバイス名」で、こちらもリアルタイムで反映されます。
プロトタイピング作成までの基本的な流れ
基本的な作業の流れは以下のようになります。
1. Pixate に画像を放り込みます。
2. 画像が ASSETS の中に入るので、真ん中の画面にドラッグ＆ドロップで配置。
3. 反応する範囲を設定（レイヤーを作る）。
4. インタラクションを仕込む。
5. 4 のインタラクションで起こるアニメーションを設定。
6. デバイスやシミュレータで確認。
よくある動作を作ってみる
画面右上のボタンをタップすると、別の画面に遷移する「ドリルダウン」のプロトタイプを作成してみましょう。
画面画像の配置
移動前の画面、ボタンの画像を画面内に配置。
移動後の画面は、画面外に配置。
この場合はドリルダウンなので、右隣に置きましょう。
ボタン用レイヤの作成
新規レイヤーを作成し、設定ボタンの大きさに範囲を設定。
この時設定ボタン画像より上にレイヤーがきているか確認。
もし下に潜ってしまった場合は、レイヤーをドラッグして並び替えられます。
ついでに名前も変えておきましょう。好みの名前で構いませんが、ひとまず「tap_setting」という名前にします。
レイヤーの色を透明に
レイヤーの色を透明にします。 初期状態ではレイヤーにグレーの色がついているので、PROPERTIES パネルから消しましょう。
レイヤー構造を整理する
インタラクションやアニメーションをつける前に、一度レイヤーを整理しましょう。 レイヤーは他レイヤーにドラッグして親・子の関係にすることができます。今回は、
- ボタンを押すとはけていくもの（現在の画面）
- ボタンを押すと入っていくもの（設定画面）
それぞれのレイヤーを作成しておきます。名前も「Main」「Setting」と、それっぽいのをつけておきました。
インタラクションの追加
先ほどの tap_setting レイヤーにアニメーションを追加します。 今回は遷移条件が「設定ボタンを押す」なので "Tap" インタラクションを追加します。
アニメーションの追加
移動するレイヤーに "Move" のアニメーションを追加します。 今回の場合、レイヤー "Main", "Setting" それぞれに追加します。
レイヤー "Main" のアニメーション設定
ANIMATIONS パネルにはいくつかの設定項目があります。
Based On：対象となるインタラクションを設定する
今回は "tap_setting" レイヤーの "Tap" インタラクションなのでこれを選択します。
Animates：このアニメーションをいつ行うの？というのを設定する
"Tap" には押した時しかないので、項目が "with duration to final value" という一つだけです。
CONDITION：このアニメーションはどういう条件の時に行うの？というのを設定する
例えば、「ボタンが画面より100pt下に来た時に」というような場合に使います。 この項目は条件式を書く必要があるので、ちょっと複雑です。 書き方のサンプルはこちらを参照してください。
今回は特にそのような条件は無いので、空欄でOKです。
Move to: どの位置に移動させるかを設定する
アニメーションによって移動させたい位置を記述します。 今回は画面外に出したいので、1画面分ずらすということでleftに「-375pt」を設定しています。
こちらの値は最初にしていた画面サイズにあわせて変更してくださいね！
Easing Curve：アニメーションのイージングを設定する
その名の通り、イージングの設定です。こちらはお好みで！
Durations：アニメーションの継続時間を設定する
このアニメーションを何秒間行うかの設定です。お好みで。
Delay：アニメーションがはじまるまでの待ち時間を設定する
わざとタイミングをずらしたい時などに設定します。 今回はタップしてすぐに始まって欲しいので、0秒のままにします。
レイヤー "Setting" のアニメーション設定
設定内容は "Main" と同等なので詳細は割愛しますが、今回は「画面内に入っていく」アニメーションですので、以下のように設定します。
- "Move to" の値を "Left：0pt" に
- 画面の左端と "Setting" レイヤーの左端があうように
動作確認
実機やシミュレータで確認して、ちゃんとアニメーションできていればOK！
これでドリルダウンする動きができました。 あれ？でもこれだと前の画面に戻れないで行きっぱなし？ はい。面倒くさいですが、Pixate だと別に書いてあげる必要があります。
やり方はドリルダウンの時とほぼ同じです。
"Setting" の画面に同じようにボタンレイヤーを作成し、対象となるレイヤーに "Move" アニメーションを作成します。 ここでいう対象とは "Main" "Setting" のレイヤーのことですね。 Pixate ではレイヤーにアニメーションを複数個持たせることができます。
Pixate、わたしはここでつまずいた
親レイヤーの必要性
実は新規に親レイヤーなんて作成しなくても、読み込んだ画像のレイヤーに直接アニメーションを設定することができます。 ただ、例えばAの画像とBの画像を同時に動かしたい、となった時、A・B画像を親レイヤーの配下に置けば、親レイヤーに移動のアクションを書くだけで済みます。 また、Photoshopのフォルダのようなものとして使うことで、画像枚数が増えていった時も整理しやすくなります。ドンドン使ったほうがいいです！
端末の画面回転の感知
これはできませんでした…現状では、画面を横にするとそのまま縦画面が回転するようです。今後のバージョンアップに期待ですね。 （もし方法をご存知でしたら、ぜひお知らせ下さい！）
ちょっと難しい動きを作りたい
公式のサンプルプロジェクトがとっても参考になります。
http://www.pixate.com/education/demos/
ここから、各プロトタイピングの Pixate ファイルがダウンロードできます。 デモや動画を見て、自分の考えている動きに近いものがあれば、ダウンロードして確認するといいでしょう。
