読者です 読者をやめる 読者になる 読者になる

Nullyのぶろぐ

仙台で働くエンジニアの日記

Pixateを使ってみた

f:id:nully:20150830172059p:plain *1

アプリを作る際に用いるプロトタイピングツールですが、世の中にはたくさんのツールがあって「どれつかおっかなー」って悩んでたらこの前Googleに買収されたPixateというツールがあったことを思い出したので、近所のパチンコ屋さんにしおねえさんを見に行って記念撮影したあとに使ってみました。

Pixateとは

公式サイトに書いてる通り「アイデアをよりリアルに実現できる」※1 ツールです。

何ができるかというと

  • 1画面1画面動きのある画面を作れる
  • インタラクションが豊富
  • インタラクションを組み合わせて自由な動きを作れる

と、一番感動した点だけ上げてみました。

もうちょっと色々できると思います。

簡単なものを作ってみるには

デモ的なものはこちらに上がってるのと、ビデオチュートリアルが用意されているのでそちらを御覧ください。

使ってみた感想

インタラクションが細かく設定できて、条件によって

  • 対象の要素をドラッグして、座標位置がこの範囲の場合は大きく、そうでない場合は小さく
  • 拡縮する際のインタラクションはスプリング(びよよよーんってなる)で表現

と言った形で、エンジニアっぽく表現したいところをこのツール上で表現できます。

f:id:nully:20150830173923p:plain

加えて、Pixateで作ったものを実機に転送(同期)して、実際の動きを確認することもできます。

デザイナーとエンジニアの動きの誤差(まれに大差)が生まれますが、デザイナーとエンジニアの意識差をこれである程度埋めることもできるのかなぁなんて思ったり。

また、サンプルがとても優秀で「3つしかサンプルないのかよー」って思ってたらその3つのサンプルが結構作りこまれていて、動きの参考やインタラクション構成の参考に使えそうな状態で入ってました。

やろうとしたけどできなかったこと

プロトタイピングツールといえばPopやProttなどが有名で、画面の遷移をサクッと実施出来て「ここをタップしたらこの画面」といったことができますが、Pixateではできませんでした。

正確に言うと、やりかたがわからず試すことができませんでした。

1ファイルが1画面というような作りになっていて、それをどうやって結びつけてるのやら...。

とはいえ「画面遷移図を別途作ればいいよね」って思いますが、画面遷移も一気にできたらいいのになぁと思いながらしおねえさんを思い返すのでした。

*1:画像は公式サイトより拝借しております