プログラミングノート

一からものを作ることが好きなエンジニアの開発ブログです。

iMovieより簡単!? 多機能なビデオエディター「Film Story」を申請したので、その開発フローを公開します！

プロダクト

気がつけばブログ更新も半年ぶり、ということになってしまっておりますが、この度、新しいアプリを申請しましたので、その開発フローを公開してみたいと思います。


Film Storyって？

Film Storyは、片手でさくさくムービーがつくれるiPhoneアプリです。思い出の写真や動画をつなげて１つのムービーに。字幕や音楽、フィルタエフェクトで感動の仕上がりに。iOS7以上の端末でご利用頂けます。詳細はランディングページをご覧くださいませ。

http://appstair.com/filmstory

ペーパープロトタイプ

さて、今回なぜまとめようかと思ったのかですが、最近アプリのペーパープロトタイプに関する記事をちょくちょく見かけるなと思いまして、今回ちょうどいいタイミングでしたので公開してみることにしました。

AppStair株式会社ではiOSアプリをメインで開発していますが、Webサービスを作る際にもまずはペーパープロトタイプである程度形になるまで考えてから開発を始めます。

今回作成したものはこちらです。
全体が見れるPDFファイルはこちらに置いてあります。

それぞれの画面説明は割愛させて頂きますが、弊社の場合、ペーパープロトタイプは、アプリの全体像を把握するために実施します。何か思いついたら行き成り実装でも良いのですが、その場合、画面のUIが難しい場合に後回しにしてしまったり、ある程度進んだ段階でこの画面つながんないよね？というケースが発生したりします。

まあ、要はウォーターフォールの外部設計のような扱いでしょうか。この段階では開発者がアプリの全体像や、実装にかかるコストをイメージできることをゴールとし、特にユーザーテストなどは実施しません。今回のケースではそれぞれの画面を3,4回程書きなおしています。

プロトタイプ

技術検証

ペーパーで全体像が固まったら、まずは技術的に難しい箇所の検証から始めます。今回のケースだと、

  • 動画と動画をつなげて動画出力するにはどうするか
  • 画像を動画に変換するのはどうするか
  • 字幕はどうやって合成するのか
  • トランジションはどうやって実現できるのか

などなど、扱ったことのない技術の場合は一番時間がかかるであろう箇所から課題を潰していきます。コードは後から書き直すため、コピペでも何でも、とにかく動くようになればこのフェーズは終了です。

もしどうしても実現できない機能があれば、その機能を外すこともあり得ますが、それが本当にこのアプリに必要な機能であるのかを再考した上でペーパープロトタイプを修正します。

プロトタイプ

技術検証が終了したら、いよいよプロトタイプに入ります。ここの詳細機能を詰めて行きたくなりますが、そこはまだ我慢。まずはペーパープロトタイプに基づき、全ての画面がつながって動く状態に持っていきます。

アプリによってはこの段階でユーザーテストを実施しますが、動作をイメージしてもらいづらいアプリの場合は、自分たちがスムーズに使えるようになるまで、ペーパープロトタイプに戻って構造を練り直します。

テスト対象のユーザーが多ければユーザーテストで問題ありませんが、この段階からテストを実施すると、アプリに慣れてしまって、最終的なユーザーテストの効果が半減してしまうので行いません。

デザインと仕上げ

アプリのデザインについてはペーパープロトタイプが出来た段階でデザイナーに共有し、プロトタイプ製品をTestFlightで共有してイメージを掴んでもらいます。

画面デザインが仕上がってきたら、プロトタイプで作った画面にはめ込むと同時に、各画面の機能を詳細に実装して行きます。リファクタリングはこのフェーズで。必要であればコードを全て書き換えます。

ユーザーテスト

ある程度モックではなく、本物のデータでアプリが動作するようになってきたらユーザーテストを開始します。

恐らくこの段階で、「この機能は分かりづらいだろうなあ」とか「これは何とか分かってもらえるだろう」など、ある程度伝わりにくいであろう箇所の予測は付いているかと思いますので、ユーザーが使っているのを横で静かに観察し、少しでも迷っている箇所をチェックします。

見ていると分かりますが、大体はこのような結果になります。

  • この機能は分かりづらいだろうなあ → その機能に気づいてもらえない
  • これは何とか分かってもらえるだろう → 使い方分からない

少し配置や文言を変えるだけで伝わりやすくなったりしますので、このテストを複数回繰り返します。ただ全てやっているとキリがないので、アプリとして最低限保証したいフローだけは完璧にしておきます。

画面の改善例

全ての画面において、開始時のペーパープロトタイプと、完成後の画面が異なってきますが、その一例として、Film Storyのメイン画面である絵コンテビューを取り上げます。

ペーパープロト

少々見づらいですが、写真の左側が一番初期のデザインです。フィルムストーリー、ということでフィルムっぽいテイストにしたいと考えていましたが、そもそもiOS7のデザインコンセプトとも合いませんし、何より無駄なスペースが多くて使いづらかったため、右側のレイアウトへ変更しました。

ユーザーテストを経て

左側がデザイナーさんから上がってきた画面イメージです。カッコいいですね！で、まずはこのまま実装して出してみたのですが、

  • 0:00〜0:05 などの数字が何を意味するのか分かってもらえない（画面上全て同じの数字ですが、この次は0:05〜0:30と、動画開始からの合計時間を表示しています）
  • ファイル名とか別にいらない
  • タップできることが分からない

などの問題がありました。それで改善を進めて最終的に落ち着いたのが右の画面です。

  • 全体のタイムスケジュール表示（0:00〜0:05）を廃止
  • 代わりに個別のムービークリップの再生時間を表示
  • 字幕が登録されているものに関しては字幕を表示
  • タップできることが分かるように変更
  • ツールバーも文字を追加

これである程度スムーズに使ってもらえるようになりました。

まとめ

という感じで、弊社では大体、ペーパープロト → 技術検証 → プロトタイプ → デザインはめ込みと仕上げ → ユーザーテスト、というフローで開発を行っています。（もちろん例外もたくさんありますよ）

AVFoundation周りのハマりどころも書こうかと思ったのですが、予想以上に長くなってしまったので今回はここまでで。