ウェブサイトのダイジェスト動画ができるまで（制作の流れと思考）

neccoのプロジェクトページでは、制作したウェブサイトのダイジェスト動画を掲載しています。（プロジェクト一覧はこちら）

ダイジェスト動画はひとつひとつサイトを画面収録し、編集して概要がわかるように作っているので、短時間でサイトのイメージや内容を知ることができます。

社内の情報共有会でこの動画の作り方をシェアしたところ、メンバーから好評だったので、ブログ記事にして公開してみることにしました。

この記事では、ウェブサイトのダイジェスト動画ができるまでに考えていること、実際の制作の流れなどを紹介します。

ダイジェスト動画の制作手順

ウェブサイトのダイジェスト動画は、次の手順で制作しています。

1. 動画を作る目的・伝えたいことを明確にする
2. 動画の構成を考える
3. 画面収録
4. Media Encoderで動画サイズの変更とMP4変換
5. MP4を圧縮（ウェブサービス）
6. Premiere Proで動画を編集、MP4書き出し
7. MP4を圧縮して完成！

以下、制作中の思考や意図をもう少し詳しく説明していきます。

ダイジェスト動画の制作過程と思考

ダイジェスト動画ができるまでの流れと、その間に考えていることなどを Serverless Operations さんのダイジェスト動画を例に説明していきます。

1. 動画を作る目的・伝えたいことを明確にする

まずは「何のために動画を作るのか」を明確にしておきます。

具体的には、だれに、なにを、どうやって、何のために伝えるかを決めておきます。これを最初に決めておくことで、今後の構成検討、画面収録、編集がスムーズに進められます。

また、動画を見た人にどんな行動をとってほしいのか？まで明確にしておくと、構成を考えるとき、編集するときの迷いが減らせます。

neccoでは次のように目的などを設定しています。

• だれに：neccoのウェブサイトに訪問し、プロジェクトに興味を持ってくれた人に
• なにを：制作を担当したサイトの概要、こだわった部分を
• どうやって：画面収録したものをダイジェストとして編集した動画で、実際の使用感がわかる動画で
• 何のために：制作したサイトに興味をもってもらう、サイトに訪問してもらえなくても概要がわかるようにする

見た人にとってほしい行動は、将来のお客さんなら「仕事をお願いしたい」と思ってもらうこと、そして実際に仕事のご依頼をいただくことです。

また、制作に関わったメンバーやお客さんに見て楽しんでもらいたい気持ちもあります。サイトを客観的に見える形にまとめておくことで、制作の振り返りがしやすく、新たな仕事への意欲も高まりやすいかなと思います。

2. 構成を考える

次に動画の「構成」を考えます。目的や伝えたいことを意識し、どんな流れで、どのページを見せるかなどを決めていきます。

構成をしっかり考えておくと、画面収録のやり直し、編集の手間が減り、より効率的に制作が進められます。撮影中に構成がわからなくなること、覚えていられないことも多いので、私はざっくりとメモをとるようにしています。

写真には写っていない部分もありますが、次のようなことをメモしています。

• 見せるページ、順番
• 次のページへの移動方法、タイミング
• アニメーションがある部分とタイミング、動きの雰囲気など
• 目を引かれるイラスト、デザイン、インタラクション
• 制作を担当したデザイナーとエンジニアへの確認事項
• 編集で手を加えた方がよさそうな部分（カットした方がいいところなど）

何をどう伝えたいサイトなのか、どのページをどうやって見せるのか、どんな動きがあるのか、サイトのイメージを伝えるのに最適なスクロールの速さ、距離、タイミングなど…ひとつの動画を作るのに考えることはたくさんあります。

あとで「この動きをもっと見せた方がよかった」「このページも撮っておけばよかった」などと後悔することがないよう、多少時間がかかっても構成はしっかり考え、予行練習もしておきます。

3. 画面収録

いよいよ画面収録、本番です。
少しでも見る人が違和感を感じないよう、基本はカットなしで収録します。

もちろん失敗して収録を繰り返すこともありますが、ワンカットの方が臨場感があり、実際にサイトを見ているような感覚で楽しんでもらえるのではないかなと思います。

画面収録の流れ

1. ブラウザの画面サイズを指定
2. Command + Shift + 5 のショートカットで画面収録（Mac）
3. MOV形式で画面収録動画が自動保存される

ブラウザの画面サイズは、デザインがもっともきれいに見える幅を指定します。案件による違いはありますが、neccoでは横幅1,800pxでデザインをすることが多いので、この幅を指定して収録します。

実際に画面収録動画を埋め込むフレーム（横幅1,200px弱）のぴったりサイズで収録した方が作業がラクかも？と思い試してみましたが、デザインで使ったフレームサイズで収録した方がキレイでした。

画面幅の指定には、Chrome拡張機能の「Window Resizer」を使っています。主要デバイスの画面サイズが選択でき、任意でサイズを指定することもできるので便利です。

4. Media Encoderで動画サイズの変更とMP4変換

画面収録した動画を軽くするため、サイズを小さくしてMP4に変換します。

そのままでも編集できなくはないですが、この工程をはさむことでプレビューやレンダリングの時間を減らせます。

書き出し設定：Media Encoder

デフォルトの設定に以下のような変更を加えて書き出します。

• 形式：H.264
• オーディオ書き出し：チェックを外す
• 幅：1,200（高さはフレーム縦横比を維持して自動入力）
• ソースのスケーリング：出力サイズ全体にスケール（動画の端に黒い線が入るの防止）

動画のサイズはプロジェクトページに埋め込む幅に少しだけ余裕をもたせています。高さはフレーム縦横比を維持して自動入力にしていますが、画面収録の時点で縦横比とサイズは指定しているので毎回ほぼ同じ大きさになります。

5. 動画を圧縮する

編集前に、オリジナルの動画を圧縮しておきます。

よく利用するのは「Video Smaller」というウェブサービスです。ユーザー登録やアプリケーションのダウンロードをする必要がなく、無料でかんたんに圧縮できるのでお気に入りです。

Video Smallerで動画を圧縮すると、Media Encoderで書き出しただけのときより60-90%ほどファイルが軽くなります。Serverless Operationsさんの画面収録動画（編集前）は、18.05MB → 3.15MB（82.5%）の圧縮に成功しました。

もとのファイルが大きいと圧縮に数分かかってしまうため、待ち時間でPremiere Proのプロジェクトファイルを用意したり、ほかの仕事をしたりしています。

6. Premiere Proで編集

素材が準備できたらPremiere Proで編集します。

プロジェクトファイルを作成し、名前をつけて保存、圧縮した動画をワークスペースに投入。プレビュー画面の解像度は1/2以下に設定し、アプリケーションの動作が鈍くならないようにしておきます。

編集内容

編集はサイトによっても変わりますが、次のように手を加えることが多いです。

• 不要な部分のカット（ページの読み込みや操作中にできた余分な時間など）
• 全体およびカーソル操作中の速度調整（デュレーション変更）
• 暗転させて動画に終わりをつくる

不要な部分はレーザーツールでカットし、速度調整は全体のイメージが崩れないように100-150%ぐらいでデュレーションを調整します。アニメーションの実装や動画が多く使われたサイトの場合は、マウスポインターの移動中のみ速度を上げたりしています。

Premiere Pro でよく使うショートカットキー（Mac）

編集の効率をあげるためには、ショートカットキーの活用も欠かせません。以下にいつも使っているショートカットキーをまとめてみました。（PCはMac、キーボードはUSを使ってます）

• レーザーツール（C）：クリップのカット
• 手のひらツール（H）：タイムライン内の移動
• 選択ツール（V）：クリップの選択
• ギャップを詰める（Option+Gにオリジナルで設定）：クリップのカットなどでできた余白を詰める
• 動画の再生・停止（スペースキー）
• 前の編集ポイントに移動（▲）
• 次の編集ポイントに移動（▼）
• 動画の開始位置に移動（Shift + Fn + ◀︎）
• 上書き保存（Command + S）
• 別名で保存（Command + Shift + S）
• 速度・デュレーションの変更（Command + R）
• メディア書き出し（Command+M）

編集がすべて終わったら、プレビューの解像度を「フル画質」に変更してMedia Encoderで書き出します。（書き出し設定は前述したものと同じです）

7. 仕上げのMP4圧縮

最後の仕上げに、編集した動画をVideo Smaller で圧縮します。ウェブサイトで使用する動画は軽ければ軽い方がいいですし、エンジニアさんも喜んでくれます。

Serverless Operationsさんのダイジェスト動画は、Premiere Proでの動画編集前は3.15MBでしたが、編集後は31.14MBになっていました。ここから仕上げの圧縮をすることで -89.57% のダイエットに成功し、3.25MBの動画が完成しました！

• Premiere編集前：3.15MB
• Premiere編集後：31.14MB🔥
• 圧縮後： 3.25MB（-89.57%）

動画用フォルダの構造

最後に、いつも使っている動画制作用フォルダの紹介です。案件や場面によって内容が変わることもありますが、基本は以下のように整理しています。

1. Material：画像や音楽など、すべての素材を格納する場所
2. Project：Pr、Aeなどプロジェクトファイルを保存する場所
3. Render：書き出した動画データを格納する場所です

動画ファイルはリンクが切れを起こしやすいので、事前準備と整理整頓が大切です。

まとめ

ウェブサイトのダイジェスト動画ができるまでの流れや思考について紹介しました。

ダイジェストというと収録、編集がメインになりそうな感じもしますが、実際は考える時間、ウェブサイトをながめて計画を練っている時間の方が圧倒的に長いです。

「少しでもサイトに興味を持ってもらいたい」「時間がなくても概要がわかる資料を用意したい」など、もともとは社外の人に届けるために作りはじめたダイジェストでしたが、サイトの制作に関わったメンバーが喜んでくれるという嬉しい効果もありました。

まだまだ公開できていないプロジェクトもたくさんあるので、引き続き楽しくダイジェスト動画の制作をつづけていきたいです。

---

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

• フロントエンドエンジニア
• アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。

（2024年11月時点）