ショーケースがかっこいい!動きを自然に魅せるWebデザイン
Woodwork
Webデザイン3つの良いとこ : 3 Good Point!
- かっこいいショーケースのWebデザイン
- 右メニューも負けてない
- いずれも動きが”自然”!
私はWebデザインのココを見た!
ショーケースがかっこいい!マウスに連動して横に動くWebデザインです。スクロールではなく、マウスに従って動くのが特徴。jQueryをふんだんに活かしていますね。
ショーケースが横に横に。マウスに連動
ショーケースがマウスの位置に連動して動きます。右におけば右に、左に置けば左に。jQueryで実現しているんですが、ちょっとどうやっているんだろう。すごいユーザーの視線を惹きつけるデザイン。
縦に作品群を置いて横に流すショーケースは、今までにもありました(コンテンツを横に並べて「速く」綺麗に魅せるWebデザイン)。ですが、横スクロールの難しいところって、ユーザーが自然に横に行くんだと認識しないことがある点です。
一般的なサイトは全て縦スクロール。それを横スクロールにするんだから、慣れていない人だったら戸惑うことあるのは当然です。
そんな問題がある横スクロールですが、今回参考にしているサイトのようにマウスに対応したスクロールを実現していれば、横スクロールでも、自然と気がつくと思います。うまいなぁー。
開く時もかっこいい。全てが自然と思わせるデザイン
作品をクリックすると、その作品中心にページが開きます。
そして今まで横にあったコンテンツはそのまま横に小さく表示。これで簡単に記事間を行き来することができます。”目”で見せています。
いずれもすごい自然です。通常であればページが切り替わるところを、中から開く、その動作をつけることで自然と作品群のショーケースを見ることできますよね。
左メニューだって、なるほど自然
左メニューの項目をクリックすると左から項目がニョキニョキ出てきます。
思えば全てが自然に感じますよね。「こうしたらこうなる」っていう形をしっかり踏襲してデザインされていると感じました。勉強になります!
今日参考にさせて頂いたサイト
Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください!
@webhoonetさんをフォロー