MAPJP/ENTIPS2018.07.30vol.92WEBweb用映像の最適化B!こんにちは。デザイナー兼エンジニアの酒井です。近年、スマートフォンやタブレット、ウェアラブル端末等の普及によりマルチデバイス化が進むにつれwebサイトの表現方法も多種多様になってきています。ユーザーは様々な新しい表現を求めますが、それに加え使用中の心地よさを求めます。ユーザビリティを低下させることなく、表現の質を保つには全てのユーザー環境に対して適切な設定をする必要があります。今回はその中でも映像コンテンツをwebサイトに使用する際の実装方法、対応ブラウザ、書き出し方法をお伝えできればと思います。様々な表現が増える中、特にwebサイト上で映像を使用する例は増えてきています。誰でも低コストで手軽に撮影や編集を行え、それを多くの人にシェアできる時代になった現在、映像は表現方法として標準化されてきています。Webサイト上での映像表現も同じように現在頻繁に使用され、写真やイラストなどの静止画では表現できないようなストーリー性を生み出すことができます。そのことからクライアントやエンドユーザーからの需要は高まっています。html実装webで映像を実装する際の方法です。今回は現在標準使用されているMP4とWebMを例にします。src="ファイル名.webm"></video>上記がhtmlでの実装方法です。上記では<video>タグ内のautoplay属性で、ページを読み込んだ際に自動再生するように指定し、poster属性でユーザー環境により映像が表示されない場合の代替画像を指定しています。<source>タグ内のsrc属性で映像ファイルの読み込み順を指定します。こちらは優先度の高い順で上から記述します。以下が主に使用される属性の種類です。映像がされない場合の代替画像)autoplay映像を自動再生loop映像をループ再生width映像の幅を指定height映像の高さを指定ブラウザ別対応状況なぜsrc属性で拡張子が違う同じ内容の映像ファイルを指定するのかというと、それぞれの拡張子では対応できるブラウザがあり、それに対応するように複数の映像ファイルを指定しなければならないからです。それでは各ファイル、ブラウザでの対応状況を見ていきましょう。ここでは映像ファイルで現在主に使用されている・MP4・WebMを例に見ていきたいと思います。以下のリストのようにMP4,WebMの各ブラウザでは対応しているフォーマットはそれぞれ異なります。各ブラウザでの代替手段を行うことによって、どのブラウザ環境からのアクセスでも映像をユーザーに見せることができます。※2018年7月時点2014年末の段階でMP4形式の動画ファイルはほとんどのブラウザで対応しています。上記の表の通り、各ブラウザ環境に合わせた映像ファイルを用意し、ソース上で読み込ませることが必須になります。各種ブラウザに対応させたとしてもユーザー環境のよっては映像が再生されないという場合も起こり得るので、映像のワンカットなどを使用した代替画像をposter属性で指定するといいでしょう。Web用映像の書き出し・軽量化Webサイトに映像をのせる場合、映像を軽量化しましょう。映像が重く読み込みに時間がかかってしまうと、どれだけいいものを作ってもUXを低下させ、ユーザーが離れていってしまう可能性があるからです。読み込み時間の長さはSEO面を考慮する際の重要な要素になります。映像を視聴するユーザーの離脱率ついて以下の調査結果があります。30秒以内の映像は20%60秒以内の映像は30%300秒(5分)以内の映像は40%が離脱という調査結果があります。(Wistia社調査)この調査結果から見てもweb上であれば30秒以内の長さが最適だと考えられます。映像が長い場合、離脱率を考慮しサイトを全て見せたいのであれば、30秒以内に収めるようにしましょう。映像が短すぎてもループ再生などされている場合、映像特有のストーリー性を感じないものとなり煩わしく感じる傾向があります。10〜30秒程の尺がwebサイトでは適切でしょう。映像を適切な長さにすることはファイルサイズを最小限にすることに繋がります。ファイルサイズを決める大きな要素としてコーデックとビットレートがあります。このコーデックとビットレートを適切に設定することでファイルサイズを抑えることができ、結果としてユーザビリティの向上に繋がります。コーデックコーデックとは映像や音声を圧縮するためのアルゴリズムです。vp8であれば問題はありません。ビットレートこのビットレートが高いほどピクセルに正確に情報を割り当てられるので画質は上がりますが、同時にファイルサイズも大きくなります。「可変ビットレート」があります。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秒の映像は決して長いものではなく、その短い時間の中でどう人を惹きつけるのかが重要になります。いった映像の軽量化や対応することによりユーザー視点でのもの作りになります。POSTS新着TIPSvol.1012019年ロゴマークをリニューアルしたブランド5選2019年にロゴをリニューアルした企業6選vol.100BOELのスタッフが大切にしていることBOELのスタッフがオフィスでの過ごし方を通じてたいせつにしていることをご紹介します。7選WEB業界でよく使う単語の中でよくあるスペルミスと間違えやすい点をいくつかリストアップします。vol.98ブランディングで動画を活用するメリットと成功のポイント!ブランディング動画を活用するメリットや成功のポイントを事例と合わせて紹介します。幾何学フォントTOP32019年の幾何学書体トップ3をご紹介いたします。一時的な流行ではなく多くのサイトで一般的に見られるようになったWebデザインvol.43動画コーデックをマスターしよう映像データのエンコード、動画メディア配信の基礎からターゲットに合った圧縮方法vol.45すぐに使える!アコーディオンメニューの実装アコーディオンメニューをよりリッチに。日本古来より伝わる色。デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。お問い合わせをするオンライン見積もりフォームさまざまなブランディング事案に対応します。お気軽にご依頼ください。PERMISSION.。