マガジンのカバー画像

モーション情報まとめ

19
運営しているクリエイター

#UI

【翻訳してみた】Google Design - モーションデザインは難しくない

【翻訳してみた】Google Design - モーションデザインは難しくない

前置き
去年の暮れ頃、最初に翻訳をしようと思ったキッカケがこの記事でした。海外ではモーションデザインに関する記事がMediumに存在し、日本語記事が存在しないことにストレスを感じていました。著者のJonasさんに連絡を取り、翻訳の許可をいただいたことからこのnoteの翻訳を始めました。

引用元 : Medium - Google Design - Motion Design Doesn't Ha

もっとみる
ローディング/オープニングアニメーションをひたすら貼り続ける

ローディング/オープニングアニメーションをひたすら貼り続ける

先日、「 Awwwards 」にて「 Site of the Year 」、「 CSS Design Awards 」にて「 Site of the year 」ノミネートが発表されました。去年 CSS Design Awards にて Site of the Day を受賞することができたので( Awwwards は Honorable Mention しか受賞できませんでした。。)、早速見に行

もっとみる
【翻訳してみた】マテリアルデザイン - モーションデザインを理解すること

【翻訳してみた】マテリアルデザイン - モーションデザインを理解すること

前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。

引用元 Google - Material Design 
Understanding motion - Material Design
※動画像データもこちらから引用させてい

もっとみる
Lottieはじめました

Lottieはじめました

こんにちは、宮島(4hintaro_m)です。

今回は、最近ちらほら名前を聞くようになったLottieについて、そのメリットや注意すること、できること、今後の展望などをまとめてみました。

LottieはAirbnb社が開発した、Aftereffctsで作ったモーションやアニメーションをJSONファイルに書き出して、簡単に実装できるアプリです。UIのマイクロインタラクション分野で活躍できそうです

もっとみる
使えるAftereffectsプラグインまとめ

使えるAftereffectsプラグインまとめ

今回は、Aftereffctsでモーションデザインやアニメーションをする方向けに「使えるAftereffectsプラグインまとめ」をnoteにしてみました。ちなみに2Dモーション・アニメーション向けです(2020年4月に、「KBar2」と「Labels 3」「BG Renderer MAX」を、2020年11月に「Timelord」を追加)。

プラグインは星の数ほどありますが、リサーチしてだいた

もっとみる
登壇内容まとめ"Designer X Engineer Development #02"

登壇内容まとめ"Designer X Engineer Development #02"

Roppongi Designers主催"Designer X Engineer Development #02 "というイベントで登壇しました。
発表テーマが「ツール」だったので、UIモーションに関するツールをプレゼンしてきました。

以下note用にまとめたプレゼン内容↓

はじめに

今回紹介するのは"動き"の実装をちょっと楽にするツールです。
UIモーションデザイナーの僕の専門分野です。

もっとみる
登壇資料公開やでい

登壇資料公開やでい

Designer X Engineer Development #02というイベントで登壇してきました

取り急ぎ登壇で使用したスライドをそのまま公開します。

後日、スライドをnote用にブラッシュアップした記事を上げます。
お楽しみに:D

【デザイナー向け】Lottieの使い方。アプリ開発におけるアニメーションの実装を劇的に簡略化してエンジニアの負担を減らそう!

【デザイナー向け】Lottieの使い方。アプリ開発におけるアニメーションの実装を劇的に簡略化してエンジニアの負担を減らそう!

こんにちは。ノゾエ(@conoito)です。

今回は、Lottie x Bodymovinを使って、アプリ開発におけるアニメーションの実装を劇的に簡略化してエンジニアの負担が減らそう!という話です。

今まで私たちのチームでは、ネイティブアプリでアニメーションを実装する際、熟達した職人(エンジニア)による洗練された技と長い年月を費やして培われた眼力を駆使してmp4で渡した動画をコマ送りし、z

もっとみる
UIモーション制作ツールまとめ

UIモーション制作ツールまとめ

このnoteは、UIモーションを制作できるツールをまとめた記事です。

ツール多すぎ問題UIモーションはAfter Effects以外に、プロトタイピングツールを使って制作する。
しかしプロトタイピングツールも群雄割拠の時代。
山ほどあるツールから自分の業務に最適なモノを探さなければいけません。
以下では、なんとか厳選して選んだUIモーションツールの精鋭たちをまとめてみた。

3種類のプロトタイピ

もっとみる
【GIFで解説】Adobe XDの自動アニメーショントランジションまとめ

【GIFで解説】Adobe XDの自動アニメーショントランジションまとめ

Adobe XDの自動アニメーションが10月のアップデートで使えるようになったので、初めて自動アニメーションを使う方にわかりやすいようにGIF画像でトランジションを解説します。

以下のような方に参考にしていただければ幸いです。

・「自動アニメーションって何?」という方
・自動アニメーションを短時間で理解したい方
・どのようなトランジションが再現できるのか知りたい方

※GIFで作成しており、色

もっとみる
"楽して"良いUIモーションを作れるツールまとめ

"楽して"良いUIモーションを作れるツールまとめ

After Effectsを使用したモーション制作(特にUIモーション)において、使えると思ったモノ・コトをまとめるnote(随時更新)

今回は作業効率編。

モーションは作るのに工数かかるし、レンダリング長いし、負荷大きすぎてアプリ落ちるし、でなんだかんだ時間かかります。
なのでモーション制作で一番重要なのはどれだけ早く簡単に良いモーションを完成させられるか。(持論)
早く作れればPDCAもガ

もっとみる