これが本当のレスポンシブ!無限スクロールで永遠に楽しめるWebデザイン

music-video-award-scroll-responsive-webdesign_006

MVA - SPACE SHOWER MUSIC VIDEO AWARDS

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

  1. ウィンドウに合わせ、要素までも自動リサイズさせるレスポンシブWebデザイン
  2. ポワンと表示されるランダム要素+無限スクロール
  3. ホバー演出でライブ感をプラス

私はWebデザインのココを見た!

要素が自動でリサイズされるレスポンシブWebデザイン。要素がランダム表示され、更に無限スクロールを採用しているので、永遠に続くコンテンツかと錯覚してしまうUI。すごい!インタラクティブに動きまくるWebデザイン。素敵です。

要素が自動リサイズされるレスポンシブWebデザイン

music-video-award-scroll-responsive-webdesign_006

ウィンドウのサイズを変更すると自動で要素の大きさが変更されることがわかります。

このレスポンシブWebデザインはちょっと違う。

  • 要素自体の自動リサイズ
  • リサイズの動きがわかりやすい
  • スマホサイトは別にしちゃう

通常であれば、要素はウィンドウ幅に応じて並び替えられるだけですよね。それが、その要素自体もリサイズされ、常に画面いっぱいに表示されるようになっています。その上で、更に要素変更の際に動きがあるので、何が起こったのかユーザーがわかる。

そして何より「そうかー」と思ったのが、レスポンシブWebデザインを採用しているのに、スマホサイトは別スタイルにしている。という点。

mva-webdesign

これ、こんなにインタラクティブな良いレスポンシブ・ウェブデザインを実現しているのに、もったいない!と思うこと、あるかもしれません。

ですがしっかりとしたユーザー視点に立ったならば、確かにスマホのスタイルは変わるべきかも。なぜなら、既存のレスポンシブWebデザインは重いから。

けっこうなローディングを必要としますよね。これをスマホでやっていたらユーザーが逃げてしまうかもしれません。よりいっそう技術が進み、処理が早くなればこのレスポンシブWebデザインのスタイルをスマホにも適用しても良いと思いますが、とりあえず今はスマホスタイルを別にした方が無難。

サイトの構成によってレスポンシブWebデザインは甲乙ある。というのは毎回出てくる話しですが、それをしっかりと認識させてくれました。

無限スクロール×要素のランダム表示×アニメーション

music-video-award-scroll-responsive-webdesign_003

このサイト、ずっと下までスクロールして、永遠にコンテンツがあるように錯覚させられそうです。

なぜなら

  • 無限スクロール
  • スクロールする度に要素をランダム配置
  • ポワンポワンとアニメーション表示

この3つの相性が良すぎるから。これはうまいこと考えたなー。サイトにいて面白い。

ロールオーバーでノイズをかける

music-video-award-scroll-responsive-webdesign_001

こんなマウスオーバー時のアニメーションは初めて観ました。

どうやってるのかというと、ノイズのgif画像を用意し、cssで:hover擬似クラスを利用します。


a.noise:hover {
 background: url("画像パス") center center;
 opacity: 0.5;
 filter: alpha(opacity=50);
}

上記は実際にサイトで設定されているもの。そして画像が、

colornoise

これ。このノイズgifアニメーションに、透過処理をcssでかけて、ホバー時に表示させているんですね。こういう面白いホバーアニメーション、私もどんどん取り入れて行きたいな。


他にも紹介するところ、沢山あります!

ヘッダーの素敵な表示や、それぞれのコンテンツソート機能などなど。かなり考えられて作り込みがされているWebデザインとなっています。

とても参考になる点が多いので、レスポンシブWebデザインや、無限スクロールが光るWebデザインとして覚えておきましょう。勉強になりました!

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

MVA - SPACE SHOWER MUSIC VIDEO AWARDS

    この素敵なWebデザイン、「いいな」と思いました?
    その気持ちをポチッと残しておきましょう!

  • このエントリーをはてなブックマークに追加

関連するWebデザイン

コメントをどうぞ。

1日1Webデザイン

あなたにとっての素晴らしいWebデザインが見つかりますように。

Webデザインレビュータグクラウド

ホバーしてね