creatersnest

マウスオーバー時のアクションがおもしろいWebサイト30選


マウスオーバー時のアクションをつける時、いつも同じパターンで、
なんだか流行りについていけてない気がする・・・。と感じている皆様。
おもしろい仕掛けをしてみませんか。
私が参考にしているサイトをご紹介します。

MoMA

MoMA
http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/

歩く子供の周りの円をマウスオーバーさせると、
アイコンにあわせた色に変わります。
また周りに並べられているアイコンからメッセージが出ます。

 

クオリア

クオリア
http://quallia.jp/
ストライプの背景がマウスオーバーによりゆらゆら波打つように動きます。
またSNSアイコンをマウスオーバーすると
クルンと回転するようになっています。

 

AQUATILIS

AQUATILIS
http://aquatilis.tv/
スクロールさせる流行りのサイトです。
海の生き物のアイコンをマウスオーバーさせると矢印が変化したり、
枠だけ動いたりと、とても凝った作りのサイトです。

 

Mutations Studio

Mutations-Studio
http://www.mutationsltd.com/
一見シンプルなテキストですが、
マウスオーバーでフォントが動き、色が変わったり、
炎や雷がでて背景色が変わったりと、とても工夫されたサイトです。

 

DUB FIRE

DUB-FIRE
http://www.dubfire.com/#!/home/
枠だけの立方体がマウスオーバーでくるんとまわって、
光沢のあるレッドの立方体に変わります。
また下層ページには、項目の背景がじんわり赤に変化する動きがあり、
グラデーションを作り出せるところがおもしろいです。

 

Volkswogen

Volkswogen
http://vw-up.jp/
メインビジュアル全面が入れ替わります。
また並んだボタンをマウスオーバーすると、ボタン自身が拡大され、
さらに隣り合わせるボタンも若干拡大され、連結しているかのように表現しています。

 

Secret Study

Secret-Study
http://secretstudy.ca/
マウスオーバーでメニュー背景の光を表現しています。
また、ボタンをマウスオーバーさせると透明の丸い円が出てきて、
短いメッセージが書かれています。

 

株式会社 ライズ・アップ

株式会社-ライズ・アップ
http://www.kt-riseup.com/
TOPページに並んだ四つのボタンのイラストに動きが付けてあり
かわいらしい印象です。
メインビジュアルの動きと合わせて作られています。

 

DONGURI MAGAZINE

DONGURI-MAGAZINE
http://www.don-guri.com/donguri-magazine/
左側のナビゲーションのマウスオーバーと連動して、
右面の項目が動くようになっています。
右面もそれぞれマウスオーバー時に上下に拡大される動きがついています。

 

株式会社ココノヱ

株式会社ココノヱ
https://9ye.jp/
ボタンがポヨンと動いたり、文字から小さなキャラクターが出てきて落ちていったり、
遊び心がありおもしろいです。
全体的にかわいらしい動きのサイトです。

 

株式会社ビッグジョン

株式会社ビッグジョン
http://www.bigjohn-denimschool.jp/
サイト内を散歩するように動きます。
また、左上のボタンをマウスオーバーさせると、
イラストが一周回転し、細かいところまで丁寧に作られています。

 

Duralast

Duralast
http://www.autozone.com/duralast/
「WATCH NOW」ボタンをマウスオーバーさせると、
画面全面のビジュアル部分の映像が動き出します。
ダイナミックなサイトです。

 

THE MUSEUM OF MARIO

THE-MUSEUM-OF-MARIO
http://mario.ign.com/
ゲーム機がマウスオーバーで3D回転します。
また、鏡を波打たせることが出来たり、塗りつぶしを消しゴムで消すような
ゲームのような動きがあります。

 

Vimeo

Vimeo

https://vimeo.com/timeline/2013/

蜂の巣のようなカラフルな六角形のアイコンは、
マウスオーバーで浮き上がりボタンを表しています。
クリックが終わるとチェックマークがつくところも面白いです。

 

SHAKER BRAND

SHAKER-BRAND

http://fixedagency.com/en/portfolio

ナビゲーションがくるんと立体的に回転します。
また、マウスオーバーでビジュアルが近づいてくるような
動きがつけられてあります。

 

ドンキーコングトロピカルフリーズ

ドンキーコングトロピカルフリーズ

http://www.nintendo.co.jp/wiiu/arkj/

樽をマウスオーバーさせると、ドンキーコングが
チラッと顔を出すところが可愛いです。
ちなみにクリックで、ドカーンと飛んでいきます。

 

Gageen

Gageen

http://tax.gageen.com/jp/ceo/

手書き風のコメント一つ一つ違った動きをしています。
また、左のナビゲーションをマウスオーバーさせると、
女性のイラストの腕が動くようになっています。

 

株式会社シータス&ゼネラルプレス

株式会社シータス&ゼネラルプレス

http://web.c-gp.com/

右サイドのシンプルなナビゲーションをマウスオーバーさせると、
ゆっくり写真やイラストが登場します。
統一されたデザインの中に面白さが隠れています。

 

mikketa

mikketa
http://mikketa.jp/

画像が切り替わるビジュアル上に、
細い糸のような幾何学系の動きをしている糸を
マウスオーバーで動かすことが出来ます。

 

株式会社Gear8(ギアエイト)

株式会社Gear8(ギアエイト)

http://gggggggg.jp/

縦に回転するボタン、無色から色がつくボタン、
半透明のブラックの窓が下りてくるボタンなど、
それそれのボタンに様々な動きがついています。

 

またあした

またあした

http://mataashita.jp/

画面全体に本のイラストがあり、
マウスオーバーで反回転し見出しが見えるようになっています。
介護系ののHPには珍しく遊び心のあるデザインです。

 

株式会社コビト

株式会社コビト

http://kobito.co/

メンバーのページをマウスオーバーさせると、
肩に小人がジャンプしていたり、かつらをかぶったり、
動画のように動きます。

 

THE MATHEWS GROUP

THE MATHEWS GROUP

http://www.mathewsgrouponline.com/

背景がマウスオーバーで動きます。
文章が書かれたアイコンはくるんと回って「LEANE MORE」の
表示に変わります。

 

limbus

limbus

http://www.limbus.fr/

カラフルなナビゲーションのわっかをくるくる動かすことが出来ます。
また左上のロゴをマウスオーバーすると
滑らかにロゴの色が変わります。

 

Thibaud

Thibaud

http://www.thibaud.be/

背景が滑らかに色が変わり、
アイコンをクリックし、中のメニューをマウスオーバーすると
吹き出しとコメントが表示されます。

 

Think Green Meeting

Think-Green-Meeting

http://www.thinkgreenmeeting.com/

車と飛行機のイラストがマウスオーバーによって
消えていきます。
ゲーム感覚で楽しめます。

 

infogr.am

infogr.am
https://infogr.am/

チャートの作り方を3ステップで紹介しているところは、
マウスオーバーでアニメーションが動き出し
操作を説明しています。

 

株式会社 フルスケール

株式会社-フルスケール

http://www.fullscale.jp/

モノクロのアルファベットをマウスオーバーすると、
カラフルに色が変わります。
画像の登場のし方もおもしろいサイトです。

 

Wanderlust

Wanderlust
http://wanderlusthotel.com/

マウスオーバーでアイコンがゆらゆら揺れます。
重いのかあえてなのかわかりませんが、
画像表示が若干遅い気がします・・・。

 

Raffael Stuken

Raffael-Stuken

http://www.raffaelstueken.de/

ビジュアにマウスオーバーするとメニューが出ます。
隕石のような背景をを動かしたり、
ビジュアル重視のサイトです。

 

まとめ

いかがでしたでしょうか。
マウスオーバーのアクションを重視したサイトは、ユーザビリティは二の次ぎですが、
ゲームのようなおもしろいサイトが多いですね。
是非参考にしてみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleIllustratorを学びたい初心者さん向けのおすすめ本10選