2014年5月29日木曜日

アプリのプロモーション動画の作り方

先日、Timesheet アプリをリリースした際、プロモーション用動画 を作成しました。
どんな感じで作ったか をご紹介しようとおもいます!

作成した プロモーション動画 ↓



よいサンプルを見る


どんなものを作るといいのか? を考えるために、よいサンプルを見るのが大事ですよね。
参考にしたのはこちら。

プロのお仕事だなー という感じ。素敵です。
自分だと、そこまでクォリティ高いものが作れない苛立ちで悶々としてしまいますが、ぐっとこらえて自分でできそうなことを想像します。

ここで思ったのはテンポ良くすること。飽きないの大事。
長さは、1分ぐらい...長くても1分半ぐらい。

内容を理解してもらうのではなくて、イメージを掴んでもらう ということに集中すること。
↑これ、難しい! どうしても説明用動画っぽくなっちゃう。

操作動画はちょっとスピードアップするとよりテンポがでるかなー と考えたり。
↑ 短縮した場合は、その旨の表記がいるらしい (Appleマーケティングガイドライン 3.6)

画面をズームして見せたいものを大きくみせるのもありだなー と考えたり。

(結局自分のセンスや時間の問題で、凝ったものは全然できなかったなぁ....無念)


ツールを揃える


操作している動画を撮影 するには
  1. デジカメで、操作しているiPhone端末を撮影する
  2. 操作画面を直接録画できるツールを使う
の方法がありますが、1. であっても、画面の内容を綺麗に見せたいのであれば、2. のものも作っておいて合成したほうがいいのではないかーと思います。

「技術がない人は、良いツールが必要」
...ですが、お値段と、できる事の兼ね合いですよね。
ケチっては本来ダメなところですが、私は結局、手元にあるツール+自作ツールでカバーしました。 

Reflectior $12.99
操作している画面の動画作成にて使用。
iPhoneの画面を、AirPlay経由でMacに表示し、録画もできます。
アプリデモを見せる時にも使えるので、あって損はないものだと思う。

iMovie 無料
MacOSで使える動画編集ソフト。
動画/静止画を結合したり、トランジションを設定したり、音楽を入られます。
文字も入れれますが、位置は自由には設定できないようです。
これだけ高機能なものが無料で使えるなんて、Apple様ありがとう。

その他、買わなかったですが以下のツールもあります。

タップしたところがわかるようなマークとかも付けれるらしい。
シミュレータで動かして録画するタイプ。

Sound Stage はダウンロードできなくなっていた。
4インチには対応していないらしいし、もう開発中止になったのかな。

AfterEffect
動画職人には有名なAdobeのソフト。
撮影した動画をいろいろ加工できる(使っていないので想像)
Adobe Creative Cloudに入っているのであれば使うべし。


素材、情報を揃える


プロモーション動画の場合、少しでも素敵 に見せたいので、
背景画像や、表示する文字も画像にして用意しました。

を読んで、規約を把握し、iPhone端末画像や、AppStoreのバッチを頂きます。

ガイドラインから、
  • AppStoreのバッジは1回だけ表示する
  • ビデオの終わりに、Appleのクレジットを入れる
とのことなので、守りましょうー。


操作動画を撮影する


ストーリーに沿って、いくつかシーンを分けて別々に動画を作成し、あとでiMovieでつなぐのがおすすめです。
撮影しなおしとかも楽なので。

3.4 ステータスバー
ステータスバーがはっきりと見える場合は、バッテリー残量やWi-Fiアイコンがフルの状態であること、通信会社名が表示されていないことを確認してください。


(これ、今、守れていないので作りなおさないといけないところ... アップルさん、ちょっとまってね!)

動画の上に、ステータスバーダミー画像を載せて合成しようとしたのですが、動画にすると色味がちょっと変わってしまうようで自然に載せられず、諦めました。
真っ白 or 真っ黒 のステータスバーのアプリなら大丈夫かもしれません。

キャリアを非表示にするのは、脱獄しないとできないようで、そうなるとAirplaneモードが選択肢。
ReflectorはiPhoneとMacOSが同一Wifiにないとダメなので、設定画面で一旦AirplaneモードにしてからWifiをONにするといけそうです。
(最近、コントロールセンターでずっと操作していたので気付かなかったぁ)

シミュレータであればキャリアという文字はでるものの、実際のキャリア名は出ないので、シュミレータで撮影する方法を選択した方がよいのかも? (不明)

ということで、iPhone端末で撮影する場合は、
  • 撮影前にはiPhoneのバッテリーをフル状態にしておく。
  • Airplaneモードにしておく。(もしくは脱獄?)
を事前に忘れずに!


操作動画と背景画像を合成する


今回の動画では、背景画像 + iPhone端末画像 + 動画 + 文字画像の移動アニメーション を合成しています。

AfterEffect とかつかえば簡単にできるはず、多分!

今回はケチって自作ツールで作ってしまいましたが、
iOSのAVFoundationフレームワークを使って今回用にごりっと書いで行数にして300行くらいの小さなもの。
自由にLayerを作って重ねて、動きをつける ということがAVCompositionなどを使うと結構楽にできるようになっています。

試していないのですが、iMovieでクロマキーの合成ができるようです。

操作しているiPhoneをデジカメで動画撮影する場合、これでやるのも手かも。


iMovieで各シーンを合成する


作った動画と、静止画 をiMovieでつなぎ合わせます。
各シーンの繋ぎ目は、iMovieのトランジションを使って自然に切り替えしてみます。

3.5 トランジション
動画の場合は、フェードやディゾルブなどシンプルなトランジションを使用してください。動画では、iOS デバイスのマルチタッチ・ジェスチャーを模したトランジションを使用しないでください。
とあるので、フェードかディゾルブが無難。



AVFoundationを使って自作ツールつくったのならば、このつなぐ処理も自作でつくったらええやん? って思いました?
はい、できるんですけどもね。
静止画部分や、トランジションの長さって、いろいろ変えて、いい塩梅をみつけていくのですが、そんな作業にはやっぱりUI上で設定⇔確認の繰り返しがすぐにできるのが大事なのです。

iMovie上でmovieの書き出しをすれば、動画作成の完了です!

レビューサイトへの掲載依頼をする時、動画があるのと無いのでは大きな差があるはず。
会社で開発しているなら、やっぱりプロにお願いするのがいいと思うけど、
個人で開発していても、作ると効果大だと思うので、ぜひ。



• • •