みなさんこんにちは。ついに流行りに乗り、FunusualのHPも動画背景にいたしました。

まずは騙されたと思って（何が？）動画背景をごらんください。

いえ、決してアクセス数を稼いでやろうとかそういうわけではなく、いやもちろん１８％ぐらいは内心アクセス増えればいいな〜と思ってますよ？

でもたぶん、見たら「やりたい！」と思う方がいると思うのでご紹介します。

 

ただ、やり方がわからないとか、やり方がわからないとか、やり方がわからない面倒くさいもういいや。って方が大半だと思うのです。

なのでちょこっとだけ動画の埋め込み方をちょこっとご紹介しようかなと。Web担当の方は是非ご覧ください。

HTML5の video タグを使用します。autoplay で自動再生、loop で繰り返し再生します。

 

 

 

CSSでは position と z-index で動画とコンテンツを重ねあわせ、レイヤーにして表示します。

 

動画背景はこのように構成されているそうです。

 

・・・そうです？

はい、実際に私がコーディングしたわけではございません。WEB制作にもちょこちょこ手を出しているFunusual、コーディングは実際プログラマーさんにお任せしております。

プログラミング、興味ありますけど文系の私にはどうも苦手で・・・

 

ちなみに最近はヘアサロンNoz渋谷公園通り店様のWEBページも制作させていただきました。

TOPをパララックスでインパクトを与え、下にスライドすると店舗情報が表示される動きです。

（ゆくゆくはここの部分を動画背景にしたいと目論んでます笑）

 

Funusualの動画背景にも先日命からがら撮影した上海での外灘（ワイタン、詳しくは前回のブログにて）の空撮も入れられて大満足です。

 

普通のWEBデザインに飽きてきた、という方はぜひ動画背景を取り入れてみてはいかがでしょう？一目で事業やサービス内容をイメージさせるインパクト、大事だと思います。

 

それでは！
株式会社Funusual