Webサイトにおける「動画」や「アニメーション」の活用は、いまや特別な演出ではなく、ブランドやサービスを魅力的に伝えるための一般的な手法となりました。Studioでは、標準のアニメーションの他、Lottie埋め込み、MP4アップロード、カスタムコードを活用したCSSアニメーションなどを組み合わせて、サイトの印象やストーリーを豊かに演出することができます。今回は、Studio Expertsによる制作事例とStudio Showcase掲載作品の中から、動画やアニメーションを巧みに取り入れた最新事例を紹介します。「動き」で魅せる最新Webサイト事例 5サイトカスタマーサクセスプラットフォーム｜Gainsight（ゲインサイト）%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F1122696739%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221364%22%20height%3D%221024%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3E世界トップシェアを誇る次世代カスタマーサクセスプラットフォームGainsight（ゲインサイト）。公式サイトのファーストビューでは人物写真が切り替わり、その背景で黄色い矢印が滑らかに動きます。視線を自然にとどめながら「あなたのプロダクトで顧客の人生を変えよう」というコピーをしっかり読ませる構成が特徴です。さらに、別のセクションでは水紋のLottieアニメーションも活用し、情報量の多いページでも軽やかに感じられる工夫が施されています。制作：IT＋ (Studio Experts) Webサイト：https://www.gainsight.co.jp/Showcase：https://showcase.studio.design/ja/website/gainsight%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%F0%9F%9A%80%E3%80%90%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AE%E3%83%97%E3%83%AD%E3%83%80%E3%82%AF%E3%83%88%E3%81%A7%E9%A1%A7%E5%AE%A2%E3%81%AE%E4%BA%BA%E7%94%9F%E3%82%92%E5%A4%89%E3%81%88%E3%82%88%E3%81%86%E3%80%91%3Cbr%3E%3Cbr%3E%E3%81%93%E3%81%AE%E5%BA%A6%E3%80%81Gainsight%20Japan%E3%81%AF%E5%85%AC%E5%BC%8FWeb%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%A8%E9%9D%A2%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E2%9C%A8%3Cbr%3E%3Cbr%3E%E4%BB%8A%E5%9B%9E%E3%81%AE%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB%E3%81%AE%E8%A6%8B%E3%81%A9%E3%81%93%E3%82%8D%E3%81%AF%E4%BB%A5%E4%B8%8B%E3%81%AE3%E7%82%B9%E3%81%A7%E3%81%99%EF%BC%81%3Cbr%3E%3Cbr%3E%F0%9F%92%A1%E3%80%8C%E5%AD%A6%E3%81%B3%E3%82%92%E6%B7%B1%E3%82%81%E3%82%8B%E3%80%8D%E3%83%BC%E3%81%8A%E5%BD%B9%E7%AB%8B%E3%81%A1%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E5%A4%A7%E5%B9%85%E6%8B%A1%E5%85%85%3Cbr%3E%3Cbr%3E%F0%9F%92%A1%E3%80%8C%E5%B0%8E%E5%85%A5%E4%BA%8B%E4%BE%8B%E3%82%92%E5%BA%83%E3%81%8F%E5%85%AC%E9%96%8B%E3%80%8D%E3%83%BC%E5%B0%8E%E5%85%A5%E4%BA%8B%E4%BE%8B%E3%82%92%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E5%85%A5%E5%8A%9B%E3%81%AA%E3%81%97%E3%81%A7%E9%96%B2%E8%A6%A7%E5%8F%AF%E8%83%BD%E3%81%AB%E2%80%A6%20%3Ca%20href%3D%22https%3A%2F%2Ft.co%2FdBVybHM3bt%22%3Epic.twitter.com%2FdBVybHM3bt%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20Gainsight%20Japan%20(%40GainsightJP)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2FGainsightJP%2Fstatus%2F1958341756631859267%3Fref_src%3Dtwsrc%255Etfw%22%3EAugust%2021%2C%202025%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%3Ca%20href%3D%22https%3A%2F%2Ft.co%2FvD7jNEegmO%22%3Ehttps%3A%2F%2Ft.co%2FvD7jNEegmO%3C%2Fa%3E%3Cbr%3E%3Cbr%3E%E4%B8%96%E7%95%8C%E3%83%88%E3%83%83%E3%83%97%E3%82%B7%E3%82%A7%E3%82%A2%E3%81%AE%E6%AC%A1%E4%B8%96%E4%BB%A3%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%83%BC%E3%82%B5%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%97%E3%83%A9%E3%83%83%E3%83%88%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%80%8CGainsight%EF%BC%88%E3%82%B2%E3%82%A4%E3%83%B3%E3%82%B5%E3%82%A4%E3%83%88%EF%BC%89%E3%80%8D%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB%E3%82%92%E6%8B%85%E5%BD%93%E3%81%95%E3%81%9B%E3%81%A6%E3%81%84%E3%81%9F%E3%81%A0%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F%EF%BC%81%E2%80%A6%3C%2Fp%3E%26mdash%3B%20%E6%BA%9D%E5%8F%A3%20%E8%80%95%E5%A4%AA%EF%BD%9CITPLUS%20Inc.%20(%40kohta_m7)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fkohta_m7%2Fstatus%2F1960202788224594316%3Fref_src%3Dtwsrc%255Etfw%22%3EAugust%2026%2C%202025%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E上大岡の美容室【あう】｜丁寧施術と落ち着く空間で“いい時間”を%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F1122696762%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221364%22%20height%3D%221024%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3E横浜・上大岡にあるプライベートサロン【あう】は、夫婦ふたりで営む小さな美容室。施術時間をゆったり取り、髪と心を整える“いい時間”を大切にしています。サイトを開くとまず、両手を合わせるようにロゴが動くLottieアニメーションがお出迎え。遊び心のあるローディング演出によって「Au」という名前が自然と印象に残ります。さらに、見出しやコンテンツが心地よいテンポで現れる構成が、お店のやさしい雰囲気をそのまま伝えてくれます。Webサイト：https://salon-au.com/Showcase：https://showcase.studio.design/ja/website/salon-auIAMandSO｜映像制作＋グラフィック%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F1122696776%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221364%22%20height%3D%221024%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3EIAMandSOは、映像制作を軸に“アナタらしさ”を引き出すクリエイティブを手がけるスタジオ。対話を通して魅力や課題を一緒に見つけ、「おっ」と目を惹く表現を届けています。公式サイトもまた印象的な動きで構成されています。ファーストビューにはダイナミックなLottieアニメーションを配置し、一瞬でブランドの世界観へと引き込みます。さらに、サムネイル画像に動きを加えた演出や、メール送信時に飛ぶ紙飛行機など、Gifアニメーションを活用した遊び心が細部に散りばめられています。映像制作を軸とするスタジオらしく、「動き」そのものがブランドのメッセージになっている事例です。Webサイト：https://iam-and-so.com/Showcase：https://showcase.studio.design/ja/website/iam-and-so%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3EIAMandSO%E3%81%AE%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E6%96%B0%E3%81%97%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82%3Cbr%3E%3Cbr%3E%E7%B4%A0%E6%9D%90%E3%81%AE%E5%91%B3%E3%82%92%E5%BC%95%E3%81%8D%E5%87%BA%E3%81%99%E3%82%88%E3%81%86%E3%81%AB%E3%80%81%20%E3%82%A2%E3%83%8A%E3%82%BF%E3%81%AE%E6%83%B3%E3%81%84%E3%82%92%E3%83%AF%E3%82%BF%E3%82%B7%E3%81%9F%E3%81%A1%E3%81%AE%E6%89%8B%E3%81%A7%E5%B0%91%E3%81%97%E3%81%9A%E3%81%A4%E5%BD%A2%E3%81%AB%E3%81%97%E3%81%A6%E3%81%84%E3%81%8F%E3%80%82%3Cbr%3E%3Cbr%3E%E7%90%86%E6%83%B3%E7%9A%84%E3%81%AA%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E9%80%9A%E3%81%98%E3%81%A6%3Cbr%3E%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E3%81%AB%E7%9C%9F%E6%91%AF%E3%81%AB%E5%90%91%E3%81%8D%E5%90%88%E3%81%84%E7%B6%9A%E3%81%91%E3%81%BE%E3%81%99%E3%80%82%3Ca%20href%3D%22https%3A%2F%2Ft.co%2FLCSW54q1nU%22%3Ehttps%3A%2F%2Ft.co%2FLCSW54q1nU%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20IAMandSO%20(%40iam_and_so_azo)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fiam_and_so_azo%2Fstatus%2F1913122912435056866%3Fref_src%3Dtwsrc%255Etfw%22%3EApril%2018%2C%202025%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E%3Cblockquote%20class%3D%22twitter-tweet%22%3E%3Cp%20lang%3D%22ja%22%20dir%3D%22ltr%22%3E%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AF%E3%81%99%E3%81%B9%E3%81%A6lottie%E3%81%A7%E4%BD%9C%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%82%A8%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AA%E3%81%A9%E3%81%8C%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%8F%E3%80%81%E3%81%BB%E3%81%BC%E5%9F%BA%E6%9C%AC%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%A7%E3%81%AE%E5%88%B6%E4%BD%9C%E3%81%A7%E3%81%8B%E3%81%AA%E3%82%8A%E5%8A%9B%E6%8A%80%E3%81%A7%E3%81%99%E3%80%82%3Cbr%3E%3Cbr%3E%E3%81%9D%E3%81%AE%E3%81%8B%E3%82%8F%E3%82%8A%E3%83%99%E3%82%AF%E3%82%BF%E3%83%BC%E3%83%87%E3%83%BC%E3%82%BF%E3%81%A7%E5%AE%9F%E8%A3%85%E3%81%95%E3%82%8C%E3%82%8B%E3%81%9F%E3%82%81%E3%80%81%3Cbr%3E%E7%94%BB%E8%B3%AA%E3%81%8C%E8%90%BD%E3%81%A1%E3%82%8B%E3%81%93%E3%81%A8%E3%81%AF%E3%81%AA%E3%81%84%E3%81%97%E8%BB%BD%E3%81%84%EF%BC%81%3Ca%20href%3D%22https%3A%2F%2Ft.co%2Ff0l1bN7u3o%22%3Ehttps%3A%2F%2Ft.co%2Ff0l1bN7u3o%3C%2Fa%3E%20%3Ca%20href%3D%22https%3A%2F%2Ft.co%2FPrIYQJW8vC%22%3Epic.twitter.com%2FPrIYQJW8vC%3C%2Fa%3E%3C%2Fp%3E%26mdash%3B%20Judau%20-%E3%81%98%E3%82%85%E3%81%A9%E3%81%86-%20(%40judau_azo)%20%3Ca%20href%3D%22https%3A%2F%2Ftwitter.com%2Fjudau_azo%2Fstatus%2F1914142544570507664%3Fref_src%3Dtwsrc%255Etfw%22%3EApril%2021%2C%202025%3C%2Fa%3E%3C%2Fblockquote%3E%20%3Cscript%20async%20src%3D%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E菁文堂｜企画から製本まで一貫対応する紙製品のパートナー%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F1122696749%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221364%22%20height%3D%221024%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3E菁文堂（Seibundo）は、手帳を通して「自分らしさ」に寄り添う製品づくりを支援する会社。企画から印刷、製本まで一貫対応し、丁寧な対話と確かな技術で想いをカタチにしています。サイトのメインビジュアルでは、手帳に文字を書き込む様子を収めた動画が、本の見開きやペンのシルエットに切り抜かれて登場。さらにページをめくるようなアニメーションで次のセクションへつながり、再び動画が現れる構成になっています。流れるように展開する演出が心地よく、紙の温もりをデジタルで感じさせる仕上がりです。Webサイト：https://seibundo-cp.com/Showcase：https://showcase.studio.design/ja/website/seibundo-cpデジタルプロダクション｜THO Media&Solutions (THO M&S)%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F1122696730%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221364%22%20height%3D%221024%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3Eデジタルプロダクション THO Media&Solutions のサイトは、最初の一瞬から強いインパクトを与えてくれます。ファーストビュー中央に配置された動画が大胆に動き、ブランドの存在感を際立たせています。さらに、スクロールに合わせて現れるテキストはCSSアニメーションで滑らかに流れ、スタイリッシュなリズムを生み出します。過剰に飾らずとも“デジタルの洗練”を伝える構成で、制作会社らしい巧みな表現が光る事例です。また、THO Media&Solutions は Studio Experts にも加盟しており、Studioを活用したWebサイト制作を手がけています。制作：THO Media&Solutions (Studio Experts) Webサイト：https://www.thomands.com/終わりに今回ご紹介した5つのWebサイトは、それぞれのブランドやサービスの個性を「動画」や「アニメーション」で巧みに表現していました。単に派手さを狙うのではなく、動きによって視線をとどめたり、世界観を印象づけたりと、体験そのものを豊かにしているのが印象的です。Studioには標準のアニメーション機能が備わっており、ちょっとした工夫でもサイトの雰囲気は大きく変わります。さらにLottieや動画の埋め込み・アップロードを組み合わせれば、今回の事例のようなリッチでユニークな演出も可能です。ぜひ、みなさんのサイト制作にも取り入れてみてください。「動き」に関するStudio機能解説：• アニメーション | Studio Help• 各種ファイル（画像・動画・PDF）のアップロードと管理 | Studio Help• Lottieの埋め込みとカスタマイズ | Studio Help• YouTube動画を埋め込む | Studio Help• Vimeo動画を埋め込む | Studio Help• サイト・ページにカスタムコードを追加する | Studio HelpStudioで公開したWebサイトは、公式ギャラリーサイト「Showcase」への掲載申請が可能です。＞ShowcaseへのWebサイト掲載方法 | Studio HelpWebサイト制作をご検討中の方は、公式窓口よりお気軽にご相談ください。＞Studioコンサルタント相談フォーム