動画・アニメーションで魅せる、Studioで制作された最新サイト5選｜2025年9月版

Webサイトにおける「動画」や「アニメーション」の活用は、いまや特別な演出ではなく、ブランドやサービスを魅力的に伝えるための一般的な手法となりました。
Studioでは、標準のアニメーションの他、Lottie埋め込み、MP4アップロード、カスタムコードを活用したCSSアニメーションなどを組み合わせて、サイトの印象やストーリーを豊かに演出することができます。

今回は、Studio Expertsによる制作事例とStudio Showcase掲載作品の中から、動画やアニメーションを巧みに取り入れた最新事例を紹介します。

「動き」で魅せる最新Webサイト事例 5サイト

カスタマーサクセスプラットフォーム｜Gainsight（ゲインサイト）

世界トップシェアを誇る次世代カスタマーサクセスプラットフォームGainsight（ゲインサイト）。

公式サイトのファーストビューでは人物写真が切り替わり、その背景で黄色い矢印が滑らかに動きます。視線を自然にとどめながら「あなたのプロダクトで顧客の人生を変えよう」というコピーをしっかり読ませる構成が特徴です。
さらに、別のセクションでは水紋のLottieアニメーションも活用し、情報量の多いページでも軽やかに感じられる工夫が施されています。

制作：IT＋ (Studio Experts)
Webサイト：https://www.gainsight.co.jp/
Showcase：https://showcase.studio.design/ja/website/gainsight

上大岡の美容室【あう】｜丁寧施術と落ち着く空間で“いい時間”を

横浜・上大岡にあるプライベートサロン【あう】は、夫婦ふたりで営む小さな美容室。施術時間をゆったり取り、髪と心を整える“いい時間”を大切にしています。

サイトを開くとまず、両手を合わせるようにロゴが動くLottieアニメーションがお出迎え。遊び心のあるローディング演出によって「Au」という名前が自然と印象に残ります。さらに、見出しやコンテンツが心地よいテンポで現れる構成が、お店のやさしい雰囲気をそのまま伝えてくれます。

Webサイト：https://salon-au.com/
Showcase：https://showcase.studio.design/ja/website/salon-au

IAMandSO｜映像制作＋グラフィック

IAMandSOは、映像制作を軸に“アナタらしさ”を引き出すクリエイティブを手がけるスタジオ。対話を通して魅力や課題を一緒に見つけ、「おっ」と目を惹く表現を届けています。

公式サイトもまた印象的な動きで構成されています。ファーストビューにはダイナミックなLottieアニメーションを配置し、一瞬でブランドの世界観へと引き込みます。さらに、サムネイル画像に動きを加えた演出や、メール送信時に飛ぶ紙飛行機など、Gifアニメーションを活用した遊び心が細部に散りばめられています。映像制作を軸とするスタジオらしく、「動き」そのものがブランドのメッセージになっている事例です。

Webサイト：https://iam-and-so.com/
Showcase：https://showcase.studio.design/ja/website/iam-and-so

菁文堂｜企画から製本まで一貫対応する紙製品のパートナー

菁文堂（Seibundo）は、手帳を通して「自分らしさ」に寄り添う製品づくりを支援する会社。企画から印刷、製本まで一貫対応し、丁寧な対話と確かな技術で想いをカタチにしています。

サイトのメインビジュアルでは、手帳に文字を書き込む様子を収めた動画が、本の見開きやペンのシルエットに切り抜かれて登場。さらにページをめくるようなアニメーションで次のセクションへつながり、再び動画が現れる構成になっています。流れるように展開する演出が心地よく、紙の温もりをデジタルで感じさせる仕上がりです。

Webサイト：https://seibundo-cp.com/
Showcase：https://showcase.studio.design/ja/website/seibundo-cp

デジタルプロダクション｜THO Media&Solutions (THO M&S)

デジタルプロダクション 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 Help

Studioで公開したWebサイトは、公式ギャラリーサイト「Showcase」への掲載申請が可能です。
＞ShowcaseへのWebサイト掲載方法 | Studio Help

Webサイト制作をご検討中の方は、公式窓口よりお気軽にご相談ください。
＞Studioコンサルタント相談フォーム