top1

おもしろい動きのWEBサイト10選!

こんにちは、WEBデザイナーのANAです。

今回は私が選んだ、”おもしろい動きのWEBサイト10選!”をご紹介いたします。
フラッシュなどを使用すれば、いくらでもおもしろい動きのサイトは作れますが、
最近ではJavascriptやjQuery、そのほかアニメーションを使用しているいろんなサイトがあります。

これからホームページの作成やリニューアルをお考えの方や、
いずれはホームページをつくりたいと考えてらっしゃる方は是非参考にしてください。

【ソフラン アロマリッチ】
ソフラン アロマリッチ|柔軟剤|ライオン株式会社

URL : http://soflan.lion.co.jp/aromarich/

アプローチの仕方がとてもおもしろいサイトです。
花びらを立体的にみせて、まるで一緒に香りまで漂ってくるような・・・。



【ホムンクルス】
homunculus Inc.   株式会社ホムンクルス
URL : http://homunculus.jp/

ファーストインプレッションがとても強いサイトです。
一度みたら忘れられません。なんだか引き込まれてしまいますね。



【ぷるぷるSPARKLINGゼリー】
ぷるぷるスパークリングゼリー   白鶴酒造株式会社
URL : http://www.hakutsuru.co.jp/purupuru/

ドリンク飲料のキャンペーンサイトです。
名前のごとくプルプルした動きを使用して、よりユーザーに商品の良さをアピールしています。



【リプトンスイーツティー】
【新発売!】リプトン スイーツティー |Lipton(リプトン)
URL : http://brand.lipton.jp/leaf/sweettea/

ひとつひとつのアニメーションに加えて、スクロールの動きまでもが面白いサイトです。
動くだけでなく、しっかりと商品の良さを伝えています。

【株式会社ココノヱ】
株式会社ココノヱ - coconoe inc.
URL :https://9ye.jp/

企業サイトです。とにかく動きが多くて見ていて飽きません。
黒と濃い目のピンクを使うことで、動きは多いですがサイト自体に締りがあります。


【miami】
MIAMI
URL : http://www.sip-miami.iis.u-tokyo.ac.jp/

義足をつくっている会社のキャンペーンサイトです。
背景の細かい粒子の動きがありながらも、サイトの中身自体はしっかり読めます。
良く構成されているサイトです。



【DREAMTEAM】
DreamTeam Katarzyna Konkowska
URL : http://dreamteam.pl/

ユーザーが予想のつかない動きをするサイトです。
次はどうなるんだろう?とわくわくしながら、クリックやスクロールができます。



【IBUKI】
IBUKI イブキ|資生堂
URL : https://www.shiseido.co.jp/gb/ibuki/

色使いといい、写真の使い方といいとてもインパクトのあるサイトです。
これまでの化粧品関連のサイトとはアプローチの仕方がかけ離れていてとてもおもしろいです。



【すべてがFになる】
TVアニメ「すべてがFになる THE PERFECT INSIDER」
URL : http://www.f-noitamina.com/

”すべてがFになる”というアニメのサイトです。
はじめから、ユーザーがなにもせずとも動き出すのでびっくりします。
クリックすればするほど、楽しいサイトです。



【takeit】
Take it   Free Polaroid prints from your iPhone.
URL : http://www.takeitapp.co/en

下からでたり、くるっと回転して表示したりとにかく「そのアイコンがこうなるの!?」とWEBデザイナーの私でも驚きのサイトです。
良く触って楽しんでみてください。





おもしろい動きのサイトはたくさんありますね。
ただ、動きにこだわって複雑になれば複雑になるほど、ユーザーの予測していない結果になってしまいます。操作性の悪い自己満足のサイトにならないように注意はしなければなりませんね。

しっかり見せるところは見せて、読ませるところは読ませるといったユーザービリティを考えた上で、
何度も訪れてしまうような面白い動きのサイトを今後も創っていきます。