Marketing Blogマーケティングブログ

  1. HOME
  2. マーケティングブログ
  3. WEBサイト集
  4. 【こんな動きするの!?意外な動きを見せるウェブサイト集】

【こんな動きするの!?意外な動きを見せるウェブサイト集】

こんにちわ!
キューブ制作部の片山です。

突然ですが、私は、テーマパークなどで絶叫系の乗り物に乗るのが大好きです。

いつどこでどんな動きをするのかといったように
ジェットコースター等のスリルのある乗り物は面白さを与えてくれますよね!
意外な動きをすると、「こんなところでこんな動きするんだ!」っていう感動が
生まれるのではないかな?って思います!

webサイトも同じように、単純に縦の動きよりも、
意外な動きをするものはより見る人の印象に残りやすいのではないでしょうか。

そこで、今回は今まで紹介してきた、縦に動くデザインばかりではなく、
横や斜めにも動きを見せてくれる、
そんな見ていて楽しく、印象に残るサイトを紹介したいと思います!

● 多摩美術大学 グラフィックデザイン学科

tamaart
http://www.tamabi.ac.jp/gurafu/

多摩美術大学 グラフィックデザイン学科のページです。

このサイトは、スクロールをしても動かず..
サイトの右端に設置された上下左右の矢印を押すことによってサイトが動きます。

右矢印は下に動き!左矢印は上に動く!
カテゴリーが変わる瞬間..シュシュシュ!っと動きが交差したり…
そんなちょっと変わった感覚でサイトを見ていくといった感じです。

カリキュラムと教員紹介は横に続くデザインになっているのですが、
さらにカテゴリーに分かれているので、縦に長くなりすぎず、
横スクロールで見やすくコンパクトにまとめられています。

このような学校のサイトのように情報量が多い時には見やすく
各カテゴリーに分かれる時の斜めの動きもスムーズでいいですね~!

● 本のひととき

hon

http://hon-no-hitotoki.jp/

丸善とジュンク堂書店がコラボした「新しいカタチの本ギフト」のサイトです。
本とそれにあったアイテムをセットのギフトが販売されています。

本棚を活用して、ギフトセット一つ一つを紹介しています。

スクロールをしていくと、すーっと
緩い斜めの角度をつけながらそのままなめらかに横に流れる
繰り返しの動きで自然と目線がつられていくような感じになるのでは?

まるで店内で実際に買い物をしているようなそんな感覚になりませんか?

● 任天堂

mario

http://www.nintendo.com.au/gamesites/mariokartwii/#home

任天堂が発売している、wiiの「マリオカート」のサイトです!

スクロールをしていくと横に動いていると思ったら、
グラグラっとカーブの部分を思いっきり曲がるように斜め下に動きが変わったりと..

サイト上では、遠近感を使って、ゲームのキャラクターたちが
レースをしているようなイメージで配置されています。

スクロールの効果を上手く利用した上で、遠近感が加わると、
まるでゲームの中の世界が飛び出してくるような、
スリルなレース感を想像させてくれますよね。

いかがでしたか?
スクロールをしていく度に、
「次はどんな動きをみせてくれるのだろう?」というわくわくがありますよね。
ただ、その動きを加えているのではなくサイトの商品や内容によって対応しているので、
より人の心に残るデザインになることを感じさせてくれるような気がします!

では、今週もたくさんの素敵なサイトを見て、
皆さんにデザインの素晴らしさをお伝えしていきたいと思います!

次回もお楽しみに!

Share On