SVGロゴをLottie化したい人へ｜Web用JSON制作を依頼する前の準備と注意点

Webサイトのロゴを少しだけ動かしたいものの、MP4やGIFを置くと重くなりそうで迷うことがあります。

このような場面で使われるのが、Webやアプリ上で再生できるLottieアニメーションです。

手元にSVGやIllustrator形式のロゴがあれば、その形状を生かしながら、線が描かれる、パーツが組み上がる、ロゴが現れるといった動きを付けられます。

ただし、SVGファイルを変換ツールへ入れるだけで、完成度の高いロゴアニメーションが自動的に完成するわけではありません。動きの設計、Lottieで再現できる表現の確認、ループや再生時間の調整が必要です。

Lottieモーション作成します

 

LottieはWebやアプリで使えるJSON形式のアニメーション

Lottieは、Adobe After Effectsなどで作成したアニメーションをJSON形式で書き出し、Webサイトやアプリ上で再生する仕組みです。

LottieFilesでは、JSONベースで、拡大縮小してもピクセル化しにくく、複数のプラットフォームで利用できるアニメーション形式として説明されています。

ロゴやアイコンのようなベクター素材と相性がよく、次の用途で使われます。

• Webサイトを開いた直後のロゴ演出
• ページ読み込み中のローディング表示
• ボタンを押したときのアイコン変化
• 申し込み完了時のチェックマーク
• アプリ起動時の短いモーション
• サービスの流れを示す図解
• キャラクターの簡単な動き
• ファーストビューの装飾

MP4のような映像を再生するのではなく、図形や位置、回転、透明度などの情報を使って描画するため、ロゴやシンプルなイラストを動かす用途に適しています。

SVGをLottieへ変換するだけでは完成しない

LottieFilesには、SVGファイルをアップロードしてLottieへ変換する公式ツールがあります。変換自体は専門ソフトがなくても試せます。

ただし、ここでいう変換と、オリジナルのモーション制作は別の作業です。

静止したロゴには、次の情報が含まれていません。

• どのパーツから動かすか
• 何秒で表示するか
• 線を描くのか、回転させるのか
• 最後に静止させるのか
• 繰り返し再生するのか
• マウス操作やクリックに反応させるのか
• ブランドに合う速度や動きは何か

SVGはロゴの形を表す素材です。

Lottieアニメーションにするには、ロゴへどのような時間変化を加えるか設計する必要があります。

無料変換ツールは、簡単な動きを試したい場合には便利です。一方、企業サイトやサービスサイトへ掲載する完成品では、動きの意味や表示環境まで考えた調整が必要です。

無料変換・自作・専門家への依頼を比較

SVGロゴを動かす方法は一つではありません。

方法	費用	動きの自由度	作業負担	向いている用途
無料変換ツール	抑えやすい	低い〜中程度	小さい	動作テスト、簡単な演出
CSS・JavaScriptで自作	抑えやすい	中程度	大きい	線描画、フェード、単純な変形
After Effectsで自作	ソフト費用が必要	高い	非常に大きい	継続的に複数のモーションを作る
Lottie制作を外注	制作費が必要	高い	小さい	公開用ロゴ、アプリ、企業サイト
Web制作会社へ実装ごと依頼	高くなりやすい	高い	小さい	制作から組み込みまで一括依頼

すでにAfter Effectsを使える人なら、自作する選択もあります。

しかし、ロゴアニメーションを1点だけ必要としている場合、ソフトの操作、対応機能、書き出し方法まで覚えると、制作物より学習コストのほうが大きくなります。

アニメーションデータだけ必要なら、Lottie制作を専門家へ依頼し、Webサイトへの組み込みは担当エンジニアに任せる方法があります。

SVGロゴのLottie化が向いている場面

すべてのロゴを動かす必要はありません。

Lottie化が効果的なのは、短い動きによって操作やブランドの意味が伝わる場所です。

Webサイトを開いた直後

ロゴのパーツが順番に現れる演出を入れると、ブランドを印象付けられます。

ただし、長いオープニングは閲覧を妨げます。ロゴを見せるために利用者を何秒も待たせるのではなく、ページ表示と並行して短く再生する設計が必要です。

ローディング表示

データの読み込みや画面切り替えに時間がかかるサービスでは、静止画より動くアイコンのほうが処理中であることを伝えやすくなります。

ローディング用途では、最後まで再生して止まる動きではなく、違和感なくループする設計が必要です。

申し込みや購入の完了画面

チェックマーク、紙吹雪、箱が閉じる動きなどを使うと、操作が正常に完了したことを視覚的に伝えられます。

派手さよりも、利用者が「処理は終わった」と理解できることを優先します。

アプリのボタンやアイコン

お気に入り登録、保存、ダウンロード、通知などの操作に短い動きを付けると、押した結果を確認しやすくなります。

このような小さな動きは、マイクロインタラクションとも呼ばれます。

サービスの特徴を説明する場所

複数のパーツを持つイラストや図解も、Lottieで順番に表示できます。

文章を読ませる前に仕組みを見せたい場合や、無形サービスの内容を視覚化したい場合に使えます。

Lottieでは再現できない表現がある

After Effectsで作れる動きが、すべてLottieへ書き出せるわけではありません。

LottieFilesの対応機能一覧では、位置、回転、拡大縮小、透明度、基本的なパス、塗り、線、シンプルなマスクなどが対応機能として示されています。

一方、3Dレイヤー、カメラ、ライト、ドロップシャドウ、グロー、ぼかし、複雑なエフェクトなどは非対応または制限があります。

依頼前には、希望する動きがLottie向きか確認する必要があります。

Lottieと相性がよい表現

• 位置の移動
• 回転
• 拡大と縮小
• 透明度の変化
• 線が描かれる動き
• 図形の変形
• パーツの組み立て
• シンプルなマスク
• アイコンの切り替え
• 短いループ

別形式を検討したほうがよい表現

• 実写映像
• 複雑な3D表現
• 光や煙を使う演出
• 強いぼかしや発光
• 写真を大量に使う動き
• 長時間の映像
• 複雑な質感や粒子
• 映画のような画面効果

希望する表現がLottieで難しい場合は、GIF、アニメーションWebP、APNG、MP4、MOVなどが候補になります。

最初から形式を決めつけず、掲載場所と動きの内容を制作者へ伝え、適した形式を確認することが重要です。

依頼前に用意するロゴデータ

Lottie制作では、PNGやJPGよりもベクターデータが適しています。

今回紹介するサービスでは、Illustrator形式またはSVG形式の支給が案内されています。

Illustrator形式

拡張子が「.ai」のデータです。

ロゴの各パーツがレイヤーやパスに分かれていると、個別に動かしやすくなります。

たとえば、シンボル、文字、円、装飾線を別レイヤーにしておくと、順番に表示する動きを付けられます。

SVG形式

拡張子が「.svg」のベクターデータです。

Webサイトで使用しているロゴをそのまま素材として渡せる場合があります。

ただし、SVG内のパーツが一体化していると、個別に動かすための分解作業が必要になることがあります。

PNGやJPGしかない場合

画像しか持っていない場合は、ベクター化や素材の作り直しが必要です。

次の条件によって追加作業が変わります。

• ロゴの形が単純か
• 小さな文字が含まれているか
• グラデーションがあるか
• 写真や複雑な質感を使っているか
• 元の制作データが残っているか
• 使用フォントが分かるか

素材制作が必要な場合は、追加料金になる可能性があります。

見積もり時には、手元にあるデータを先に見せて、制作可能か確認してください。

ロゴのパーツを分けて渡す

動かしたい部分が決まっている場合は、素材をパーツごとに分けます。

たとえば、次のような構成です。

• シンボルマーク
• ブランド名
• 英字のサブタイトル
• 背景の円
• 装飾線
• 小さなアイコン

一つの画像として結合されているより、パーツが分かれているほうが動きの選択肢が広がります。

素材を自分で分けられない場合は、「この部分を先に出したい」「文字は最後に表示したい」と伝えるだけでも構いません。

制作者が元データを確認し、分解が必要か判断できます。

完成イメージは動詞で伝える

「かっこよく」「おしゃれに」だけでは、動きの方向を特定できません。

参考動画がない場合は、ロゴがどのように動くかを動詞で伝えます。

線を描く

ロゴの輪郭が手書きのように少しずつ現れる動きです。

線を中心に構成されたロゴと相性があります。

組み立てる

複数のパーツが別々の方向から移動し、最後に一つのロゴになる動きです。

図形が複数に分かれているシンボルに適しています。

回転する

シンボルが回転して正しい位置で止まる動きです。

円形や左右対称のロゴで使いやすい表現です。

変形する

一つの形から別の形へ滑らかに変わる動きです。

開始時のアイコンと完成後のロゴに共通点がある場合に使えます。

弾む

ロゴが少し縮んでから元の大きさへ戻る動きです。

親しみやすいサービスやアプリの完了表示に向いています。

フェードする

透明な状態から徐々に現れる動きです。

大きな演出を避けたい企業サイトや、他の要素を邪魔したくない場所で使えます。

再生条件を決めておく

同じアニメーションでも、再生条件によって作り方が変わります。

依頼前に、次の項目を確認してください。

• ページを開いたら自動再生する
• 一度だけ再生する
• 繰り返し再生する
• マウスを重ねたら再生する
• クリックしたら再生する
• スクロールで表示されたら再生する
• 操作完了後に再生する
• 途中で停止できるようにする

ロゴオープニングなら一度再生して停止、ローディングならループ、ボタンならクリックに合わせて再生するなど、用途ごとに条件が異なります。

制作担当者だけでなく、実装を担当するエンジニアにも共有しておきます。

実装サイズを伝える

Lottieはベクターベースで拡大縮小できますが、制作時の縦横比や見せ方は事前に決める必要があります。

依頼時には、掲載予定のサイズを伝えます。

• パソコン表示での幅と高さ
• スマートフォン表示での幅と高さ
• 正方形か横長か
• ロゴ周辺に必要な余白
• 背景が透明か
• 白背景と黒背景のどちらで使うか
• 全画面表示か一部分か

正確なサイズが決まっていない場合は、予定している範囲でも構いません。

「Webサイトのヘッダー内で横幅200px程度」「アプリの完了画面中央で正方形表示」のように、使用場面と一緒に伝えます。

Lottie制作とWeb実装は別作業

LottieのJSONファイルを納品してもらっただけでは、Webサイトへ自動的に表示されません。

Webサイト側では、Lottieを読み込み、再生条件や表示サイズを設定する実装作業が必要です。

公式プレーヤーでは、JSONやLottieファイルを指定し、自動再生、ループ、速度、表示位置などを設定できます。

依頼範囲は次のように分かれます。

作業	モーション制作者	Web制作者・エンジニア
ロゴ素材の確認	対応	必要に応じて確認
動きの設計	対応	要件を共有
After Effectsで制作	対応	原則対応しない
JSON書き出し	対応	受領
アニメーションの表示確認	対応	実装環境でも確認
Webサイトへの組み込み	対応外の場合がある	対応
クリックやスクロールとの連動	データ側を調整	コードを実装
レスポンシブ調整	素材を提供	表示側を調整

見積もりを依頼するときは、「JSON制作だけ必要」「WordPressへの設置まで必要」と範囲を明確にします。

今回紹介するサービスの基本納品は、Lottie形式のJSONと確認用HTMLです。Webサイトへの組み込みまで含まれるとは限らないため、実装担当者を別に確保しておく必要があります。

確認用HTMLを実装担当者へ渡す

JSONだけを受け取っても、依頼者が中身を直接確認するのは難しい場合があります。

確認用HTMLがあれば、ブラウザ上で再生状態を確認できます。

納品時には、次のデータをまとめて実装担当者へ渡します。

• Lottie形式のJSONファイル
• 確認用HTML
• 元のSVGまたはIllustrator素材
• 希望する表示サイズ
• 自動再生の有無
• ループの有無
• 背景色
• 再生速度
• クリックやスクロールとの連動条件

納品データだけを送るのではなく、どのページのどの位置で使うかも伝えます。

動きの長さは短くする

ロゴアニメーションは、長く見せるほど印象が強くなるとは限りません。

Webサイトでは、利用者が情報を探すことが優先されます。

数秒間ロゴだけを表示し、ページを操作できない状態にすると、閲覧の妨げになります。

用途別の考え方は次のとおりです。

• ロゴ表示：短く一度だけ再生
• ローディング：待ち時間に合わせてループ
• ボタン：操作直後に短く反応
• 完了表示：結果が伝わったら静止
• 背景装飾：目立ちすぎない速度で繰り返す
• 図解：内容を追える順番と速度にする

ブランドムービーのような長い演出ではなく、Web操作を補助する短い動きとして設計します。

ループのつなぎ目を確認する

ローディングや背景装飾では、繰り返し再生したときのつなぎ目が重要です。

最後の状態から最初の状態へ突然戻ると、画面が一瞬飛んだように見えます。

ループ用のアニメーションでは、次の方法を使います。

• 最初と最後を同じ形にする
• 一回転して元の位置へ戻す
• 大きくしてから同じ速度で小さくする
• 左へ移動した要素を画面外で戻す
• 正方向と逆方向を交互に再生する
• 透明度を変えてつなぎ目を隠す

見積もり相談時に「ローディング用なので無限ループさせたい」と伝えれば、用途に合った構成を提案してもらいやすくなります。

スマートフォンでも確認する

パソコンで滑らかに動いていても、スマートフォンでは見え方が変わる場合があります。

納品後は、次の環境で確認します。

• パソコンの主要ブラウザ
• iPhone
• Android端末
• 小さな画面
• 高解像度画面
• 通信速度が遅い環境
• 白背景
• ダークモードや黒背景

特に細い線、小さな文字、淡い色は、スマートフォンで見えにくくなることがあります。

ロゴ内に小さなキャッチコピーがある場合は、文字まで動かすのではなく、シンボルだけをアニメーションにする方法もあります。

依頼時に伝える内容

見積もり相談では、次の項目をまとめます。

• 使用目的
• 掲載するWebサイトまたはアプリ
• 動かしたいロゴデータ
• 希望する動き
• 参考動画や参考サイト
• 再生時間
• ループの有無
• 自動再生の有無
• 実装予定サイズ
• 背景色
• 希望納期
• JSON以外に必要な形式
• 実績公開の可否
• After Effects作業データの要否

すべて決まっていなくても、使用目的と素材を先に見せれば相談できます。

「ロゴをかっこよく動かしたい」だけでなく、「企業サイトのトップで、一度だけ2秒程度再生したい」と伝えると、必要な動きを絞りやすくなります。

Lottieモーション作成します

 

そのまま使える見積もり相談文

依頼文は、次の形式でまとめられます。

使用目的

自社Webサイトを開いた際に、ヘッダー部分でロゴを一度だけ動かしたいです。

支給素材

Illustrator形式のロゴデータがあります。

シンボルマーク、会社名、英字部分は別レイヤーになっています。

希望する動き

最初にシンボルの輪郭線が描かれ、その後に会社名が下から現れる動きを希望します。

全体で2秒程度に収めたいです。

再生方法

ページを開いたら一度だけ自動再生し、最後は完成したロゴの状態で停止させたいです。

使用サイズ

パソコンでは横幅300px程度、スマートフォンでは横幅180px程度を予定しています。

背景

白背景で使用します。背景透過を希望します。

納品形式

Lottie形式のJSONと確認用データを希望します。

参考資料

希望に近いWebサイトのURLと、動きの参考動画を添付します。

希望納期

実装確認の時間を含め、公開予定日の一週間前までに納品を希望します。

この程度まで整理されていれば、制作者が難易度と料金を判断しやすくなります。

料金が変わる主な要因

Lottie制作の料金は、アニメーションの秒数だけでは決まりません。

次の要素によって工数が変わります。

• 動かすパーツ数
• 素材を分解する必要があるか
• SVGやIllustrator素材があるか
• ロゴ以外のイラスト制作が必要か
• 複雑な変形があるか
• ループ調整が必要か
• 複数サイズを制作するか
• JSON以外の形式も必要か
• 修正回数
• 納期
• 作業データの譲渡
• 実績公開の可否

今回紹介しているサービスでは、シンプルなモーションは8,000円から、ロゴやキャラクターなど素材が多い内容は20,000円から、複雑で高難度な内容は50,000円からが目安として示されています。

表示価格だけで判断せず、素材と参考イメージを送って見積もりを確認してください。

JSON以外の形式が必要か確認する

同じアニメーションをWebサイト以外でも使う場合は、別形式が必要になることがあります。

形式	主な用途
JSON	Webサイト、アプリへのLottie実装
HTML	ブラウザでの動作確認
GIF	メール、簡単なプレビュー
APNG	透過が必要な画像アニメーション
MP4	SNS投稿、動画編集
MOV	透過動画、映像制作
AEP	After Effectsでの再編集

Webサイト用としてはJSONだけで足りても、SNS告知や営業資料に同じ動きを使う場合は、MP4やGIFもあると便利です。

追加形式はオプションになる場合があるため、最初の見積もりでまとめて相談します。

After Effectsの作業データが必要か考える

通常の運用では、完成したJSONがあればWebサイトへ実装できます。

After Effectsの作業データが必要になるのは、次のような場合です。

• 社内で後から動きを修正したい
• 別の色へ変更する予定がある
• ブランド名が変わる可能性がある
• 他の制作者へ引き継ぎたい
• 複数パターンを継続的に制作したい
• 動画形式にも展開したい

作業データの譲渡は、通常納品に含まれないことがあります。

必要か分からない場合は、今後自社で編集する予定があるかを基準に判断してください。

完成品をそのまま使い続けるなら、JSON納品だけで費用を抑えられます。

著作権とロゴの使用権を確認する

制作者へ渡すロゴやイラストは、依頼者が使用権を持っている必要があります。

他社のロゴ、購入条件を確認していない素材、無断で複製したキャラクターなどは使用できません。

依頼前に確認する項目は次のとおりです。

• 自社が所有するロゴか
• 制作会社との契約で改変が認められているか
• 使用フォントのライセンスに問題がないか
• イラスト素材をアニメーションへ加工できるか
• 商用利用できる素材か
• 別案件への再利用条件
• 制作実績として公開されるか

秘密保持が必要な未公開サービスや新製品では、実績公開の可否も先に伝えます。

Lottie制作サービスを選ぶ際の確認項目

ロゴアニメーションの依頼先は、完成サンプルだけでなく、技術面も確認します。

Lottie形式の制作実績があるか

動画制作が得意でも、Lottieの制約を理解しているとは限りません。

After Effectsで作った映像をMP4へ書き出す作業と、対応機能を確認しながらJSONへ最適化する作業は異なります。

SVGやベクターデータを扱えるか

ロゴのパスやレイヤーを確認し、必要に応じて分解できる制作者を選びます。

対応外表現を代替提案できるか

希望するぼかしや3D表現が使えない場合に、フェード、拡大縮小、線描画などへ置き換えられるか確認します。

ブラウザ上で確認できるか

JSONだけでなく、確認用HTMLやプレビューを用意してもらえると、納品前に動きを確認しやすくなります。

実装時の問題を相談できるか

実装後に表示されない、パーツがずれる、色が変わるといった問題が起きることがあります。

制作データ側の原因を調査できる制作者なら、エンジニアとの切り分けを進めやすくなります。

Lottie制作に関するよくある質問

PNGロゴからでもLottieを作れますか

制作できる場合はありますが、PNGはベクターデータではないため、トレースや素材の作り直しが必要になる可能性があります。

まずPNGを見せて、追加の素材制作費が必要か確認してください。

SVGを渡せば安くなりますか

アニメーションに使える状態のSVGがあれば、素材制作の工数を減らせます。

ただし、パーツ数や希望する動きによって料金は変わるため、SVGがあるだけで必ず低価格になるとは限りません。

Webサイトへの設置も依頼できますか

Lottie制作とWeb実装は別サービスになっている場合があります。

JSON制作だけなのか、HTMLやJavaScriptへの組み込みまで含むのか、購入前に確認してください。

WordPressでも使えますか

Lottieを読み込める方法があれば使用できます。

テーマ、プラグイン、ページビルダー、独自実装などによって設置方法が異なるため、Webサイトの担当者へ確認してください。

STUDIOなどのノーコードサイトでも使えますか

サービス側がLottieの埋め込みや外部コードに対応していれば利用できます。

ノーコードツールは仕様が変わることがあるため、使用中のプランと現在の機能を確認する必要があります。

JSONの色は後から変更できますか

データ構成や実装方法によって変更できる場合があります。

簡単に色を差し替えたい場合は、制作前に色変更を想定していることを伝えてください。

ロゴアニメーションは何秒が適切ですか

使用場所によって異なります。

Webサイトのロゴ表示や操作反応では短くまとめ、長い演出が必要なら動画形式も検討します。重要なのは、利用者の操作を妨げないことです。

GIFからLottieへ変換できますか

変換ツールはありますが、GIFはピクセル画像の連続です。

ベクターを使った軽量で編集しやすいLottieを作りたい場合は、元のSVGやIllustratorデータから作り直すほうが適していることがあります。

静止ロゴを動かす目的を決めてから依頼する

SVGロゴをLottie化するときは、最初に形式を決めるのではなく、どこで何を伝えるために動かすのかを決めます。

ページを開いたときにブランドを見せたいのか、読み込み中であることを伝えたいのか、ボタン操作の結果を示したいのかによって、適した動きは変わります。

依頼前には、次の情報を整理してください。

• SVGまたはIllustrator形式のロゴ
• 掲載場所
• 希望する動き
• 再生時間
• ループの有無
• 実装サイズ
• 背景色
• 希望納期
• JSON以外に必要な形式

Lottieには対応できないAfter Effectsの機能もあるため、参考動画をそのまま再現できるとは限りません。

Lottie制作の経験がある制作者へ素材と使用場面を見せ、再現可能な動きへ調整してもらうことが、失敗を避ける近道です。

Lottieモーション作成します