강의

N
챌린지

멘토링

N
클립

커뮤니티

Design

/

UI/UX

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

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

（4.8）受講レビュー 4件

受講生 133名

難易度 入門

受講期間 無制限

  • LottieFiles
Web Design
Web Design
Interactive Web
Interactive Web
Responsive Web
Responsive Web
Lottie
Lottie
Web Design
Web Design
Interactive Web
Interactive Web
Responsive Web
Responsive Web
Lottie
Lottie
Thumbnail

受講後に得られること

  • Framer内でLottieアニメーションを直接読み込み、制御する方法

  • クリック、スクロール、カーソル移動など様々なインタラクション実装法

  • 複雑なコードなしで感覚的なWebインタラクションを実装する実戦ノウハウ

Inflearnでのみ！
LottieFiles公式日本語化講座を受講して
Framerで感覚的なWebサイトを作ってみましょう！

2025-08-113.46.53-ezgif.com-video-to-webp-converter (1)

Framerで感覚的なWebサイトを作成していますか？

LottieFilesと一緒なら、より軽くて滑らかなアニメーションを簡単に追加できます！
複雑な設定なしでも、Framer内で直接Lottieアニメーションを読み込み、
インタラクションに応じて自然に動かす方法まで学んでみましょう。

今すぐ始めて、皆さんのWebプロジェクトにさらなる躍動感を加えてみてください！

CHECK 1

Lottieとは何でしょうか？

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

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

容量が少なく、どの機器でも動作可能で

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

CHECK 2

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

自由なサイズ調整

解像度の影響を受けずに
拡大や縮小ができます。

小さなサイズ
GIFやMP4のような形式と比べて
品質は同じでありながらはるかに小さいです。

インタラクティブ性
Lottieにはアニメーション要素が露出しており
インタラクションするように修正でき、スクロール、クリック、
ホバーなどのインタラクションに反応できます。

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

CHECK 3

世界最高のWebとアプリサービスが
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
Spoon - showcase card kr
gbike-kr card

その他の様々な活用ケースはこちらでご確認いただけます。

CHECK 4

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

[MD]언어설정_gif_800_5-9s

Inflearn講義は様々な音声言語と字幕をサポートしています。

受講画面下部で歯車アイコン（設定）を押した後、
お好みの音声言語と字幕を自由に選択してみてください。

CHECK 5

LottieFilesが認証する
修了証を受け取ってください！

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

Inflearn修了証は
マイページ > マイ学習 > 修了証メニューですぐに確認できます。

こんな方に
おすすめです

学習対象は
誰でしょう？

  • Framerでウェブサイトを制作しているデザイナー/企画者

  • ウェブサイトに洗練されたモーションを加えたいウェブデザイナー及びマーケター

  • ノーコードで高度なインタラクションを実装したいフロントエンド入門者

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

  • 基本的なFramerの使用経験（フレーム作成、セクション構成など）

  • Figmaの基本機能に対する理解

  • 初心者でも映像の流れに沿って十分に実習できるよう構成されています。

こんにちは
です。

1,860

受講生

71

受講レビュー

4.9

講座評価

4

講座

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

カリキュラム

全体

9件 ∙ (31分)

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

受講レビュー

全体

4件

4.8

4件の受講レビュー

  • yesitsme님의 프로필 이미지
    yesitsme

    受講レビュー 4

    ∙

    平均評価 4.8

    5

    33% 受講後に作成

    • dbsrud0065750님의 프로필 이미지
      dbsrud0065750

      受講レビュー 1

      ∙

      平均評価 4.0

      4

      100% 受講後に作成

      簡単で有益な講義です！韓国語提供ありがとうございます😊😊

      • jjhgwx님의 프로필 이미지
        jjhgwx

        受講レビュー 644

        ∙

        平均評価 4.9

        5

        33% 受講後に作成

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

        • ninety25296님의 프로필 이미지
          ninety25296

          受講レビュー 145

          ∙

          平均評価 5.0

          5

          100% 受講後に作成

          講義をよく聞かせていただきました。ありがとうございます

          無料

          LottieFilesの他の講座

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

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

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

          LottieFiles

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

          입문

          입문

          Motion Graphic, Web Design, Lottie

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

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

          LottieFiles

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

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

          LottieFiles

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

          입문

          입문

          After Effects, Lottie, 3d

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

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

          LottieFiles

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

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

          LottieFiles

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

          입문

          입문

          Motion Graphic, Animation, Figma

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

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

          LottieFiles

          似ている講座

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

          Figma デザインを学びながら作成する [BASIC-2025 トレンド更新]강의 썸네일

          Figma デザインを学びながら作成する [BASIC-2025 トレンド更新]

          agilelabs

          まだ新しいデザインツール Figma を検討中ですか? 簡単に、そして素早く、一つずつ 따라하다 보면 어느새 나도 피그마 전문가!

          입문

          입문

          Figma, Web Design, Mobile App Design

          Figma デザインを学びながら作成する [BASIC-2025 トレンド更新]강의 썸네일

          Figma デザインを学びながら作成する [BASIC-2025 トレンド更新]

          agilelabs

          Midjourney秘訣クラス、現職AIデザイン専門家のイメージプロンプトエンジニアリング核心整理강의 썸네일

          Midjourney秘訣クラス、現職AIデザイン専門家のイメージプロンプトエンジニアリング核心整理

          Masocampus

          画像生成AIの代表的なツール、ミッドジャーニー！ 基本的な使い方から、実際のデザインプロジェクト実習を通して実務への応用まで、一度に！

          입문

          입문

          Web Design, Character Design, Mobile App Design

          Midjourney秘訣クラス、現職AIデザイン専門家のイメージプロンプトエンジニアリング核心整理강의 썸네일

          Midjourney秘訣クラス、現職AIデザイン専門家のイメージプロンプトエンジニアリング核心整理

          Masocampus

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

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

          LottieFiles

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

          입문

          입문

          Motion Graphic, Web Design, Lottie

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

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

          LottieFiles

          バニラ JavaScript & Tailwind CSS강의 썸네일

          バニラ JavaScript & Tailwind CSS

          Michael Kwon

          AI活用とコンポーネント中心UI制作で学ぶ実務型Web UI開発、 デザイナー＋開発者必須コース！

          초급

          초급

          JavaScript, vanilla-javascript, frontend

          バニラ JavaScript & Tailwind CSS강의 썸네일

          バニラ JavaScript & Tailwind CSS

          Michael Kwon

          GSAPのScrollTriggerを活用したポートフォリオ制作강의 썸네일

          GSAPのScrollTriggerを活用したポートフォリオ制作

          jyoung

          GSAPのScrollTriggerを活用して、スクロールに反応するインタラクティブなレスポンシブウェブポートフォリオを作ってみましょう！

          초급

          초급

          HTML/CSS, scrolltrigger, gsap

          GSAPのScrollTriggerを活用したポートフォリオ制作강의 썸네일

          GSAPのScrollTriggerを活用したポートフォリオ制作

          jyoung

          物語で学ぶCSS강의 썸네일

          物語で学ぶCSS

          sarc

          HTMLで作ったカフェホームページをCSSで美しく装飾する実戦プロジェクト講義です。 色彩、レイアウト、タイポグラフィからFlexbox、Grid、アニメーション、レスポンシブデザインまでCSSのすべての基礎をミンジとコード先生のストーリーを追いながら自然に学ぶことができます。 4時間の学習で初心者もプロフェッショナルなWebデザインを完成させることができます。

          입문

          입문

          css, Responsive Web, Flex

          物語で学ぶCSS강의 썸네일

          物語で学ぶCSS

          sarc

          映画前売りサイトを作る：デザイン編강의 썸네일

          映画前売りサイトを作る：デザイン編

          webstoryboy

          ウェブ標準とレスポンシブサイト作り講義によく従ってきたら今は実戦練習番！映画前売サイト制作をデザイン編とコーディング編に分けて学習します。

          초급

          초급

          Photoshop, Responsive Web

          映画前売りサイトを作る：デザイン編강의 썸네일

          映画前売りサイトを作る：デザイン編

          webstoryboy

          Canva（キャンバ）で私の商品詳細ページをデザインする강의 썸네일

          Canva（キャンバ）で私の商品詳細ページをデザインする

          codingai

          この講義は、人気のデザインツールであるCanva（キャンバ）を使用して、オンライン講座、ショッピングモールなどで使用される商品詳細ページをデザインする方法を教えてくれる入門講義です。

          입문

          입문

          canva, Web Design

          Canva（キャンバ）で私の商品詳細ページをデザインする강의 썸네일

          Canva（キャンバ）で私の商品詳細ページをデザインする

          codingai