エムタメ!について facebook twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

理想動画制作会社

スグ見つかる!

動画を探す

movieprint
MoviePrint
TOP > デザイン > トップページがド派手に動くWEBサイトまとめ≪10選≫

トップページがド派手に動くWEBサイトまとめ≪10選≫

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/10/06
トップページがド派手に動くWEBサイトまとめ≪10選≫

WEBデザインで表現できることは日進月歩でどんどん増えていき、これを加速させている理由がJavaScriptという言語であることは皆さん周知のことかと思います。
そんなJavaScriptを使用している魅力的なサイトをご紹介いたします。

動きのあるサイトとは

動きを加えたサイトにすることによるメリットを考えてみました。

メリット

・魅力的なサイトになる
動きの無いサイトに比べて、視覚的効果がある動きがあるサイトはユーザーにとっては印象的で面白味のあるサイトに感じるかもしれません。
サービスを検討中のユーザーにとっては差別化の要因になるかもしれませんね。

・UXの向上
ユーザーに気付いて欲しいコンテンツに動きを加えることによって、より訴求力が強くなり伝えたい内容を知ってもらえるきっかけになる可能性が高くなります。

デメリット

・読み込みに時間がかかる
どうしても避けられない問題です。ページ表示速度は、コンバージョンやSEOにも影響する非常に重要なポイントなので、動きを加える際にはしっかり考える必要があります。



参考サイト一覧

リッチなWEBコンテンツを作成するために必須であるJavaScriptを使用したサイトを、筆者の視点でご紹介できればと思います。

BAKE

https://cheesetart.com

BAKE

躍動感のある斜めのラインに、スライドインしてくるコンテンツがテレビCMのような印象のサイトです。


DENSO BRAND SITE

https://brand.denso.com/ja/

DENSO BRAND SITE

2017年WEBデザインのトレンドでもある「斜め」「ヒーローヘッダ」を取り入れたサイトです。 斜めのダイナミックな動きが非常に印象的ですね。


Famiglia Cecchi | Official site

http://www.famigliacecchi.it

Famiglia Cecchi | Official site

グリッドデザインをベースに、各ブロックの見せ方にこだわってJSを取り入れているのが感じられます。 フォントの見せ方もサイトの雰囲気にマッチしていて上品さが伝わってくるサイトですね。


FIND/47

https://find47.jp/ja/

FIND/47

写真が風ではためいているような動きを丁寧にJSで表現されています。 すてきな写真ばかりで観ていて飽きませんし、この場所に行ってみたくなる気持ちが溢れてきます。


『絶滅動物園』~私たちが知らない物語~ | Brother Earth

http://www.brotherearth.com/ja/zoo/

『絶滅動物園』~私たちが知らない物語~ | Brother Earth

絶滅の危機に瀕している動物たちの状況を紹介しているサイトで、ストーリー仕立ての内容は 観ている人の心に語りかけてくるような訴求力のあるサイトです。 インフォグラフィックをうまく取り入れています。


メディコート(Medycoat) 愛犬の健康維持に

http://www.petline.co.jp/medycoat/

メディコート(Medycoat) 愛犬の健康維持に

かわいいワンちゃん達を想うからこそのペットフード。パララックスを上手く取り入れて気持よい動きがたくさん取り入れられています。下層コンテンツの見せ方も非常にリッチで必見です。


株式会社エイド・ディーシーシー

https://www.aid-dcc.com/

株式会社エイド・ディーシーシー

先進的なメインコンテンツに始まり、ビジネス領域の見せ方、メニューの動きも斬新でかっこいいに尽きるサイトです。


株式会社パレンテ

https://www.parente.jp/

株式会社パレンテ

こちらで紹介しているサイトの中では静かな印象ですが、導線を意識させるためのJSの使い方が非常に参考になるサイトです。


wrk

http://waaark.com/

wrk

モジュラーデザインを採用したかわいらしいサイト。ページ遷移のアクションがめちゃ派手です。


Epicurrence - No.6

https://www.epicurrence.com/

Epicurrence - No.6

スクロールするたびにフォント、画像、アイコン、動画が気持ちよーくでてきます。


まとめ

動きのあるサイトはモバイルファーストの視点から考えると時代に逆行している考えかなのかもしれませんが、「ドラマチック」「インパクト」「斬新さ」「驚き」「革新的」「ブランディング」などのキーワードで考えた際には十分に利用する価値のある手法です。

ただし、サイト目的を十分に加味したうえで実装することが賢明なのは間違いありませんね。

セミナー情報

セミナー情報

無料資料ダウンロード

BtoBマーケティングハンドブック 表紙

BtoBマーケティングハンドブック

無料ダウンロード

展示会の効果を最大化させる12の手法 表紙

展示会の効果を最大化させる12の手法

無料ダウンロード

関連キーワード

web制作

エムタメ!ニュース

デジタルマーケティングについての
最新情報やお役立ち資料を自動受信

登録する(無料)

Follow us!

twitter hatena google Eight rss follow us in feedly

特集

WEBリニューアル物語

WEB制作のよくある失敗に全て引っ掛かるけど憎めない青木の奮闘記

はじめての展示会物語
メールマーケティング