ProtoPieでのプロトタイピングは、より良いUIを作るための選択
実際に作った制作例付きです。
以前、「【目的別】IT起業家におすすめのプロトタイピングツール8選」という記事を書きました。
この記事にある日、次のようなコメントが付いていました。
どうやら、ProtoPieというプロトタイピングツールの中の人のようです。ネタ混じりの英語の機械翻訳だからでしょうが、挑戦的な文面です。笑
そこまで言うなら使ってみようじゃないか。
ということで、使ってみました、ProtoPie。
昨今のプロトタイピングツール戦国史の中、「ProtoPie」の実力はいかほどのものなのか。どういうツールで、誰にオススメできそうかを書こうと思います。
（参考情報として、私はPOP、Marvel、Prott、InVision、Principle、Flinto、Sketch、XDの使用経験があります。）
どういうものが作れるのか？ 実際に何か作ってみた
Protoieの実力を測るため、まずはレベル感ごとに適当なモックを8つほど作ってみました。（全部GIFなので少し重いかもしれません。）
👆まずは基本の、FixedHeaderでの縦のスクロール。
スクロールするとヘッダーとインジケーターが画面から消える動き。
基本的な動きなので他でも出来るんですが、明らかに他のツールで作るより簡単でした。下手するとProttやMarvelよりも早く作れる。
👆次は、横のスクロール。
ちなみに横スクロールは簡易プロトタイピングツールではほぼ出来ない動きです。（ProttとかInVisionとかMarvelとか。）
👆画面内でのページング。
これも簡易なツールでは出来ない動き。でもまあ、Principleやflintoでも一応作れますね。これはそんなにコスト変わらないかも。
👆フロートボタン。
地味にこれを簡単に出来るツールはそう多くない。
作る簡単さはFlintoといい勝負。
👆プルリフレッシュと読み込みのスピナー。
これは…Principleなら出来る。Flintoだと…うーん、まあ出来るかな？
でも言えるのは、どちらよりも簡単でした。
👆iOS11のLarge Titleの動き。
これは他だと地味に難しい…Flintoなら割と簡単に出来る。
指について来なくていいなら、Principleでも出来る。
👆右から左にページを送るUI。
FlintoとPrincipleでも同じことは出来るけど、やっぱりProtoPieのほうが簡単で早い。
👆TinderUI。
カードを途中で話すと真ん中に戻ってくる動きは他のツールでは出来ないことが多いのですが、擬似的なif分岐が出来るので実現可能。
それぞれの作り方などは、別記事に書くこととします。
総評
他にもIoTやAR・VRを意識した色々面白いものが作れるようですが、ひとまずこれくらいに。
以上のものを作ってみての感想ですが、他のツールだとかなり複雑になって途中で投げ出したくなる動きも、さほど苦労せずに作れました。
（これら8つは、3日間の仕事の合間の時間を使って作ることが出来ました。1日 2.67個作れるペースですね。）
特に最後の2つはプロパティの数が多いので、他のツールだと作るのに苦労しそう。
直接的な比較対象はFlinto。
でも、もうFlinto要らずかも...
ProtoPieに関して総じて言えるのは、動きを付けるのが苦じゃないということです。
PrincipleやFlintoは割と作るのが面倒な割にいまいちコーデッドのレベルに近づけることが出来ません。（特にPrinciple。）
そのためプロトタイピングやユーザビリティテスト目的で積極的に使うことはなく、あくまで動きをチーム内で共有するツールでした。
しかしProtoPieの制作コストなら、シンプルなプロダクトであれば中程度のシナリオを持つユーザビリティテストに使えるプロトタイピングくらいまでカバーしてくれそうです。
（学習コスト・制作コストは恐らく、ProtoPie<<<Principle<Flinto という感じ。）
個人的なブレーク・スルー
私が特に気に入ったのは、ノンコーディングだけどコーディングっぽく作れることです。
ProtoPieでのプロトタイピングは、PrincipleやFlintoのようにトランジションごとに画面を生成するのではなく、数値で条件を指定して動きを付けていきます。（混合させることも出来ます。）
トランジション型だと1つの画面内の動きを作るためにも複数枚の画面を作る必要があり、遷移図がごちゃごちゃになってしまうケースがあります。
これにより遷移関係がスパゲッティになってしまい、全容を把握しておきづらい・間違いを発見しづらいという欠点があります。
ProtoPieではこれが無いので、個人的にブレーク・スルーでした。
これまでは、複雑なインタラクション込みのプロトタイプは制作にも運用にもコストがかかっていました。（遷移の秒数で表現できるインタラクションやFixedHeaderは簡単に出来ていましたが。）
そのためインタラクションの無いモックでテストした後、検証されていないアイデアベースのインタラクションを付ける、といったことがありました。
今後は、ある程度複雑な動きのあるプロトタイプでもユーザビリティテストの回数を増やすことが出来そうです。
（運用コストは、ProtoPie<<Flinto<<超えられない壁<<Principle という感じです。）
もし、あなたがコーディングできない、あるいはコーディングする必要が無い状態で、ある程度凝ったプロトタイピングを行うのなら、私の知る限りではProtoPieが最適解だと思います。
今後はProtoPieに乗り換えます
自分は、もうFlintoは使わないかもしれません。
明らかにProtoPieの方が早く作れる & 改善しやすいです。早く作れて早く壊せることはプロトタイピングツールの大きなバリューとなります。
今後Flintoを使うのは、Z軸のインタラクションが必要な時くらいかな...。マテリアルデザインベースのインタラクションを作る時はまだ出番があるかも。（※ProtoPieでもZ軸のインタラクションは作れる）
Principleは、短尺のアニメーションを作って遊ぶ用になると思います。笑
まとめ
ProtoPieは、PrincipleやFlintoなどインタラクションに強いと言われている有名どころのプロトタイピングツールと比較して、学習コスト・制作コストがとても低いツールです。
制作方法がトランジション型ではないため運用コストも低く、動きをチームに共有するだけでなく、ユーザビリティテストとイテレーティブな改善にも使うことが出来そうです。
動きのあるプロトタイプでのユーザビリティテストやイテレーションを増やしたい場合に、ProtoPieは最適だと思います。
（※あなたの財布が許すなら。）
つい最近、日本語化されました。
つい先日、日本語版がリリースされました。既にいくつかイベントなど行われているようで、これから国内でもユーザーが増えてくるのではないかなと思います。
このエントリーがその一助になれば、幸いです。
おことわり
このエントリーはProtoPieからの公式な依頼で執筆しています。
日本語版リリースのタイミングでお声がけいただきました。この素晴らしいデザインツールを知る機会・紹介する機会を得られて、とても嬉しく思っています。
ありがとうProtoPie。実際のところ、一度使ってみてからは幾つかの 他のツールを使うのをやめ、ProtoPieに完全に乗り換えました。
あなたたちの発展を願っています。
P.S.）韩学颖とProtoPieチームへ。声かけてもらってから記事の公開までちょっと間が開いてしまってごめんね。
