App Store用の紹介動画App Previewsの作り方まとめ


ここ数日、AppStoreの新しいアプリ紹介動画であるApp Previewsを研究してました。実際作ってストアに出したので自分なりの作り方や使ったツールを詳しく書いてみる。

App Previewsガイドライン

まずは主要なApp Previewsのガイドラインをおさらい。

動画サイズ
@iPhone5、iPhone6、iPhone6Plus、iPadのサイズをアップできる。
@iPhone4サイズはアップできない。
@動画のローカライズはできない。(日本語動画作ると英語ページも日本語の動画)
@よって、一つのアプリに4つの動画を用意することになる。

動画ファイル
@fps30
@15秒 ~ 30秒の長さ

その他ルール
@画面のキャプチャ動画のみ
@人間や手が写るとダメ
@音楽、字幕、ナレーションはOK
@OSX Yosemiteじゃないとアップロードできない

使ったツールやサイト

使ったツールなどのまとめ。

@OSX YosemiteのQuickTimePlayer
iPhone実機のキャプチャ動画をこれで撮る。すごく簡単。

Final Cut Proの30日体験版
640×1136などのサイズでの動画編集がiMovieじゃ出来ないので。他にもツールがあるけど、体験版があってiMovieと操作性が似ているのでこれにした。

HandBrake
FinalCutで作成した動画をmp4に圧縮変換するために使用。ファイルサイズ変換にも便利。

AudioJungle
バックに流す音楽をここで購入。

最初はとりあえずアップしてみた

さて、ここからApp Previewsを調べて、いろいろ見て、ツール選んで、実際作って、アップロードするというくだりをできるだけ詳しく書いていこうと思います。ハマりポイントも解説したい。

まず最初になにをしたかというと、ここらへんのブログをざっと読んでみました。最初はざっくりとした情報収集が重要だ。

APP PREVIEWS (VIDEO ON THE IOS 8 APP STORE): THOUGHTS AND TIPS
Getting Started with App Previews

ここでざっとした仕様とか、どういうツールを使うのがいいか、動画の取り込み方法のあれこれがわかった。できればiPhoneシミュレータで撮影できると実機を用意しなくていいなとか思ってたんだけど、いろいろ調べたところiPhoneシミュレータの動画撮影でよさげなものがなかった。

結局Yosemiteで実機からキャプチャ動画を撮るのをやってみると、これがびっくりするほど簡単。最初はタップした場所とかのポインターがあったほうがいいかなとは思ったけど、アプリ自体にタップしたところはハイライトされるしそこまでこだわる必要ないなと思い直す。

とりあえずYosemiteでキャプチャしたiPhone5の動画をiTunesConnectでアップしてみたら上手くいった。

しかし、このままだと音楽も字幕もなくて味気ない。まあ、スクリーンショットだけより動画があるとはるかに参考になるので、面倒な人はとりあえず音楽も字幕なくてもさくっと動画キャプチャをアップしてみるのもありだと思う。

動画に字幕と音楽をつける

以前iMovieで紹介動画を作った時びっくりするほど簡単だったので今回もかんたんやろと思って、動画に字幕と音楽をつけることにした。

そこでiMovieでキャプチャした動画を取り込んでみたら、なんと動画が横画面に強制変換された。

なんだと、俺はiPhoneの縦画面サイズで取り込みたいんだ、お前ならできるはずだろiMovieと願いながらいろいろ試す。が、出来ないことが判明。

Developer Forumでも、どうやって縦画面で編集するかを議論していた。結局FinalCutProを使えば簡単よという結論だったので、体験版を使うことにする。

AppShowとかも安くて便利そうなんだけど、まだβで字幕がつけられなかったんですよね。

詳しくはAppStoreのアプリ動画 App Previews作成に便利なツールの紹介の記事を。

動画のカット割りと字幕を考える

動画の取り込みもできた。編集する環境も整った。あとは動画のカット割りと字幕の構成を考えるぞと思い、いろいろなApp Previewsを参考に見てみた。

僕のアプリはツールなので、特にツール系を参考にいろいろ見てみました。

@1Password
音楽とナレーション。

@MoneyTree
音楽と字幕。字幕はアプリ動画に重ねる系。

@Clear
音楽と字幕。字幕はアプリ動画に重ねず、黒の背景に独立して表示。

まず、音楽とナレーションタイプだけど、ナレーションは面倒なのでとりあえずスルーしてみた。でも、よく考えるとナレーション入れると字幕よりはるかに詳しく解説できるから今後のバージョンで入れるかも。

ただ、ZenyTaxnoteも今のところ日本からのダウンロードが圧倒的なんだけど、動画のナレーションまで日本語になるとと英語圏のダウンロードにマイナスなりそうで悩む。

次に、字幕をアプリ動画に重ねる系動画を作ってみた。これは動画のキャプチャを一連の流れで撮影し、下の部分にさらに字幕を乗せるので情報量はかなり多くできる。ただ、出来上がったものを何回も見ていると、どうも詰め込みすぎ感が出てしまい、伝えたいメッセージがぼやけてしまっていた。

ということで、最終的に伝えたいメッセージを絞りに絞り、字幕を黒の背景に独立して表示する形式にした。

この場合、アプリ操作の流れは切れて一連の動作は見れないけど、伝えたいメッセージが絞れてそれぞれ明確になるメリットがある。

結局このClearの動画に影響されました。

家計簿アプリZenyの場合、自動ロックとか電卓、バックアップなど様々な機能があるんだけど、詰め込みすぎるとごちゃつくので一番伝えたいメッセージはなんだろなと考えた。そこで、とにかく入力が速いということ、全体的に覚えなくてよいシンプルなUIだということのみを伝えることにしました。

うーん。。素早い入力をアピールしてはいるのだけど、他の部分がもひとつパンチ弱い。

Zenyはもともと確定申告の仕訳帳アプリTaxnoteのスピンオフなんだけど、Taxnoteも同じように動画つくってみました。こっちのほうがバランスよくアピールできてる気もする。

編集と変換

FinalCutProの感想をかんたんに書くと、iMovieを使ったことある人なら操作感は似ているのですんなり使えると思う。

iMovie自体が直感的にドラッグアンドロドップで使えるので、FinalCutも基本的にらくちん。特に音楽を乗せたり、カット割りを縮小したりする操作がやりやすい。

バックグラウンドの音楽はAudioJungleで購入して適当に流すと雰囲気でごまかせる。

出来上がったmov動画が300Mとか馬鹿でかいので、さすがにこのままアップしてはまずいなと思い、HandBrakeというツールで変換した。2Mぐらいになった。これで安心。HandBrakeはPictureSettingsで解像度の変換もできる。

4つのサイズを作るのが面倒

iPhone5、iPhone6、iPhone6Plus、iPadの動画をそれぞれ作るのは大変です。心が折れます。というか全部のデバイス持っていませんでした。

iPhone6は持ってないのでiPhone6Plusで撮影した動画を縮小して作った。うちのiPadMiniはRetinaじゃないので出来ればRetinaで撮影した動画を使いたかったのもあります。

ちなみにiPadのアップロードサイズはなんと900×1200です。今度発売されるiPadはサイズが変わると噂されていますが、このアップロードサイズを見る限りやっぱり変わるんじゃないかと。

話を戻すと4つのサイズを全部作るのは面倒です。なので、面倒ならiPhoneのほうはどれかのサイズで作ったのを解像度だけ変更して流用しちゃうっていうのもひとつの手ですね。面倒なら。僕のiPhone6動画はPlusの動画を縮小したものですが、特にリジェクトはされませんでした。

ユーザ視点で考えると簡単な動画でもあるだけではるかに大きいと思います。落として使ってみるのは面倒だし。開発者側からとしてもキャプチャ動画オンリーというのが敷居を下げている。

*参考記事
AppStoreのアプリ動画 App Previews作成に便利なツールの紹介


*シンプルなアプリ作ってます