FigmaでLottieアニメーションを作ってみよう！作成方法やメリット、注意点を解説 - necco note | necco inc.
こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。 「ウェブサイトで使うアイコン・イラストを動かしたい」 「Lottieを作ってみたいけど、After Effectsはむずかしそう」 そう思っている方は多いのではないでしょうか？ これまでLottieといえばAfter Effectsで作るのが主流でしたが、いまはFigmaのプロトタイプとプラグインを使って作成できます！ この記事では、Figmaを使ったLottieの作成方法を解説します。プロトタイプ機能を使ったことがない人でも簡単に作れるので、ぜひチャレンジしてみてください。 FigmaでLottieを作るメリット Lottieは軽量かつ美しいアニメーションを手軽に実装できるライブラリです。FigmaでLottieを作成することで、次のようなメリットがあります。 After Effectsを使えなくて
ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説 - necco note | necco inc.
ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説 こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。 After Effectsなどで作ったリッチなアニメーションを、ウェブサイトやアプリケーションに実装できる「Lottie（ロッティー）アニメーション」をご存知ですか？ Lottieはどれだけ拡大しても高画質で、実装も簡単なアニメーションライブラリです。ウェブ制作にLottieを取り入れるメリットは多く、GoogleやMicrosoftといった大手企業も活用しているほどです。 わたしたちneccoも2020年に導入し、これまでさまざまなプロジェクトでLottieを活用してきました。 この記事では、Lottieの基本から実際の活用事例、作成方法までご紹介します。作成時の注意点もまとめているので、Lo
ふるさと納税「さとふる」紹介映像 | 映像制作・動画制作なら株式会社プルークス(東京・中央区)
プルークスが動画制作・動画マーケティングを支援した実績の⼀覧です。 大手企業からベンチャー企業まで、アニメーションから実写まで幅広いジャンルの動画制作を手がけています。 動画制作の目的や活用シーン、演出などの情報もカテゴリーで探しやすく分類しています。
UIの細かい動きについて
イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの
【After Effects】マスクパスからモーションパスを作る方法 | PANGAEA
こんにちは。 動画制作を勉強中のマエポンです。 本日は、After Effectsでマスクパスからモーションパスを作ってアニメーションさせる方法について説明したいと思います。 ↓こんな感じ。 まず、アニメーションさせたい素材を入れます。 次に、レイヤーを選択したままペンツールを使ってマスクでパスを作ります。 レイヤーのプロパティを開くとマスクプロパティができているので、マスクの[マスクパス]をコピーして[位置プロパティ]に貼り付けます。 すると、マスクの形のモーションパスが出来上がり、このパスにそって素材がアニメーションするようになります。 ※マスクパスを位置プロパティにコピーする前に[スケール]などをいじってしまうと、マスクパスの形も素材と一緒に変形してしまうので、スケールなどの調整は位置プロパティにコピーした後に行うようにしましょう。 あとは、[スケール]や[回転]、モーションパスの形
I Can Has Petz?
Reviewed Apr. 18, 2019 by Armin No Comments on New Identity for Petbarn by Landor Industry / Retailers Tags / #animal#animation#australia#black#landor#pet#yellow For full Access Subscribe to Brand New Subscription includes Full content. Polls and comments. Full RSS functionality. The Follow-up podcast. The weekly newsletter. NEED SOME CONVINCING? Whether it’s you, your boss or manager, your signif
【翻訳してみた】Google Design - モーションデザインは難しくない｜Iori Iwaki｜Motion designer
前置き 去年の暮れ頃、最初に翻訳をしようと思ったキッカケがこの記事でした。海外ではモーションデザインに関する記事がMediumに存在し、日本語記事が存在しないことにストレスを感じていました。著者のJonasさんに連絡を取り、翻訳の許可をいただいたことからこのnoteの翻訳を始めました。 引用元 : Medium - Google Design - Motion Design Doesn't Have to be Hard 著者 : Jonas Naimark Googleのマテリアルデザインチームで働くモーションデザイナー。 彼のTwitter,Dribbleアカウントはこちら。 https://twitter.com/jonasnaimark https://dribbble.com/jonasnaimark モーションデザインはUIの表現力を向上させ、使いやすくする手立てになります。そ
Spine:ゲーム用2Dアニメーションソフトウェア
Spineとは ゲームに命を吹き込む、大切なアニメーション。当社は、優れたアニメーションづくりには、強力なソフトウェアだけではなく強力なワークフローも不可欠だと考えています。Spineは2Dアニメーション専用に開発されたソフトウェアで、魅力的なアニメーションの作成、そして完成したアニメーションをゲームに組み込むための効率的なワークフローを提供します。 詳細を見る ライブデモ ライブデモでは、Spineで実現可能なサンプルをブラウザのウィンドウ上でご確認いただけます。アニメーションをレイヤーで再生したり、スケルトンを動的に操作したりと様々なことが可能です。 デモを見る Spineアカデミー Spineアカデミーは、Spine学習に必要な全てをご提供します。自分のペースで独学することを希望する方も、対面式のワークショップやコースを受講したい方もご心配いりません。Spineの各バージョン間の変更
[After Effects] Googleの様なローディングバーを作ってみよう - Curioscene (キュリオシーン) - 映像制作、動画編集チュートリアルマガジンサイト
ウェブサイトで画像やコンテンツなどを読み込む際にローディング画面が出るのを良く見かけると思います。 多くの場合はシンプルに丸い円がくるくる待っていたり、左から右にステータスバーが伸びるGIFになっている事がほとんどだと思いますが、サービスによってはオリジナルデザインになっている所もあったりして、見慣れているアニメーションとはまた違うので引き立ちますよね！ 特にGoogleのサービスは頻繁にデザインを変えており、ローディングアニメーションも色々あります。現在でも使われているかどうかは定かではありませんが、筆者的には4種類のGoogleカラーを使用した円形のローディングが好きだったりします。 このアニメーションはローディングだけではなく、ロゴを表示させるモーショングラフィックスとしても利用できそうだと考えたので、今回Adobe After Effectsを使用して、Googleのローディングバ
![[After Effects] Googleの様なローディングバーを作ってみよう - Curioscene (キュリオシーン) - 映像制作、動画編集チュートリアルマガジンサイト](https://cdn-ak-scissors.b.st-hatena.com/image/square/87f4eda566937b1fbdc90b35b7c813f8aa3d9de7/height=288;version=1;width=512/https%3A%2F%2Fwww.curioscene.com%2Fwp-content%2Fuploads%2F2018%2F07%2Fezgif-3-1bc3923845.gif)
デザイナーでもできる、 After Effects からのSVGアニメーション書き出し - LOGzeudon
このページは別のブログに移転しました。
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
Lottieでアプリにアニメーションを組み込む話（デザイナー編） - くらげだらけ
最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（イチナナ）」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。 アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。 とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。 最後にアニメーシ
独学ではじめる！AfterEffectsチュートリアル10選｜いなげ
Fintechベンチャーで新卒1年目デザイナーとして働いています、いなげ(@17_makoto)です。 Adobeの動画作成ソフトAfter Effects（以下Ae）の使い方を学びたい、アニメーションに興味があるという方のために、初心者の自分がやって参考になったAeチュートリアルをあげていきます。 YouTubeには勉強になる動画がたくさん公開されていて、何個かやってみるとAeの使い方がわかったり、基本的なアニメーションがかけられるようになると思うので、ぜひ気になったものからやってみてください！ 英語の動画が多いですがAeの操作画面は同じなので、動画通りに操作していけばチュートリアルと同じデザインが出来上がります。 1.画面の基本操作 After Effectsのインターフェイスについて コンポジション？なにそれ？という方はここからはじめると良いと思います。Adobeが公式のチュートリア
ドラッグ&ドロップするだけ！かなり高品質なアニメーションgifが誰にでも簡単に作成できる無料アプリ -Gifski
これは簡単操作なのにすごい高品質です！ フレームごとに数千の色を使用するアニメーションgifを動画ファイルをドラッグ&ドロップするだけで、簡単に作成できるmacOS用の無料アプリを紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LottieFiles: Download Free lightweight animations for website & apps.
The Blog | Welcome to Adobe Blog