강의

N
챌린지

멘토링

N
클립

로드맵

Design

/

UI/UX

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

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

（5.0）受講レビュー 6件

受講生 348名

애프터이펙트
Lottie
그래픽디자인
모션그래픽
After Effects
3d
Thumbnail

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

こんなことが学べます

  • 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（フェイク立体感）演出法

ワークスペースを活用したコラボレーションからハンドオフまで

で
要点だけを集めてたった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 Effectの基礎知識が必要です。

こんにちは
です。

1,347

受講生

48

受講レビュー

4.9

講座評価

4

講座

로티파일즈(LottieFiles)는 전 세계 디자이너와 개발자들이 손쉽게 애니메이션을 만들고, 관리하고,적용할 수 있도록 도와주는 플랫폼이에요. Lottie 포맷 기반의 애니메이션을 웹, 앱, 프리젠테이션 등 다양한 환경에 빠르게 적용할 수 있으며,효율적인 팀 협업과 모션 디자인 워크플로우 향상을 위한 다양한 도구를 제공합니다.

共同知識共有者

カリキュラム

全体

8件 ∙ (40分)

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

受講レビュー

全体

6件

5.0

6件の受講レビュー

  • LottieFiles님의 프로필 이미지
    LottieFiles

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    38% 受講後に作成

    • 전윤서님의 프로필 이미지
      전윤서

      受講レビュー 9

      ∙

      平均評価 5.0

      5

      38% 受講後に作成

      무료로 좋은 강의 감사합니다.

      • Jang Jaehoon님의 프로필 이미지
        Jang Jaehoon

        受講レビュー 597

        ∙

        平均評価 4.9

        5

        50% 受講後に作成

        좋은 강의 감사합니다!

        • 남정이님의 프로필 이미지
          남정이

          受講レビュー 2

          ∙

          平均評価 5.0

          5

          50% 受講後に作成

          • dmax님의 프로필 이미지
            dmax

            受講レビュー 124

            ∙

            平均評価 5.0

            5

            100% 受講後に作成

            고맙습니다^^

            無料

            LottieFilesの他の講座

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

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)

            LottieFiles

            글로벌 모션디자인 플랫폼 LottieFiles의 공식 첫 한글화 강의, 지금 인프런에서 단독으로 만나보세요! 강의를 다 수강하면 LottieFiles 공식 수료증을 받아보실 수 있어요.

            입문

            입문

            웹 디자인, 인터랙티브 웹, 반응형 웹

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)

            LottieFiles

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)

            LottieFiles

            글로벌 모션디자인 플랫폼 LottieFiles의 공식 첫 한글화 강의, 지금 인프런에서 단독으로 만나보세요. 강의를 다 수강하면 LottieFiles 공식 수료증을 받아보실 수 있어요.

            입문

            입문

            모션그래픽, 웹 디자인, Lottie

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)

            LottieFiles

            [LottieFiles 공식] Figma to Lottie: Figma에서 만드는 모션 애니메이션 (수료증 발급)강의 썸네일

            [LottieFiles 공식] Figma to Lottie: Figma에서 만드는 모션 애니메이션 (수료증 발급)

            LottieFiles

            글로벌 모션디자인 플랫폼 LottieFiles의 공식 첫 한글화 강의, 지금 인프런에서 단독으로 만나보세요! 강의를 다 수강하면 LottieFiles 공식 수료증을 받아보실 수 있어요.

            입문

            입문

            모션그래픽, 애니메이션, Figma

            [LottieFiles 공식] Figma to Lottie: Figma에서 만드는 모션 애니메이션 (수료증 발급)강의 썸네일

            [LottieFiles 공식] Figma to Lottie: Figma에서 만드는 모션 애니메이션 (수료증 발급)

            LottieFiles

            似ている講座

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

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)

            LottieFiles

            글로벌 모션디자인 플랫폼 LottieFiles의 공식 첫 한글화 강의, 지금 인프런에서 단독으로 만나보세요. 강의를 다 수강하면 LottieFiles 공식 수료증을 받아보실 수 있어요.

            입문

            입문

            모션그래픽, 웹 디자인, Lottie

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Webflow : Lottie로 완성되는 인터렉티브 웹사이트 (수료증 발급)

            LottieFiles

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.1강의 썸네일

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.1

            SOO

            입문하기 어려운 3D 모델링..? 막혀서 진행이 안되는 모델링..? 첫 입문을 위한 '꿀팁' 라이노면 실력향상 OK! 답답하고 피드백 없는 수업..? 👉 온라인 강의에 피드백을 더하다! (고민하지 말고 질문하세요!)👍🙆‍♀

            입문

            입문

            Rhino, 3d-modelling, 3d

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.1강의 썸네일

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.1

            SOO

            After Effects 실무 원리를 찾아서강의 썸네일

            After Effects 실무 원리를 찾아서

            strikeapple

            After Effects 중급 이상, 실무에서 활용할 수 있는 기술을 설명합니다. CC2023으로 설명하지만 버전에 상관없이 기본 원리를 위주로 했습니다. 도구 설명으로 시간을 버리지 말고 능동적인 연구를 할 수 있는 꺼리를 만들어 놓았습니다.

            중급이상

            중급이상

            모션그래픽, After Effects, 영상제작

            After Effects 실무 원리를 찾아서강의 썸네일

            After Effects 실무 원리를 찾아서

            strikeapple

            Three.js로 1인칭 3D 웹사이트 만들기강의 썸네일

            Three.js로 1인칭 3D 웹사이트 만들기

            1분코딩

            데스크탑과 모바일에서 모두 동작하는 1인칭 3D 웹사이트를 만들어 보는 강의입니다.

            초급

            초급

            인터랙티브 웹, Three.js, 3d

            Three.js로 1인칭 3D 웹사이트 만들기강의 썸네일

            Three.js로 1인칭 3D 웹사이트 만들기

            1분코딩

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.2강의 썸네일

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.2

            SOO

            이제부터 '진짜' 제품 모델링 시작! 디테일한 제품 모델링 + 서피스 모델링 기법이면 초급자 완벽 탈출! 👌ㅤㅤㅤㅤ답답한 온라인 강의는 NO! 알찬 수업자료, 피드백으로 실력향상 OK! 👍🙆‍♂

            초급

            초급

            Rhino, 3d-modelling, 3d

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.2강의 썸네일

            3D 모델링 입문을 위한 라이노(Rhino) '꿀팁' Part.2

            SOO

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)

            LottieFiles

            글로벌 모션디자인 플랫폼 LottieFiles의 공식 첫 한글화 강의, 지금 인프런에서 단독으로 만나보세요! 강의를 다 수강하면 LottieFiles 공식 수료증을 받아보실 수 있어요.

            입문

            입문

            웹 디자인, 인터랙티브 웹, 반응형 웹

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)강의 썸네일

            [LottieFiles 공식] LottieFiles for Framer : Framer에서 Lottie 애니메이션 200% 활용하기 (수료증 발급)

            LottieFiles

            (English) Build a First-person View 3D Website with Three.js강의 썸네일

            (English) Build a First-person View 3D Website with Three.js

            1분코딩

            In this lesson, you'll create a first-person 3D website that works on both desktop and mobile.

            초급

            초급

            Three.js, 인터랙티브 웹, 3d

            (English) Build a First-person View 3D Website with Three.js강의 썸네일

            (English) Build a First-person View 3D Website with Three.js

            1분코딩

            블렌더 입문 : UX/UI 디자이너를 위한 3D 아이콘으로 배우는 블렌더!강의 썸네일

            블렌더 입문 : UX/UI 디자이너를 위한 3D 아이콘으로 배우는 블렌더!

            BBoDX

            블렌더 입문 과정입니다. 3D 아이콘을 만들며 배우는 입문자용 3D 블렌더 강의입니다!

            입문

            입문

            Blender, 3d-modelling, 3d

            블렌더 입문 : UX/UI 디자이너를 위한 3D 아이콘으로 배우는 블렌더!강의 썸네일

            블렌더 입문 : UX/UI 디자이너를 위한 3D 아이콘으로 배우는 블렌더!

            BBoDX

            디자이너의 스킬업을 위한 Lottie 완벽 이해하기강의 썸네일

            디자이너의 스킬업을 위한 Lottie 완벽 이해하기

            디자인베이스

            더 이상 Gif, Video에 의존하지 않아도 됩니다. 에프터이펙트에서 제작한 애니메이션을 코드로 출력해서 자바스크립트를 통해 다양한 인터렉션을 구현하는 방법을 배워볼게요. 여러분도 매력적인 웹사이트를 만들 수 있습니다.

            초급

            초급

            Lottie, 웹 디자인, JavaScript

            디자이너의 스킬업을 위한 Lottie 완벽 이해하기강의 썸네일

            디자이너의 스킬업을 위한 Lottie 완벽 이해하기

            디자인베이스