わー！サイトのトップに動画を載せたいけどうまく再生しないよ！
それは動画の容量が重すぎるかもしれませんね！
サイトに掲載する動画は思っている以上に容量を減らして大丈夫ですよ！
ホームページのトップページに動画を掲載すると、訪問者の目を引き、サイト全体の印象を格段にアップさせることができます。実際にやってみると重すぎて動きが悪かったり、表示されないなどエラーが発生しがち。
この記事では、企業のサイト担当者の方や映像クリエイター、動画編集者の方へ向けてサイトトップページに最適な動画のサイズや容量、圧縮方法についてわかりやすく解説します。
初心者でも簡単に設定でき、サイトの表示速度を落とさずに動画を活用できるポイントを紹介します。
「デザインが苦手…」「ポートフォリオを充実させたい！」
そこで、簡単にテロップ演出ができるテキストテンプレートを作りました！
テロップにアニメーションをつけられる140点以上のアニメーションプリセットも付属。
さらにテロップをキラキラにできるパーティクル素材やテロップベース、フレームも用意しました。
サイトのトップに掲載する背景動画の設定は？
・書き出した動画データの容量は5MBから10MBにする。
・動画の解像度はHDでもOK。特にスマホは720pでも問題なし。
・4K動画や高容量動画はサイトの負荷や再生不良につながるのでNG。
トップページ動画の理想的なサイズは？720pでもOK
ホームページのヘッダーやメインビジュアルに動画を埋め込む場合、横幅1,280px（HD）〜1,920px（フルHD）程度が一般的です。
ただし、フルHDのままだと容量が重くなるため、720p（1280×720px）でも十分美しく見えます。
- 推奨サイズ：1280×720px（HD）
- 最大でも：1920×1080px（フルHD）
- アスペクト比（縦横比）：16:9が最も自然
せっかく撮影した動画、高画質にしたいと思って4K動画を載せたくなりますがサイトが重くなってしまうのでNGです。
サイトに掲載する動画のファイル容量の目安は？
トップページ動画は、サイト全体の読み込み速度を大きく左右します。
理想は5MB以下、どんなに長くても10MB以内に収めましょう。
動画の容量を減らすには：
- ビットレート（Bitrate）を下げる：5〜8Mbpsで十分
- フレームレート（FPS）：30fpsでOK（60fpsは滑らかだが重い）
- 長さ：5〜15秒程度にする
短くループ再生する設計がもっとも軽く、印象もよくなります。
推奨のファイル形式は？
- MP4（H.264またはH.265）：汎用性が高く、ほとんどのブラウザで再生可能
- WebM：より軽く、Chromeなどで最適
- MOVやAVIは重いので非推奨
使いやすいMP4にするのがおすすめです。
MediaEncoderを使って動画を圧縮するには？
すでに書き出した動画を圧縮するならMedia Encoderを使うのが便利です。
Premiere Proで書き出す際にも、ほとんど同じなので参考にしてみてください。
まずは動画を読み込みます。「＋」ボタンまたは「メディアを追加」から圧縮したい動画ファイルを読み込み、もしくはキューの箇所にドラッグ＆ドロップしてもOKです。
動画の出力形式を設定する
エンコードの設定をします。このプリセットと表示された箇所をクリックしてメニューを開きます。
「フォーマット」は H.264 を選択
MP4形式で出力され、ほとんどのブラウザで再生可能です。
プリセットを設定する
YouTube 720p HD などの軽めのプリセットを選ぶと簡単です。
自分で設定する場合は後の「ビットレート」を調整します。
ビットレートを調整する
「ビットレート設定」で ターゲット：4Mbps／最大：8Mbps に設定 容量が軽くなり、読み込み速度が速くなります。
音声が不要な場合はオーディオをオフにしておく
背景動画なら音声はミュートでもOK 音声を残す場合は AAC 128kbps が標準です。
使わない場合はオーディオを書き出しのチェックボックスをオフにしておきましょう。
設定した動画を書き出す
動画の保存場所を設定して、キューボタンをクリックすると動画がエンコーディングされます。
書き出された動画が10MB以下ならOKです。なかなかそれ以下にならない場合は、ビットレートの数値を調整するか、Premiere Pro上でのサイズを変更するのが良いでしょう。
Premiere Proの動画編集はテンプレートでもっと簡単に
Premiere Proで動画編集をしている方へ。
編集をもっと効率化したり、テレビ番組のような動画を作れるおすすめなテンプレートをご紹介します。
テレビ番組のようなテロップとプリセットを合わせることで、テロップを動かしたり光らせたりが簡単にできます。
テンプレートでこんな動画が作れます！
筆者も自分で制作したテンプレートでテレビ番組風のビデオブログを作ってみました！
簡単にテレビのようなテロップを使えるのでおすすめです！ぜひ試してみてください！
使い方もドラッグ&ドロップするだけなのでとてもお手軽。
詳しくは動画でも解説しています。
テロップ演出が大変な動画編集ですが、もっと効率的に編集することができます。
630種類のテキストスタイルも付属、簡単に初心者から一歩進んだ編集ができます！
手軽にテレビ番組風の動画を作れるテンプレートは以下よりぜひチェックしてみてください。
