画面収録から5分で完成、シネマティックなアプリプレビュー

画面収録の動画が、ブラウザだけでシネマティックな3Dアプリプレビューに変わります。After Effectsも3Dソフトもインストールも不要。iPhoneでの録画からテンプレート選び、動画の配置、背景とカメラの調整、4K MP4の書き出しまで、5分でできる手順をステップごとに解説します。

シネマティックなアプリプレビューは、一見すると1週間がかりの仕事に見えます。ライティングの効いたスタジオを滑るデバイス、ゆっくりと寄っていくカメラ、画面の上でくっきりと動くUI。でも実は、必要なものはもう手元に揃っています——あなたのアプリと、ブラウザだけ。After Effectsも3Dソフトもプラグインも要りません。インストールするものは何もありません。

Mockposeは、1枚のスクリーンショットや画面収録を、シネマティックな3Dデバイスモックアップに変えます。アニメーション付きのアプリプレビュー動画も、ピクセル単位で仕上がるApp Store用スクリーンショットも、すべてブラウザの中だけで完結。このチュートリアルでは、生の録画から書き出し済みのMP4まで、6つのステップで進みます。所要時間は5分ほどです。

ステップ1：アプリを録画する

すべての土台になる素材から始めましょう。iPhoneなら、コントロールセンターから使える標準の画面収録で十分です。デスクで作業したいなら、XcodeからSimulatorを録画するか、MacのQuickTimeで好きなウインドウをキャプチャします。

1つのフローを収めた15〜30秒のきれいなテイクがあれば十分。あれもこれも見せたくなりますが、1本の動画につき1つのフロー——全機能を駆け足で見せるツアーより、1つのことを丁寧に見せるプレビューのほうが必ず伝わります。

録画ボタンを押す前に、次の3つだけ確認を。

見られたくないデータは隠しておく。デモ用アカウントを使い、「おやすみモード」をオンにして、通知が映り込まないようにします。
フローを一度リハーサルする。落ち着いた迷いのないタップは画面上で意図的に見えます。ためらいはそのまま映ります。
冒頭と末尾は気にしない。すぐあとでトリミングできます。

ステップ2：ブラウザでMockposeを開く

これがこのステップの全部です。Mockposeは完全にブラウザで動くので、ダウンロードも環境構築も不要。サインアップしなくても試せます。エディタを開けば、そこはもう3Dスタジオです。

ステップ3：テンプレートを選ぶ——または白紙から

最短ルートはテンプレートです。グリッド、横並び、スパイラル、1台のスマートフォンにぐっと寄るヒーローショットまで、100種類以上が揃っています。伝えたいストーリーに合うものを選べば——静かにプロダクトを見せるものでも、大胆で勢いのあるものでも——シーンには最初からアニメーションが付いています。

すべて自分でコントロールしたいなら、デバイス1台だけの空のシーンから組み立てることもできます。

ステップ4：録画をデバイスの画面にドロップする

録画した動画を、デバイスの画面の上にドラッグします。動画はタイムライン上でトリミングできるクリップになります。良い部分だけを残して切り、フェードを加えても、カメラが動いている間ずっとショットにぴったり同期したまま。テイクが長くなってしまったら、ここで「効く10秒」だけを残しましょう。

ヒント：思い切って切ること。強いプレビューは、最初の2秒で本題に入ります。

ステップ5：シーンを自分のものにする

ここからが楽しいところです。100以上のアニメーション背景と30のグラデーションから背景を選び、デバイスが自然に馴染むまでライティングを調整し、カメラの動きを仕上げます。こだわりたければ、タイムライン上でキーフレームを直接編集することもできます。

覚えておきたいコツをひとつ。カメラは遅く。ゆっくりした動きのほうが、速い動きよりほぼ確実に上質に見えます。深掘りしたい方は、シネマティックなカメラワークのガイドをどうぞ。

ステップ6：書き出す

書き出しを実行してフォーマットを選びます。最大4K・60fpsのMP4か、ストア掲載用のピクセル単位で正確な静止画。エンコードはすべてブラウザ内のローカル処理なので、素材があなたのマシンを離れる必要はなく、レンダリング待ちの列もありません。

再生は決定論的です。プレビューで見たものが、1フレームの狂いもなくそのまま書き出されます。App Storeのプレビュー尺も厳密に守られます——30秒のプレビューは、毎回きっかり30秒です。

無料プランではエディタのフル機能と、小さなウォーターマーク付きで最大720pの書き出しが使えます。プレミアムにすると、4K、ウォーターマークなしの書き出し、その他の機能が解放されます。

以上です。録画からシネマティックなプレビューまで、5分、ブラウザのタブ1つ。リリースを控えているなら、アプリプレビュー動画のガイドで、その30秒に何を入れるべきかを解説しています。自分のアプリで試してみませんか？Mockposeを開いて、録画をドロップするだけです。