Background

+

Visual Studio Code

開発ワークフローを改善しましょう

Visual Studio Code用LottieFilesプラグインで

Visual Studio Marketplace経由で

動画を見る

Visual Studio Code
Visual Studio Code
Visual Studio Code

VS Code内で手軽にLottieアニメーションを使用する

Preview Lottie files

VS Code内でLottieファイルをプレビューする

LottieFilesの拡張機能を使用すれば、VS Codeアプリから離れることなく、LottieやdotLottieのファイルコンテンツをプレビューすることができます。

Show dotLottie contents

dotLottieコンテンツを表示する

VS Code内でdotLottieファイル(Lottieの圧縮ファイルフォーマット)を展開し、コンテンツを見る。

Search LottieFiles

LottieFilesを検索する

「LottieFilesを検索」機能は、完璧なトグルを検索したり、アプリ向けのアニメーションを再生するのに便利です。このコマンドをVS Code内で実行して検索します。

Edit Lottie JSON

Lottie JSONファイルを編集する

Lottieのコードエディターを使用すれば、付属のプレーヤーで変更を表示しながら、Lottie JSONファイルのフレームレート、 寸法、その他のプロパティを変更できます。

なぜLottieアニメーションを使うのですか?

なぜLottieアニメーションを使うのですか?

Faster page load
Faster page load
Faster page load
Faster page load

ページを速く読み込む

ページを速く読み込む

Lottieは、GIFより600%小さなファイルサイズです。つまり、ウェブサイトを低速化させることなくアニメーションを加えられるのです。

Stay sharp at any resolution
Stay sharp at any resolution
Stay sharp at any resolution
Stay sharp at any resolution

どのような解像度でも鮮明なままです。

どのような解像度でも鮮明なままです。

Lottieアニメーションはピクセル化を起こさずに拡大縮小できます。どのようなサイズでも、常に鮮明なままです。

Fit brand's visual identity
Fit brand's visual identity
Fit brand's visual identity

ブランドのビジュアルアイデンティティーに合わせられます。

ブランドのアイデンティティーに合わせて、Lottieアニメーションをカスタマイズしましょう。無料のLottie Editorを使えば素早く簡単にできます。

ブランドのビジュアルアイデンティティーに合わせられます。

ブランドのアイデンティティーに合わせて、Lottieアニメーションをカスタマイズしましょう。無料のLottie Editorを使えば素早く簡単にできます。

ブランドのビジュアルアイデンティティーに合わせられます。

ブランドのアイデンティティーに合わせて、Lottieアニメーションをカスタマイズしましょう。無料のLottie Editorを使えば素早く簡単にできます。

Beginner's guide to Lottie
Beginner's guide to Lottie
Beginner's guide to Lottie
Beginner's guide to Lottie

アニメーションの専門家とLottieの基礎を学びましょう。

アニメーションの専門家とLottieの基礎を学びましょう。

AirbnbのデザインリーダーであるSalih Abdul-Karim氏と一緒に、アニメーションの原理やテクニック、After Effectsを使ってLottieアニメーションを作成する方法を学びましょう。

FAQ

FAQ

FAQ

Lottieとは?

Lottieファイルは、JSONベースのアニメーションファイル形式で、アニメーション要素の文字や描写による表現を使用して、ファイルサイズを縮小し、プラットフォームに依存せず、解像度に依存せず、アニメーション再生中にフレームレートを変えられるようにしています。ウェブ、iOS、Android、Windows、その他のプラットフォーム向けに、オープンソースで無料のLottieプレーヤーをご用意しています。

Lottieとは?

Lottieファイルは、JSONベースのアニメーションファイル形式で、アニメーション要素の文字や描写による表現を使用して、ファイルサイズを縮小し、プラットフォームに依存せず、解像度に依存せず、アニメーション再生中にフレームレートを変えられるようにしています。ウェブ、iOS、Android、Windows、その他のプラットフォーム向けに、オープンソースで無料のLottieプレーヤーをご用意しています。

Lottieとは?

Lottieファイルは、JSONベースのアニメーションファイル形式で、アニメーション要素の文字や描写による表現を使用して、ファイルサイズを縮小し、プラットフォームに依存せず、解像度に依存せず、アニメーション再生中にフレームレートを変えられるようにしています。ウェブ、iOS、Android、Windows、その他のプラットフォーム向けに、オープンソースで無料のLottieプレーヤーをご用意しています。

Lottieとは?

Lottieファイルは、JSONベースのアニメーションファイル形式で、アニメーション要素の文字や描写による表現を使用して、ファイルサイズを縮小し、プラットフォームに依存せず、解像度に依存せず、アニメーション再生中にフレームレートを変えられるようにしています。ウェブ、iOS、Android、Windows、その他のプラットフォーム向けに、オープンソースで無料のLottieプレーヤーをご用意しています。

dotLottieとは?

dotLottieとは?

dotLottieとは?

dotLottieとは?

VS Code用LottieFilesプラグインをインストールする方法は?

VS Code用LottieFilesプラグインをインストールする方法は?

VS Code用LottieFilesプラグインをインストールする方法は?

VS Code用LottieFilesプラグインをインストールする方法は?

VS CodeでLottieをプレビューする方法は?

VS CodeでLottieをプレビューする方法は?

VS CodeでLottieをプレビューする方法は?

VS CodeでLottieをプレビューする方法は?

dotLottieコンテンツを表示する

dotLottieコンテンツを表示する

dotLottieコンテンツを表示する

dotLottieコンテンツを表示する

VS CodeでLottieFilesのアニメーションを検索する方法は?

VS CodeでLottieFilesのアニメーションを検索する方法は?

VS CodeでLottieFilesのアニメーションを検索する方法は?

VS CodeでLottieFilesのアニメーションを検索する方法は?

VS CodeのLottieコードエディターを使用すると、何ができるのですか?

VS CodeのLottieコードエディターを使用すると、何ができるのですか?

VS CodeのLottieコードエディターを使用すると、何ができるのですか?

VS CodeのLottieコードエディターを使用すると、何ができるのですか?

詳しくはサポートページをご覧ください。

簡単に作れるモーション

VS Code内で手軽にLottieアニメーションを使用する。