강의

멘토링

커뮤니티

Programming

/

Web Development

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

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

難易度 初級

受講期間 12か月

  • designbase
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の使い方

こんにちは
です。

31,435

受講生

338

受講レビュー

32

回答

4.8

講座評価

4

講座

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

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

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

あなた(スタートアップ創業、エージェンシー、インハウス)- YouTube登録者数 8.1万人。実務ですぐに活用できるよう、正確な内容と質の高い講義を提供します。 📖

カリキュラム

全体

9件 ∙ (55分)

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

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

受講レビュー

全体

12件

4.7

12件の受講レビュー

  • gichulroh6344님의 프로필 이미지
    gichulroh6344

    受講レビュー 14

    平均評価 4.7

    5

    100% 受講後に作成

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

    • bokiri99992826님의 프로필 이미지
      bokiri99992826

      受講レビュー 5

      平均評価 5.0

      5

      100% 受講後に作成

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

      • designbase
        知識共有者

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

    • gore86375182님의 프로필 이미지
      gore86375182

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      • bsidekr7160님의 프로필 이미지
        bsidekr7160

        受講レビュー 1

        平均評価 5.0

        5

        67% 受講後に作成

        • dicahyunse6566님의 프로필 이미지
          dicahyunse6566

          受講レビュー 1

          平均評価 5.0

          5

          44% 受講後に作成

          ¥4,190

          designbaseの他の講座

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

          似ている講座

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