TIPS

2018.07.30
vol.92

WEB

web用映像の最適化

vol.92 web用映像の最適化

こんにちは。デザイナー兼エンジニアの酒井です。
近年、スマートフォンやタブレット、ウェアラブル端末等の普及によりマルチデバイス化が進むにつれwebサイトの表現方法も多種多様になってきています。
ユーザーは様々な新しい表現を求めますが、それに加え使用中の心地よさを求めます。
ユーザビリティを低下させることなく、表現の質を保つには全てのユーザー環境に対して適切な設定をする必要があります。

今回はその中でも映像コンテンツをwebサイトに使用する際の実装方法、対応ブラウザ、書き出し方法をお伝えできればと思います。

webでの映像需要

様々な表現が増える中、特にwebサイト上で映像を使用する例は増えてきています。
誰でも低コストで手軽に撮影や編集を行え、それを多くの人にシェアできる時代になった現在、映像は表現方法として標準化されてきています。
Webサイト上での映像表現も同じように現在頻繁に使用され、写真やイラストなどの静止画では表現できないようなストーリー性を生み出すことができます。
そのことからクライアントやエンドユーザーからの需要は高まっています。

html実装

webで映像を実装する際の方法です。
今回は現在標準使用されているMP4とWebMを例にします。

上記がhtmlでの実装方法です。
上記では<video>タグ内のautoplay属性で、ページを読み込んだ際に自動再生するように指定し、
poster属性でユーザー環境により映像が表示されない場合の代替画像を指定しています。
さらに<source>タグ内のsrc属性で映像ファイルの読み込み順を指定します。こちらは優先度の高い順で上から記述します。

以下が主に使用される属性の種類です。

src上から順に読み込む映像ファイルのパスを指定
poster映像のワンカットを画像で表示
(映像が読み込み中の表示される画像、
映像がされない場合の代替画像)
autoplay映像を自動再生
loop映像をループ再生
width映像の幅を指定
height映像の高さを指定

ブラウザ別対応状況

なぜsrc属性で拡張子が違う同じ内容の映像ファイルを指定するのかというと、それぞれの拡張子では対応できるブラウザがあり、それに対応するように複数の映像ファイルを指定しなければならないからです。

それでは各ファイル、ブラウザでの対応状況を見ていきましょう。
ここでは映像ファイルで現在主に使用されている
・MP4
・WebM
を例に見ていきたいと思います。

以下のリストのようにMP4,WebMの各ブラウザでは対応しているフォーマットはそれぞれ異なります。 各ブラウザでの代替手段を行うことによって、どのブラウザ環境からのアクセスでも映像をユーザーに見せることができます。

MP4(H.264)の対応ブラウザ

ブラウザバージョン
IE9/10/11
Microsoft Edge12以降最新版
Firefox35以降最新版
Chrome全て対応
Safari3.2以降最新版
Android4.4以降最新版
iOS Safari3.2以降最新版

WebM(vp8)の対応ブラウザ

ブラウザバージョン
IE未対応
Microsoft Edge14以降部分対応
Firefox28以降最新版
Chrome25以降最新版
Safari未対応
Android2.3~4.4.4部分対応
5以降最新版(Google Chrome)
iOS Safari未対応

※2018年7月時点

2014年末の段階でMP4形式の動画ファイルはほとんどのブラウザで対応しています。
上記の表の通り、各ブラウザ環境に合わせた映像ファイルを用意し、ソース上で読み込ませることが必須になります。
しかし各種ブラウザに対応させたとしてもユーザー環境のよっては映像が再生されないという場合も起こり得るので、映像のワンカットなどを使用した代替画像をposter属性で指定するといいでしょう。

Web用映像の書き出し・軽量化

Webサイトに映像をのせる場合、映像を軽量化しましょう。
なぜなら映像が重く読み込みに時間がかかってしまうと、どれだけいいものを作ってもUXを低下させ、ユーザーが離れていってしまう可能性があるからです。

読み込み時間の長さはSEO面を考慮する際の重要な要素になります。
映像を視聴するユーザーの離脱率ついて以下の調査結果があります。
30秒以内の映像は20%
60秒以内の映像は30%
300秒(5分)以内の映像は40%
が離脱という調査結果があります。(Wistia社調査)

この調査結果から見てもweb上であれば30秒以内の長さが最適だと考えられます。
映像が長い場合、離脱率を考慮しサイトを全て見せたいのであれば、30秒以内に収めるようにしましょう。
また映像が短すぎてもループ再生などされている場合、映像特有のストーリー性を感じないものとなり煩わしく感じる傾向があります。ですので、10〜30秒程の尺がwebサイトでは適切でしょう。
映像を適切な長さにすることはファイルサイズを最小限にすることに繋がります。
さらにファイルサイズを決める大きな要素としてコーデックとビットレートがあります。このコーデックとビットレートを適切に設定することでファイルサイズを抑えることができ、結果としてユーザビリティの向上に繋がります。

コーデック

コーデックとは映像や音声を圧縮するためのアルゴリズムです。
・MP4 – H.264
・WebM – vp8
であれば問題はありません。

ビットレート

このビットレートが高いほどピクセルに正確に情報を割り当てられるので画質は上がりますが、同時にファイルサイズも大きくなります。

ビットレート設定には
CBR 「固定ビットレート」
VBR 「可変ビットレート」
があります。

CBR固定ビットレートは常に一定のビットレートを保ち、VBR可変ビットレートはシーンに適切なビットレートに可変します。
CBR固定ビットレートはファイルサイズが大きくなりやすく、web用に設定する場合にはVBR可変ビットレートにするといいでしょう。

次世代コーデック「H.265・vp9」

H.264やvp9は現在主流となっているコーデックですが、より優れた圧縮率、画質をもつ次世代コーデックが開発されています。
MP4の場合「H.265」という新しいコーデックの普及が進んでおり、これから主流になると言われているコーデックです。
「H.265」は「H.264」の後継規格として開発され、H.264と比較すると半分のビットレートで同等の画質を実現できます。半分のファイルサイズで済むため、容量を削減し、より高画質な映像を実現できます。現在ではYouTubeなどのストリーミングサービスでの採用が始まっています。
加えて「H.264」では4K,60fpsまでしかサポートしていませんでしたが、「H.265」では8K,300fpsまでサポートされています。
現在、「H.265」での映像はストリーミングサービスなど映像コンテンツを利用する場合に使用されておりますが、ライセンス料が発生するため、「H.264」が現在の主流になります。

対してWebMにも「vp9」というコーデックが開発されました。
「vp8」の後継規格として開発が進み、「vp8」の半分のビットレート、ファイルサイズでvp8と同等の画質を表現できます。「H.265」とは違いこちらはオープンソースですが、現状対応しているブラウザが少なく、対応待ちです。現段階では引き続きvp8コーデックを使うのが好ましいでしょう。

「H.265」、「vp9」は2018年現在ではストリーミングサイトがメインでの活躍の場となっております。ですので現状ではブラウザの対応状況を追いつつ、コーデックとしてはH.264、vp8での設定を行うといいでしょう。

まとめ

いかがだったでしょうか。
デバイスの多様化、一般化が進むに連れ、サイトのコンテンツをいかに工夫してみせるかという点で、映像を使うといった手法は主流になってきています。
webで表現できる10秒〜30秒の映像は決して長いものではなく、その短い時間の中でどう人を惹きつけるのかが重要になります。こういった映像の軽量化や対応することによりユーザー視点でのもの作りになります。


videoタグ
https://www.doe.co.jp/hp-tips/html5/video-element-embed/
ファイル形式
https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats
ブラウザ対応参考
https://caniuse.com/#search=video
コーデックについて
http://aviutl.info/ko-dekku-tigai/
http://aviutl.info/cbr-vbr-abr/

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2017
December (
November (
October (
September (
August (
July (
June (
May (
April (
February (
January (
2015
December (
November (
October (
August (
July (
April (
March (
February (
January (

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。