Panic

Panic Blog

7月 12th, 2018
Color blocks representing different video aspect ratios; two sizes are drawn extra long, a popular flag motif

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

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

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

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

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

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

The AE Project

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

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

 

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

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

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

デバイス ポートレート ランドスケープ
iPhone SE, 5s, 5c, iPod Touch 5th Gen 640 x 1136 1136 x 640
iPad Air, iPad 4th Gen, iPad Mini Retina 900 x 1200 1200 x 900
iPhone 6, 6s, 7, 8 750 x 1334 1334 x 750
iPad Pro 1200 x 1600 1600 x 1200
iPhone X 886 x 1920 1920 x 886
iPhone 6 Plus, 6s Plus, 7 Plus, Apple TV* 1080 x 1920* 1920 x 1080

(原文はこちら)

Posted at 5:20 pm App Storeプレビュービデオのテンプレート はコメントを受け付けていません。

Comments for this post are closed.