こんにちは！
突然なのですが皆さんはWEBサイトを見ていて重さにストレスを感じたことってありますか？ありますよね？（食い気味）
重いの判断基準も人それぞれだと思うのですが、ローディングが長すぎたり、ページ遷移が遅かったり、スクロールがカクついていたり…。
個人的にはアニメーションがゴリゴリ入っていたり動画や画像をモリモリ使っていたりなサイトがその傾向にある気はしているのですが、
そんなことをしつつも様々な工夫を凝らしユーザーにストレスなく素敵な体験をさせてくれるサイトもたくさんあります。
今回はその中でも最近気になった「なんでこんなに動いてるのにサクサク見れるんだ？？」と思ったサイトを3つご紹介し、いかにしてこのような演出をしているのか…？と、気になったところを簡単にではありますが掘り下げていきたいと思います。
NEWPEACE
可愛さ満点！動画とスクロールが織り成す素敵アニメーション
まずは一目瞭然、サイト訪問時の動画が可愛い！
動画？って思われた方もいるかもしれませんが、そう、これ4種類の動画をうまく組み合わせて、尚且つスクロールに合わせて再生速度を変えて、まるで自分のスクロールに合わせてアニメーションしているように見える工夫がされているんですよね…！
サイト訪問時に再生される動画です。
何も操作しなければこれがループ再生されるようですね！
出典：NEWPEACE
これがスクロールに合わせてギュインギュイン動く（…動いているように見せている）魔法の動画です！！
出典：NEWPEACE
トランジションとして使用されているのも動画素材でした！！
出典：NEWPEACE
導入の演出を経てコンテンツエリアに辿り着くと再生される動画です。
たった2秒の動画で軽さも考慮しつつ、とても2秒のループには見えない細やかな動きで表現されています。
出典：NEWPEACE
それぞれのフェーズで必要最低限な動画を作り、また再生タイミングに合わせ読み込みの順番も考慮することで、ユーザーを待たせない工夫が散りばめられています。
「Vivus」を使用した、細部までのアニメーションへのこだわり！
それに加え、とにかく細部までアニメーションのこだわりが凄いです。
「Vivus」という技術を使いsvgアニメーションを至る所に使用しているみたいです。
話題のこのサイトの文字や線画アニメは
— しょーてぃー / Experience & Prompt Designer (@shoty_k2) April 19, 2023
SVGをアニメーション化し、描かれているように見せることができる、軽量なJavaScriptクラスを「Vivus」っていうのをつかってるらしい。
簡単にアニメーションつくれちゃうと。
えーチームに共有しよっと！
リンク👇pic.twitter.com/jPCKs0knQd https://t.co/fzkbCb7pjP
ホバーのアニメーションがいちいち可愛かったり、クリッカブルエリアではカーソルに合わせて目のマークが出てきたり…。
サムネイルにマウスオンするとカーソルが目のイラストに…！
出典：NEWPEACE
大胆に見せる部分の工夫、細部の作り込み、全てが緻密に計算された上で最高のユーザー体験を提供しているサイトだと思いました。
webmやsvgなどを使用したアニメーションで容量の削減
さて、ここからは技術的な解説を挟んでいきたいと思います。 今回のサイトではmp4や動画の次世代拡張子のwebmなどの動画を使用して複雑なアニメーションを簡略化したり、上記でも触れているsvgを手軽に扱えるvivus.jsを使用してアニメーションの負荷を軽減することでサイトの表示速度が軽くなっているとおもわれます。
静的サイトジェネレーター(SSG)、Astroの使用
また動画の軽量化などだけではなく、静的サイトジェネレーター(SSG)というアーキテクチャを用いています。
そうすることで、動的にページを生成することなくサーバー側ですでに静的なページを生成しておけるようになり、表示速度が改善される仕組みとなります。
ただ最新のデータを常に反映できるシステムではないので、今回のようなコーポレートサイトなどの情報更新の機会が少ないサービスに適しています。
スーパーニンテンドーワールド
使っている動画はなんと一本！すこしの工夫でユーザー体験を最高潮に！
これもまた動画を上手く見せることで特別なユーザー体験をさせてくれるサイトです。
こちらはなんと一本の動画を上手くループ再生したり、スクロールによって再生を開始させることで、まるでニンテンドーワールドに訪れたかのような感覚にさせてくれます。
UIは最低限！とにかく動画を魅せる！
UIは必要最低限で無駄な装飾をせず、あくまで動画を魅力的に見せることをメインとしたサイトになっており、そういった工夫も没入感を高める要素になっています。
動画のため逆再生が無理という大人の事情があっても、それをデザインでいい具合に補ったりすることで、隙のない見せ方ができていますね。
動画の邪魔をしない必要最低限のUI！
出典：スーパーニンテンドーワールド
トップページではこんな魅力的でリッチな見せ方をしつつも、ハンバーガーメニューからはトップを介さずにページを回遊することも可能なので、そういったユーザーに合わせた配慮ができているのもwebサイトとしてとても大きなポイントになっていますね。
動画の使い方を工夫するだけでより軽量に！
さて、本サイトの技術的な解説です。
冒頭で話したように、一つの動画の再生位置をスクロールなどで制御することによって、まるでニンテンドーワールドを訪れているかのような臨場感を与えることができています。
サイトの負荷的にも複数の動画を用いて同様のサイトを作成するよりも、一本の動画の再生方法を工夫することによって総合的なサイト容量はすくなくなります。
また、エリア間の移動（動画の再生）を行っている間に次のセクションで使用されている画像類を読み込むことによって、ページ訪問時の読み込みが軽くなりすぐにページが表示されるようになっています。
シンプルな構築で負荷を軽減！
また今回のサイトでは動画の再生方法だけではなく、その他のアニメーションも工夫されています。
基本的には負荷が高くなる傾向にあるJavascriptでのアニメーションの実装は最低限にとどめ、かわりにCSSアニメーションをメインに使用することによってレンダリングにかかる負荷を軽減しています。
Javascriptが使用されている箇所でもcanvasが使われており、複雑なアニメーションでも最低限の負荷を目指して実装されているのがわかります。
キャプテン翼 – ボールはともだちプロジェクト
動きの合体で魅せる！飽きのこないLPへ
まずはローディングないんだ…！！って思いました
そこから登場する地球のアニメーションが印象的であっという間にサイトの世界観に引き込まれちゃいますね
スクロール後は、その動きに合わせて地球がギュンギュン動きつつ、エリア毎に背景も目まぐるしく変化し、要素が様々なアニメーションで次々登場します。
こうして何も考えずページを上から下へと眺めていくと、いろんな要素が合わさってとてもリッチなサイトに見えますが、一つ一つ解剖していくと実はシンプルで、それを画面の中で組み合わせることで、大きな負荷なくこうした見せ方ができているんだな…という事が分かってきます。
ファンには嬉しいコミックのコマもデザインに含まれています
こんな作り込まれた漫画アプリあったら楽しいですね？
出典：キャプテン翼 – ボールはともだちプロジェクト
まず背景を除いた上のレイヤーは、比較的シンプルなLPらしいレイアウトでまとめつつ、Lottieや動画素材を要所ごとに使い分けアニメーションで魅せています。
背景は一種類の地球の素材をエリアごとにズームアップさせたり、早回しのように高速で回転移動させたり…細かく見せ方を変えることで、迫力のある飽きのこない見せ方をしています。
こうした細かい要素を組み合わせ、画面全体に迫力を出しユーザーの目を惹きつける工夫をしているんですね。
Lottieで構成された見出しのアニメーション
出典：キャプテン翼 – ボールはともだちプロジェクト
webm素材を使用したボール！
出典：キャプテン翼 – ボールはともだちプロジェクト
大きな箇所はwebGL、細かいところはLottieや動画におまかせ！
今回のサイトでは、web上で3Dを表現するWebGLという技術が使われています。
今回でいうと後ろの回っている地球がWebGLで作成されたものとなります。
他にも、ボールが回っている箇所などもWebGL…と思いきや、全面に来ているアニメーションは動画になっています。
WebGLは便利で色々なことができる反面、容量的にも負荷的にも大きくなっていくので、動画に任せられる箇所は動画に任せているみたいですね。
また、流れるように出現している見出しなどもLottieを使ったSVGアニメーションで再生されているため、全体的な負荷の軽減に役立っています。
まとめ
いかがでしたでしょうか。
何気なくサイトを回遊しているだけではなかなか気付けない細かな気配りや工夫が散りばめられていて、その発想力や計り知れない作業の複雑さには脱帽してしまいます…
近年は表示の軽さが最優先される中で、苦労をしてでもユーザーに特別な体験を届けたいという熱意も伝わってきます！
このように気になった部分はどんどん解剖して、良い部分はどんどん吸収して、誰もが楽しくサクサク見れるサイト作りに活かしていきたいですね！
