サービス紹介動画制作
4章 【実践②】スマートフォンアプリ紹介動画
INDEX
目次
前の章に戻る 次の章に進む

4章 【実践②】スマートフォンアプリ紹介動画

この章の目安学習時間：2時間

この章で到達できるゴール

  • アプリのUI/UXの魅力を、スクリーンキャストとアニメーションを融合させて表現できる
  • スマートフォンモックアップへの画面ハメ込み合成ができる
  • アプリ紹介動画で多用される、タップやスワイプのアニメーションが制作できる

【4-1】アプリ紹介動画の編集セオリー

目安の学習時間：20分

UI/UXの魅力を伝える

続いての実践は、スマートフォンアプリの紹介動画です。
SaaSの紹介動画と同様に、スクリーンキャスト（画面録画）を多用しますが、アプリ紹介ではより一層「UI/UXの魅力」を伝えることが重要になります。
UI / UXとは？
  • UI (ユーザーインターフェース)：ユーザーがアプリを操作する際の、ボタンやメニューなどの「接点」となるデザイン全般を指します。
  • UX (ユーザーエクスペリエンス)：ユーザーがアプリを使うことを通じて得られる「体験」全体を指します。「使いやすい」「楽しい」「心地よい」といった感情的な側面も含まれます。
優れたアプリ紹介動画は、単なる機能説明に終始しません。
視聴者が「このアプリ、なんだか使いやすそうだな」「触っていて楽しそう」と感じるような、直感的な操作感や心地よいアニメーションをテンポよく見せることで、ダウンロードへと繋げます。

編集におけるポイントは以下の通りです。
  • 操作の「結果」を素早く見せる
    ボタンをタップしてから機能が実行されるまでの過程を丁寧に見せるのではなく、タップしたら何が起こるのか、という結果をスピーディーに提示します。
  • ベネフィットを伝える
    煩雑な設定方法などを長々と説明するのではなく、「この機能を使うと、あなたの日常がこんないいことに変わる」というベネフィット（価値）を中心に構成します。
  • 軽快なBGMとの同期
    アプリの持つ世界観に合わせた軽快なBGMを選び、そのリズムに合わせて画面を切り替える「音ハメ」編集を行うことで、心地よいテンポ感を生み出します。
(44971)

【4-2】Premiere Pro制作フロー

目安の学習時間：1時間10分

ここからは、Premiere Proでスマートフォンアプリの紹介動画を制作するフローを学びます。
画面録画を、より魅力的に見せるための合成テクニックやアニメーションが中心となります。

アプリ画面の録画とモックアップ合成

まず、紹介するアプリの操作画面を録画（スクリーンキャスト）します。
iPhoneならiOS標準の「画面収録」機能、AndroidならOS標準機能や専用アプリで録画が可能です。

次に、録画しただけの映像をそのまま使うのではなく、「スマートフォンモックアップ」​と呼ばれるスマートフォンのフレーム画像と合成することで、クオリティを格段に向上させます。

手順は以下の通りです。
  1. 下のビデオトラック（例：V1）に、背景画像とスマートフォンモックアップの静止画を配置します。
  2. 上のビデオトラック（例：V2）に、録画したアプリのスクリーンキャスト映像を配置します。
  3. V2のスクリーンキャストクリップを選択し、「エフェクトコントロール」パネルで「モーション」の「スケール」と「位置」を調整して、モックアップの画面部分にぴったりとハメ込みます。
さらに、ビデオエフェクトの「基本3D」をスクリーンキャストクリップに適用し、「スイベル（左右の傾き）」や「チルト（上下の傾き）」の値を少しだけ調整すると、映像に立体感が生まれ、よりプロフェッショナルな見た目になります。

サービス紹介動画4.1

サービス紹介動画4.1

操作を示すアニメーション制作

視聴者に「どこを」「どのように」操作しているのかを分かりやすく示すために、タップやスワイプといった操作をアニメーションで表現します。
これらはモーショングラフィックスのシェイプアニメーションで簡単に作成できます。
  • タップ操作：タップした箇所に波紋が広がるようなアニメーションが一般的です。
    1. ツールバーとプロパティパネルで、塗りが白で線のない円シェイプを作成します。
    2. 「エフェクトコントロール」で、アニメーションの開始点に「スケール」0、「不透明度」100%のキーフレームを打ちます。
    3. 0.5秒ほど進んだ終了点で、「スケール」を150程度、「不透明度」を0%にするキーフレームを打ちます。これで、円が広がりながら消えるアニメーションが完成します。
  • スワイプ操作：指の動きをガイドする矢印などのアニメーションを作成します。
    1. ツールバーとプロパティパネルで矢印などのシェイプを作成します。
    2. スワイプの軌道に合わせて、「位置」のキーフレームを打つことで、スワイプの動きを表現できます。

サービス紹介動画4.2

サービス紹介動画4.2
この動画はデモ動画です。 音声はありません。

各アプリストア規格での書き出し

アプリ紹介動画は、Webサイトだけでなく、Appleの「App Store」やGoogleの「Google Play」といったアプリストアに掲載されることも多いです。
その場合、各ストアが定める動画の規格に合わせて制作・書き出しを行う必要があります。
主要アプリストアの動画要件（2025年9月時点）

※要件は変更される可能性があるため、制作前には必ず各プラットフォームの最新の公式ガイドラインを確認してください。

  • Apple App Store (Appプレビュー)
    • 長さ：15〜30秒
    • フォーマット：.mov, .m4v, .mp4
    • アスペクト比：デバイスごとの解像度（例：iPhone 15 Pro Maxは886x1920または1920x886など）
  • Google Play ストア
    • 長さ：30秒〜2分（30秒推奨）
    • フォーマット：YouTubeのURLをリンク（実質的にYouTubeの要件に準拠）
    • アスペクト比：16:9（横向き）または9:16（縦向き）
また、これらの動画は自動でループ再生されることが多いため、動画の終わりと始まりが自然に繋がるように編集すると、より効果的です。

【4-3】4章 -章末課題- フリマアプリの紹介動画制作

目安の学習時間: 30分

問題

課題概要

この章の総仕上げとして、あなた自身が画面を操作し、その映像を元にフリマアプリ「Quick Sell」のプロモーション動画（約10秒）を制作します。
提供されるインタラクティブなアプリ画面を使い、3つの主要な操作シーンを画面録画し、それらを素材として編集に挑戦しましょう。
これまで学んだモックアップ合成やアニメーション技術を駆使して、アプリの魅力を伝える動画を完成させてください。

提供素材一覧

この課題では、画面録画の元となるHTMLファイルと、合成に使うモックアップ画像が提供されます。
  • 動画素材
    • 録画用の、実際に操作できるフリマアプリの画面。
  • 画像素材
    • スマートフォンフレームの画像
    • アプリのアイコン
  • ナレーション素材
    • テロップを読み上げたナレーション音声

提供素材一覧

提供素材一覧
リンク先からダウンロードしてお使いください

構成案と編集指示

提供された3つのシーンを、以下の構成案に沿って15秒の動画にまとめましょう。
時間(秒)
シーン
使用する動画シーン
テロップ指示
編集のポイント
0-5
① 発見
ホーム画面で気になる商品をタップして詳細画面へ移動する。
欲しいものが、きっと見つかる。
・商品をタップする瞬間に、タップアニメーションを追加する。
5-9
② 出品
フッターの「ホーム」から「出品」ページへ移動する。
出品は、たったの3ステップ！
・画面が切り替わるタイミングを、BGMの展開と同期させる。
・「出品」ボタンをタップする箇所にもアニメーションを追加する。
9-12
③ 確認
フッターの「出品」から「マイページ」へ移動し、
プロフィール情報を表示する。
売上管理もかんたん。
・スムーズな画面遷移で、多機能でありながら使いやすい印象を与える。
12-15
④ CTA
（アニメーションのみ）
今すぐダウンロード！
・アプリのロゴとダウンロードボタンを中央に表示。
・動画の最初と最後が自然に繋がるループ構成を意識する。

制作要件

  • 提供された「quicksell-app-multiscreen.html」を使い、構成案に記載された3つの操作シーンを画面録画して素材とすること。
  • 録画した映像を、「smartphone-mockup.png」にハメ込み合成すること。
  • タップアニメーションを2箇所以上追加すること。
  • シーケンス設定は1080px × 1920px（9:16）、尺は約10秒とすること。

制作手順

  1. Premiere Proで、1080x1920, 15秒の新規シーケンスを作成します。
  2. 下のトラックにスマートフォンフレームの画像、上のトラックに録画した映像を配置し、ハメ込み合成を行います。
  3. 自分で選んだBGMを追加する。
  4. 構成案とマーカーのタイミングを参考に、録画した3つのシーンをカット編集して繋ぎ合わせます。
  5. タップ操作の箇所に、エッセンシャルグラフィックスで作成したタップアニメーションを配置します。
  6. 必要な箇所に効果音を追加します。
  7. テロップと最後のCTA（ロゴ、ダウンロードボタン）を配置します。
  8. 全体を通して再生し、BGMと映像、アニメーションがリズミカルに同期していることを確認後、書き出して完成です。

見本動画

見本動画
BGMとナレーションがついています
制作物をチェックしよう
  • 自分で録画したスクリーンキャスト映像を、スマートフォンモックアップに違和感なく合成できていますか？
  • タップアニメーションは、録画した映像の操作とタイミングが合っていますか？
  • 「発見→出品→確認」というアプリの主要な体験が、15秒の中で分かりやすく伝わりますか？
  • アプリストアの規格（尺、アスペクト比など）を遵守していますか？
これで「【実践②】スマートフォンアプリ紹介動画」の解説を終わります。
次の章に進みましょう。
前の章に戻る 次の章に進む
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH