とある UI デザイナーの雑記

しがないフリーのUIデザイナーの独り言

AfterEffects から Lottie のアニメーション JSON を作成する手順

f:id:hiromisatoh:20200206004658p:plain

日頃からアイコンアニメーションばかり作っているわけではないのですけど
新しい環境をセットアップする時だったり、久々に Lottie 実装する時に
いつも何となく忘れて検索してしまうので
自分への備忘録を兼ねて手順を纏めて記事にしました。

 

❶ まずは素材となるアニメーションを AfterEffects で作成

まずは素材となるアニメーションを AE で作成します。

f:id:hiromisatoh:20200206014657g:plain


Tips メモ

イラレからファイルを持って来た時などは予め「ベクトルレイヤーからシェイプ」を作成を選択して
レイヤーをベクターSVG)化しておきましょう

※これをしておかないと JSON で書き出しが出来なくなるので注意しましょう
方法 >>> レイヤーを右クリック → 作成 → ベクトルレイヤーからシェイプを作成

AE側の設定で必要なのは

環境設定のスクリプトとエクスプレッションメニュー内の

スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」
にチェックを入れておきましょう!

AfterEffectsからLottieのJSON書き出し

 


❷ コード書き出しする為の Bodymovin をダウンロードする

 

Bodymovin

exchange.adobe.com

AfterEffectsからLottieのJSON書き出し

落としてきたこのファイルを開こうとして、上記のようなZXPを開けないというアラートが出る場合は

helpx.adobe.com

あるいは

ZXP Installer - aescripts + aeplugins - aescripts.com
ZXPInstaller

これらの ZXP Installer をダウンロードしてインストールしてください。

ちなみに私は上の方を使いました。

 

 

❸ AE のエクステンション Bodymovin から JSON を書き出す

エクスプレッションから「Bodymovin」を選択します。

AfterEffectsからLottieのJSON書き出し

 

プラグインのウィンドウが立ち上がります。

AfterEffectsからLottieのJSON書き出し


Settings メニューから「Glyphs」が選択されていることを確認。

AfterEffectsからLottieのJSON書き出し

「Render」ボタン押下したら任意の場所に data.json が書き出されます。

AfterEffectsからLottieのJSON書き出し


これで実装に必要な JSON ファイルが出来上がりました。

あとは、見た目に問題がないか Lottie 公式サイトのプレビューで見てみるフローです。

 

 

❹ Lottie にログインしプレビューページで確認する


生成された data.json を下記のプレビューページで確認することが出来ます。

lottiefiles.com

 

問題なくうまく書き出されていれば、こんな風に確認できます。

AfterEffectsからLottieのJSON書き出し


https://lottiefiles.com/share/O4iV4G

↑ 実際の作成ファイルのプレビューです



ちなみに JSON 本体のコードの中身覗くと、こんな風にちょっと怖いんですけど(笑)

f:id:hiromisatoh:20200206021434p:plain

コードで動いている SVG なので、大きな解像度のものでもディティールが美しいのと、なんといっても軽量実装が実現出来るのが嬉しいですね!

 

まとめは以上となります。

 
アプリにもWebにも使える!
マルチプラットフォームに対応している
Lottieアニメーション

lottiefiles.com


この記事が、これからトライする方など
どこかの誰かのお役に立てたら嬉しいです!

(この程度の内容だったら皆知ってるか…笑)

 

UX とドライブ

私は車の運転が好きです。

地方に住んでいた若い頃は毎日乗っていましたし、当時は、あてのないドライブをよくしていました。
基本的に無趣味でつまらない人間ですが、自分の唯一の趣味と呼べるかもしれません。

でも、よくよく考えてみると、あてのないドライブって単にガソリンやエネルギーを消費して走り続けるだけで何か収穫出来るのかと問われたら具体的に特に何もないし(せいぜい見たことのなかった初めての景色に遭遇できる&運転テクニックの向上くらいなもんでしょうか)冷静に客観的に見ると、何の目的を持ってやっているのか不思議な行動ですよね。走れば走る分だけ事故リスクも高まります。
しかし、車の運転が好きな人は、皆さんこれは昔からごく普通にやっている行為だと思うんです。

体験をする為に、お金や時間を費やす。

う~ん、これこそが UX だよなあって思います(なんか…アホな文章でごめんなさい)

でも、そういう顧客体験を提供する側に私も寄り添いたいので、かつて気持ちの良かった事や自身の体験も大切にしながら、仕事に取り組みたいと考えています。

ところで、最近、各自動車メーカーが昔懐かしい車種を復活させていますよね。
TVCMなどで目にして、何だかワクワクしてしまいます。
車が熱かった時代…(恍惚)

古い人間ですみません。
昭和感が出てしまった。

 

好きなブログ

最近思うのですが、一時的に目立つブログって(凄く専門的な記事を書く人を除いて)基本的になんか皆一様に怒ってませんか? やはり、刺激的な内容のブログやタイトルの方が、目を引くからでしょうか?

昨今ではプロブロガーなる肩書きの職業があって、ブログを炎上させて収益を得ている方々がいるというのを、結構最近になるまで知りませんでした。
自分と関係ない人達や社会に無理矢理喧嘩売ってまで…命懸けですね、疲れそうです…。
それにしても凄い時代だなあ。

そんな中で、私が好きなブログについてですが、多種多様な様々な「妖怪」を楽しく独自の見解で紹介しながら解説しているブログがあり、面白いなーとか思いながら時々過去記事漁って楽しく読んでいます。
(自分が今している仕事と妖怪は何の関係もありませんw)
けれども、妖怪は人の心の欲求や悲哀を現した化身として描かれているケースが多いので、人間の行動や心理をより理解する必要のあるUI設計には、多少なりとも役立つかもしれません。
(無理矢理こじつける)

特にリンクは貼りませんが、好きな事をとことん突き詰めて楽しんでいる姿勢が読んでいて楽しいです。
私も、楽しいブログを書きたいけど、なかなか引き出しがない自分に落胆しています。
一個前の記事なんて、退職ブログ的な暗くて重い文章だし。

UIとは全く関係ない記事をお送りしました。

それでは。

 

ドライとウェットの境界線

以前、会社員として勤めていた会社を退職する決断をした時に割と苦労したのが、極力「ドライ」な気持ちを保つ、という事でした。

というのは、関わった仕事でのアウトプットを自分の子供のように大事に思う感情すら一時は抱いておりましたので、自ら決断したとは言えそれを断ち切ることが辛かったですし、さほど大きなサービスではないインハウスならではなのかもしれませんが、自分が関わったものだらけになっていたので、正直、普通の視点では、もう見られなくなっていました。ウェットの極地というか。

・デザイナーとしてもっと成長したいけどここにいたらもう成長はできないだろう(ドライ)
・ずっと関わったこれらのデザインと離れるのは悲しい自ら手を離したら終わりだ(ウェット)

といったような思いが入り乱れ、決断してから退職するまでの半年間(辞意を伝えたのは2ヶ月位前)は心身の平穏を保つのが大変でした。
(周囲にはそんなそぶりは当然見せないように気を付けておりましたが)

仕事には本気で取り組んでいましたし思い入れもそれなりに強くあった反面、組織内で偉くなりたいとか出世したいとかあるいは社内政治に奔走したりとか、そういう思考が一切無い&価値を見い出せない、このままのらりくらりとぬるま湯に浸かってやり過ごせば楽だけど、自分はそれを求めてやってきたわけではないのではないか?と自問自答し続け、結果このままではマズいぞと気付いた自分は、個のプレーヤーとして極める人生を歩みたいと考えるようになりました。

わざわざ手に入れた安定を、いい歳をして自らかなぐり捨てるとか正気の沙汰じゃないのは分かっていたのですが、たとえ、社会的に身分が不安定でも、厳しい道かもしれなくても、手を動かす側として徹底しプロとしての仕事を追求していく立場へとよりなっていく方が、自分にとっては幸せなのかもしれないと悟りました。
そして、ウェットになり過ぎた制作への思いを、ドライにシフトチェンジし、生産的に、効率良く、何より自分が心地良く静かに暮らしていきたい。
その答えが、フリーランスとして働くという決断でした。

「静かに」と書きましたが、それは、フリーランス=自由に大きく羽ばたきたい、というよりは一種の「諦め」や「限界」を感じていて、年齢的にも人生の折り返し地点を迎える前に、適性に沿った人生の選択をしたいと感じていたからというのもあります。
組織内のディレクター的役割や人を取り纏める適性が自分には無い。そういう立場を一度やってみて様々なウェットな気持ちを通じてそれらを痛感していました。
だから、ドライに、静かに、個になりたい。
自分の特性を活かつつ、ただ淡々と仕事をこなして生きていければ幸せ。
こんなことを公の記事に書いたら、仕事関係の人の目に触れて、印象が低下するかもしれませんが、それでも、その時に思い描いた理想像というか正直な気持ちを述べるならば、そんな想いでした。

しかし、実際にフリーになってみると、出会ったお仕事の関係者の皆様方のレベルの高さに「淡々と」などと言ってる場合じゃないことに気付かされます。
今年になって、様々な会社の色々な人達と出会いましたが、本当にもう何というか皆様凄い方達ばかりで、ご一緒していると良い意味で感情を動かされることが非常に多くあります。
よりシンプルに、ポジティブなプラスの感情や成長したい意欲を抱けるようになりました。
シンプルな思考になれば、ドライ/ウェットの切り替えも意識しやすくなる気がします。

目の前の仕事にとことん向き合うということだけは、昔から変わらずにずっとやってきたつもりです。
これからも、一歩一歩を大切にしながらやっていきたいと思います。

とはいえ、仕事においては不要で非効率な感情は取払って、ドライに、ドライに。
ビジネスですからね。

変な感情に押し流され過ぎることなく、心がけてやっていきたいと思います。

 

ブログの見た目を自分好みに

カスタマイズしました。

既存の配布されているテーマに、CSSを上から記述して強引にカスタマイズしただけのさほど大した作業じゃないのですが、詳しくない者にしたら勉強になりますね。
スマホとデスクトップを同時に見比べながら、コードを弄くり回すこと6時間…。
文字の大きさ、文字間、行間、文字色のトーンの強弱、その辺を意識しながら調整をし続けました。
私は明朝体が好きで、つい使ってしまいます。読み物は明朝だと安心します。

当たり前ですけど、テキストはそれぞれの端末のデバイスフォントで表現されるわけですから、なかなか Adobe などでデザインする時の文字組みのような美しさに近付けていくのは難しくて結構苦労するものですよね。どこで妥協するか納得がいくまで時間がかかって仕方がないのです!何というか…凄い疲れた。

一旦は満足したので、今日はこれにて終了します。
これからも継続してちゃんと覚えようと思います。

でも、絵を作ってる方が、やっぱり楽しいなあ…。