はじめに

この記事は Goodpatch Design Advent Calendar 2020 17日目の記事です。（遅れての投稿になります...すみません...！）

こんにちは、UIデザイナーの安川です！
今回はアニメーション初心者だった私がProtoPieで触れるプロトタイプを作り、感じたことを記事にしようと思います。

アニメーションを作った経験がなかった私が一週間使ってみてProtoPie良いじゃん！と思ったところ、ここが惜しい！と感じたところをまとめていければと思います。また、どういうときにProtoPieを使うべきかも考えていきます。

どうしてProtoPie？

今回、数あるプロトタイピングツールの中からProtoPieを選んだのは細かなアニメーションをつけたプロトタイプを作成し、ワクワク感や現実にありそう！とみた人に感じてもらうことを重要視していたからです。

ちなみにデザインツールを触ったことがなくてもサクサク利用できる学習コストの低さ、スピード感のあるプロトタイプの作成を考えるとうちの会社が作っているProttなどもオススメです。

今回は秒数などを指定するような細かなアニメーションをつけたかったのでProtoPieにしています。

基本的なインタラクションの作り方

ProtoPieのGetting Startedより

ProtoPieのインタラクションは対象となるオブジェクト（ボタン、カードなど）に対してトリガー（タッチ、スワイプ、3Dタッチなども...！）があり、それに対してリスポンス（大きくなる、色が変わる）が返ってくることで成立します。

またトリガーもリスポンスも事前に用意されているので組み合わせることで好きな動作を実現することが可能です。

例えばタップしたらボタンの色を変えたい場合、Tap・Color・Resetを設定するだけで実行することができます。トリガーの「Tap」でタップされたときにアニメーションが始まるように設定。リスポンスの「Color」で淡い青に変更、「Reset」で色味を戻す。

結果下のような動作になります。（0をクリックしている部分）Easingの設定などもしてはいますが、基本はこのように要素を組み合わせて、タイミングを設定すればインタラクションを作ることができます。

細かなアニメーションにも対応している

ProtoPieの魅力は用意されたリスポンスで比較的簡単にアニメーションを作ることができる上に、細かい秒数の設定やEasingの設定にも対応しているところだと思います。

細かい秒数の設定、Easingの設定などを組み合わせていくことで手軽に思い描いたアニメーションをつけれるのは魅力的だと思っています。

案件で作成したものは載せることができないので、昔作ったUIにアニメーションをつけたものを載せておきます。

複雑なインタラクションを実現できる

ProtoPieでは条件分岐、変数、数式の機能も用意されています。これらがあればかなりできることの幅が増えます。

条件分岐、変数、数式を使えば、一定回数タップするとランクアップするようなゲージを作成し、ランクアップ後にリセットすることも可能です。雑誌を読むアプリのプロトタイプを作りたい場合、ズーム機能や現在ページを示すバーの動きなども再現できます。

よりリアルに近い操作感、画面遷移をつなげるだけでは実現できなかった本物に近い動作を実現できるのはかなり魅力的なのではないでしょうか。

そのほかにもレイヤーのプロパティ情報をとってくることができたり、関数が用意されていたり、UIツールデフォルトのプロトタイピング機能ではできないことがProtoPieではできるようになっています。

ちなみにこれらを応用すると電卓だってできちゃいます。

ここが惜しいよProtoPie

ProtoPieは細かいアニメーションや複雑な画面遷移を作る際にとっても魅力的なのですが、個人的に直して欲しいなと思った部分もいくつかあります。

一つ目はプロトタイプ共有のシステム、個人アカウントだとパスワード設定や閲覧者の制限ができません。Teamアカウントにすると閲覧者の制限ができるのですが（案件ではそうした）、個人で作ったものをクラウドに上げた際、作品に制限がかけられずアップロードされてしまうのは個人的に不安があります。

二つ目はAdobeXDからのインポート。なぜかオブジェクトが画像として取り込まれてしまい、Fill、枠線、影の色を変えられず苦労しました。

ProtoPieが向いている場面

ただ急いで作る、壊す、作るみたいな場面ではProtoPieが相性がいいのかはちょっと微妙です。正直UIツール（XD,Figma）などのデフォルトのプロトタイピングツールが更新も楽という意味でスピードを求められる場面では相性が良い気がしています。

例えば、ユーザーテストをする際に複雑な分岐が発生したり、アニメーションが重要要素である場合はProtoPieは向いているのではないでしょうか。（必要な場合はLottieのデータも入れることができます）ほかにも社内でのプレゼンで、アニメーションがしっかりついたプロトタイプを見せれば与えたい印象を伝えやすくなるかもしれません。

最後に

一週間使ってみて、いままで未経験だった自分が簡単なアニメーションをつくれるようになってProtoPieに感動したのと、条件分岐や変数などが使えるプロトタイピングツールに感動したので今回テーマに取り上げました。

画面遷移だけじゃ上手く伝わらない、もっと細かくアニメーションを設定したい、複雑な設定がしたいけどUIツールデフォルトのプロトタイピング機能だと実現できないという方は一度ProtoPieを試してみてはいかがでしょうか。