タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴と使い方など Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。 そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。 今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。 Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非
Create and ship animations to your products faster. Bring your websites and apps to life with the simplest editor for Lottie animations.
制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するために検証・実装したSVGとWebGLの技術ご紹介します。SVGやWebGLを活用したビジュアル表現に興味のあるエンジニアはもちろん、ウェブ技術を使ってどのような表現ができるのか知っておきたいディレクター・デザイナーの方も是非ご覧ください。 ▼ 特設サイト『2030年のありたい姿』 「人と機械の共創」を魅力的なアニメーションで描きたい 『2030年のありたい姿』の重要なキーワードが「人と機械が共創する社会」でした。特設サイトではこのビジョンを広く一般の方向けに伝えるため、株式
「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方までを紹介しました。本記事では、Lottieアニメーションの実装方法について紹介します。 Lottieの組み込みはプラットフォームに応じたさまざまな実装方法が用意されていますが、一般的なウェブの方法を例に紹介します。実装編の前編となる本記事では、手軽に組み込むことができるLottie-Playerを使用して実装します。 iOS、Androidアプリケーション等のそのほかの実装方法は公式ドキュメントを参照ください。 アニメーションの実装 ウェブ向けの実装方法は大きく2パターンあります。HTMLメインの方法と、JavaScriptメインで実装する方法で
アニメーション実装の選択肢のひとつになると思う。Lottieを試してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイト制作時に今は当たり前のようにおしゃれなアニメーションがついてる時代がきましたね。 CSS3で実装できることも増え、あんまりゴリゴリJavaScriptでってことは減ってきてる気がします（もちろん必要なときはいっぱいあるのでケースバイケースですが）。 制作者としては、意図した通りのアニメーションをつくりたい、それもなるべく手間をかけずに、という思いがあるのではないでしょうか。 そんな悩みを解決してくれるかもしれない「Lottie」を試してみました！ ※今回、After Effectsの使い方はありません、ごめんね。JavaScript側の組み込み方の説明です。 Lottieとは Airbnb制作のiOSやAndroidにも対応したアニメーション用のライブラリです。Adobe After Effectsで作ったアニメーションを、そのままWebにもってこれるやつらしい。 一部使えない機能も
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 画質の劣化を伴わないLottieによるアニメーションの導入は、UI改善・コンテンツの没入感の形成・リッチな体験を提供する効果が期待できます。 本記事ではLottieの概要から、まずはデザインツール「Figma」を使ってお手軽にLottieを作る方法を紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する Lottieとは ベクターとラスター まず、画像形式について少し整理しておきましょう。画像形式はベクターとラスターの2種類に分けられます。ベクターとラスターの違いについては記事『SVGで始めるマイクロインタラクション入門』で解説していますが、簡単にいうと拡大しても高い解像度を保ちボケないのがベクター画像、ボケるのがラスター画
Includes 36,600+ assets, full access to app, and upgrades for one year. Price will increase as library grows.
ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説 こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。 After Effectsなどで作ったリッチなアニメーションを、ウェブサイトやアプリケーションに実装できる「Lottie（ロッティー）アニメーション」をご存知ですか？ Lottieはどれだけ拡大しても高画質で、実装も簡単なアニメーションライブラリです。ウェブ制作にLottieを取り入れるメリットは多く、GoogleやMicrosoftといった大手企業も活用しているほどです。 わたしたちneccoも2020年に導入し、これまでさまざまなプロジェクトでLottieを活用してきました。 この記事では、Lottieの基本から実際の活用事例、作成方法までご紹介します。作成時の注意点もまとめているので、Lo
【svgアニメーション】After Effectsで制作したアニメーションをWebで使う方法（Lottie） | PRAWN COCKTAIL(プロウンカクテル)
この記事の目標「After Effects」と「Lottie」というアニメーションライブラリを利用してWebアニメーションを制作してみたいと思います。 試しに作ってみたものがこちらです。 このように「After Effects」で制作したアニメーションをWeb上に表示させるまでを今回の記事の目標にします。 流れとしては以下のようになります。 「After Effects」でアニメーションを制作。「Bodymovin」を使いJSON形式で書き出す。「Lottie」を使って実装する。 BodymovinをインストールまずはAfter Effectsのプラグインである「Bodymovin」をインストールします。 Adobeからダウンロードできます。 のはずが上手くいかなかったので以下の方法でダウンロードしました。 LottieのGitHubからダウンロードします。 赤枠のボタンをクリックするとツ
これはno plan inc.の Advent Calendar 2023の11日目の記事です。 どもー、no plan inc.のおかむーです。 LottieというアニメーションファイルをSTUDIOのノーコードで実装してみたので、 今回も知見を共有できればと思います！！ この記事でわかること LottieアニメーションをSTUDIOで動かす方法がわかります 先に結論 STUDIO(ノーコード)でこんな感じのパリピなアニメーションが爆速で入れられます 中央上(ペンギンさん) サイド下(踊っている人々) Lottieとは Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大
*:last-child]:mb-0" style="background-image: linear-gradient(0deg, #eee 0%, #fff 100%);"> Webデザイナーのための Lottieアニメーション実装講座
Adobe XDの2021年最後のアップデートとして、「ビデオの再生」と「Lottieの再生」が登場しました。MP4形式の動画と軽量なアニメーションを再生できるLottieファイルがAdobe XDで扱えるようになり、より没入感のあるプロトタイプが作成できるようになりました。 今回の記事では、これらの機能の使い方から活用方法、注意点を紹介します。動画やモーションをXDのプロトタイプに組み込むことで、開発チームとデザイナーの認識合わせに役立つはずです。 動画やモーションが入った状態のデザインを早めに確認しておきたいというデザイナーはもちろん、プロジェクトの早い段階で方向性を共有したいというディレクターもぜひご覧ください。また、Lottieファイルの対応によって実装段階でのアニメーションの再現が容易になるため、エンジニアにも見逃せない機能となっています。 ビデオの再生の使い方 ビデオの再生はそ
lottie-react-nativeがAirbnbからコミュニティ主導になった影響とこれからの動き - KitchHike Tech Blog
Airbnb が React Native からネイティブアプリへ方針転換することを発表してから1年が経ちました。lottie-react-native の開発は Airbnb 社からコミュニティ中心に移り、継続されています。この記事では lottie-react-native 開発コミュニティの変遷と現状、そしてこれからの動きを紹介します。 はじめに キッチハイクエンジニアのタクです。lottie-react-native という Airbnb 製のアニメーション表示ライブラリを導入する過程で、issue や Pull Request を通してコミュニティの動きを知る機会がありました。それがきっかけで、ライブラリの内部実装や仕組み以外も理解することが、多角的な視点で実装することに繋がるのではないかと思うようになりました。 Airbnb による Lottie のリリース、React Nat
Lottie London ロッティロンドン / アイライナー【ルックファンタスティック ビューティーボックス購入品】 - MICHIコスメ～旅行とハンドメイドも～
投稿日:2021/01/17 最終更新日:2021/01/17 こんばんは～！今日は久々のHIT商品！ 安いし、日本のプチプラに負けず劣らず。 （ブログ表紙の画像、間違えてリトルロンドンにしてしまいました） ★★★ →骨格ストレート情報のTwitterはこちら →骨格タイプ別のお洋服紹介はこちら ★★★ Lottie London ロッティロンドン / アイライナー ふつう ロッティロンドンというのは、アイシャドウが有名なブランドだそうです。 アフィリエイトリンクではないです。 どの商品もプチプラで、買いやすいかな～と思います。 商品について 目もとをドラマティックに際立たせるLottie London「AMトゥPM」収納式アイライナー。肌の上でなめらかに伸びる、柔らかくしなやかなフォーミュラ。赤みや荒れを引き起こす引っ掛かりや不快感がありません。昼間のスタイルにも、パーティー向けのスモー
はじめに コードを自分で書かずにアニメーションが実装できる、とても便利なライブラリがあることをご存知でしょうか？ Lottie(ロッティー) 自分で一から書くとなると難易度の高いイメージがあるアニメーション実装が、「Lottie」を利用することで簡単にできます。 まず「Lottie」(公式サイト：https://airbnb.design/lottie/)とは、Airbnbが開発したアニメーションライブラリです。 CSSやJavaScriptを自分で書くことなく、簡単にアニメーションが実装できるので、コーディングが苦手なデザイナーの方でも気軽に利用できて嬉しいですね。 LottieはAdobe MAX 2020のセッションでも紹介され、いまクリエイター界隈でホットな話題となっています。 この記事ではLottieを使って、簡単にアニメーションをWeb上に表示するまでの流れをまとめました。 今
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 前回の記事では、Lottieの概要から、Figmaを使った作り方、LottieFilesを用いた書き出し方法を紹介しました。 本記事ではAdobe After Effectsを使ったLottieの作成方法から書き出し方、表示確認までを紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する 作り方 - Bodymovinで書き出し After Effectsでアニメーションを作成し、After Effectsの拡張機能「Bodymovin」を使って書き出す方法と、「LottieFiles」で書き出す2種類の方法を紹介します。 ▼Lottieの作成・書き出し・実装までの一連の流れ 完成品のサンプルを別ウインドウで開く アニメーシ
Lottie（公式サイト：https://airbnb.design/lottie/）とは、民泊マッチングサービスAirbnbが開発したアニメーションライブラリです。 Webサイトはもちろん、iOSやAndroidのアプリにも組み込むことができ、従来の方法よりも動作が軽く、簡単に実装することができます。 Lottieでどんなことができるのか、まずは下の作例をご覧ください。 【作例】 マウスオーバーでアイコンが動きます ↓ このように、マウスアクションなどに連動してアニメーションを再生することができます。 この記事では、Lottieの魅力と、実際に作例のメールアイコンを作成し、Webサイトに実装するまで一連の流れをご説明します。 Adobe After Effectの使い方については、詳しく画像付きで解説します。また、HTML・Javascriptは、サンプルコードを記載しています。 ぜひこ
gsapのScrollTriggerプラグインとlottie-reactを利用したスクロールアニメーションの実装について｜nap5
実装のポイントとしては2点あります。 1つ目はサイズをレスポンシブに調節することです。 emotionのcss文字列内挿でクラス指定できるのがハンディです。 // https://lottiereact.com/hooks/useLottie#params const {goToAndStop, animationContainerRef, View, animationItem} = useLottie( { animationData, loop: false, autoplay: false, className: css` width: 400px; height: 400px; @media (max-width: 768px) { width: 300px; height: 300px; } `, }, {} ); もう一つはScrollTriggerのハンドリングをPCとSP
こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。 「ウェブサイトで使うアイコン・イラストを動かしたい」 「Lottieを作ってみたいけど、After Effectsはむずかしそう」 そう思っている方は多いのではないでしょうか？ これまでLottieといえばAfter Effectsで作るのが主流でしたが、いまはFigmaのプロトタイプとプラグインを使って作成できます！ この記事では、Figmaを使ったLottieの作成方法を解説します。プロトタイプ機能を使ったことがない人でも簡単に作れるので、ぜひチャレンジしてみてください。 FigmaでLottieを作るメリット Lottieは軽量かつ美しいアニメーションを手軽に実装できるライブラリです。FigmaでLottieを作成することで、次のようなメリットがあります。 After Effectsを使えなくて
アニメーションを使ってWebサイト制作！Lottieを使うメリットとプロジェクトの進め方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、くりちゃんです。 いつもはThree.jsについての記事を書いているのですが、今日はちょっと時間がないので、別の話を書きたいと思います。 先日LottieとCSSアニメーションを組み合わせたゴリゴリに動く特設サイトをリリースしました🎉🎉🎉🎉🎉 頑張ってデザイナーさんにLottieのアニメーションを用意していただいて、ぼくはそれを発火させただけなので正直ほぼ何もやっていなのですが、おかげさまでクライアント様・社内で良い評価をいただけたみたいです！ LIGでは一週間に一回、エンジニアで今週何をしたかなどの報告をする共有会があるのですが、そこで「デザイナーとどのように進めていったのか？」「どういうアニメーションだったらLottieを使うのか？」と質問をいただいたので、エンジニア目線で答えていきたいと思います。 まずLottieとは ✋ Lottieはアニメーションライブラリ
01AfterEffectsでパスアニメーションを作る この記事は、「デザイン女子部 Advent Calendar 2020」の23日目の記事です！ 今回は、SVGのパスアニメーションを簡単に実装できる、BodymovinとLottie.jsの使い方を簡単に紹介したいと思います。まずは、AfterEffects（以下、AE）を使ってパスアニメーションを作りましょう。AEの使い方については、ここでは詳しい説明は省略します（大変長くなってしまうので…。）ただ、AEを使ってどんなことが出来るのか、少しでもイメージがわくように、私が実際に作業した事例を基に、おおざっぱに紹介しちゃいますね！！！ AfterEffectsの編集画面 AfterEffectsの編集画面はこんな感じ。初めて開く人は何が何やらわからずびっくりしちゃうかもしれませんね。 ペンツールや選択ツール、回転ツールなどを切り替えるツ
実はLottieアニメーション自体は結構昔から存在しているのですが、プロトタイピングやデザインツールとして（特に日本で）多く利用されているAdobe XDでサポートされたことにより、Lottieが再注目されているようなので、Lottieアニメーションの作り方から実装方法までを深掘りしてみたいと思います。 Lottieアニメーションとは？Lottieとは？Lottieは、2017年にAirbnbが発表し、json形式のファイルとして書き出したベクターアニメーションを、モバイルやWebでネイティブにレンダリングすることができるアニメーションライブラリです。 とはいえ、Web制作におけるアニメーションの実装は、すでにいろいろな方法があります。 連番ビットマップ画像のアニメーション（GIF、APNG、WebP） 動画ファイルを使ったアニメーション CSSアニメーション SVGアニメーション Can
Adobe After Effects + Lottie (Bodymovin) でモーションをつける - MIYOUWI : BLOG :
アイコンをクリックした時にちょっとしたモーションが入っていることによって、使っているデジタルツールに親近感を持つことはないですか？ ちょっとほっこり 今回は、複雑な計算式なしに、Adobe After Effects を使って描画したモーションを、Lottie (Bodymovin) を使って簡単に実装できる方法を紹介します。 １）Lottieとは Lottie は、Airbnbから登場したWeb、iOS、Android、React Native、Windows 対応のモバイルライブラリです。Adobe After Effectsで表示できるアニメーションをリアルタイムでレンダリングし、簡単に複雑な動きをするアニメーションを作成することができます。Lottieは、Bodymovinというオープンソースライブラリを使い、After Effects で作ったSVGアニメーションデータを拡張機能
PLEASE NOTE: These often sell out very fast. If you manage to get one you will receive a confirmation email. If you don’t receive a confirmation email you unfortunately didn’t get one. Don’t worry there will be another batch soon! As always these are strictly one per person, If you buy more than one your order will be refunded. ( Also, I often receive a lot of emails and DM’s after these sell out.
GitHub - LottieFiles/dotlottie-rs: A universal, high-performance Lottie and dotLottie player built with Rust. Offers smooth rendering across platforms, low resource consumption, and extensive compatibility. Features FFI bindings for Kotlin, Swift, and WAS
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
これは lottieで作ったアニメーションをNuxt.jsのページローディングで使う方法。 まずlottieで読み込むアニメーションファイルを作成。 ここでは、loading.jsonというファイルで用意した。 保存先はassets/animation/loading.json https://lottiefiles.com/ (サイトに様々なexampleが用意されているので参考に） player installation lottieをwebで使うためにlottie-webというnpmをinstallする。 see https://github.com/airbnb/lottie-web with npm npm install lottie-web with yarn yarn add lottie-web loading animation component jsonを読みこむコ
Lottie Editor: Edit and customize Lottie animations - LottieFiles
Our web-based editor allows you to edit, tweak and personalize your Lottie. Making changes on the go has never been this easy and fun.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
Lottielab | Create and Edit Lottie Animations
制作事例：Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ - ICS MEDIA
![なぜGoogleは“あなたの不満”を無視できるのか | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/df1fbcfb853756284b40841e70fc320268975ba8/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2024%2F04%2F04Apr2024.jpg)
最新版！ Lottieアニメーションの実装方法 - Lottie-Player編 - ICS MEDIA
最新版！ Lottieアニメーションの作り方 - Figma編 - ICS MEDIA
Shape - 36000+ Icons & Illustrations to SVG, Lottie, React.
ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説 - necco note | necco inc.
【パリピ注意】LottieというアニメーションファイルをSTUDIOのノーコードで実装してみた - Qiita
WebデザイナーのためのLottieアニメーション実装講座 | C5log
Adobe XD 待望の動画再生機能が登場！ビデオの再生とLottieの再生の使い方 - ICS MEDIA
【デザイナー向け】コードを書く必要なし！After EffectsとLottieでアニメーション実装！
最新版！ Lottieアニメーションの作り方 - After Effects編 - ICS MEDIA
Airbnbが開発したアニメーションライブラリ「Lottie(ロッティー)」の使い方と魅力を解説！
FigmaでLottieアニメーションを作ってみよう！作成方法やメリット、注意点を解説 - necco note | necco inc.
AE × Bodymovin × Lottie.jsでSVGアニメーション！ | ノマクリ
Lottieアニメーションについて深堀りしてみる｜けんじ
Colour Palette — Lottie Canto
Nuxt.jsでLottieアニメーションをページローディングで使う - Qiita
news.yahoo.co.jp
wagadeshik.hatenablog.com
bokuraku.com
ginzamag.com
ifuwari.com
day-mitama777.hatenablog.jp