Panic Blog

レスポンシブビデオのために提案されたデザイン

iOS App Storeに自分のアプリケーションを公開する時、あらゆるサイズのスクリーンショットを用意していると思いますが、App Storeにはプレビュービデオもあるのをお忘れなく！（もうやめてよ！）

App Storeのビデオの自動再生機能は本当に素敵なので、潜在的なユーザにアプリケーションをチラッと見せることができます。ですが、他のApp Store向けのマーケティング資料を含むビデオを公開するとなると、アプリケーションの出荷までの複雑さがさらに増します。そして、様々な画面サイズとアスペクト比のオプションのため、ビデオを12種類くらい用意する必要がありそうです。（割と多いじゃん！）

私はApp Storeのプレビュービデオの書き出しの工程を自分自身のために少しだけ簡単にできたら、と思いました。（うまくいったら、あなたのためにも！）

Adobe After Effectsを使ってビデオのスクリーンレコーディング、文字、およびその他の要素を組み合わせ、プレビュービデオに必要な全ての画面サイズとアスペクト比を含むマスタープロジェクトを作成しました。

プレビュービデオはデバイス単位でアップロードできるので、ポートレートとランドスケープを混在させることができます。私たちはPromptのために、iPhoneのためのポートレートのスクリーンショットに合わせたもの、iPadのためのものをランドスケープに合わせてアップロードしました。これだけでも６つあります！（疲れちゃうよー。）

The AE Project

プロジェクトファイルの中身を見てみましょう:

ここでは、Coda iOSの作業で使ったビデオを例として載せました。私は1920×1920コンポジションから作業を始め、”MAIN” と名付けました。ここには、様々なデバイス固有のプリコンポーズが入っています。このようにして、どのビデオサイズでも “MAIN” 要素を配置する効果を確認できます。言ってみれば、これはビデオのためのレスポンシブデザインみたいなものです。

最初に各デバイスの画面サイズとアスペクト比を決め、最大サイズで作業、必要に応じて小さいデバイス用にサイズを縮小することをお勧めします。”Combined” コンプは、全てのサイズとアスペクト比が重なり合っています（画面サイズに応じてラベルで色分けしました。）が、必要に応じて、これらの入れ子にされたプリコンポーズにビデオをドロップして、見た目を調整してください。ビデオは30秒で、フレームレートは毎秒30フレームです。（これはApp Storeの最大値ですが、掲載拒否されないために動画の長さを15秒以上にしなければならないことにご注意ください。）

このプロジェクトファイルがあなたのために役立つことを願っています。ハッピー・レンダリング！

P.S. プレビュービデオの解像度のリストを探している場合は、こちらをご覧ください：

（原文はこちら）