LottieチャンスはAEではなく、Haikuで制す
たまにやってくるLottieチャンス。
AE（AfterEffects）の操作が難しくて苦手な私にとっては、アニメーション作るとなったとき、ため息が出がち。作り始めると楽しいんですけどね。
そんなときに教えてもらった「Haiku」というツールがとても使いやすくて良かったので、今回はそれを簡単に紹介します。
Haikuでできること
Haikuは、マイクロインタラクションやUIモーションに適しています。
スプラッシュとか、ボタンのちょっとしたアニメーションとかですね。
制作ツールの比較は、こちらのnoteがわかりやすかったです。
🔗UIモーション制作ツールまとめ｜むらかみ。 @tellullu
Haikuの使いかた
Haikuのページから、登録とDLしてください。14日間の無料トライアルがあります。
以下２つのページで、だいたい分かると思います。
（丁寧に説明しなくてすみません…AE、Sketch、Figmaを使いこなしてる皆さまなら楽勝だと思います）
Haikuの良いポイント
良いポイント、5つあげます！
１）Figma・Sketch・イラレからのインポートが簡単**
AEにイラレのパスをコピペ方法を毎回ググってた私。もう迷いません！但しSketchもFigmaもアニメーション用にスライスをする必要があります。
２）イージングの調整もサクッと簡単
動きを変えたい箇所をクリックすると、Linearなどの項目を選択することもできるし、手動でイージングの動きを調整することもできます。
この曲線ってどんな動きだっけ？と思ったら、グラフの上で紫のボールがプレビューをしてくれます。やさしい世界・・・・。
３）アニメーションのコンポーネントが一瞬
UI全体像にのせながら、細部のアニメーションを作る人が多いと思います。
SketchやFigmaと同様の操作で、書き出したい部分を選択しコンポーネントを作ることができます。
４）シェア・書き出しが簡単
右上のパブリッシュを押すと、ローディングが始まります。
シェアリンクの取得や、gif単体の書き出しもできます。MobileのiOSかAndroidをクリックすると、Lottieのダウンロードができます。
jsを一括で全部ダウンロードしたいって方は、ライブラリからShow In Finderでファイルを開くと、もうそこに全てがまとまっています。
Haikuは自動更新してくれる優秀な子ですが、一応念のため、パブリッシュを押してローディングを終えてから、ファインダーを開いた方が安全そうです。（パブリッシュを押したときに、ファインダーの中身も更新される）
プラグインを入れる手間もなく、ダウンロードの手間もなく、最高！！！
５）UIがわかりやすい、きれい
Haikuの全体のUIです。すごくシンプル。必要な機能だけそろってるので、迷うことも少ないです。
あと、イージングの動きがタイムラインで可視化されるので、どこをどの動きに設定したかがわかりやすい。
そして、その詳細を閉じたときに、水色の透過がきれい！！！
まとめ
・Figma、Sketchからのインポートが簡単
・イージングの調整も簡単
・すぐにコンポーネントできる
・シェアも簡単
・UIめっちゃわかりやすい
なんとなく、Haikuの良さが伝わったでしょうか？
LottieチャンスがめぐってきたらHaiku、ぜひ使ってみてください✌️
この記事が気に入ったらサポートをしてみませんか？