とある 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


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

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

 

フリー三年目、自分へのダメ出し

異常にビビり

久々に何か書きたいと思い立ったのは、何となく二年の総括の意味も込めてここで気持ちを整理しておきたいと思ったせいかもしれません。
私は会社を辞めて二年になるけど、自分としては濃い二年間を経験して来られたと思っているし、最近は私生活の環境も変えました。
フリーになりたいと思い立った三年前に思い描いた暮らしに近付いています。
あと、とても優秀な人達と仕事を共に出来ている満足感もあります。
日々必死だけど楽しいです。

フリーとか名乗ってるくせに、私は変化に弱い方なので、優秀な人たちが通る大した事ない物事でも私なんかではきっとビビッてしまい大事に捉えているだけかもしれないけれど、私がこの二年で出会って来た人達は、第一線で活躍されそれでも涼しい顔でもっと凄い事を成し遂げたり考えたりされている、とんでもない方々ばかりで恐ろしいと感じます(笑)
尊敬の念しかありません。
でも、そうった方々と一緒にお仕事出来る機会を与えて貰えているという事は幸せなことですね。
きっとあの会社の、いち会社員のままでは一生出会えなかったであろう方々。

それなのに私はその与えられたチャンスを活かし切る事が出来て来たのかと自分に問うと疑問に思い、ここでダメ出しです。
まず、自分のキャパオーバーが怖い。
これは若い頃に、新卒で入った会社でも先輩から指摘されていた自身の特徴です。
ありがたいことに、問い合わせを頂いても、断ってばっかり。
今契約してもらっているお客さんへの仕事を最優先にしているのでそっちへのしわ寄せが怖い。
歳も歳だし無理をして周囲に迷惑をかけるようなことだけは避けたい。
いい加減な仕事をしたくない。
自分のポリシーに反する。
体力に自信が持ちきれないというよりも、絶好調のパフォーマンスで日々臨めるようにしておきたい。
そうすることで、当初予想していたよりも満足できるもの結果が出せるアウトプットに近付けると信じてる。
昨日よりも少し成長した自分に出会えている気がする。
綺麗事を言えばそうですけど、要は疲れ果てて生きるのも長い目で見たら何か違う気がする、という事なのかもしれません。
そりゃあ仕事してれば納品時期や作業の緩急があるので当然忙しい時は忙しいですが、それをコントロールし、メンテナンスするのも自分自身の裁量ですからね。
自分の身は自分でしか守れません。
自営業ならなおのこと。

小心者で小物のくせにフリーを謳い、一回そちらの世界に入ったら覚悟を決めるしかなかった分際で、何をやってるんだ?と自分を叱責することもありました。
最初の一年の方だけは、焦りと異常にアッパーなテンションで、楽しんでいたような気がします。
来たものすべて、さばいてやる!やってやる!!って。
二年目は念願だったフルリモートの働き方を実現したり影で色々実践していました。
身に余る下駄を履いてる状態だなという状況にもなっていたのですが、本名で活動しているリスクを徐々に感じるようになりネット発信も消極的になってしまい、なんだかあの時の躍動する想いが薄れているのか?と思えて来たりすることもあり、ここでもダメ出しです。
「異常にビビり」から来る要因でしょう。
でも最近は、周囲のあたたかい環境のおかげで元気になってきたのと、単純に仕事も楽しいので、オリジナルの作品をもっと作って世の中に発信する準備を進めたい、休日も無駄にしないように無理しない範囲で新しいものを作ってみたり勉強したいと思っています。

というか、こんな書いてる暇あったら黙ってさっさと形で示せって思うけど、こうして発言することで実際の行動に近付くんですよね。
二年前の異常なテンションの自分もそうでした。
楽しもうじゃないですか!

 

問い合わせにビビる

ありがたいことに、お問い合わせを度々頂いております。
返信できないのは、無視しているわけじゃなくて今のキャパオーバーが怖いのと完全にお断りするのがこちらの立場としてただ恐縮なので保留にしたいのです。
申し訳ありません。
あんなおかしなページから連絡くれるなんて嬉しいです。

 

Google の検索結果にビビる

さっきも言いましたが、本名で活動しているのでたまに調査のためにエゴサした時などにいちいちビビります。
というか笑ってしまいます。
「安全ではありません」って出て笑ってしまいます。
とても初歩的な方法でなのですが常時SSL対応を先週くらいにやっと行ってみました。

 

勉強会やイベントにビビる

エンジニア界隈の優秀な方達はよく勉強会を開いておられ素晴らしいですね。
いち早く最新の情報や知見を得る為に必要な行動ですし、優秀なエンジニアの方々はそういったものに積極参加されています。
まぶしいくらい前向きでとても素敵なことですしそういう人々は実際「スゲー人達」です。
デザイン界隈もやっていますが、またに「ちょっとペラくないですか?」って感じるのがあるくらいで、見たい!行きたい!といのがどうも少なく感じられ、というかデザインは黙って形で示せよって、男は黙ってサッポロビールだろって、そんなワチャワチャやってる感だけで内容が薄過ぎてもうって…。
つまりどうも及び腰になります。
後からネットで知れるしな…と完全に引き篭もりの発想です。
ダメ出しです(注意:自分への)

しかし、ここでまた真面目な話をしますが、勉強することを怠ったら、私が今関わらせて頂いているIT分野では今後は絶対についていけません。それだけは理解しています。
一人でも勉強は出来るので続けたい。
仕事仲間の雑談からも勉強出来ることがたくさんあるので助かっています。

 

過去を反復してビビる

私は新卒で広告制作会社に入社し(広告業界なので察してください)それなりに辛酸を舐め(笑)
その後非正規で大手の家電メーカーで組み込み式のGUIデザインなどに関わり
また会社員に戻ってから本格的にアプリやWebの仕事にガッツリ取り組み…と無名ですが割と商業デザイン界にしぶとく関わらせて貰えています。
デザインの仕事という意味では大きく変わらずとも、その時代その時代にニーズがある分野にポンッと気軽に飛び、その都度その分野の勉強をしいちいち感動をし取り組んで来ました。途中で嫌になった事は数知れずありますが、幸い飽きずにやって来られたのは、そういう時代と共に変化する媒体へ上手く並行してシフトチェンジしていけたからだと思っています。
いつもいつも初めての事にトライする事は、とても大変な事ではありますが、確実に自分の血となり肉となり骨となります。
全ての経験は財産になります。努力とかそんな暑苦しいことを言いたいわけじゃなく、内から湧き上がって来る探究心に純粋に向き合い、まだ見ぬものに(自分自身も含めて)期待するそんな心を持つのは楽しいものです。
ただしかし、そういうポジティブな思いと、一方でそれなりに経験して来た悲しい出来事も重い鎖となっているのは事実としてあります。
だからなのか、緩く取り組む、程良い加減、良い加減が分からないのでしょう。
私は、自分のプラス面とマイナス面が表裏一体なのを、そういうところで自覚しています。

 

これからフリーを目指す若い人達へ(ビビりながら)

私は、新人を育てるのが苦手で、過去にディレクターとして挫折を経験しています。
フリーになりたいと思ったのもそういう側面でもう無理だなと思ったのもあります。
放棄です、放棄。
でも、これからの時代、若い人は先輩に教わらなくても自発的に何でも吸収できる世の中です。
本当に自分次第、勝負の時代です。
だからこそ、適切な育成環境が不在でも、良い新人は勝手に育っていくと期待しています。
そして、覚悟を決めたら思い切って早々に独立したり起業をしたりしてみたら良いと思います。
組織内でも培われないわけじゃないですが、自分の生き死にに関わるので真剣さがまるで違って来ます。
そういう環境で仕事をするのは、確かにキツいですが、早い段階で何かが見えて来ることがあると思います。
少なくとも私はそうでした、放棄者であるこんな私からでも、誰かに伝わる事を祈っています。

つらくても楽しくなってくる時がきっと訪れます。
それまで好きなだけ納得するまで環境を変えたって良いんです。
いつか見付かるんです。
というか私自身もまだまだ先のことは分からないし末端の人間なので偉そうな事は言えません。
不満と満足は交互にやって来ます。

…これただの気分屋の感想だな…(ダメ出し)

とりあえず、楽しみましょう。

 

UX とドライブ

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

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

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

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

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

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

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

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

 

好きなブログ

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

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

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

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

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

それでは。