01 / novaSVG + GIF
清潔感のある第一印象
短いスライドにより、ワードマークが目的を持って到着します。最後の保留により、名前が再び表示されるまでに読み上げられる時間が与えられます。
スライド公開 · 0.8のアニメーション
無料オンラインツール
ロゴアニメーションメーカー
静止したロゴに数秒で動きを付けられます。ファイルを選び、プリセットを選択して、アニメーションSVGまたはGIFで書き出します。透かしは入りません。
透かしなしサインアップなし100% ブラウザ内SVG および GIF のエクスポート
ロゴをアップロードする
SVG、PNG、JPG、WebP、最大2 MB。SVGでは線を描く動きや要素ごとの連続アニメーションも選べます。
ここへロゴをドラッグ＆ドロップすることもできます。ファイルはブラウザの外へ送信しません。
ロゴが手元にありませんか?サンプルを試してみる
モーションコレクション
独自のロゴ アニメーションのサンプルを作成する準備ができています
マークに命を吹き込む 6 つの方法を試してください。開始点を選択し、独自のロゴを使用してタイミング、キャンバス、背景を微調整します。
02 / orbitSVG + GIF
勢いのあるジオメトリ
回転式の入口がコンパクトなシンボルエネルギーを与えます。回転のバランスが取れていると感じるように、マークの周りに十分なスペースを残してください。
スピンイン · 1.4のアニメーション
03 / arcSVGのみ
アウトラインでストーリーを語ろう
3 つの入れ子のアーチが視界に入ります。ストローク描画は、輪郭がロゴのアイデンティティの一部である場合に特に効果的です。
ストローク描画 (SVG) · 2のアニメーション
04 / formSVGのみ
マークを順番に構築する
シンボルとレタリングは少しずつ届きます。最後のホールドを長くすることで、別々の要素が 1 つのアイデンティティとしてまとめられます。
ずらして挿入 (SVG) · 1.5のアニメーション
05 / driftSVG + GIF
より静かな動き
流れるような2本のラインが緩やかに上下に動きます。サイクル間に休憩がなく、フローティング効果が継続的なリズムを生み出します。
フロート · 2.5のアニメーション
06 / picoSVG + GIF
遊び心のあるエントランス
小さなバウンスが丸いシンボルに個性を与えます。動きを短くして、完成したマークを落ち着かせます。
バウンスイン · 1.1のアニメーション
このコレクションのために作られたオリジナルのデモンストレーションロゴ。 Look を適用すると、アップロードされたロゴが保持されます。アップロードしていない場合は、サンプルが開きます。ストローク描画と千鳥効果には SVG 入力が必要で、SVG としてのみエクスポートできます。
ロゴをアニメーション化する方法
3 つのステップ、1 分以内
1
ロゴをアップロードする
完全なプリセット ライブラリの場合は SVG をドロップし、ロゴ全体のアニメーションの場合は PNG/JPG をドロップします。ファイルはブラウザ内でローカルに処理されます。
2
プリセットを選択して調整する
10 個のアニメーション プリセットから選択し、ライブ プレビューで持続時間、イージング、ループ数を調整します。
3
SVG または GIF をエクスポート
Web サイト用にアニメーション SVG をダウンロードするか、電子メール、チャット、ソーシャル メディア用に GIF をダウンロードします。透かしは一切ありません。
目的地から始める
ロゴを表示する場所の設定を選択します
Web サイトのヘッダーと電子メールの署名には、異なる種類のモーションが必要です。これらの開始設定は、エディターですでに利用可能なエフェクトとエクスポート オプションを組み合わせたものです。
ウェブサイトのヘッダー
短いフェードとスケールを 1 回再生します。元のアスペクト比はワードマークに適しており、サイトの背景には透明なキャンバスが使用されます。
- 期間
- 0.8s
- 最後のポーズを保持する
- 0s
- ループ
- 1×
- 推奨フォーマット
- SVG
ロード画面
ホールドやリプレイのギャップのない穏やかなフローティングループ。アプリケーションが読み込み状態を処理する際に、アニメーションを視覚的な合図として使用します。
- 期間
- 2.5s
- 最後のポーズを保持する
- 0s
- ループ
- 無限
- 推奨フォーマット
- SVG
電子メールの署名
2 回再生される、読み取り可能な一時停止を伴う小さなパルス。 GIF をエクスポートする前に、256 ピクセルから開始し、背景を署名と一致させます。
- 期間
- 1.2s
- 最後のポーズを保持する
- 2s
- ループ
- 2×
- 推奨フォーマット
- GIF
ブランドショーケース
レイヤー化された SVG を順番に表示し、2 秒間押し続けます。風景キャンバスは、シンボルとワードマークを一緒に配置する余地を与えます。
- 期間
- 1.5s
- 最後のポーズを保持する
- 2s
- ループ
- 無限
- 推奨フォーマット
- SVG
SVGロゴが必要です
これらは出発点であり、プラットフォーム要件ではありません。目的地に合わせてサイズと背景を調整します。 1 回限りのアニメーションは最終ポーズのままです。ループ例では、示されているホールド タイムを使用します。ここでの読み込みインジケーターは視覚的なアニメーションであり、実際の読み込みの進行状況とは関係ありません。
このロゴアニメーションメーカーを使用する理由
すべてがローカルで実行されます - 高速、プライベート、そして無料
無料、透かしなし
透かし、クレジット、サインアップの壁のない、きれいなアニメーションロゴをエクスポートします。
プライバシーに配慮した処理
ロゴは端末の外へ送信しません。すべての処理をブラウザ内で行います。
インスタントプレビュー
すべてのプリセットとすべてのパラメーターの変更は、エクスポートされたとおりにすぐに再生されます。
SVG および GIF のエクスポート
鮮明で小さな Web 埋め込み用のアニメーション SVG。電子メールやチャットでのユニバーサル サポートのための GIF。
本番環境に対応した出力
エクスポートされた SVG はプレーンな CSS キーフレームを使用します。これを任意の Web サイト、README、またはアプリに貼り付けます。
10 個の手動調整されたプリセット
微妙なフェードからストロークの描画、千鳥状のリビールまで、各プリセットはすぐに見栄えがするように調整されています。
アニメーション SVG と GIF — どちらを使用する必要がありますか?
両方をエクスポートし、それぞれが最適に機能する場所で使用します
アニメーションSVG
• ファイルサイズが小さく、無限に拡張可能 - Web サイトやアプリに最適
• ネイティブ CSS アニメーションとして実行され、Retina ディスプレイでは常に鮮明に動作します
• 真の透明性をサポート
• 用途: Web サイトのヘッダー、読み込み画面、ドキュメント
GIF
• 電子メール クライアント、チャット アプリ、ソーシャル メディア、プレゼンテーションなど、どこでも再生可能
• コードは必要ありません。ファイルをドロップするだけです。
• ファイルサイズが大きくなる。透明度にはハード エッジがあります (1 ビット アルファ)
• 最適な用途: 電子メールの署名、Slack/Discord、ソーシャル投稿
ダウンロードから表示まで
アニメーション化されたロゴを機能させる
ファイルをエクスポートし、適切な配置を選択してコンテキスト内で確認します。これらの例では、Web サイトの埋め込みと実用的な GIF 設定について説明します。
アニメーション SVG を Web サイトに追加する
anime-logo.svg をサイトの公開アセットに配置します。また、アニメーション化されていないオリジナルのロゴを logo-static.png として追加するか、そのパスを静的ファイルに変更します。この例では、訪問者が動きを減らしたい場合に静的バージョンを使用します。
HTML
<picture>
<source
media="(prefers-reduced-motion: reduce)"
srcset="/logo-static.png"
/>
<img
src="/animated-logo.svg"
alt="あなたのブランド"
width="160"
height="90"
style="max-width: 100%; height: auto;"
/>
</picture>React / JSX
<picture>
<source
media="(prefers-reduced-motion: reduce)"
srcSet="/logo-static.png"
/>
<img
src="/animated-logo.svg"
alt="あなたのブランド"
width={160}
height={90}
style={{ maxWidth: '100%', height: 'auto' }}
/>
</picture>パスとブランド名を独自のものに置き換えます。 160 × 90 の寸法は 16:9 のキャンバスを想定しています。これらをエクスポートされたアスペクト比に合わせてください。 React では、このスニペットをコンポーネントから返された JSX 内に配置できます。
MDN で SVG 画像埋め込みガイドを読む ↗宛先のGIFを準備する
- 1
使いやすいサイズを選ぶ
小さな署名やバッジの場合は 256 ピクセル、大きな配置の場合は 512 ピクセルをお試しください。これらの値は最長エッジを設定します。キャンバスの比率が他の次元を制御します。公開する前に、ダウンロードしたファイルを検査してください。
- 2
背景を合わせる
固体表面に対して滑らかに見えるエッジを作成するには、その表面の色をキャンバスの背景として使用します。透明 GIF には透明エッジが硬いため、SVG プレビューとは異なって見える場合があります。
- 3
どこに表示されるかをテストする
GIF を実際のページまたは署名に挿入し、そのサイズと再生を確認します。プラットフォームのサポートは異なります。最初のフレームに完全なロゴを表示したい場合は、静的バージョンを利用可能な状態にしておき、パルスなどのエフェクトを選択します。
公開する前に
ロゴの周りに白いボックスがまだあるのはなぜですか?
透明なキャンバス設定では、アップロードされた画像内にすでに存在する背景は削除されません。背景形状のない透明な PNG または SVG から始めて、再度エクスポートします。
透明な GIF のエッジが粗く見えるのはなぜですか?
GIF の透明度は完全に透明または完全に不透明です。プレビューの柔らかく部分的に透明なエッジ ピクセルを維持することはできません。一致する単色の背景を選択するか、サポートされている場合は SVG を使用します。
このエフェクトを GIF としてダウンロードできないのはなぜですか?
ストローク描画と千鳥状要素アニメーションは現在、SVG としてのみエクスポートされます。 GIF の場合は、フェード & スケール、パルス、スライド リビールなどのロゴ全体のエフェクトに切り替えます。
PNG を SVG としてエクスポートすると、ベクター ロゴになりますか?
いいえ。エクスポートされた SVG には、元のビットマップとそのアニメーションが含まれています。拡大しても新しい画像の詳細は作成されません。スケーラブルなアートワークが必要な場合は、ベクター SVG をアップロードします。
よくある質問
このロゴアニメーションメーカーは本当に無料ですか?
はい。 10 個のプリセットすべてと両方のエクスポート形式 (アニメーション SVG と GIF) は完全に無料で、透かしもアカウントも必要ありません。
私のロゴはサーバーにアップロードされていますか?
いいえ。ツールは完全にブラウザ内で実行されます。ロゴ ファイルはローカルで読み取られ、ローカルでアニメーション化され、ローカルでエクスポートされます。当社のサーバーにアクセスすることはありません。
SVG 入力と PNG 入力の違いは何ですか?
SVG ロゴは要素ごとにアニメーション化でき、これによりストローク描画および千鳥配置プリセットのロックが解除されます。 PNG または JPG は、8 つのユニバーサル プリセットを使用して画像全体としてアニメーション化されます。
自分の Web サイトでアニメーション SVG を使用できますか?
はい。エクスポートされた SVG には標準の CSS キーフレームが含まれており、最新のすべてのブラウザーで動作します。 <img> タグを使用して埋め込むか、HTML に直接インラインします。
透明な背景で GIF のエッジが粗くなるのはなぜですか?
GIF は 1 ビットの透明度のみをサポートしているため、半透明のピクセルはハード エッジになります。最良の結果を得るには、使用する場所に一致する単色の背景色で GIF をエクスポートするか、完全なアルファ透明度をサポートするアニメーション SVG を使用します。
AI を使用してロゴをアニメーション化できますか?
このツールは、手動で調整されたプリセットを使用して、予測可能でブランドセーフな結果を実現します。 AI 主導のカスタムコレオグラフィーは私たちのロードマップにあります。ここにあるプリセットは、今日の最も一般的なロゴアニメーションのニーズをカバーしています。