Edited at

iMovieを使ってiPhoneアプリの紹介ビデオをつくる

More than 3 years have passed since last update.


はじめに

iPhoneアプリの紹介ビデオをiMovieを使って作成する方法を紹介します。Simulatorではなく、実機の画面をキャプチャします。


画面タッチを可視化する

まず、画面タッチをわかりやすく可視化するために、アプリのコードに少々手を加えます。今回はCOSTouchVisualizerを使いました。

conopsys/COSTouchVisualizer

https://github.com/conopsys/COSTouchVisualizer

説明どおり実装すれば割と少ない変更で画面操作を可視化できるようになります。色・透過率などは自由にカスタマイズ可能です。


画面をキャプチャする

QuickTime Playerを使います。


  • iPhoneをケーブルでMacに接続

  • QuickTime Player: 「ファイル > 新規ムービー」を選択

  • 「カメラ」から、接続されたiPhone名を選択

  • 「マイク」から、接続されたiPhone名を選択

  • 品質を選択

スクリーンショット 2015-11-04 22.12.16.png

これで、iPhoneの画面がMac上に表示されるようになります。あとは、赤丸をクリックして録画開始すればOK。「ファイル > 保存...」を選択して、movファイルを保存できます。


iMovieへの取り込み

キャプチャしたmovファイルをiMovieに取り込みます。あとは、背景・タイトルを自由に設定すればOK。ただ、iMovieのタイトル作成機能はかなり使いづらいので、別ソフトで背景+タイトル(解像度:1920x1080)を作成しておいて、iMovie上で背景として挿入して、キャプチャしたビデオと合成するのがおすすめです。

この際、背景・タイトル画像を下側に、キャプチャしたビデオを上側に配置します。こうすると、ポートレート表示をキャプチャしたビデオの左右には背景が合成されて表示されるようになります。

スクリーンショット 2015-11-03 0.55.27.png

ちなみに背景・タイトル作成には、私は以下のアプリを使っています。

Sketch 3

https://www.sketchapp.com/

編集が終わったら、iMovieの「ファイル > 共有 > ファイル...」を選択。解像度、品質、圧縮のオプションを選択して保存すれば、MP4ファイルができあがります。

あとはこのMP4ファイルをYouTubeなどにアップすればOK。

こんな感じのビデオを作ることができます。

https://www.youtube.com/watch?v=C4BcRF9jP04