HTML5,videoタグを背景に用いてメッセージ性を強く持たせるWebデザイン

ポーランドの映画館のサイト。背景に人物の映像をループさせています。強いメッセージ力を持ったサイトです。

Webデザイン３つの良いとこ : 3 Good Point!

背景に女性の白黒映像をループさせるという、今までに見たことがなかったWebデザインでしたのでシェア。HTML5ではvideoタグが登場したことにより、flash技術を用いなくてもこのような映像サイトが作れます。

このサイトではあくまでコンテンツ、記事が主役のようです。サイトを観るとバックの女性に強い影響、インパクトを受けますが、あくまで白黒。白が背景でコンテンツが浮かび上がっているように感じられ、どちらも目立ちますが、あくまでもコンテンツを主役にしています。

に、しても、後ろの女性の「目」がうまく出るようになっているので、とても緊張感というか、強いメッセージ性を受け取る気がします。

ヘッドメニューはfixedされ、スクロールしてもついてきます。これの透明度を高めることで、やはり記事を、そしてバックの映像の邪魔をしないようにデザインされていました。

とても強いメッセージを訪問者に与えられるこのビデオ機能ですが、あまりに動きすぎていたらそれはコンテンツよりも目立ってしまいます。それを考慮すると、びみょーに動かし続けることで背景として映像が馴染んでいる気がしました。そんなビデオ映像を使ったWebデザイン。勉強になりました。

今日参考にさせて頂いたサイト

Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください！