ひがやすを技術ブログ

電通国際情報サービスのプログラマ

ムービープロトタイピング

pixtuneというアプリをリリースしました。
pixtuneをひとことで説明すると、「Play the moment」。
自分の撮った写真と、写真を撮った当時にはやっていた曲を一緒に楽しむアプリです。どういうアプリなのかは、動画を見た方が早いと思うので、まずはこちらをどうぞ。


無料なので、興味がある方は、ぜひダウンロードしてください。
https://itunes.apple.com/jp/app/pixtune/id722162353?mt=8


今回は、このアプリの開発に使ったムービープロトタイピングという開発手法を紹介したいと思います。
ムービープロトタイピングは、私が勝手につけた名前(大目に見てください)で、アプリのプロトタイプをムービーで高速に行う手法です。プロトタイピングの手法としては、ペーパープロトタイピングが、手軽かつ効果的で、このプロジェクトでも、最初、ペーパープロトタイピングを使っていて機能が見え始めたところで、ムービープロトタイピングに切り替えました。


ペーパープロトタイピングの良いところ(私が個人的に良いと持っている点)は、デザイン等の変わりやすい要素にとらわれずに、アプリの機能の洗い出しや操作フローの確認がとれるところです。
弱点は、UI/UX的(UXと書くとこだわりのある人がいらっしゃると思いますが、ここは軽く流してください)な確認があまりとれないところ。Webアプリのような紹介メインのアプリの場合、それでも何とかなりますが、タッチ主体のアプリの場合、UI/UX勝負みたいなところがあるので、そこが確認できないと、プロトタイプの価値がだいぶ減ります。
プロトタイプの意味は、工数をかけずに、早期に、アプリのコアとなる面白さを確認することだと思っているので、UI/UX勝負なアプリで、勝負所が確認できないとその意味があまり無いのです。


そこで、登場するのが、ムービープロトタイピング。アプリの動きが重要な部分をムービーで軽く作ってみて確認をする手法です。ムービーを作るのは、とても大変な感じがすると思いますが、今回のアプリの場合、最初のPlayerの画面、次の月を選ぶ画面、それぞれ一時間くらいで出来ています。
チームにAfter Effects使いがいるので、その人に作ってもらいました。デザイナが、イラレで、静止画のイメージを作り、After Effects使いが、その素材で、ムービーを作る感じ。
口頭で動きの仕様を決めるのはまず無理で、これまでのやり方だと、動きの仕様はアプリを作ってみないと決められた無かったと思いますが、プロトタイプムービーがあると、仕様を決める場でいろいろ試すことも出来るので、動きの仕様を決めることが、開発の早い段階できるのです。このメリットは、本当に大きいなと開発していて感じました。


今回は、プロトタイプムービーを制作会社に渡して、PVを作ってもらいました。制作会社にイメージを伝えるためのインプットにも、プロトタイプムービーは役に立ちます。


ムービープロトタイピングの弱点は、After Effects使いが、そんなに簡単には見つからないところ。今回は、ラッキーだったと思います。


結局、従来のプロトタイプ手法は、UI/UXが重要なアプリでは、大切な部分の洗い出しが出来ません。今後は、動きを短時間で確認するプロトタイプ手法が必要ななってきます。その一つとして、今回は、ムービープロトタイピングを紹介しました。


最後にpixtuneのダウンロードリンクをもう一度張っておきます。
https://itunes.apple.com/jp/app/pixtune/id722162353?mt=8