inflearn logo
강의

講義

知識共有
inflearn logo
Design

/

UI/UX

[LottieFiles 公式] After Effectsで作るLottieアニメーション（修了証発行）

グローバルモーションデザインプラットフォームLottieFilesの公式初となる韓国語講座を、今すぐInflearn（インフラン）で独占公開中！講座をすべて修了すると、LottieFiles公式修了証を受け取ることができます。

（4.9）受講レビュー 9件

受講生 484名

難易度 入門

受講期間 無制限

After Effects
After Effects
Lottie
Lottie
3d
3d
After Effects
After Effects
Lottie
Lottie
3d
3d
Thumbnail

学習した受講者のレビュー

学習した受講者のレビュー

4.9

5.0

전윤서

38% 受講後に作成

無料で良い講義をありがとうございます。

5.0

lemonida

50% 受講後に作成

超初心者の私でも聞いて真似できますね、ありがとうございます!

5.0

Jang Jaehoon

50% 受講後に作成

良い講義をありがとうございます！

受講後に得られること

  • LottieFiles プラグインのインストール & セットアップ

  • After Effects ↔ Lottie(JSON·dotLottie) Import·Export ワークフロー

  • Expressionsスクリプティングでアニメーション自動化 & 互換性チェック

  • Lottie Optimizerを活用したファイル容量の最小化

  • 一括レンダリング（Bulk Render）＆ 2.5D（パララックス・エクスルージョン）立体感の演出

インフラン（Inflearn）だけで限定公開！
LottieFiles公式韓国語版講座を受講して
実務にすぐ活用しましょう！

After EffectsとLottieFilesで学ぶ、簡単で軽量なモーションアニメーション実践ガイド

ウェブやアプリにすぐ適用できる実用的なモーションアニメーションを作ってみませんか？
今回の講座では、After EffectsとLottieFilesを活用して
簡単かつ軽量にアニメーションを制作する方法をお教えします。

今回の講義で学べる内容！

基本的なモーションの原理からキャラクターアニメーションの制作まで

Faux 3D（フェイク立体感）の演出法

ワークスペースを活用した協業およびハンドオフまで

<After Effectsで作るLottieアニメーション>で
核心だけを集めて わずか40分 でマスターしましょう。

CHECK 1

Lottieとは何でしょうか？

LottieはJSONベースのアニメーションファイルで

Lottieを活用して、アニメーションを画像と同じくらい簡単に書き出すことができます。

容量が少なく、どのデバイスでも動作可能であり、

サイズを調整しても解像度が低下しないことがLottieの強力な利点です。

CHECK 2

なぜLottieを使用すべきなのでしょうか？

自由なサイズ調整

解像度の影響を受けずに
拡大・縮小が可能です。

小さなサイズ
GIFやMP4などの形式に比べ、
品質は同じでありながら、はるかに軽量です。

インタラクティブ性
Lottieはアニメーション要素が公開されているため、
インタラクティブに修正することができ、スクロール、クリック、
ホバーなどのアクションに反応させることができます。

多様なプラットフォーム対応とライブラリ
開発者にLottieをハンドオフするのは非常に簡単です。Lottieアニメーションは、iOS、Android、Web、React Nativeで修正することなくそのまま使用できます。

CHECK 3

世界最高のウェブ・アプリサービスが
Lottieを使用しています

現場で活発に使用されているLottieのユースケースを確認してみてください。

cashbag - showcase card
Gmarket - showcase card(kr) (1)
Qcells - showcase card (2)
showcase card (1)
showcase card (2)
showcase card_kr
showcase card
KR - riid - showcase card
showcase card_toss
gbike-kr card
Spoon - showcase card kr

その他、様々な活用事例はこちらでご確認いただけます。

CHECK 4

どのように受講すればよいですか？

[MD]언어설정_gif_800_5-9s

Inflearnの講義は、多様な音声言語と字幕に対応しています。

受講画面の下部にある歯車アイコン（設定）をクリックした後、
希望する音声言語と字幕を自由に選択してみてください。

CHECK 5

LottieFilesが認証する
修了証を受け取りましょう！

講義をすべて受講し、最後のクイズまで提出すると、
LottieFiles修了証とInflearn修了証の両方を受け取ることができます！
受け取った修了証はLinkedInやポートフォリオに自由に活用してみてください。

Inflearn修了証は
マイページ > マイ学習 > 修了証メニューからすぐにご確認いただけます。

こんな方に
おすすめです

学習対象は
誰でしょう？

  • ブランド体験を強化したいUI/UXデザイナー・プロダクトデザイナー

  • 生産性を最大化したいモーションデザイナー・アニメーター

  • コラボレーションの効率を高めたいフロントエンドエンジニア

  • JSONアニメーションのワークフローを学びたいデザイナー

前提知識、
必要でしょうか？

  • After Effectsの基礎知識が必要です。

こんにちは
LottieFilesです。

2,009

受講生

73

受講レビュー

4.9

講座評価

4

講座

LottieFiles（ロッティーファイルズ）は、世界中のデザイナーや開発者が簡単にアニメーションを作成、管理、適用できるように支援するプラットフォームです。Lottieフォーマットベースのアニメーションをウェブ、アプリ、プレゼンテーションなど、さまざまな環境に素早く適用することができ、効率的なチームコラボレーションやモーションデザインのワークフロー向上のための多様なツールを提供しています。

もっと見る

共同知識共有者

カリキュラム

全体

8件 ∙ (40分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

9件

4.9

9件の受講レビュー

  • yunseo92님의 프로필 이미지
    yunseo92

    受講レビュー 9

    ∙

    平均評価 5.0

    5

    38% 受講後に作成

    無料で良い講義をありがとうございます。

    • lottiefiles님의 프로필 이미지
      lottiefiles

      受講レビュー 1

      ∙

      平均評価 5.0

      5

      38% 受講後に作成

      • lemonida4890님의 프로필 이미지
        lemonida4890

        受講レビュー 4

        ∙

        平均評価 5.0

        5

        50% 受講後に作成

        超初心者の私でも聞いて真似できますね、ありがとうございます!

        • sashasavoyskiy155060님의 프로필 이미지
          sashasavoyskiy155060

          受講レビュー 1

          ∙

          平均評価 5.0

          5

          63% 受講後に作成

          • kiki05197544님의 프로필 이미지
            kiki05197544

            受講レビュー 1

            ∙

            平均評価 4.0

            4

            38% 受講後に作成

            AEについて全く知らないのに見ていたらできそうな気がする..😊😊

            LottieFilesの他の講座

            知識共有者の他の講座を見てみましょう！

            [LottieFiles公式] LottieFiles for Framer : FramerでLottieアニメーション200%活用する（修了証発行）講義サムネイル

            [LottieFiles公式] LottieFiles for Framer : FramerでLottieアニメーション200%活用する（修了証発行）

            LottieFiles

            無料

            入門 / Web Design, Interactive Web, Responsive Web, Lottie

            4.8

            (4)

            100+

            グローバルモーションデザインプラットフォームLottieFilesの公式初韓国語化講座、今Inflearnで独占的にご覧いただけます！講座を全て受講するとLottieFiles公式修了証を受け取ることができます。

            入門

            入門

            Web Design, Interactive Web, Responsive Web

            [LottieFiles公式] LottieFiles for Framer : FramerでLottieアニメーション200%活用する（修了証発行）講義サムネイル

            [LottieFiles公式] LottieFiles for Framer : FramerでLottieアニメーション200%活用する（修了証発行）

            LottieFiles

            無料

            入門 / Web Design, Interactive Web, Responsive Web, Lottie

            4.8

            (4)

            100+
            [LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）講義サムネイル

            [LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）

            LottieFiles

            無料

            入門 / Motion Graphic, Web Design, Lottie, ui, ux

            5.0

            (2)

            100+

            グローバルモーションデザインプラットフォームLottieFilesの公式初韓国語化講座、今Inflearnで独占的にご覧いただけます。講座をすべて受講するとLottieFiles公式修了証を受け取ることができます。

            入門

            入門

            Motion Graphic, Web Design, Lottie

            [LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）講義サムネイル

            [LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）

            LottieFiles

            無料

            入門 / Motion Graphic, Web Design, Lottie, ui, ux

            5.0

            (2)

            100+
            [LottieFiles 公式] Figma to Lottie: Figmaで作るモーションアニメーション (修了証発行)講義サムネイル

            [LottieFiles 公式] Figma to Lottie: Figmaで作るモーションアニメーション (修了証発行)

            LottieFiles

            無料

            入門 / Motion Graphic, Animation, Figma, No-code, UIUX

            4.9

            (58)

            1,200+

            グローバル・モーションデザイン・プラットフォームLottieFilesの公式初となる韓国語翻訳講座を、今すぐInflearnで独占公開中！講座をすべて受講すると、LottieFiles公式修了証を受け取ることができます。

            入門

            入門

            Motion Graphic, Animation, Figma

            [LottieFiles 公式] Figma to Lottie: Figmaで作るモーションアニメーション (修了証発行)講義サムネイル

            [LottieFiles 公式] Figma to Lottie: Figmaで作るモーションアニメーション (修了証発行)

            LottieFiles

            無料

            入門 / Motion Graphic, Animation, Figma, No-code, UIUX

            4.9

            (58)

            1,200+

            似ている講座

            同じ分野の他の講座を見てみましょう！

            [LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）講義サムネイル

            [LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）

            LottieFiles

            無料

            入門 / Motion Graphic, Web Design, Lottie, ui, ux

            5.0

            (2)

            100+

            グローバルモーションデザインプラットフォームLottieFilesの公式初韓国語化講座、今Inflearnで独占的にご覧いただけます。講座をすべて受講するとLottieFiles公式修了証を受け取ることができます。

            入門

            入門

            Motion Graphic, Web Design, Lottie

            [LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）講義サムネイル

            [LottieFiles公式] LottieFiles for Webflow : Lottieで完成するインタラクティブウェブサイト（修了証発行）

            LottieFiles

            無料

            入門 / Motion Graphic, Web Design, Lottie, ui, ux

            5.0

            (2)

            100+
            Three.jsで一人称3Dウェブサイトを作成する講義サムネイル

            Three.jsで一人称3Dウェブサイトを作成する

            studiomeal

            ￥11,221

            初級 / Interactive Web, Three.js, 3d, JavaScript, Portfolio

            5.0

            (9)

            200+

            デスクトップとモバイルの両方で動作する一人称3Dウェブサイトを作成する講義です。

            初級

            初級

            Interactive Web, Three.js, 3d

            Three.jsで一人称3Dウェブサイトを作成する講義サムネイル

            Three.jsで一人称3Dウェブサイトを作成する

            studiomeal

            ￥11,221

            初級 / Interactive Web, Three.js, 3d, JavaScript, Portfolio

            5.0

            (9)

            200+
            [LottieFiles公式] LottieFiles for Framer : FramerでLottieアニメーション200%活用する（修了証発行）講義サムネイル

            [LottieFiles公式] LottieFiles for Framer : FramerでLottieアニメーション200%活用する（修了証発行）

            LottieFiles

            無料

            入門 / Web Design, Interactive Web, Responsive Web, Lottie

            4.8

            (4)

            100+

            グローバルモーションデザインプラットフォームLottieFilesの公式初韓国語化講座、今Inflearnで独占的にご覧いただけます！講座を全て受講するとLottieFiles公式修了証を受け取ることができます。

            入門

            入門

            Web Design, Interactive Web, Responsive Web

            [LottieFiles公式] LottieFiles for Framer : FramerでLottieアニメーション200%活用する（修了証発行）講義サムネイル

            [LottieFiles公式] LottieFiles for Framer : FramerでLottieアニメーション200%活用する（修了証発行）

            LottieFiles

            無料

            入門 / Web Design, Interactive Web, Responsive Web, Lottie

            4.8

            (4)

            100+
            3Dモデリング入門のためのライノ（Rhino）「コツ」Part.1講義サムネイル

            3Dモデリング入門のためのライノ（Rhino）「コツ」Part.1

            soobaksee

            ￥12,669

            入門 / Rhino, 3d-modelling, 3d

            5.0

            (62)

            200+
            Update
            Update

            入門しにくい3Dモデリング・・？行き詰まって進まないモデリング・・？ 初心者のための「コツ」ライノなら実力向上OK！もどかしくてフィードバックのない授業・・？ 👉 オンライン講義にフィードバックをプラス！（悩まずに質問してください！）👍🙆‍♀

            入門

            入門

            Rhino, 3d-modelling, 3d

            3Dモデリング入門のためのライノ（Rhino）「コツ」Part.1講義サムネイル

            3Dモデリング入門のためのライノ（Rhino）「コツ」Part.1

            soobaksee

            ￥12,669

            入門 / Rhino, 3d-modelling, 3d

            5.0

            (62)

            200+
            Update
            Update
            3Dモデリング入門のためのライノ（Rhino）「お役立ち情報」Part.2講義サムネイル

            3Dモデリング入門のためのライノ（Rhino）「お役立ち情報」Part.2

            soobaksee

            ￥15,203

            初級 / Rhino, 3d-modelling, 3d, 3d-printing

            5.0

            (18)

            100+
            Update
            Update

            これからは「本物」の製品モデリング開始！ディテールな製品モデリング ＋ サーフェスモデリング技法で初心者から完璧に脱出！ 👌ㅤㅤㅤㅤもどかしいオンライン講義はNO！充実した授業資料とフィードバックで実力向上OK！ 👍🙆‍♂

            初級

            初級

            Rhino, 3d-modelling, 3d

            3Dモデリング入門のためのライノ（Rhino）「お役立ち情報」Part.2講義サムネイル

            3Dモデリング入門のためのライノ（Rhino）「お役立ち情報」Part.2

            soobaksee

            ￥15,203

            初級 / Rhino, 3d-modelling, 3d, 3d-printing

            5.0

            (18)

            100+
            Update
            Update
            デザイナーのスキルアップのためのLottieの完璧な理解講義サムネイル

            デザイナーのスキルアップのためのLottieの完璧な理解

            designbase

            ￥4,344

            初級 / Lottie, Web Design, JavaScript, Interactive Web

            4.7

            (12)

            100+

            これ以上Gif、Videoに頼る必要はありません。アフターエフェクトで制作したアニメーションをコードで出力し、JavaScriptでさまざまなインタラクションを実装する方法を学びます。あなたも魅力的なウェブサイトを作ることができます。

            初級

            初級

            Lottie, Web Design, JavaScript

            デザイナーのスキルアップのためのLottieの完璧な理解講義サムネイル

            デザイナーのスキルアップのためのLottieの完璧な理解

            designbase

            ￥4,344

            初級 / Lottie, Web Design, JavaScript, Interactive Web

            4.7

            (12)

            100+
            After Effects実務原理を求めて講義サムネイル

            After Effects実務原理を求めて

            strikeapple

            ￥12,669

            中級以上 / Motion Graphic, After Effects, Video Production, product design, UIUX

            After Effects中級以上、実務で活用できる技術を説明します。 CC2023で説明しますが、バージョンに関係なく基本原理を中心にしました。 ツール説明で時間を無駄にせず、能動的な研究ができる材料を用意しました。

            中級以上

            中級以上

            Motion Graphic, After Effects, Video Production

            After Effects実務原理を求めて講義サムネイル

            After Effects実務原理を求めて

            strikeapple

            ￥12,669

            中級以上 / Motion Graphic, After Effects, Video Production, product design, UIUX

            Three.js を使用して 3D の一人称視点 Web サイトを作成する講義サムネイル

            Three.js を使用して 3D の一人称視点 Web サイトを作成する

            studiomeal

            ￥11,221

            初級 / Three.js, Interactive Web, 3d, JavaScript, Portfolio

            このレッスンでは、デスクトップとモバイルの両方で動作する一人称 3D Web サイトを作成します。

            初級

            初級

            Three.js, Interactive Web, 3d

            Three.js を使用して 3D の一人称視点 Web サイトを作成する講義サムネイル

            Three.js を使用して 3D の一人称視点 Web サイトを作成する

            studiomeal

            ￥11,221

            初級 / Three.js, Interactive Web, 3d, JavaScript, Portfolio

            ブレンダー入門：UX/UIデザイナーのための3Dアイコンで学ぶブレンダー！講義サムネイル

            ブレンダー入門：UX/UIデザイナーのための3Dアイコンで学ぶブレンダー！

            BBoDX

            ￥8,507

            入門 / Blender, 3d-modelling, 3d, 3d-rendering

            5.0

            (13)

            200+

            ブレンダー入門コースです。 3Dアイコンを作って学ぶ入門者向けの3Dブレンダー講義です！

            入門

            入門

            Blender, 3d-modelling, 3d

            ブレンダー入門：UX/UIデザイナーのための3Dアイコンで学ぶブレンダー！講義サムネイル

            ブレンダー入門：UX/UIデザイナーのための3Dアイコンで学ぶブレンダー！

            BBoDX

            ￥8,507

            入門 / Blender, 3d-modelling, 3d, 3d-rendering

            5.0

            (13)

            200+

            無料