Pixateでアプリのインタラクションモックアップが捗りそう
Posted: Updated:
インタラクションのモックアップ
ネイティブアプリを作っていて、いわゆるインタラクション・アニメーションの部分をモックアップできるツールの必要性を感じたので @hiloki さんに聞いたツールをいくつか試してみました。
- The Next Generation of Mobile Interaction Design | Pixate
- Justinmind: Interactive wireframes for web and mobile
- Briefs
昔ながらに Flash を使うという選択肢もあった気はしますがせっかくなので、そういう用途に特化したツールを探したかった次第。（メンバーに Flash 使えるひとがいなかったという事情もある）
Pixateがよかった
結果、一番やりたいことをやらせてくれそうなのは Pixate でした。動画は Yahoo News Digest を例にしたデモです。興味がわいた人は素直にコレ見るのが速いかと。
Pixate は Webブラウザ上で動作する GUI と、手元でモックアップを確認するためのアプリ（iOS・Anrdroid）が用意されています。作業の中心はもちろん GUI 側で、いわゆるレイヤーとオブジェクトをアレコレする Fireworks とか Sketch みたいなタイプの操作感です。
- オブジェクトAとBを配置する
- オブジェクトAに、アクション（タップ・ピンチ・スクロールなど）を指定する
- オブジェクトBに、Aのアクションに連動して発生するアニメーションを指定する
- パラメータを指定する（イージングや発生条件、閾値など詳細に決められる）
- アプリで確認する
という感じでインタラクションのモックアップを行えます。
デザイナとエンジニアが分業している環境下では、デザイナがこのツールでアタリをつけて何らかのプロセスで絞り込んだものを、エンジニアが実装すれば良さそうです。
動きをモックアップする必要性
どんなインタラクションのアプリにするか、という点は「センスがあって裁量が与えられている実装者」がいれば話が早いです。が、そんなケースは稀であり、インタラクションデザインに長けたメンバーがいることも保証されません。
バリエーションから意志決定したい
理想的にはビジュアルデザインと同様に、「いくつかのパターンを並べて用意して、見込みが高そうなものに絞って作り込みを進める」のが自然な意志決定フローです。
- どんなパターンを試すか検討する
- それぞれ実装してみる ← ここの時間を減らしたい
- 評価する
- やり直し（1に戻る）or 決定
正直、ネイティブアプリ（自分の場合はAndroid）でアニメーションのパターンを作り始めると時間がかかってしまいます。試行錯誤が長引けば長引くほど、ロスは大きくなっていくためインタラクションにもモックアップの手段が必要がありました。
既存のツールで解決しづらかった
静的なビジュアルデザインは、端的に言ってしまえば座標・色（・画面の状態）の情報があればよいので共有が容易です。実装するときには端末依存や "目の良さ” も必要にはなりますがさておき。
インタラクション・アニメーションはそれと比べると、構成要素のパラメータが非常に多くなります。変化の内容・変化量・イージング・動作の起点・閾値・ディレイ etc、よくできているアプリはパッと見で言語化するのが難しいパラメータを抱えています。
多少めんどくさくても適したツールが必要
大抵、既存のプロトタイピングツールやモックアップツールだと機能が足りません。
そこで Pixate のように「初期のプロトタイピングとしてはめんどくさい部類だけど、素早くインタラクションを試せるツール」が必要だったという経緯でした。
他にもなんかあるかなー
ぶっちゃけ「このアプリみたいなやつ！」× 複数意見 の合成魔獣インタラクションをエンジニアの手元で生み出すのは工数に見合わないので、こういう手段は持っておくべきだなと思いました。オペレーター作業ではなく、ガチで試行錯誤しないと生まれないっていう。
詳細なパラメータを指定できるのがキモだと思うので Pixate で良い気はしますが、自分で指定しないと「なんか良い感じの動き」にならないので、なんか良い感じの動きはプリセットが欲しい感もありました。
なんかあったらまた試してみます。
