inflearn logo
知識共有
inflearn logo

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

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

難易度 初級

受講期間 12か月

Lottie
Lottie
Web Design
Web Design
JavaScript
JavaScript
Interactive Web
Interactive Web
Lottie
Lottie
Web Design
Web Design
JavaScript
JavaScript
Interactive Web
Interactive Web

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

4.7

5.0

Gichul Roh

100% 受講後に作成

短い講義ですが、あるのはすべてありますね。実務ではもう少し活用して書けばいいですよ。低夜デザイナーで始まったパブリッシャー、フロントアンド開発に移り、理解が容易になりました。しかし、UIデザイナーは知っておくべき開発コンセプトがあるはずです。 PDF文書のようなもので簡単な説明のようなものも添削すれば大丈夫そうです。

5.0

힘!

100% 受講後に作成

私にとって本当に役に立つ講義でした。 エペックもスクリプトもよく分からないデザイナーなのになんだか!私も作れるだろうな~という感じを受けます。先生ありがとうございます。

5.0

날아라못난

100% 受講後に作成

かなり速いですね、トリムパスするのかわかりませんが、ㅜ

受講後に得られること

  • アフターエフェクトで作業したアニメーションを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の使い方

こんにちは
designbaseです。

31,608

受講生

347

受講レビュー

32

回答

4.8

講座評価

4

講座

デザインベースは、誰もが簡単にデザインを学べるようにデザイン講座を制作しています。
私は現職でUXUIデザイナーとして活動しており、初心者の立場をよく理解しているため、本当に必要な内容だけを盛り込んで講義を制作しています。フォトショップやイラストレーターだけでなく、プロダクトデザイナーとして知っておくべき多様なツールやコーディングの知識も備えています。 😊

 

- インフロン受講生 3.1万人 / 受講評価 4.8点
- 実務経歴 8年目のデザイナー (スタートアップ創業、エージェンシー、インハウス)
- YouTube登録者 12.9万人

 

実務ですぐに活用できるよう、正確な内容と質の高い講義を提供いたします。 📖

 

 

もっと見る

受講レビュー

全体

12件

4.7

12件の受講レビュー

  • tay님의 프로필 이미지
    tay

    受講レビュー 20

    ∙

    平均評価 4.8

    5

    100% 受講後に作成

    エペックとJavaScript!本当にとても面白い講義でしたㅠㅠありがとうございます!

    • bokiri99992826님의 프로필 이미지
      bokiri99992826

      受講レビュー 5

      ∙

      平均評価 5.0

      5

      100% 受講後に作成

      私にとって本当に役に立つ講義でした。 エペックもスクリプトもよく分からないデザイナーなのになんだか!私も作れるだろうな~という感じを受けます。先生ありがとうございます。

      • designbase
        知識共有者

        力になるスカンピョンありがとうございます!ㅎㅎㅎ

    • mchoi2084님의 프로필 이미지
      mchoi2084

      受講レビュー 5

      ∙

      平均評価 5.0

      5

      100% 受講後に作成

      かなり速いですね、トリムパスするのかわかりませんが、ㅜ

      • gichulroh6344님의 프로필 이미지
        gichulroh6344

        受講レビュー 14

        ∙

        平均評価 4.7

        5

        100% 受講後に作成

        短い講義ですが、あるのはすべてありますね。実務ではもう少し活用して書けばいいですよ。低夜デザイナーで始まったパブリッシャー、フロントアンド開発に移り、理解が容易になりました。しかし、UIデザイナーは知っておくべき開発コンセプトがあるはずです。 PDF文書のようなもので簡単な説明のようなものも添削すれば大丈夫そうです。

        • in0kim4711님의 프로필 이미지
          in0kim4711

          受講レビュー 1

          ∙

          平均評価 5.0

          5

          89% 受講後に作成

          ロッティをどのように使用するのかという概念を知りたかったのですが、Overviewを見ると、ぴったりの講座だと思います。

          designbaseの他の講座

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

          似ている講座

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

          新規会員登録で25%OFF

          ¥3,147

          25%

          ¥4,197