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

Nowy Teatr
ポーランドの映画館のサイト。背景に人物の映像をループさせています。強いメッセージ力を持ったサイトです。
Webデザイン3つの良いとこ : 3 Good Point!
- グリッドレイアウトに映像背景をつける
- グレーが主体の白黒映像だから、メインコンテンツを色褪せさせない
- 透明性がサイトにマッチしているヘッドメニュー
私はWebデザインのココを見た!
背景に女性の白黒映像をループさせるという、今までに見たことがなかったWebデザインでしたのでシェア。HTML5ではvideoタグが登場したことにより、flash技術を用いなくてもこのような映像サイトが作れます。
白黒映像でコンテンツを主役に
このサイトではあくまでコンテンツ、記事が主役のようです。サイトを観るとバックの女性に強い影響、インパクトを受けますが、あくまで白黒。白が背景でコンテンツが浮かび上がっているように感じられ、どちらも目立ちますが、あくまでもコンテンツを主役にしています。
に、しても、後ろの女性の「目」がうまく出るようになっているので、とても緊張感というか、強いメッセージ性を受け取る気がします。
透明度の高いヘッドメニュー
ヘッドメニューはfixedされ、スクロールしてもついてきます。これの透明度を高めることで、やはり記事を、そしてバックの映像の邪魔をしないようにデザインされていました。
とても強いメッセージを訪問者に与えられるこのビデオ機能ですが、あまりに動きすぎていたらそれはコンテンツよりも目立ってしまいます。それを考慮すると、びみょーに動かし続けることで背景として映像が馴染んでいる気がしました。そんなビデオ映像を使ったWebデザイン。勉強になりました。
今日参考にさせて頂いたサイト
Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください!
@webhoonetさんをフォロー