schoo授業感想「Webデザイン実践：背景動画サイトの制作」

オンライン動画学習サービスの「schoo（スクー）」。
授業の受講感想記です。

今回の授業は、
＊Webデザイン実践 触ってもらえる動くページ制作手法・サイト例
＊Webデザイン実践 触ってもらえる動くページ制作手法・実演編
https://schoo.jp/class/2190

全8回シリーズの7回目と8回目、田中先生の録画授業です。

WEBサイト制作での背景動画の設置についてです。

私も前々から背景動画の実装法を学びたいと考えていたので、この授業は願ったりでした。

増えてきた背景動画サイト

2年ほど前から、背景動画を入れたWEBサイトが増えています。

その理由は、HTML5やCSS3に対応したモダンブラウザが一般的になったことと、従来のようにブラウザごとに違った動画ファイル（mp4やwebm）を用意する必要が無くなったことなどがあります。

授業では、HTML5になってから実装された「video」タグを使った制作手法が解説されています。

背景動画サイトの欠点

動画サイトは目を引きます。格好良いです。
サイトの意図を端的に伝えられます。

たたし、欠点があります。
動画ゆえにファイル容量が多くて、サイトの読み込み速度が低下することです。

それを防ぐために出来るだけ容量を落とす必要があるわけですが、必然的に画質が低下してしまいます。
この矛盾をどう解決すべきか？

低画質と悟らせないためのテクニック

画質を落とした動画を「画質悪っ！」と思わせないために、授業の中では２種類のテクニックを紹介しています。

◇動画の上に半透明の色の画像（サイトに合った色）をかぶせる
◇動画の上に黒いドットの画像をかぶせる

授業中では、後者の「黒いドット」をかぶせた背景動画サイトを詳しく解説していました。

「黒いドット」とは以下のようなものです↓

5～10pxほどの小さな透明画像ファイルで、真ん中に黒い四角形があります。
（上記画像では便宜的に透明部分は白色にしてあります）

この画像ファイルを、リピートさせて動画の上にかぶせます。

これを行うと低画質のボヤけが目立たなくて、なにやらTVの走査線のような感じで逆に格好良く見えます。
アートっぽい感じになります。

例としては、他ならぬschooのトップページがそれです。

＊schooトップページ（ログイン前）

極小のドット画像が動画の上にかぶさっているのが分かると思います。
（＊ただし、schooの場合はvideoタグを使わずに、JSでYoutube動画を引っ張ってきています）

実際に作ってみました

授業見て、これは自分で試してやろうと思って、背景動画が入ったサンプルサイトを作ってみました。

＊http://web-test03.opal.ne.jp/sample/bootstrap000b/index-movie.html

レスポンシブ対応で、画面幅767px以下は静止画に切り替わるので、スマフォだと動画は見れません。スイマセン。

動画は無料素材サイトから取得しました。
ちなみにライセンスは「CC3.0」で、クレジット表記が必要です。
Adobe Premiere Proで不要部分のカットなど簡単な編集を行っています。

動画の容量は「7.71MB」で、もうちょっと減らしたいところですね。
出来れば5MB以下に抑えたいです。

背景動画サイト制作の感想

作ってみて分かったことは、背景動画制作の面倒なところは、肝心の動画をどうやって入手するか、それに尽きると思います。
コード記述などの技術的なことよりも、そっちのほうが大変です。

企業・店舗等のサイトで背景動画を入れる場合、自らのイメージに合った動画を探すには、以下の４つの方法が考えられます。

◇無料素材サイトから入手
◇有料素材サイトから入手
◇撮影業者に発注
◇自分で撮る

ただし、静止画と違って、動画の無料素材サイトは数が少なく、探すのに苦労すると思います。
また、自分で撮影するのもクオリティ的に厳しいです。

結果的に「有料素材」「撮影業者への依頼」、ここらへんに頼らざるを得ないでしょうね。

schoo授業感想：まとめページ