GIFに変わるアニメーション「Lottie」とは？ノーコードでサイト制作する私が学んだこと
WordPressでサイト制作をしていると、「もう少し動きのあるサイトにしたい」と思うことがあります。
たとえば、ファーストビューにふわっとした動きを入れたい。
ボタンやアイコンにさりげないアニメーションをつけたい。
サービスの流れを、静止画ではなく動きで分かりやすく見せたい。
でも、そこで悩むのが「どうやって実装するか」です。
私は普段、ノーコード寄りでサイト制作をしていて、デザインとWordPressでの構築が主な仕事です。がっつりコードを書いてアニメーションを組むというより、テーマやプラグイン、ブロック、画像素材を組み合わせながらサイトを作っています。
コードが必要なもの、アニメーションを取り入れる場合には外注化しています。
そんな立場から見ると、Lottieはかなり気になる存在でした。
Lottieは、JSONベースのアニメーションファイル形式で、静止画を扱うような感覚でWebサイトやアプリにアニメーションを入れられるものです。LottieFilesでは、Lottieは小さなファイルサイズで、拡大縮小してもピクセル化しにくく、WebやiOS、Androidなど複数の環境で使えると説明されています。
今回は、GIFに変わるアニメーションとして注目されているLottieについて、ノーコードでサイト制作をする自分自身の学びとしてまとめてみます。
目次
Lottieとは何か
Lottieとは、Webサイトやアプリで使える軽量なアニメーション形式のことです。
一般的な画像ファイルのように「見た目をそのまま表示する」というより、アニメーションの動きや形の情報をJSON形式で持っていて、それをブラウザやアプリ側で再生する仕組みです。
難しく聞こえますが、サイト制作者目線でざっくり言うと、
「軽くてきれいに表示できるアニメーション素材」
と考えると分かりやすいです。
これまで、サイトに動きを入れたい時はGIFや動画を使うことが多かったと思います。
でもGIFは画質が粗くなりやすかったり、ファイルサイズが大きくなったりします。動画も見栄えは良いですが、場合によっては重くなりやすく、ちょっとしたアイコンアニメーションには大げさに感じることもあります。
その点、Lottieは小さいファイルサイズで使いやすく、ベクターベースのため拡大縮小にも強いとされています。LottieFilesでも、GIFやMP4と比べて同じ品質を保ちながらファイルサイズを小さくできること、解像度を気にせず拡大縮小できることがメリットとして紹介されています。
GIFとLottieの違い
GIFとLottieは、どちらもWeb上で動きを見せるために使えます。
ただし、仕組みや使い勝手にはかなり違いがあります。
GIFは、パラパラ漫画のように複数の画像を連続で表示して動きを見せる形式です。簡単に使える反面、色数や画質に限界があり、サイズも大きくなりやすいです。
一方、Lottieはアニメーションの情報をデータとして持っていて、表示する時に動きを再現します。ベクター形式に近い考え方なので、拡大しても画像が荒れにくいのが特徴です。
サイト制作で考えると、GIFは「手軽だけれど少し古い印象になることがある素材」、Lottieは「軽くて今っぽい動きを入れられる素材」という感覚に近いです。
もちろん、すべてのGIFをLottieに置き換える必要はありません。
ただ、アイコン、ローディング、スクロール誘導、クリック後のリアクション、サービス説明用のイラストなどには、Lottieの方が相性が良さそうです。
LottieがWebサイト制作で便利だと感じた理由
私のように、デザインとWordPress構築を中心にサイト制作をしている立場から見ると、Lottieの魅力は「動きのあるサイトを作るハードルを下げてくれること」だと思います。
これまで、サイトにアニメーションを入れようとすると、CSSやJavaScriptの知識が必要だったり、動画を書き出したり、GIFを作ったりと、少し手間がかかる印象がありました。
でもLottieは、すでにあるアニメーション素材を探して使うこともできますし、色を変えたり、ブランドに合わせてカスタマイズしたりすることもできます。LottieFilesでは、無料アニメーションのライブラリから素材を探せることや、カラーパレットツール、Lottieエディターを使ってカスタマイズできることが紹介されています。
つまり、ゼロからアニメーションを作れない人でも、サイトに合う動きを取り入れやすいということです。
これはノーコード制作者にとって、かなりありがたいポイントです。
WordPressでも使えるのが大きい
私にとって一番気になったのは、LottieがWordPressでも使えるという点です。
LottieFilesのページでは、Lottieを使えるツールとしてWordPressも挙げられています。FigmaやAdobe After Effects、Visual Studio Codeなどと並んで、WordPress連携が紹介されているのは、ノーコード寄りの制作者にとってかなり心強いです。
WordPressでサイトを作っていると、トップページのちょっとしたあしらいや、サービス紹介のアイコン、CTAまわりの演出などに動きを入れたい場面があります。
たとえば、
「お問い合わせはこちら」の近くに動く矢印を置く
「施術の流れ」にアニメーションアイコンを入れる
「読み込み中」や「送信完了」の動きをおしゃれにする
ファーストビューにやわらかい動きを加える
スクロールを促すアニメーションを入れる
こうした表現にLottieが使えそうです。
動画ほど重くなく、GIFよりもきれいに見えるなら、WordPressサイトの見た目を一段階アップさせる素材として活用できそうだと感じました。
ノーコード制作でもLottieは使いやすそう
Lottieと聞くと、最初は少し開発者向けの技術に見えます。
JSON、ライブラリ、レンダリングなどの言葉が出てくると、ノーコードでサイト制作している人には少し難しく感じるかもしれません。
でも、実際に調べてみると、LottieFilesのようなサービスを使えば、素材を探す、色を変える、プレビューする、Webサイトに埋め込むといった流れがかなり分かりやすくなっています。
特にWordPressなら、Lottie対応のブロックやプラグイン、ページビルダー側の機能を使って設置できるケースもあります。
つまり、コードを書いて一から実装するというより、
素材を選ぶ
サイトの雰囲気に合わせる
WordPressに設置する
表示を確認する
という流れで使える可能性が高いです。
これは、私のように「デザインは作れるけれど、複雑なコード実装は避けたい」という人にとって、とても現実的な選択肢だと思います。
Lottieを使うとサイトの印象がどう変わるか
Webサイトに動きがあると、それだけで印象が変わります。
ただし、動きが多すぎると逆に見づらくなります。
Lottieは、サイト全体を派手にするためというより、必要な部分にさりげなく動きを足す使い方が向いていると感じました。
たとえば、美容サロンのサイトなら、まつげや花、キラキラ、ハート、チェックマークなどの小さなアニメーションを入れるだけでも、やわらかさや特別感が出せそうです。
接骨院や整体院のサイトなら、予約ボタンへの誘導、施術の流れ、体の動きを表すアイコンなどに使えそうです。
企業サイトなら、読み込み中のアニメーション、サービス説明、データ表示、アイコンの動きなどに使うと、少し先進的な印象を出せるかもしれません。
静止画だけだと伝わりにくい内容も、動きが入ることで直感的に伝わりやすくなります。
Lottieを使う時に気をつけたいこと
便利そうなLottieですが、何でも入れれば良いわけではありません。
サイト制作で使うなら、いくつか気をつけたい点があります。
まず、動きの目的を決めること。
ただおしゃれだから入れるのではなく、「どこに注目してほしいのか」「何を分かりやすくしたいのか」を考えて使う必要があります。
次に、サイトの雰囲気に合わせること。
どれだけかわいいアニメーションでも、クライアントの業種やブランドに合っていなければ浮いてしまいます。高級感のあるサイトなら動きは控えめに、親しみやすいサイトなら少し遊び心を入れるなど、トーンの調整が大切です。
また、動きすぎにも注意が必要です。
アニメーションが多すぎると、ユーザーの視線が散ってしまいます。特にスマホでは画面が小さいので、動く要素が多いと落ち着かない印象になることもあります。
Lottieは軽量と言われていますが、使いすぎればページ全体のパフォーマンスに影響する可能性もあります。必要な場所に絞って使うのが良さそうです。
どんなサイトにLottieが向いているか
Lottieは、特に「雰囲気」や「分かりやすさ」を大切にしたいサイトに向いていると感じます。
美容サロン、エステ、アイラッシュサロン、ネイルサロンなどは、サイトの世界観がとても大切です。静止画だけでなく、さりげない動きがあることで、やわらかさや洗練された印象を出しやすくなります。
また、サービス説明が必要なサイトにも向いています。
たとえば、予約の流れ、購入の流れ、相談から納品までの流れなどを、動くアイコンで見せると分かりやすくなりそうです。
他にも、アプリ紹介、IT系サービス、オンライン講座、採用サイト、イベントLPなど、少し動きがあるだけで印象が良くなる場面は多いと思います。
私がWordPress制作で使うならここに入れたい
自分がWordPressサイト制作でLottieを使うなら、まずは小さなパーツから試したいです。
いきなりトップページ全体に大きく入れるのではなく、まずは失敗しにくい場所に使うのが良さそうです。
たとえば、
ファーストビューの下にあるスクロール誘導
お問い合わせボタン横の小さな矢印
「選ばれる理由」のアイコン
「施術の流れ」「制作の流れ」のステップアイコン
完了画面や送信完了メッセージのチェックアニメーション
ローディングや装飾用の小さな動き
こうした部分なら、サイトの邪魔をせずに印象を高められそうです。
特に、私がよく作る美容系や店舗系のサイトでは、動きが少しあるだけで「今っぽさ」が出せると感じます。
Lottieはデザイナーと制作者の間をつなぐ存在
Lottieの面白いところは、デザインと実装の間にあるギャップを埋めてくれる点だと思います。
昔は、デザイナーがアニメーションを考えても、それをWeb上で再現するには開発者側の作業が必要でした。
LottieFilesの歴史紹介でも、Lottieが登場する以前は、モーションデザイナーが作ったアニメーションを開発者が実装する必要があり、低画質で書き出したり、コードで再構築したりするなど、効率の悪さがあったと説明されています。
Lottieは、その課題を解決するために広がってきた形式です。
デザインした動きを、できるだけそのままWebやアプリで使いやすくする。
この考え方は、ノーコードでサイトを作る私にとってもすごく魅力的です。
これから学ぶとしたら？
今回Lottieについて調べてみて、まずは「サイトのワンポイントアニメーション」として取り入れてみたいと思いました。
今後、自分で学びたいのは次のあたりです。
LottieFilesで素材を探す方法
無料素材と有料素材の違い
WordPressに埋め込む方法
Elementorやブロックエディターで使えるか
色やサイズの調整方法
スマホ表示での見え方
ページ速度への影響
クライアント提案時の見せ方
特に、WordPress制作の中で無理なく使える方法を知りたいです。
コードを書かなくても、サイトの質感を高められるなら、制作の引き出しとしてかなり役立ちそうです。
まとめ
Lottieは、GIFに変わるアニメーション表現として、これからのWebサイト制作で活用しやすい技術だと感じました。
JSONベースの軽量なアニメーション形式で、GIFやMP4よりも小さなファイルサイズにしやすく、ベクターベースなので拡大縮小にも強いのが特徴です。Webやアプリなど複数の環境で使えることも、LottieFilesで紹介されています。
ノーコードでWordPressサイトを制作している私にとっては、複雑なアニメーションを一から作るというより、既存のLottie素材を選び、サイトに合わせて調整し、必要な場所に入れる使い方が現実的だと思いました。
特に、美容サロン、店舗サイト、サービス紹介サイト、LPなどでは、Lottieをうまく使うことで、静止画だけでは出せない「今っぽさ」や「分かりやすさ」を加えられそうです。
ただし、入れすぎると見づらくなる可能性もあるため、目的を決めて、必要な場所にだけ使うことが大切です。
GIFより軽く、動画より扱いやすく、サイトにさりげない動きを加えられるLottie。
WordPress制作の表現の幅を広げるために、これから少しずつ試していきたいと思います。
