ウェブサイトの背景に動画を使用すると、ページが表示された時に閲覧者の注意を引くことができるかもしれません。動画は、背景のデザイン要素として次第にその人気が高まっており、最近のどんなブラウザでも、HTML5 動画に対応することが普通となってきています。

Webデザイン用に動画を最適化する方法についてネット上でよく目にする質問としては、背景用動画の作成および実装時に直面する2つの共通する問題があります。

1) ウェブサイトで使う動画の圧縮

1つ目は、編集ソフトやオーサリングソフトから書き出されたファイルが大きすぎることに関連したものです。ファイルが大きすぎると、帯域幅が制限されていたりインターネットの接続が悪かったりした時に、完全に読み込むまでの時間がかかり、動画が途中で中断したり、バッファーに時間がかかったりするため、これは大きな問題です。

このように、全ての要素が読み込まれ、正しく表示されるのを待たなければいけない状態では、ウェブサイト全体の印象を改善するために追加したはずのデザイン要素が、訪問者にとって邪魔なないものとなってしまいます。

compress-web-design

動画ファイルが大きいと、特に初めてアクセスした時にキャッシュが保存されていない状態で表示しようとしたときに、ページ全体を読み込む時間が長くなり、ユーザーエクスペリエンスを低下させますが、悪いことはこれだけではありません。ページの読み込み時間は、SEOの面から見ても、ページの読み込み時間の短さはGoogle などが考慮する重要な要素ですので、サイトのSEOに悪い影響を与えます。そのため、ウェブサイトで使用する前に動画を圧縮することが、その対策となります。

2) 動画をHTML5形式に変換する

2つ目は、同僚から受け取った動画や編集ソフトで作成した動画のフォーマットが、ランタイムで問題を引き起こす可能性のフォーマットである場合が挙げられます。ほとんどのブラウザ(Chrome、Firefox、Edge、Opera、Internet Explorer、Safari など)では、一部の動画しか認識できず、他の動画フォーマット、動画コーデック、音声コーデック(コンテナにない場合)などの場合は、追加のプラグインが必要になります。

MP4 と WebM はおそらく最も一般的にウェブ上で使用されるフォーマットです。MP4 ではライセンスの問題が発生する可能性があるため、ウェブサイトで使用する前に WebM(VP8)に動画を変換し、WebM に対応していないブラウザのための代替手段として MP4 (H264) の動画をオプションで提供するのが最も良いでしょう。

携帯電話・タブレット・ラップトップ・OS などできるだけ多くの端末のブラウザに対して確実に動画を対応させるには、これはとても大切なことです。残念ながら、現時点ですべてのブラウザに対応する単一のフォーマット・動画コーデック・音声コーデックの組み合わせはありません。

Webデザインに使う動画の最適化

上でお示しした通り、Webデザイン用に動画を最適化する1つの方法は、動画のファイルサイズを削減することです。ページの読み込み時間や再生時の挙動を大幅に改善してくれます。

他のオプションとしては、動画の解像度や品質を下げる(圧縮レベルやビットレート)ことも挙げられます。ただし、もう1つの要素として、広く認識されやすい動画フォーマットを選ぶことも大切です。

動画の解像度やビットレートは動画の見た目の品質において重要ですので、通常ではあまり大きく下げ過ぎないことを推奨しています。しかし、ウェブサイトの背景に流れる動画については、訪問者が集中するものでないことも多いため、それほど大きな懸念材料ではありません。

その代わりに、ループ再生できるHTML5動画は、透明のレイヤーや文字要素の後ろに表示されるものであり、インターネット接続の速さに関わらず、サイトにアクセスした訪問者の端末上で素早く読み込み/再生されなければならない補助的デザイン要素です。

このように、サイズの小ささは、解像度・ビットレート・見た目の品質と比べても、ある程度重要性の大きなものなのです。

推測できるかもしれませんが、高品質でサイズの小さい動画ファイルを作りたければ、無料 オンライン動画コンバーター 兼動画コンプレッサーである当社の Clipchamp は役立つツールです。

ウェブデザイナー・ウェブデベロッパー・グラフィックデザイナー・WordPress/Wix/Squarespaceのクリエイターなどからは、すでに人気を集めています。また、Webデザインに関するブロガー や Webflowのようなビジュアルウェブサイト構築プラットフォーム からは、特にウェブサイト用の背景動画やシネマグラフ*を圧縮する目的で「役に立つアプリ」と推薦されています。

 

compress-video-web-design

 

Clipchamp では、サーバー、ホスティングプロバイダー、ウェブサイトビルダーなどにアップロードする前に、ブラウザ内のローカル環境で動画を圧縮・変換します。そのため、ウェブサイトに導入した時に役立つだけでなく、アップロードする作業自体も速く終わります。

ウェブサイト上で使うには、Clipchamp の中品質または低品質用の設定を使って、最低でも720pまで動画を圧縮することを推奨しています。出力オプションは、Web用でもモバイル用でも大丈夫です。モバイル用プリセットはWeb用よりも出力ファイルが小さくなりますが、見た目の品質も若干低下します。

まとめとしては、背景動画に最適な設定は、Web用、720p、中品質、MP4またはWebM 」またはMobile用、720p、中品質、MP4」のどちらかになります。 入力ファイルの状態、そして出力ファイルの品質やファイルサイズに応じて、Clipchamp はそれぞれの動画を出力しますが、満足の行く結果を出すには、異なる設定の組み合わせに試してみるのが一番良いでしょう。

 

HTML5-background-video

 

1080p 以上の高品質動画を使いたくなる気持ちはわかりますが、 訪問者が各ウェブサイトに滞在する時間の平均が15秒未満であることを考慮に入れて、その気持ちに負けないようにしましょう。大切な最初の数秒に良い第一印象を生み出したいのであれば、当社のオンライン動画コンバーターはそのお手伝いを致します。

 


* シネマグラフとは何か知りたい方は、こちらのサブレディットをご確認いただくと美しい事例を見ることができます。