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

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

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

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

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

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

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

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

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

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

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

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

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

なぜなら

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

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

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


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

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

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

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

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

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

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

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