Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Web Development

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

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

  • designbase
3시간 만에 완강할 수 있는 강의 ⏰
Lottie
Web Design
JavaScript
Interactive Web

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

こんなことが学べます

  • アフターエフェクトで作業したアニメーションをLottieファイルに出力する方法

  • Lottieで出力したJSONファイルをJavaScript経由でWeb上でモーションを実装する方法

Airbnbで作成されたライブラリ
Lottieを始めましょう🎈

動く画像
作ってみますか?

Airbnbで作られたホットなライブラリ、 Lottieをご存知ですか?

ロティを介してさまざまなインタラクションを実装してみてください。

Lottieを使用すると、高品質のアニメーション
自由に作れます。

Lottieについて最初に紹介すると、動くアニメーションのデータ値をJSON形式で出力し、実際のコードでWebやアプリで適用できるようにする技術です。そのスキルを学ぶと、もうGif、Videoに頼らなくても動くアニメーションを実装できるようになります。

このレッスンでは、ロッティについて詳しく学ぶことができます。 Lotyを使うための環境を最初に設定し、アフターエフェクトで制作したアニメーションをBodymovinを介してコードに出力し、JavaScriptでさまざまなインタラクションを実装する方法を学びましょう。


Lottieで実装
アニメーション画像

そのリンクからlottieで作られたをもっと見ることができます。

例 - クリックしたときにロティアニメーションを実行する画面

例 - スクロールの度合いによるロティアニメーションの実行

例 - アフターエフェクトで製作して出力したアニメーション


誰が聞くといいですか?

止まっていることに
これ以上
満足できない
情熱マンレップデザイナー

私が働いた
アニメーションをコードに
Webに適用したい
能力型デザイナー

Lottie.js
早い時間で
身につけたい
Webパブリッシャー


こんにちは、
コーディングするプロダクトデザイナー
デザインベースです。

私はコーディングを行うプロダクトデザイナーです。デザイナーの観点からどのような部分が難しく、どの部分を実装したいのかについて非常に共感しています。

私たちが学ぶことは途方もないものではありません。難しく見せていなかっただけで、いざとすれば誰でもできることです。ロティを学び、魅力的なデザインをしましょう。

ちなみに、アフターエフェクトで感覚的なアニメーションを教える講義ではありません。作業したアニメーションをコードで出力する方法、Webに適用する方法、およびJavaScriptでどのようにインタラクションを実装するかに焦点を当てた講義です。短くて密度の高いコアだけを教えてくれます。


順番に学習してみてください!

合計9つの講座映像が用意されており、基礎と上級こうして2つのセクションに分かれます。
基礎では、Lottieコードを分析し、使いやすくHTML、CSS、JS、JSONファイルに分割する方法をまず学びます。 Lottieが基本的に提供する機能を使用し、操作方法を習得できます。

クリーンアップされていない複雑なコードをファイル別に分離する

Advancedでは、JavaScriptを使用してマウスオーバー、スクロール、クリックなど、さまざまなアクションへのインタラクションを実装できます。 GIFとは最大の違いです。フレームを好きなように直接コントロールできます。

直接JavaScriptでインタラクションコードを実装する


よくある質問💬

Q. ロティを学ぶと何がいいですか?

エペックで作業したアニメーションをWeb、アプリに適用できます。デザインのクオリティを高める要素です。

Q.コードを知らないデザイナーですが、役に立ちますか?

Lottieが何であるか、どのように機能するかという原則だけを知っていても、開発者とコラボレーションするときに楽しい作業をすることができます。ただし、基本的なHTML / CSSおよびJavaScriptの知識があれば、より豊富な活用が可能です。

Q. 講義を聞く前に準備すべきことはありますか?

講義に使用されるツールは、アフターエフェクト、ビジュアルスタジオ、イラストレーターです。そのツールの使い方を知ってみることをお勧めします。そしてJavaScriptの基礎知識を持っていなければ、高度な講座を難なく聞くことができます。

Q. サンプルファイルを提供しますか?

当然提供します。勉強することができる限り難しくないように講義に使用したサンプルファイルを提供します。

Q. アフターエフェクトの使い方やアニメーション制作法も教えてください。

アフターエフェクトで感覚的なアニメーションを教える講義ではありません。作業したアニメーションをコードで出力する方法、Webに適用する方法、およびJavaScriptでどのようにインタラクションを実装するかに焦点を当てた講義です。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • アニメーションとインタラクションに興味を持つ多くのUIデザイナー

  • Webコーディングの良いWebデザイナー

  • ロッティの使い方を習得したいWebパブリッシャー

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

  • HTML、CSSの基礎知識

  • Javascriptの基礎知識

  • After Effectの使い方

こんにちは
です。

35,124

受講生

386

受講レビュー

32

回答

4.8

講座評価

5

講座

디자인베이스는 누구나 쉽게 디자인을 배울 수 있도록 디자인 강좌를 만들고 있습니다.
저는 현업에서 UXUI 디자이너로 활동 중이며 입문자의 입장을 잘 알기 때문에 꼭 필요한 내용만 담아 강의를 제작합니다. 포토샵, 일러스트레이터뿐만 아니라 프로덕트 디자이너로서 알아야 할 다양한 툴과 코딩 지식을 갖추고 있습니다. 😊

 

- 인프런 수강생 3.1만 명 / 수강평 4.8점
- 실무 경력 8년차 디자이너 (스타트업 창업, 에이전시, 인하우스)
- 유튜브 구독자 8.1만 명

 

실무에서 바로 사용하실 수 있도록 정확한 내용과 양질의 강의를 제공하겠습니다. 📖

 

カリキュラム

全体

9件 ∙ (55分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

10件

4.6

10件の受講レビュー

  • bokiri99992826님의 프로필 이미지
    bokiri99992826

    受講レビュー 5

    平均評価 5.0

    5

    100% 受講後に作成

    This was a really helpful lecture for me. I'm a designer who doesn't know much about After Effects or scripts, but somehow! I feel like I can make it too. Thank you, teacher.

    • designbase
      知識共有者

      Thank you so much for the encouraging review! Hehehe

  • dicahyunse6566님의 프로필 이미지
    dicahyunse6566

    受講レビュー 1

    平均評価 5.0

    5

    44% 受講後に作成

    • gichulroh6344님의 프로필 이미지
      gichulroh6344

      受講レビュー 14

      平均評価 4.7

      5

      100% 受講後に作成

      It's a short lecture, but it has everything you need. You can use it a little more in practice. I started as a designer, then moved to publisher and front-end development, so it was easy to understand. However, UI designers need to know development concepts. It would be good to add a simple explanation in a PDF document or something.

      • mchoi2084님의 프로필 이미지
        mchoi2084

        受講レビュー 4

        平均評価 5.0

        5

        100% 受講後に作成

        It's pretty fast. I don't know if it's trimpassing. At least it's a sample.

        • tay님의 프로필 이미지
          tay

          受講レビュー 20

          平均評価 4.8

          5

          100% 受講後に作成

          After Effects and JavaScript!! This was a really fun lecture ㅠㅠ Thank you!!

          ¥4,032

          designbaseの他の講座

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

          似ている講座

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