Woodwork

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

1. かっこいいショーケースのWebデザイン
2. 右メニューも負けてない
3. いずれも動きが”自然”！

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

• Tweet
• 

ショーケースがかっこいい！マウスに連動して横に動くWebデザインです。スクロールではなく、マウスに従って動くのが特徴。jQueryをふんだんに活かしていますね。

ショーケースが横に横に。マウスに連動

ショーケースがマウスの位置に連動して動きます。右におけば右に、左に置けば左に。jQueryで実現しているんですが、ちょっとどうやっているんだろう。すごいユーザーの視線を惹きつけるデザイン。

縦に作品群を置いて横に流すショーケースは、今までにもありました（コンテンツを横に並べて「速く」綺麗に魅せるWebデザイン）。ですが、横スクロールの難しいところって、ユーザーが自然に横に行くんだと認識しないことがある点です。

一般的なサイトは全て縦スクロール。それを横スクロールにするんだから、慣れていない人だったら戸惑うことあるのは当然です。

そんな問題がある横スクロールですが、今回参考にしているサイトのようにマウスに対応したスクロールを実現していれば、横スクロールでも、自然と気がつくと思います。うまいなぁー。

開く時もかっこいい。全てが自然と思わせるデザイン

作品をクリックすると、その作品中心にページが開きます。

そして今まで横にあったコンテンツはそのまま横に小さく表示。これで簡単に記事間を行き来することができます。”目”で見せています。

いずれもすごい自然です。通常であればページが切り替わるところを、中から開く、その動作をつけることで自然と作品群のショーケースを見ることできますよね。

左メニューだって、なるほど自然

左メニューの項目をクリックすると左から項目がニョキニョキ出てきます。

思えば全てが自然に感じますよね。「こうしたらこうなる」っていう形をしっかり踏襲してデザインされていると感じました。勉強になります！

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

• ツイート
•