サイトを開いた瞬間、ロゴがすっと現れて動きが止まる。それだけのことですが、ページ全体が「きちんと作り込まれている」という印象に変わります。
以前の記事で、動画より軽く画像より目を引く「SVGアニメーション」を紹介しました。今回はその続きにあたる選択肢、Lottie（ロッティ）を取り上げます。世界中のアプリやWebサイトで使われている動きの仕組みで、2026年に入って生成AIで作れる環境が一気に整いました。
この記事では、Lottieとは何かという基本から、実際に自社サイトsmarvee.comのロゴをアニメ化した実例まで、制作会社の立場からお伝えします。
ロゴが動くサイトは何が違うのか
普段見ているWebサイトを思い返してみてください。大手企業のサイトやアプリでは、ページを開いたときにロゴがふわっと現れたり、読み込み中にキャラクターが小さく動いていたりすることがあります。一つひとつは数秒の小さな動きですが、こうした演出があるサイトとないサイトでは、受ける印象が変わってきます。
理由は単純で、「動き」は人の目を引くからです。静止画が並ぶページの中で動くものがあれば、視線は自然とそこに向かいます。そして「ここまで手をかけているなら、仕事も丁寧そうだ」という安心感につながります。名刺やパンフレットの紙質で会社の印象が変わるのと、似た話かもしれません。
一方で、こうした動きを動画で実現しようとすると、ファイルが重くなりページの表示が遅くなるという問題がありました。表示が遅いサイトは、内容を見てもらう前に離脱されてしまいます。「動きはほしい、でも重くしたくない」。この2つを両立する方法として、前回の記事ではSVGアニメーションを紹介しました。
今回紹介するLottie（ロッティ）は、このSVGアニメーションの仲間にあたります。より複雑でなめらかな動きを、軽いまま実現できる仕組みです。
Lottie（ロッティ）とは何か
Lottieは、世界最大級の宿泊予約サービスAirbnb（エアビーアンドビー）が開発し、無償で公開しているWebアニメーションの仕組みです。いまでは世界中のアプリやWebサイトで採用されていて、スマホアプリの読み込み中にくるくる動くイラストや、タップしたときにハートが弾けるような演出の多くは、実はLottieで作られています。
仕組みの中身は、動画ファイルではなく「動きの設計図」を書いた文字データです。「この丸を0.5秒かけて右に動かす」「この線を1秒かけて描く」といった指示が書かれていて、表示するときにブラウザがその指示どおりに動かします。完成した映像を丸ごと持ち運ぶ動画と違って、設計図だけを持ち運ぶので、データの大きさは動画の数十分の一から数百分の一で済みます。
前回紹介したSVGアニメーションと考え方は同じ仲間ですが、Lottieのほうが複雑でなめらかな動きが得意です。複数のパーツがタイミングをずらしながら動く、キャラクターが弾んで着地する、といった「キャラクターものの動き」まで表現できます。また、「スクロールしてここまで来たら再生する」「1回だけ再生して止める」といった再生のコントロールがしやすいのも特徴です。
それぞれの違いを整理すると、次のようになります。
Webサイトで「動き」を表現する4つの方法の比較。Lottieは軽さと表現力を両立できる。
まとめると、Lottieは「動画並みの表現を、画像並みの軽さで」実現する選択肢です。ただし、これまで作るにはAfter Effects（アフターエフェクツ。映像制作の専門ソフト）を使える人が必要で、中小企業が気軽に手を出せるものではありませんでした。その状況が、生成AIの登場で変わりつつあります。
生成AIでLottieが作れるようになった
変化のきっかけは、2026年6月に海外の開発チームが公開した、ある仕組みです。一言でいうと「Lottieの作り方をまとめた、AI向けの手順書」。これをClaude（クロード）などのAIに読み込ませると、AIがLottieの作り方を覚え、文章で頼むだけでアニメーションを作ってくれるようになります。公開からわずか数日で世界中の開発者から1,600件を超える評価が集まるほど、注目を集めました。
実際にどんなものができるのか、弊社で試したものをお見せします。「ボールのキャラクターが弾むアニメーションを作って」と文章で頼んだだけで、数分後に出てきたのがこちらです。
文章で頼んだだけで生成されたボールキャラクター。動画ではなく、本物のLottieがこの場で動いています。
絵を描いたり、専門ソフトを操作したりする工程はありません。日本語で動きのイメージを伝えると、AIが先ほどの「動きの設計図」を直接書き上げます。「もう少しゆっくり弾ませて」「着地のときにつぶれる感じを足して」といった微調整も、会話で伝え直すだけです。
サイトに載せるまでの流れも、以前と比べてずっと短くなりました。
Lottieアニメーション制作の進め方の変化。生成AIの活用で、言葉で伝えられれば形にできるようになった。
これまで「After Effectsを使える人を探すところから」だったものが、「どう動かしたいかを言葉にできれば作れる」ものに変わった。これがこの1か月で起きたことです。
なお、できあがったLottieはサイトに載せるだけでなく、動画ファイルに変換すればSNSの投稿やプレゼン資料にも使えます。変換は、弊社が無料公開しているツールでできます。
とはいえ、試しに1つ作ってみるのと、実際に会社のサイトへ組み込むのとでは話が別です。次の章では、弊社が自社サイトで実際にやってみた結果を紹介します。
実例：自社サイトのロゴ3か所をアニメ化してみた
弊社が運営するこのサイト（smarvee.com）でも、ロゴをLottieでアニメ化しています。対象は3か所。それぞれ役割に合わせて動きを変えました。
- ページ上部のロゴ：サイトを開くと、ロゴマークが組み上がるように一度だけ再生。続けてキャッチコピーがふわっと現れます
- トップページ中央の大きなロゴ：ページを開いたタイミングで一度だけ、ゆったりと再生
- ページ最下部のロゴ：スクロールしてたどり着いたときに初めて動き出します
このロゴアニメの実体は、次のような「動きの設計図」データです（冒頭の抜粋）。
{
"v": "5.7.0",
"fr": 60,
"ip": 0,
"op": 200,
"w": 2332,
"h": 542,
"assets": [],
"layers": [
{
"ty": 4,
"nm": "arrow-head",
…（以下、動きの指示が続く。全体で約24KBの文字データ）そしてこの設計図を再生したものがこちら。動画ファイルではなく、本物のLottieがこの場で動いています（タップするともう一度再生されます）。
smarvee.comのヘッダーで使っているロゴアニメの実物。タップ（クリック）でもう一度再生できます。
実物はこのページの上部でも動いていますので、よろしければスクロールして見てみてください。
制作の進め方は前の章で紹介した流れそのままで、既存のロゴ画像をもとに「どう動かしたいか」を言葉で伝えながら作り込みました。ロゴが動く形になるまで40〜50分、細かい調整と自社サイトへの反映まで含めても約2時間。すべて当日の午前中に終わっています。外部に発注した場合のロゴアニメーション制作は数万円から十数万円、納期は1〜2週間が目安ですから、これは大きな違いです。
もうひとつ大事にしたのが、「もし動かなくても、サイトの見た目が崩れない」ことです。アニメーションがうまく読み込めなかった場合は、これまでどおりの静止画ロゴがそのまま表示される作りにしています。閲覧する人の環境はさまざまなので、企業サイトに組み込むときは、こうした保険をかけておくと安心です。
企業サイトでLottieが向いている場所
Lottieは万能ではなく、向いている場所とそうでない場所があります。企業サイトで効果を発揮しやすいのは、次のような場所です。
- ロゴ：サイトを開いた瞬間の第一印象づくり。今回の弊社の実例もこれにあたります
- サービス紹介のアイコン：スクロールして表示されたときに、図がふわっと現れる演出
- 読み込み中の表示：待ち時間に小さなキャラクターやマークが動いていると、待たされている感覚が和らぎます
- お問い合わせボタンまわり：さりげなく揺れる、光が走るといった小さな動きで目を引きます
- マスコットキャラクター：先ほどのボールキャラのように、弾む・うなずくといった簡単な動きを付けられます
共通するのは「短くて、繰り返し見ても邪魔にならない動き」だということです。逆に、実写の映像や、商品の使い方をじっくり見せるような内容には向きません。そこは従来どおり動画の領域です。伝えたい内容によって、静止画・Lottie・動画を使い分けるのが現実的です。
また、作ったロゴアニメはサイトに置いて終わりではありません。動画の冒頭にロゴアニメを差し込むなど、動画制作の素材としても使い回せます。コードで動画を組み立てるRemotion（リモーション）という仕組みと組み合わせると、ロゴアニメ入りの動画を型として量産する、といった発展もできます。
なお、Lottieという仕組み自体は以前からあり、弊社でもスマホアプリ向けのキャラクターアニメーションをLottie形式で納品してきました。動きや表情のあるキャラクターを、アプリの動作を重くせずに組み込むための定番の方法です。
映像のオープニングを飾るロゴアニメーションの制作実績もあります。
これまで専門の制作現場で使われてきた技術が、生成AIによって「自社で作る」選択肢にもなった。それが今回の変化です。
導入前に知っておきたい注意点
最後に、実際にサイトへ組み込む段階でつまずきやすい点を3つに絞ってお伝えします。
1つ目は、作って終わりではなく「いろいろな環境で表示確認をする」ことです。パソコンとスマホ、ブラウザの種類によって、動きの見え方は微妙に変わります。また、パソコンやスマホの設定で「画面の動きを減らす」を選んでいる人には、アニメーションが再生されないことがあります。だからこそ前述のとおり、動かなかった場合に静止画へ自然に切り替わる作りにしておくことが大切です。
2つ目は、動かしすぎないことです。動きは目を引く分、多すぎると読む人の集中を奪います。1ページの中で動くのは数か所まで、再生は1回だけ、といった抑制を効かせたほうが、かえって上品に見えます。今回の弊社のロゴも、ループ再生はせず「開いたときに1回だけ」にとどめています。
3つ目は、最後に人の目で仕上がりを判断することです。生成AIは作業を大幅に短縮してくれますが、「この動きが自社のブランドに合っているか」「お客さまにどんな印象を与えるか」は、AIには判断できません。速く作れるようになった分、その確認にこそ時間をかける価値があります。
動きのあるサイトづくりは、かつてのような大がかりな投資ではなくなりました。まずはロゴ1つ、アイコン1つから。小さく試して、サイトの印象がどう変わるかを確かめてみてください。
Webアニメーション・ロゴアニメ制作のご相談
ロゴひとつ、アイコンひとつから、サイトの印象づくりをお手伝いします。
動画・アニメーション制作とあわせて、お気軽にご相談ください。