見出し画像

LottieチャンスはAEではなく、Haikuで制す

たまにやってくるLottieチャンス。

AE(AfterEffects)の操作が難しくて苦手な私にとっては、アニメーション作るとなったとき、ため息が出がち。作り始めると楽しいんですけどね。

そんなときに教えてもらった「Haiku」というツールがとても使いやすくて良かったので、今回はそれを簡単に紹介します。


Haikuでできること

Haikuは、マイクロインタラクションやUIモーションに適しています。
スプラッシュとか、ボタンのちょっとしたアニメーションとかですね。
制作ツールの比較は、こちらのnoteがわかりやすかったです。

🔗UIモーション制作ツールまとめ|むらかみ。 @tellullu


Haikuの使いかた

Haikuのページから、登録とDLしてください。14日間の無料トライアルがあります。

以下2つのページで、だいたい分かると思います。
(丁寧に説明しなくてすみません…AE、Sketch、Figmaを使いこなしてる皆さまなら楽勝だと思います)

🔗Haikuのヘルプページ




Haikuの良いポイント

良いポイント、5つあげます!

1)Figma・Sketch・イラレからのインポートが簡単**

AEにイラレのパスをコピペ方法を毎回ググってた私。もう迷いません!但しSketchもFigmaもアニメーション用にスライスをする必要があります。

🔗Figmaのインポート方法
🔗Sketchのインポート方法


2)イージングの調整もサクッと簡単

動きを変えたい箇所をクリックすると、Linearなどの項目を選択することもできるし、手動でイージングの動きを調整することもできます。
この曲線ってどんな動きだっけ?と思ったら、グラフの上で紫のボールがプレビューをしてくれます。やさしい世界・・・・。


3)アニメーションのコンポーネントが一瞬

UI全体像にのせながら、細部のアニメーションを作る人が多いと思います。
SketchやFigmaと同様の操作で、書き出したい部分を選択しコンポーネントを作ることができます。

🔗コンポーネントの作成方法


4)シェア・書き出しが簡単

右上のパブリッシュを押すと、ローディングが始まります。
シェアリンクの取得や、gif単体の書き出しもできます。MobileのiOSかAndroidをクリックすると、Lottieのダウンロードができます。

jsを一括で全部ダウンロードしたいって方は、ライブラリからShow In Finderでファイルを開くと、もうそこに全てがまとまっています。

Haikuは自動更新してくれる優秀な子ですが、一応念のため、パブリッシュを押してローディングを終えてから、ファインダーを開いた方が安全そうです。(パブリッシュを押したときに、ファインダーの中身も更新される)

プラグインを入れる手間もなく、ダウンロードの手間もなく、最高!!!


5)UIがわかりやすい、きれい

Haikuの全体のUIです。すごくシンプル。必要な機能だけそろってるので、迷うことも少ないです。

あと、イージングの動きがタイムラインで可視化されるので、どこをどの動きに設定したかがわかりやすい。
そして、その詳細を閉じたときに、水色の透過がきれい!!!


まとめ

・Figma、Sketchからのインポートが簡単
・イージングの調整も簡単
・すぐにコンポーネントできる
・シェアも簡単
・UIめっちゃわかりやすい

なんとなく、Haikuの良さが伝わったでしょうか?
LottieチャンスがめぐってきたらHaiku、ぜひ使ってみてください✌️

この記事が気に入ったらサポートをしてみませんか?