動画圧縮

ウェブサイトに合わせた HTML5 動画の最適化

Clipchampは無料のオンライン動画エディターです無料で試す
この投稿を共有

最終更新日: 2019 年 10 月 15 日

オンライン動画はインターネットの主役の座を占め続け、今ではウェブデザインの一般的な要素となっています。

動画には注意を惹き、想像力を刺激する作用があります。ユーザーの視線を集めようと、多数のホームページで動画が埋め込まれているのはこのためです。現在では、ほぼすべてのウェブブラウザが HTML5 動画に対応しているため、ウェブサイトの背景やヘッダーに動画を追加するのに最適なタイミングでもあります。

Clipchamp では、こちらの美しいシネマグラフを始め、ウェブサイトデザインに最適な質の高いテンプレートを多数ご用意しています。

このテンプレートを使用する

サイトに HTML5 動画を追加する利点にはさまざまなものがありますが、実際に追加する前に、発生する可能性のある問題についても把握しておきましょう。スムーズなパフォーマンスのためには、まず動画を最適化する必要があります。この記事では以下のようなテーマをカバーします。

  1. サイトに合わせた動画の最適化が必要な理由

    • 速度の遅いウェブサイトは失客を招く

    • 動画フォーマットはすべて同等に作られているわけではない

  2. Clipchamp で動画を最適化する方法

    • HTML5 向けに動画を圧縮する

    • ブラウザの互換性を保つために動画を変換する

1. サイトに合わせた動画の最適化が必要な理由

HTML5 動画にはメリットもありますが、デメリットもあります。自動再生する動画コンテンツを埋め込むことで、ページの読み込み速度が低下し、トラフィックに大きな悪影響が及ぶ可能性があります。また、顧客の使用するブラウザと動画との互換性がない場合にも問題となります。

速度の遅いウェブサイトは失客を招く

HTML5 動画のサイズが大きすぎると、ウェブサイトの表示速度が著しく低下する可能性があります。これが動画再生の一時停止やバッファにつながり、ユーザーエクスペリエンスが損なわれかねません。

ウェブサイトの全体的な印象を向上させるはずのデザイン要素を加えたために、ビジターがすべての要素の読み込みと表示を待たねばならないようであれば、逆効果です。

優れた SEO とサイトにユーザーを惹きつける素晴らしい製品が揃っていても、ユーザーエクスペリエンスの質が低ければ成果は望めません。ユーザーがサイトから離脱してしまうだけでなく、Google の目にも止まることとなります。ページの読み込み時間とサイト離脱率は、いずれもページの Google 表示順位に影響を与える重要な要素です。サイトに動画を埋め込む際には、必ず動画を圧縮するようにしましょう。

動画コンテンツがクラウドに保管されている場合には、クラウドホスティングプロバイダーが迅速な読み込みとアップタイムを保証することを確かめておきましょう。こうすることで、ウェブサイトのビジターにスムーズな動画体験を提供できます。

無料で利用を開始

ご利用は永遠に無料。わずか月額$9でのアップグレードも可能です。

動画フォーマットはすべて同等に作られているわけではない

最高の HTML5 動画であっても、ユーザーのブラウザで読み込めないようであれば用なしです。ブラウザの種類によっては対応していない動画フォーマットもありますので、精魂込めた動画が読み込まれないという残念な事態を避けるには、まず動画を変換しておく必要があります。動画をできるだけ多くのデバイスやブラウザで再生できるようにするためには、このプロセスが重要です。

残念ながら万能なフォーマットは存在しませんが、WebM (VP8) または MP4 (H264) のいずれかを選択するのが無難でしょう。すべてではありませんが、大半のブラウザで対応しているフォーマットです。

現実的には、WebM フォーマットに動画コンテンツを変換してからウェブサイトデザインに追加し、さらにバックアップとして MP4 も提供するのが最善策です。こうすることで、WebM にブラウザが対応していないという稀な事態でも、MP4 バージョンを読み込むことができます。

2. Clipchamp で動画を最適化する方法

動画をウェブデザイン向けに最適化する上で最も重要なプロセスは圧縮と変換ですが、Clipchamp Utilities を使えばこれらのプロセスを無料で行えます!

上述のとおり、ウェブデザインで動画を最適化するのに最適なプロセスは圧縮と変換で、ページ読み込み時間と再生パフォーマンスの大幅な改善に寄与します。

ただ、これ以前に、画質を維持する上では、動画の解像度やビットレートを下げすぎるのではなく、ウェブサイトの背景で再生する動画に合わせて柔軟に動画を作成することをおすすめします。こうした動画は注目の的となるべきものではなく、モバイルデバイスのような小さな画面で閲覧されることも多い点に留意しましょう。

ループした HTML5 動画は通常、透明なレイヤーやテキスト要素の後ろに表示され、インターネット接続の状態に関わらずどのデバイスでもすばやく読み込み、再生する必要があります。したがって、解像度よりもサイズの小ささが重視されます。このアドバイスの好例として Clipchamp のウェブサイトを参照することをおすすめします。では、動画の最適化の説明に戻りましょう。

HTML5 向けに動画を圧縮する

ご推察のとおり、高品質の小さな動画ファイルを作成することが目的なら、無料のオンライン動画コンバーター兼動画コンプレッサーの Clipchamp が役立ちます。

すでにウェブデザイナー、ウェブ開発者やグラフィックデザイナー、WordPress、Wix や Squarespace のクリエイターには人気を博しているツールで、ウェブデザイン関連のブロガーWebflow などのビジュアルウェブサイト構築プラットフォームにも、ウェブサイトの背景動画やシネマグラフの圧縮に最適なアプリとして推奨されています。

Clipchamp なら、ブラウザ内で動画を圧縮・変換した後、処理した動画をサーバー、ホスティングプロバイダーやウェブサイトビルダーにアップロードできます。このため、ウェブサイトへの動画の公開後だけでなく、初回のアップロードをスピーディにする上でも役立ちます。

ウェブサイトでの使用には、通常、Clipchamp の中または低画質設定を使用して動画を 720p 以下のサイズに圧縮することを推奨します。ウェブとモバイルの出力オプションを選択でき、モバイル設定ではウェブ設定に比べてやや画質が低く、サイズの小さい出力ファイルが生成されます。

ブラウザの互換性を保つために動画を変換する

Clipchamp Utilities を使えば、手軽に動画を変換してブラウザ互換性を向上させることができます。動画をアップロードし、設定のカスタマイズから希望のフォーマットを選択すれば、後の作業はすべて Clipchamp の無料コンバーターにおまかせです。

サイトに MP4 形式のバックアップを追加する場合には、MP4 を選択してこのプロセスを繰り返します。

Clipchamp Createで動画の作成を無料で開始しましょう