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

フリーのUIデザイナー佐藤裕美と申します時たま堰を切った様に書く

エンジニア陣の牙城である Qiita にも初アップしてみました

先日書いた同じ内容ですが Qiita にも初めて記事を投稿してみたんです(ドキドキ)

qiita.com

ガチエンジニア陣の牙城のサイト Qiita(尊敬)
「いいね」もらうと嬉しいですね…わーい!!

1いいね…(笑)

 

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


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

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

 

UI アウトプットスピードを向上させたい意識のあまりUX が抜け落ちた出来事

UI デザイナーとか偉そうに名乗ってる分際でダメだろと思った

ある時「この要件では、おかしくないのか?」という場面に直面し恥ずかしい思いをした。
前提だが、私は今幸いながらひとつのプロダクトにじっくりしっかり取り組り組める状況が出来ており、それを実現させて頂けている周囲の皆様のお気遣いに感謝をしておます。
しかし、最近自分は UX や UI を名乗っているのにも関わらず、初歩的なミスというか恥ずべき事態に遭遇しとても反省させられた出来事があった。

私はここ一年くらい一人で勝手に挑んでいることがあり

• いかにして作業スピードを向上させることが出来るか
• 質を担保しつつ様々な提案を実現できるか

個人でどこまで生産性を上げることが可能なのか限界はあるけれど、若かりし頃に戻ったかの様な熱量で丁稚奉公よろしく必死にやっているのであります!
短い時間で高い質のものを仕上げるのは私らの使命でもあります。
下請けだからっていうよりも、己の可能性を追求したい、結果的に効率よく成果を上げたい、その為の自己鍛錬だと思ってやっています。
挑めば挑むほど、まあまあスピードアップは実現出来ているような、以前より速やかに実行し遂行をする事は問題なく行えてるのかなあと…自己評価のみで客観性薄くて恐れ入りますがそんな手答えみたいなものは感じております。
でもまあ、このチャレンジを意識する以前から、同じような仕事してる人なら分かって頂けると思いますが、自分の中で定めた作業見積もりより早く仕上がると、精神的な余裕が産まれて、思いがけなかった更なるよりより良いアイデアが浮かんできたりするもんなのは、皆様どのような職種であれ共通なのかなあと勝手に考えてたりしておりますが…お分かり頂けますよね?

そして私はグダグダと長文で何が言いたいかと申しますと!
仕事とは実はそこからが真の本番と思っており、その瞬間からこそめっぽう楽しい!

一見さっさと仕事終わらせたい言い訳に聞こえるかもしれませんが、余裕を持たせておく事でより良いアウトプットへとブラッシュアップする気持ちが出来る事で、より楽しく没頭出来るフェーズに入るというのは私にとっては大事なことであり、割とこれまでもそれを実感する場面は沢山ありました。
そのゾーンに一刻も早く入る為に、自らをスパルタ状態に追い込もうが頑張ろうと思える。
楽しみたいから。
極端な話、別にお客さんの為だけに実行しているわけではありません、これからの向けた自分への訓練や挑戦の為にもやっています。
勝手な人間性ですみません。

…話はそれましたが、その取り組み自体の成果についてはさっきも書きましたが勝手に手応えだけは感じることが出来ています。
めちゃくちゃ疲れますけど。
私は「鉄は熱いうちに打て」をモットーにやってきた部分があり、またその勢いを利用しているようなフシがあります。

お客様とお話しをして、自分のテンションが高いまま真っ先に取り組みたくなる。
(それは綺麗事で気持ちが薄れる前に早めに片付けて更に何か出せる精神的余裕を確保しておきたいというのが本当の理由なのかもしれません)
実際それで自分の仕事の成果として結果的に良い効果にも繋がる時もある。

しかし、その気持ちを最優先するあまりに、最重要なポイントが抜け落ちていたのだ。
まさにタイトル通りではありますが
UI アウトプットスピードを向上したい意識のあまり UX が抜け落ちた不思議な絵が出来上がっている…冷静になって後で見返してからはじめて「ん?」とようやく気が付く回り道状態になる。

リーダーに優しく指摘されお話しするその時まで、ちゃんと気付けない自分に恥じながら、その大切なお客様から「要件漏れててすみません!ここはですね…」と相手に説明させてしまう自分にまだまだ自分はダメだわ…なんて未熟さを感じたんですよ。

あ、こんなこと書いちゃって自ら自分の営業妨害をしているようなもので、仕事のオファー激減したらどうしよう…。

言い訳を言わせてもらうならば
職業柄というか経験値柄というか、どうしても表現の方に偏った思考になってしまうんですね。
そっちに強い拘りがあって、形にする絵が明確に見えた瞬間に即座に素早く手を動かしたくてヤリたくてウズウズしちゃう(変態風味)

何がいけなかったか

今回のこれは、別に他者から苦言を呈されたわけでも問題が起こったわけでもなく、己のプライドの問題です。
最初の要件確認後に、ちゃんと考えてないからこういう事が起きてしまうのだ。
UX やってますを名乗ってしまっている以上、使う人の立場で一度立ち止まらなければ、と強く気付かされました。
私自身、表現のことばかり頭にある傾向にあり、その前段階の大事な部分を見落としがちになってしまうのは以前から気付いていて自分の弱みだと分かっていました。
そしてそれは自分のこれからの課題だと感じています。

どんなに絵的にそれなりに見えるものであっても、大前提としてユーザビリティが考慮されてないモノが支持される筈もなく良質なプロダクトを作れる筈もなく、形に落とす前にやるべき事は実は本当に沢山あることに今更ながら気付く日々。

チームの事業キーマンとなる責任者のその方は、凄くてチームの皆のパフォーマンスを出しやすくしてくれるキレ者である上に、エンジニアとしてのスキルも素晴らしい。
真面目で勘が鋭くて尊敬をしています。
だからそこそ、そういった方との何気ないやりとりから、己の未熟さに気付かされた時に怖さも感じる。

「このフロー変なんですけど」とか
きっと私側から指摘したり相談したり提案したりして欲しかったはず。
UX とか UI やってんなら気付いて更なる提案が出来なければいけないはず。
もしかしたら私を試してもいたのかもしれない(なんてね)
しかしこうやって意識は改められていく。

体験して何かを感じる。
仕事の現場でも UX は沢山転がっている。

私の「今週の俺が俺が」状態を改めていきたい

自分の役割最大限に発揮していく
それでチームとしても結果的に質が向上していく、それでいいだろうが!何かご不満でも?
と思う一方で、チームで仕事する、仕上げていく工程て、当たり前だけどそれだけじゃないんですよね。
最近では、皆んなで仕事に取り組むことの意味を強く感じるようになっているので「人」に対して意識が変わりました。
まさに我々は「人」に向けてサービスを作っているわけで、ちゃんと考えた上で仕事に取り組みたい。
その為には他人の力がどんなに大事か今更ながら思い知ることばかりです。

自分の事だけで精一杯で追い詰められそうになってる自分に喝を入れつつも…

私達が愛情を注いで作ったプロダクトをユーザーに長く愛してもらえるように自分も使いたくなるようなものを作りたいという、確固たる思いは変わらない、私は私の出来うる最高のパフォーマンスとデザインを提供したい。

当たり前のことを丁寧に
今まで通り積み上げていきたい。
全体が見られる余裕も持ちたい。

今年の目標にしようかな。

 

Lottie で UI アニメーション実装

しかし、最近のインターフェースデザイントレンドでアニメーションは無視できなくなってきましたね(汗)

hiromisatoh_animation

色々模索中の作り途中のインターフェースアニメーション。。。

 

あとアプリの UI デザインの仕事でたまにこんなものも作ったりします。
完全にお絵描きです(笑)楽しいな〜お絵描き。
幼い頃から無心に熱心になれるひたすら楽しいお絵描き。

これはイラストが アプリ内で軽量に動くように Lottie で実装しました。
Adobe の AfterEffects でアニメーション作成しプラグインJSON ファイルを書き出して組み込みます。

lottiefiles.com

アプリ内のアニメーションは一昔前はエンジニアの方にゴリゴリ書いて頂いたりしておりましたが、デザイナーが表現したいものに忠実になる上、SVG なので容量が何といっても軽い!というのも魅力です。
いやしかし、デザイナーの仕事の範囲が広がっちゃって大変ですけど(笑)

f:id:hiromisatoh:20200105182821g:plain

https://lottiefiles.com/share/O4iV4G

↑ プレビューをここに載せています

アイコンアニメーションもどんどん作った一年だったなあ。
こちらはその一例です。

 

※これらの制作は立場上どのクライアント様の納品物かは明かしませんが、下のヤツは実際に今現在アプリ内で本番実装されているものなので、もし掲載に問題あるようでしたらご指摘ください mm 

本年もどうぞよろしくお願い致します。