ショーケースがかっこいい!動きを自然に魅せるWebデザイン

woodwork-動く-jQuery-Webデザイン_001

Woodwork

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

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

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

 

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

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

woodwork-動く-jQuery-Webデザイン_001

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

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

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

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

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

woodwork-動く-jQuery-Webデザイン_002

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

woodwork-動く-jQuery-Webデザイン_003

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

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

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

About   Woodwork

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

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

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

Woodwork

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

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

関連するWebデザイン

コメントをどうぞ。

1日1Webデザイン

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

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

ホバーしてね