これは面白い!動きのあるホームページ集めてみた!

Javasprictで動くホームページ

ホームページを作る上で、ホームページの見方が変わり、見せ方や動的な動きもチェックする様になった今日この頃。

私にはまだ作れないですが、個人的にインパクトがあったものや、遊び心のあるホームページを紹介したいと思います。(PCからの閲覧を推奨しています。)

株式会社キュー様

ウェブデザインの開発などをされている会社さんですが、

「すげー!」と思わず声が出てしまいます。

トップページだけでなく、コンテンツや細かい部分までハイセンスと感じたホームページです。

株式会社ドングリ様

こちらもウェブデザインや、その他コンサルやプロモーション企画など色々とされている会社さん。

queryで「topへ戻る」動きについて調べていた所、紹介されていました。

ページスクロールした時に出る右下のトップへ戻るボタンの動きが可愛いです。

フッターの上に出てくるドングリ君達も違う動きを見せてくれて遊び心のあるホームページです。

株式会社部活動

あのホリエモンさんがプロデュースしたソーシャル部活動。

シンプルな背景にコミカルに動くアニメーションがセンス良いですね。

デザインとは関係ないですけど、ソーシャルネットワークを上手に使いこなす事を改めて考えさせられます。

ほんのひととき 2014年実施された佐賀県と丸善&ジュンク堂書店の特設サイト(キャンペーンは終了しています。)

ディスプレイされた棚を目で追っている様に作られたホームページ。

動きのあるサイトは目で追う事が多いですが、ページが色々な方向に進むのがスゴイ!パララックスと呼ばれるスクロールエフェクトで、jqueryのプラグインでも色々ありますね。

近いうちにパララックスを使ったホームページも作ってみたいですね。

Flashを使って動くホームページ

女子美術大学(キャンパス紹介ページ)(iphone対応不可 Flash対応ブラウザ推奨)

可愛いイラストで作られたキャンパス紹介ページ。

コンテンツは美術大学らしく、学生の作品や、インタビュー、キャンパスを散歩など、動きのあるページにギミックがあり、ついクリックしてしまいたくなる作りになってます。

崇城大学(iphone対応不可 Flash対応ブラウザ推奨)

※クリックするとコンテンツのページに飛んでしまうので、サイト上部の「イラスト版トップ」の画像をクリックして下さい。

女子美術大学と同じく動くイラストで作られたキャンパス紹介ページ。動いている部分が多く、絵探しの様に見ているだけで楽しいホームページ。

大原バイオリン様(iphone対応不可 Flash対応ブラウザ推奨)

メニューが全てマウスで掴めます。メニューを積んだり放り投げたり出来るのは面白いですね。

おまけ 遊べるホームページ

大手企業なんかはコーポレートサイトとは別に特設サイトなどを作り、遊び心満載の(むしろ遊ぶサイト)を作っていますので、ご紹介。

ファミリーマート 子供EXPO

パビリオンをクリックし、説明を読んだりミニゲームを楽しんだり出来ます。

条件をクリアするとスタンプが押され、しかもスタンプカードにも貯まると言う、子供が楽しめ、尚かつファミリーマートの事を知れると言うサイトです。

ビックロ(ビックカメラとユニクロのコラボ)

ゼビウスとグラディウスを足した様な縦スクロールシューティングゲームが楽しめます。

なんせクオリティが高すぎて、普通に遊べます。操作性も単純で良いです。

HONDA (HONDA Toy Town)

HONDAの車種のトミカの販売機や、チョロQレース、HONDA車種によるアニメーションレースなど。

特に、トミカは箱を空け、ただただ手で押して遊ぶと言う幼少の頃の遊びを思い出させてくれます。Fit愛好家なのでFitで遊んでみました。

チョロQレースはゼンマイを巻きすぎるとスピンするのですが、あまり巻かないと途中の障害物にぶつかります。

何度かチャレンジしましたが、ライバル車種に勝てません(笑)

どん兵衛 (日清食品)

「ゲーム&占い」というコンテンツがあるくらいに、遊ばせる気満々です。

色々な種類のブラウザゲームがあり、クオリティも高いのでお仕事の休憩際に遊んでみてはどうでしょう?

まとめ

最後は若干主旨から外れて行きましたが、アニメーションで動きのあるホームページから

今はホームページ全体を動かす時代なんだと感じました。

しかし、何でもかんでも動かせばいいって訳でも無く、選択肢が増えた今こそ改めて「どの情報を、誰に、どの様な形にする事で、一番伝えられるか?」を考える事が大切だと思う訳です。


Leave a comment

Your email address will not be published.


*