ウェブサイトのモバイル版を収録する方法

iPhone にも Android にも、クイック設定に画面録画機能が組み込まれています。実機をそのまま記録するので正直な映像になりますが、問題はスクロールです。親指ではじくと惰性で流れ、しかも毎回違って見えます。

• 通知が滑り込んでこないよう、おやすみモードやサイレントモードをオンにします。
• 先に少し下へスクロールしてブラウザのツールバーを隠すか、全画面表示に対応しているページならホーム画面に追加します。
• ステータスバーが気になるなら、あとで編集ソフトで切り抜きます。

DevTools を開き、デバイスツールバーをオンにして（Mac は ⇧ ⌘ M、Windows は Ctrl Shift M）、一覧からスマホを選びます。ページはその幅と、タッチ端末用のユーザーエージェントで読み込み直され、モバイル用のレイアウトが表示されます。そのビューポートだけを画面録画ツールで録画し、スクロールはスクリプトに任せましょう。スクリプトは自動スクロールのガイドにあります。

録画の前に、デバイスツールバーのズームを 100% にしておきます。そうしないと縮小された表示が録画され、文字がぼやけます。

ホームページにアドレスを貼り、動画設定の上部で「モバイル」か「タブレット」を選びます。ページはこちらのサーバーでその幅で読み込まれるので、サイトはその幅で実際に配信しているレイアウトを返し、スマホに合う形、つまり 9:16、4:5、1:1 が選べるようになります。

• スマホの画面ではずっと大きな面積を占める Cookie バナーやチャットの起動ボタンは、先に取り除かれます。
• ページは 2 倍の密度で読み込まれるので、1080 × 1920 で書き出しても文字はくっきりしたままです。
• タブレットやスマホの幅で読み込むと、書き出しに 3 クレジットが加算されます。それ以外に変わることはありません。

レンダリングしたものも録画したものも、モバイル版の動画は画面の部分だけです。iPhone や Pixel の中に収めて見せるには、モックアップアプリや動画編集ソフトのテンプレートで、デバイスに動画をはめ込みます。帯が出ずにデバイスの画面いっぱいに収まるよう、9:16 で書き出しましょう。