ロゴアニメーションのファイル形式：MP4・GIF・WebM・Lottieの違いと選び方

ロゴアニメーションのファイル形式は、どこで再生するかで決まります。動画ならMP4、WebサイトならWebMとMP4の併用、メール署名ならGIF、チャットや画像しか受け付けないアップロード先ならGIFかアニメーションWebPです。LottieやSVGアニメーションを選ぶのは、アプリの中でロゴをベクターのまま保つ必要があるときだけです。

ロゴアニメーションのファイル形式は3つの系統に分かれます。動画形式（MP4、WebM、MOV）は再生プレーヤーが必要です。MP4などは映像と音声を入れる「コンテナ」で、中の映像を圧縮する方式（H.264、VP9、HEVC、ProRes）を「コーデック」と呼びます。アニメーション画像（GIF、アニメーションWebP、APNG）は画像を表示できる場所ならどこでも動きます。ベクター形式（Lottie、SVGアニメーション）はピクセルではなく形を記録するので、どのサイズでもくっきりしています。

私たちは4秒のロゴアニメーション21本を、MorphLogoのダウンロードメニューにある5つの形式すべてで書き出し、1ファイルずつ容量を量りました。GIFは毎回、元のMP4より重くなりました。

ロゴはあるけれど、動きはまだ？ 生成して、MP4、WebM、WebP、GIF、メール署名用GIFでダウンロード。 AIでロゴを動かしてみる →

PNG、JPG、WebP、SVGをアップロードすると、数分でクリップができます。透かし入りのプレビューは無料で生成でき、どの形式でもダウンロードには有料プランかクレジットパックが必要です。

ロゴアニメーションに最適なファイル形式は？

最適な形式は、置き場所がそのまま再生できる形式です。動画にはプレーヤーが必要で、メールソフトはGIFを動かしても動画は再生せず、画像しか受け付けないアップロード欄もあります。置き場所に合わせて選ぶと、多くの場合「動画まわりはMP4、メールはGIF、Webサイトに載せるならWebMも」に落ち着きます。

ロゴを置く場所	使う形式	理由
Webサイトのヒーローやヘッダー	WebM（MP4を予備に）	21回のテストすべてで、MP4・WebP・GIFより軽かった
メール署名	メール署名用の小さなGIF	GmailとWindows版Outlook 2007〜2019はメール内の動画を再生しない
チャット、掲示板、画像しか受け付けないアップロード	GIF、対応していればアニメーションWebP	プレーヤーなしで自動再生・ループする
YouTube、SNS投稿、広告、動画編集ソフト	MP4	生成した元の動画。効果音を付けた場合は音も入る
プレゼン資料	MP4。GoogleスライドならGIF	MicrosoftはPowerPointにH.264のMP4を推奨。AppleはH.264ならすべてのAppleデバイスで再生できるとしている。GoogleスライドはGIFを画像として挿入できる
アプリのUI、ローディング、ホバー効果	LottieまたはSVGアニメーション	ベクターのままで、コードから制御できる
配信（OBS）や動画編集で映像に重ねる	背景透過のMOV（ProRes 4444）	ロゴの周りが透明のまま重なる。重いのでWeb配信には不向き

動画編集ソフトにはどの形式を入れる？

MP4を使ってください。生成した動画そのもので、すばやく再生できるようまとめ直しているだけで再圧縮はしていません。H.264はFinal Cut Proの対応フォーマットに入っていますが、WebMは入っていません。16:9のイントロにするなら、正方形を切り抜くのではなく16:9で生成してください（MorphLogoは4:3、1:1、3:4、9:16にも対応）。

GIFとMP4の違いは？ロゴにはどちらを使う？

GIFは1フレーム256色までのアニメーション画像、MP4はフルカラーの動画です。動画が再生できる場所ではMP4、できない場所でだけGIFを使います。私たちのテストでは21本中21本で、GIFのほうがMP4より重くなりました。しかもGIFはピクセル数が4分の1、フレームレートも24fpsではなく15fpsです。

測定方法。 2026-09-19に、4秒・1:1のクリップ21本（960×960ピクセル、24fps。ロゴアニメーションの作例ページと同じサンプル）を、ユーザーのダウンロードを作るのと同じ書き出しサービスと設定で変換しました。容量は10進法で、1 KBは1,000バイトです。

各ダウンロードの中身と容量は次のとおりです。MP4が生成した元の動画で、ほかの4つはダウンロード時にそこから変換され、ピクセル、フレーム、色数のどれかを削って軽さや互換性を得ています。

形式	画素数とフレームレート	色	ループ
MP4（H.264）	生成サイズ（ここでは960ピクセル）、24fps	フルカラー	プレーヤーがループすれば
WebM（VP9）	短辺最大1,080ピクセル（ここでは960ピクセル）、24fps	フルカラー	プレーヤーがループすれば
アニメーションWebP	短辺最大720ピクセル、24fps	フルカラー	無限ループ
GIF	長辺480ピクセル、15fps	1フレーム最大256色	無限ループ
メール署名用GIF	長辺240ピクセル、10fps	64色	1回再生

音が入るのはMP4とWebMだけで、効果音を付けた場合に限ります。

形式	中央値	21本の範囲	MP4との比（中央値）
MP4	2.00 MB	1.36〜2.94 MB	1倍
WebM	496 KB	55 KB〜1.60 MB	0.25倍
アニメーションWebP	984 KB	416 KB〜1.77 MB	0.44倍
GIF	3.65 MB	2.5〜6.4 MB	1.86倍
メール署名用GIF	509 KB	343〜862 KB	0.26倍

同じフレームの同じ場所です。MP4、WebM、WebPは見分けがつきにくく、GIFはグラデーションにディザの点が散り、メール署名用GIFは拡大するとブロック状に崩れます（署名のサイズでは目立ちません）。

GIFとMP4はどちらが重い？元の動画よりGIFが重くなる理由

GIFが省略できるのは、前のフレームとまったく同じピクセルだけです。生成したクリップは背景に細かな粒子感があるため、ほぼすべてのピクセルが毎フレーム書き換わります。さらにGIF89aの仕様で1フレームは256色までなので、グラデーションはディザの点で再現され、これが圧縮しにくいのです。動画のコーデックは変わった部分だけを、フルカラーで記録します。

Googleのweb.devのガイドでは3.7 MBのGIFに対してMP4が551 KBと、さらに大きな差が出ています。GIFと同じサイズで変換しているためです。私たちのMP4はGIFの2倍の幅を保っていますが、それでもGIFのほうが1.2〜2.6倍重くなりました。

それでもGIFは、メールや、画像は受け付けても動画は受け付けない場所では有利です。そうした用途には、GIFロゴメーカーが1回の生成から2サイズのGIFを作ります。

アニメーションWebPはどこで使う？

アニメーションWebPはその中間です。プレーヤーなしでフルカラー・無限ループ、容量はMP4の半分弱。現行のChrome、Edge、Firefox、Safariが表示に対応しています（Can I use）が、Gmailは静止画のJPEGに変換します（Can I email）。画像は受け付けても動画は受け付けないプラットフォームで使ってください。

WebMとMP4のどちらがいい？

Webサイトに載せるならWebMを先に、MP4を予備に置くのが基本です。私たちの21本では、WebMの中央値は496 KBでMP4の4分の1でした。一方、WebMは編集ソフトでの扱いが限られ、Final Cut Proの対応フォーマットにも入っていません。編集ソフト、SNS、YouTube、資料にはMP4、Webページの埋め込みにはWebM、と分けるのが確実です。

Lottieとは？SVGアニメーションが必要なとき

LottieやSVGアニメーションが必要なのは、ロゴをベクターのまま保つ必要があるときだけです。どのサイズでもくっきり表示したい、コードで制御したい、サイトやアプリでクリックやスクロールに反応させたい、といった場合です。

Lottieは、After Effectsのアニメーションを書き出すために2015年にHernan Torrisiが作った、オープンソースのベクターアニメーション形式です。ファイルの中身はJSONで、従来はBodymovinプラグインで書き出します。SVGアニメーションは、SVGファイルをCSSやSMILで動かしたものです。どちらもピクセルではなく、形とキーフレームを記録します。

それが限界でもあります。どちらもSVGやIllustratorファイルのようなベクターデータから作る必要があります。生成したクリップの中の粒子、液体金属、レンズフレアはただのピクセルで、レンダリングされた動画をLottieが動かすベクターの形に戻すことはできません。

MorphLogoはLottieもSVGアニメーションも書き出さず、動画を生成します。ベクターの動きが必要なら、After EffectsとBodymovinか、Lottielab、SVGatorなどのベクターツールを使ってください。ヒーローバナー、イントロ、投稿なら動画のほうが手軽で、ベクター形式が得意としない効果も見せられます。

ロゴアニメーションは背景透過にできる？透過動画の形式

できます。ただし形式にアルファチャンネル（ピクセルごとの透明度）がある場合です。アニメーションWebP、APNG、アルファ付きVP9のWebM、アルファ付きHEVC、ProRes 4444のMOVにはあります。GIFはピクセルを完全な透明か完全な不透明にしかできません。

形式	透過	使える場所
GIF	1色だけ完全な透明、ほかは不透明（GIF89a）	どこでも。ただしふちやギザギザが出る
APNG	フルアルファ	現行のブラウザ。Web版とAndroid版のGmailは非対応
アニメーションWebP	フルアルファ	現行のブラウザ。Gmailは静止画のJPEGに変換
WebM（アルファ付きVP9）	フルアルファ	Chrome、Edge、Firefox。Safariはアルファを無視
アルファ付きHEVC	フルアルファ	iOS 13・macOS Catalina以降のSafari
MOV（ProRes 4444）	フルアルファ、最大16ビット	動画編集ソフト。1080pで約330 Mbpsと重く、配信には不向き
連番PNG	フルアルファ、1フレーム1枚	モーションデザインや合成ソフト（Apple Motionなどが書き出せる）。フレームのフォルダで、Web用のファイルではない

H.264のMP4はアルファチャンネルを持たず、透過できません。Webサイトで透過動画を使うには、Safari向けのアルファ付きHEVCとほかのブラウザ向けのアルファ付きWebMの2ファイルを用意し、<source>はHEVCを先に書きます。WebMが先だと、Safariは透過を無視して再生します。

MorphLogoの背景透過は、条件付きの有料オプションです。 背景が透明なロゴファイルが必要で、使えるのは360°回転、ふんわり浮遊、バウンスポップ、紙吹雪ポップの各スタイルか、ご自身で書いた説明だけです。ロゴの周りの光る効果は残りません。クリップはグリーンバックの上で生成され、ダウンロード時にグリーンが取り除かれます。WebM、アニメーションWebP、MOV（ProRes 4444）はやわらかいアルファの輪郭を保ち、GIFは完全な透明か不透明かでくっきり切り抜かれ、MP4はグリーンバックのままです。APNG、連番PNG、編集可能なプロジェクトファイルはありません。Safariでも透過を保ってWebに載せるなら、透過のアニメーションWebPを<img>で置くのが手軽です。このページで測った容量はすべて不透明のクリップで、透過ファイルはテストに含めていません。

背景透過をオフにすると、書き出しはすべて不透明になります。

• ロゴを、実際に置く背景の上でアップロードする。 生成はファイルの四隅の色から始まります。透過PNGはほぼ白のスタジオ調の色になり、私たちのテストでは純白が#F9F9FCで返ってきました。
• ロゴから始まるスタイルを選ぶ。 背景の色がほぼ保たれます。パーティクル集結やグリッチバーストのような登場系のスタイルは、シーンの光を変えることがあります。
• 映像や変化する背景の上に重ねるなら、背景透過をオンにする（上の4スタイルの場合）か、ProRes 4444・連番PNG・アルファ付きWebMを書き出せるモーションデザインソフトかベクターツールで素材を作ってください。

ロゴアニメーションのファイルサイズの目安は？

メール署名のGIFは500 KB未満（200 KBとする署名サービスもあります）、Webサイトのクリップは動きが許す限り軽く。私たちのテストでは、4秒の正方形のロゴがWebMで55 KB〜1.60 MB、メール署名用GIFで343〜862 KBでした。

メール署名の場合

GmailもOutlookもGIFの容量上限は公表していません。メール用GIF全般ではLitmusが最大1 MBを推奨し、署名用の動くGIFについては、署名サービスのWiseStampが500 KB未満、Letsignitが最大200 KBを勧めています。私たちのメール署名用GIF（240ピクセル、10fps、64色、1回再生）は、ロゴから始まるスタイルで384〜402 KBでした。WiseStampの基準には収まり、Letsignitの基準には収まりません。500 KBを超えたのはすべてパーティクルやガラス砕けのような画面全体が動くもので、21本のうち200 KBを下回ったものはありませんでした。

読みやすさを決めるのは形式ではなく表示サイズです。Gmailは署名画像を最大で高さ100ピクセルで表示し、その高さではテスト用ロゴの2行のキャッチコピーは形式に関係なく1〜2ピクセルになります。一方、アイコンは見えたままです。

署名用にはアイコンかロゴタイプだけを残し、キャッチコピーはテキストで書いてください。日本語ロゴの「株式会社」や創業年のような小さな文字も同じで、署名サイズでは読めません。しかもAIで動かすと、小さな日本語の文字はぼやけたり別の字に崩れたりすることがあるので、アップロード前に外しておくのが確実です。Windows版Outlook 2007〜2019は1フレーム目しか表示しないので、ロゴから始まるスタイルを選んでください。設定手順はメール署名にGIFを入れる方法にまとめています。

Webサイトの場合

Webページでは、ファイルサイズがそのまま読み込み時間になり、その大半を決めるのは動きです。ロゴが形を保つスタイルはフレームごとの変化が小さく、WebMは111〜143 KB、スケッチ描画は中央値87 KBでした。パーティクルやリキッドのような画面全体が動くものはほぼすべてが変わり、中央値615 KB、最大1.60 MBに達しました。クリップは長くなるほど1秒ごとに重くなります。1080pや4Kで生成するとMP4とWebMは大きくなりますが、WebPは720ピクセル、GIFは480ピクセルと240ピクセルが上限のままです。

動くロゴをWebサイトに載せるには？

ミュートしてループするHTMLの<video>要素に入れ、WebMを先、MP4を予備として並べ、元のロゴファイルをポスター画像にします。

<video autoplay muted loop playsinline
       poster="/images/logo.png" width="480" height="480">
  <source src="/media/logo-animation.webm" type="video/webm">
  <source src="/media/logo-animation.mp4" type="video/mp4">
</video>

属性にはそれぞれ役割があり、1つ抜けるだけでロゴが止まる、全画面になる、重いほうのファイルを読み込む、といったことが起きます。

• mutedとautoplay：Chromeはミュートした自動再生を常に許可し、WebKitもiOSでミュートした動画の自動再生を許可しています。
• playsinline：iPhoneで全画面にならず、ページ内で再生させます。
• loop：最後まで行ったら最初に戻ります（MDN）。
• WebMを先に：MP4を先に書くと、軽いWebMが使える環境でもMP4が選ばれます。
• poster：動画の読み込みまで表示されます。ロゴファイルを使ってください。ロゴから始まるスタイルはそのまま続き、どのスタイルも最後は元のロゴに着地するよう導かれます。

ヒーローにGIFは使わないでください。私たちのテストでは中央値でWebMの8倍の容量があり、色数もフレーム数も少なくなります。

公開前の確認が2つあります。

• ループには一時停止の手段を付ける。 WCAG 2.2 達成基準 2.2.2は、自動で始まり、5秒を超えて続き、ほかのコンテンツと並ぶ動きに一時停止の手段を求めています。4秒のクリップをループさせると該当するので、一時停止ボタンかcontrolsを付けるか、loopを外してください。
• ループのつなぎ目を確認する。 現行の89本で測ったところ、3Dオービットは19本中12本でつなぎ目がきれいにつながり、360°回転はたいていわずかに跳び、シネマティック登場は始まりより明るく終わるため毎回光りました。スタイルごとの一覧はループするロゴアニメーションのページにあります。

ロゴアニメーションのファイル形式に関するよくある質問

SVGはアニメーションに対応していますか？

対応しています。SVGの形はCSSや<animate>などのSMIL要素で動かすことができ、ブラウザは動画プレーヤーなしで再生します。動きはベクターの形の上に作る必要があり、レンダリングされた動画をベクターの形に戻すことはできません。

.lottieファイルとは何ですか？

.lottieファイルはdotLottie形式のファイルで、1つ以上のLottieアニメーションと素材をまとめた圧縮アーカイブです。中のアニメーションはLottieのJSONのままで、テーマや、操作に反応する動きのためのステートマシンなどが加わっています。

PNGでアニメーションはできますか？

できます。APNG（アニメーションPNG）です。アニメーションGIFのように動きますが、24ビットカラーとフルアルファの透過に対応し、現行のChrome、Edge、Firefox、Safariで再生できます。APNGに対応していない環境では1フレーム目だけが表示され、Web版とAndroid版のGmailは対応していません。

ロゴはPNGとJPGのどちらがいいですか？JPGは透過できますか？

背景が変わる場所に置くロゴならPNGです。劣化なしで圧縮でき透過にも対応していますが、JPEGにはアルファチャンネルがなく透過できません。印刷やサイズ変更用には、SVG、EPS、PDFのベクターの元データを残しておいてください。MorphLogoはPNG、JPG、WebP、SVGを受け付けます。背景透過のクリップにするなら背景が透明なロゴを、そうでなければ最終的な背景色の上に置いたロゴをアップロードしてください。