トップページがド派手に動くWEBサイトまとめ≪10選≫
最終更新日：2023/10/18
WEBデザインで表現できることは日進月歩でどんどん増えていき、これを加速させている理由がJavaScriptという言語であることは皆さん周知のことかと思います。
そんなJavaScriptを使用している魅力的なサイトをご紹介いたします。
- 2,300社以上のWeb制作実績！
- BtoB企業で成果を出すWeb制作プラン公開中！
-
-
Webサイトを制作するだけではなく、戦略・施策立案、Web制作、SEO、MAを活用したリードナーチャリング、コンテンツマーケティングなど、Webマーケティングの川上から川下まで、一気通貫で支援が可能です。少しでもWebリニューアル、ホームページ制作に興味がある方はお気軽に詳細をご覧ください！
-
動きのあるサイトとは
動きを加えたサイトにすることによるメリットを考えてみました。
メリット
・魅力的なサイトになる
動きの無いサイトに比べて、視覚的効果がある動きがあるサイトはユーザーにとっては印象的で面白味のあるサイトに感じるかもしれません。
サービスを検討中のユーザーにとっては差別化の要因になるかもしれませんね。
・UXの向上
ユーザーに気付いて欲しいコンテンツに動きを加えることによって、より訴求力が強くなり伝えたい内容を知ってもらえるきっかけになる可能性が高くなります。
デメリット
・読み込みに時間がかかる
どうしても避けられない問題です。ページ表示速度は、コンバージョンやSEOにも影響する非常に重要なポイントなので、動きを加える際にはしっかり考える必要があります。
参考サイト一覧
リッチなWEBコンテンツを作成するために必須であるJavaScriptを使用したサイトを、筆者の視点でご紹介できればと思います。
BAKE
躍動感のある斜めのラインに、スライドインしてくるコンテンツがテレビCMのような印象のサイトです。
DENSO BRAND SITE
2017年WEBデザインのトレンドでもある「斜め」「ヒーローヘッダ」を取り入れたサイトです。 斜めのダイナミックな動きが非常に印象的ですね。
Famiglia Cecchi | Official site
グリッドデザインをベースに、各ブロックの見せ方にこだわってJSを取り入れているのが感じられます。 フォントの見せ方もサイトの雰囲気にマッチしていて上品さが伝わってくるサイトですね。
FIND/47
写真が風ではためいているような動きを丁寧にJSで表現されています。 すてきな写真ばかりで観ていて飽きませんし、この場所に行ってみたくなる気持ちが溢れてきます。
『絶滅動物園』～私たちが知らない物語～ | Brother Earth
http://www.brotherearth.com/ja/zoo/
絶滅の危機に瀕している動物たちの状況を紹介しているサイトで、ストーリー仕立ての内容は 観ている人の心に語りかけてくるような訴求力のあるサイトです。 インフォグラフィックをうまく取り入れています。
メディコート（Medycoat） 愛犬の健康維持に
http://www.petline.co.jp/medycoat/
かわいいワンちゃん達を想うからこそのペットフード。パララックスを上手く取り入れて気持よい動きがたくさん取り入れられています。下層コンテンツの見せ方も非常にリッチで必見です。
株式会社エイド・ディーシーシー
先進的なメインコンテンツに始まり、ビジネス領域の見せ方、メニューの動きも斬新でかっこいいに尽きるサイトです。
株式会社パレンテ
こちらで紹介しているサイトの中では静かな印象ですが、導線を意識させるためのJSの使い方が非常に参考になるサイトです。
wrk
モジュラーデザインを採用したかわいらしいサイト。ページ遷移のアクションがめちゃ派手です。
Epicurrence - No.6
スクロールするたびにフォント、画像、アイコン、動画が気持ちよーくでてきます。
まとめ
動きのあるサイトはモバイルファーストの視点から考えると時代に逆行している考えかなのかもしれませんが、「ドラマチック」「インパクト」「斬新さ」「驚き」「革新的」「ブランディング」などのキーワードで考えた際には十分に利用する価値のある手法です。
ただし、サイト目的を十分に加味したうえで実装することが賢明なのは間違いありませんね。
専門知識がなくても簡単に更新ができる国産CMS、BlueMonkeyの概要資料を見てみる
CMS BlueMonkey概要資料のダウンロードはこちらから
