• LIGの広告成功事例
WEB

Javascriptを使ってここまでできる!凄い動きのサイト10選

Javascriptを使ってここまでできる!凄い動きのサイト10選

こんにちは。マラガの海の贈り物SEKOです。
フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。
是非参考にしてください。

Javascriptを使った、凄い動きのサイト10選!

MoMA

スクリーンショット 2013-10-29 12.20.57

円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。

DUB FIRE

スクリーンショット 2013-10-29 12.21.57

マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。

Volkswogen

スクリーンショット 2013-10-29 12.22.26

メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。

Secret Study

スクリーンショット 2013-10-29 12.23.03

DUB FIREのように背景イメージを大きく使ったサイトです。4方向に上手くコンテンツを切り分けて表示しており綺麗なUIになっております。

VOiD

スクリーンショット 2013-10-29 12.23.37

コンテンツ毎に全く違う表情をみせてくれるサイトVOiD。スライドの動きはシンプルですが、滑らかで美しいデザインです。

ARCHIKON

スクリーンショット 2013-10-29 12.24.23

線でコンテンツをつないでいる面白いサイト。クリックすると線をスライドするしかけになっています。ただ、別タブで開くリンクも同じ見え方になっているためユーザビリティとしては少し使いづらいかもしれません。。

Beercamp 2012

スクリーンショット 2013-10-29 12.28.58

既に2013バージョンもアップはされてますが2012の方がサイトの動きとしては面白かったので紹介いたします。マウスでドラッグすると飛び出す絵本の動きをします。ギャラリーや実績紹介で使ってみても面白そうです。

The Shodo

スクリーンショット 2013-10-29 12.29.28

WEB上でリアリティのある書道を楽しめるサイト。ドラッグの速さによって線の太さが変わったりと、本物の筆の扱いに非常に近く感動しました。

Ball Pool

スクリーンショット 2013-10-29 12.32.19

クリックすると次々のボールが飛び出してきます。ボールをドラック&ドロップで投げる事もできたり決して決まった形にならないユニークなサイトです。

Form Follows Function

スクリーンショット 2013-10-29 12.46.29

コンテンツをドラッグするとグリグリと周りはじめます。各コンテンツの中ページではマウスを使って操作性のあるサイトになってます。どのページの動きもクオリティが高く驚きの連続です。

最後に

やはり面白い動きのサイトは海外に沢山ありますね。動きが複雑になればなるほどユーザの予測していない結果になるため、操作性が悪い自己満足のサイトにならないようにだけ注意が必要かもしれません。一度見て飽きてしまうものを作るのではなく「見せるところは確実に見せる」。ユーザビリティは保ちつつも楽しいサイトを作っていくことは、これからも大切にしていきたいものです。

この記事を書いた人

勢古口
勢古口 イベントディレクター 2012年入社
いいオフィス支配人の勢古口です。3年間お世話になったスペインから帰国してWebディレクターに返り咲き、2014年夏からお酒の力を借りつつラテンのノリで楽しませる特技を活かして、いいオフィスの支配人に。あっ、教育事業のSTUDIO上野 by LIGの支配人にもなりました。

こちらもおすすめ

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

  • 著者狩野 祐東
  • 価格¥ 2,678(2016/01/15 10:41時点)
  • 出版日2015/10/30
  • 商品ランキング3,796位
  • 単行本320ページ
  • ISBN-104797383585
  • ISBN-139784797383584
  • 出版社SBクリエイティブ