chot Inc.

ちょっと株式会社 社員ブログ
Blog
  • ホーム
  • ブログ
  • スクローリーテリングが流行りそうと思った話

スクローリーテリングが流行りそうと思った話

トレンド
スクローリーテリングが流行りそうと思った話

SHARE

先日、いま流行りのUI・UXをまとめたqiita記事を見ました。
https://qiita.com/baby-degu/items/f090c414ab4076fa9833

その中でスクローリーテリングという面白そうなキーワードを見つけたので、少し深堀りしてみます。

スクローリーテリング(Scrollytelling)とは?

聞いたことのない言葉でしたが、どうやらブラウザをスクロールするのと同時にアニメーションが発動するという内容で
閲覧者がスクロールする度にストーリーに引き込まれる様な体験を目指している様です。

結構抽象的だったので、これだけではよくわかりません。

なので、言葉の翻訳から調べてみました。
scroll

スクロール

telling

意味深い

という事だったので、直訳すると意味深いスクロールということになります。

おもしろいですね。
とはいえまだよく分からなかったので、qiita記事で紹介されているWebサイトがあったので実際に見てみました。
Google
https://www.google.com/search/howsearchworks/

こちらのWebサイトを見ると、スクロールに応じてGIFのようなアニメーションが動いているのが分かります。


これはどのように実装されているのか気になります。

実際に検証ツールでみてみるとvideoタグで埋め込まれており、ファイル形式がmp.4である事が確認できました。
スクロールに応じてアニメーションを発火させるのに、SVGやGIFでは足りない部分があるのかもしれません。

Webサイトが向かう先は動画なのか?


昨今のフロントエンドを見ていると、よりリッチで軽量なブラウジングが求められている気がします。
そのためにCSSやJavaScriptを使用したアニメーションが設置されているとおもいますが

どうやら、ユーザーはそれだけで満足できなくなった様で動画が埋め込まれてきた様です。

よりアクティブで、より綺麗なWebサイト

今後求められるニーズは動画にあるのかなと思いました。

動画の作成はデザイナーの領域な気がしますが、どういったツールを使用して作成しているかは実装側も知っておくとスムーズに連携が取れると感じます。
時代に取り残されない様に、動画を組みあせたインタラクションの開発方法についてもキャッチアップしていきたいと思います。

関連記事

Copyright © 2022, chot inc.