Web制作やアプリ開発において、オリジナルでアニメーションを作りたい場面があるかと思います。アニメーション作成のツールとしてはAdobe After Effectsなどが一般的に用いられますが、高機能なため複雑で導入までのハードルが高い課題があります。そんな方にお勧めなのが、「Lottielab」というツールです。Figmaとの連携もでき、すでにFigmaを使われている方はアセットをインポートしてアニメーション作成ができるため便利です。本記事では、Lottielabの基本機能や、アニメーションの作成方法をご紹介します。直感的な操作で簡単にLottieアニメーションを自作したい方は、ぜひ参考にしてみてください。Lottieの基本的な情報やStudioへの埋め込み方法に関しては、こちらの記事をご覧ください！Lottieとは？Studio×Lottieで魅力的なアニメーションを実現する方法！なお、この記事は以下のような方におすすめですFigmaなどデザインツールを普段使っている動画編集ツールを少し触ったことがあるLottielabとは？Lottielabは、ブラウザ上で使用可能なモーションエディターです。Web制作やアプリ開発に最適なアニメーションファイル形式であるLottieを作成することができる点が強みになっています。ほかの動画編集ツールと比較してLottieファイルを作成することに特化しているため、機能がかなりシンプルです。デザインツールのような操作画面で、直感的な操作ができる点も非常に便利です。また、SVGやFigmaからのインポートが可能で、Figmaで作成したアイコンやイラストに動きを加えることもできます。作成したアニメーションはLottieファイルやGIF、MP4として出力でき、Webサイトへの実装に適しています。なお、基本機能は無料版でも使用することができますが、以下の点は有料版のみの対応となっています。実際にクライアントワークで活用したり、チーム開発をする場合は有料版をご検討ください。【有料版のみ対応できること】透かしなしでエクスポート無制限の共同作業者（閲覧者）こんなアニメーションが作れます%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FYCJzqpCGmNY%3Fsi%3D3tzkFunJxSnnYM8f%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3D%22%22%20%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3E動画参考：Lottielab公式サイトhttps://www.lottielab.com/featuredLottieファイルに対応したツールのため、アイコンなどUIアニメーションとして活用できる事例が圧倒的に多く感じられます。本記事で紹介したほかにも、公式ギャラリーでは様々な事例をまとめていますので、チェックしてみてください！Lottielabのここが魅力！直感的な操作と簡単なアニメーション設定Lottielabは、After Effectsに比べて機能がシンプルでデザインツールのようなUIのため、デザインツールを普段から使用している人には特に親しみやすく、直感的に操作できます。また、イージングも複数パターンから選択できるため、手軽にアニメーション設定を行うことができます。ブラウザベースの利便性Lottielabは完全にブラウザ上で動作するため、専用ソフトのインストールが不要です。そのため、異なるデバイスや場所からのアクセスが簡単で、作業環境を選ばず、すぐにアニメーション制作を始められる点が大きな強みです。多様なファイルインポート・エクスポート機能SVGやFigmaからのインポートが可能なため、普段からFigmaを活用している方にとって特におすすめです。また、出力形式もLottieファイル、GIF、MP4など幅広く対応しており、Webサイトやアプリ開発で重宝します。高い柔軟性により、さまざまなプロジェクトのニーズに応えることができます。Lottielabで簡単なアニメーションを作ろう円グラフが動くアニメーション今回は円グラフが伸びていく簡易的なアニメーションをご紹介します。%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FQhqRB-hcTF0%3Fsi%3DWzW1nQ_mB-kbLBgy%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3D%22%22%20%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3E1.円グラフのベースを作る画面左上のツールパネルから、図形のプルダウンメニューをクリックし、丸を選択します。フレーム上をドラッグすると、丸が追加できます。追加した丸を選択し、画面右側のパネル上部から「W：幅」「H：高さ」に任意の数値を設定してください。（今回は「W：500」「H：高500」の正円に設定しています）右側の「Constrain proportions」アイコンをクリックすると、比率を固定することができます。次に、「Fill」を-アイコンをクリックして塗りをなくし、代わりに「Stroke」を+アイコンをクリックして線を追加します。Strokeに任意のベースカラーを設定し、太さと線の位置を調整します。（今回は「太さ：100」に設定しています）線の位置は「center」を選択しないと上手くアニメーションが機能しないので、注意が必要です。これでベースの準備は完成です。2.円グラフのアニメーションを作る先ほど作成した円グラフのベースをコピー＆ペーストで複製します。左側のレイヤーパネルから、パーツの名称を変更しておくと分かりやすいです。そして、同じく「Stroke」から任意のメインカラーを設定し、パネル下部の「Reveal Path」の画像赤枠部分をお好きなデータの数値に変更してください。ここから実際にアニメーションを設定していきます。画面上部中央にあるAnimateトグルをオンにすると、アニメーションを設定できます。動かしたいレイヤーを選択し、画面下部にあるタイムラインパネルに、デフォルトでは0.0地点にキーフレームが設定されているので、アニメーションを完了させたい秒数（今回は2.0）のフレームまでドラッグで動かします。次に、タイムライン上にある緑のカーソルを0.0までドラッグで動かし、「Reveal Path」の画像赤枠部分を0％に変更します。画面右上の再生ボタンを押すと円グラフが伸びていくアニメーションが確認できます。最後に、より魅力的な動きに仕上げるためにイージングの調整を行います。タイムライン上の紫のエリアをクリックすると、画面右側のパネルに「Easing Curve」が表示されます。今回はプルダウンを選択し「Bounce In」を選択し、このままだと動きが大胆なのでカーブを少し手動で調整しました。これで円グラフのアニメーションは完成です！3.テキストも編集できます円グラフを補足するタイトルを追加してみましょう。アニメーション編集モードを解除するため、Animateトグルをオフにします。画面左上のツールパネルから「テキスト」をクリックし、フレーム上をクリックするとテキストボックスが追加されます。画面右側のパネルから「Text」をクリックし、お好きなフォントに設定してください。（今回はNoto Sans JP）フォントサイズやウェイト、色も自由に変更可能です。データのテキストも追加していきます。パーツをグループ化したい時は、右クリックで表示されたパネルから「Group selection」を選択することでグループ化できます。ショートカットでは、「Ctrl+G」でグループ化できます。また、Figmaなどのデザインツールと同様に整列機能も使えるので、簡単にパーツを揃えることができます。テキストにもアニメーションを設定してみましょう。Animateトグルをオンにし、作成した中央のテキストを選択します。今回はテキストを一つの塊として動かしたいので、グループ化しておきます。タイムラインパネルに、デフォルトでは0.0地点にキーフレームが設定されているので、アニメーションを完了させたい秒数（今回は1.0）のフレームまでドラッグで動かします。次に、タイムライン上にある緑のカーソルを0.0までドラッグで動かし、「Opacity」を0％に変更します。さらに、下からふわっと表示されるアニメーションにしたいので、オブジェクトを少し下の方にドラッグします。最後に、円グラフの時に設定したようにイージングを調整します。タイムライン上の紫のエリアをクリックし、画面右側の「Easing Curve」を変更します。統一感を持たせるため、先ほどと同様に「Bounce In」を少し手動で調整します。これでテキストのアニメーションも完成です！もっと基本機能を知りたい方はこちら%3Ciframe%20width%3D%22100%25%22%20height%3D%22auto%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FpmHJuy-oN4Y%3Fsi%3DFHLNRk8ZSVrNMOXa%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%22%3D%22%22%20style%3D%22aspect-ratio%3A%2016%20%2F%209%3B%22%3E%3C%2Fiframe%3E%0Aチュートリアル動画https://www.lottielab.com/tutorials公式サイトにて、豊富なチュートリアル動画を公開しています。1本あたりの視聴目安時間は3～5分程度となっているため、比較的短時間で基本機能を習得することができます。これからLottielabを始める方や、もっと知りたい方はこちらの動画をご覧いただくことをおすすめします。作ったアニメーションを書き出してみよう作成したアニメーションを書き出す際は、画面右上にある「Export」ボタンをクリックします。Lottielabでは、Lottie、GIF、MP4、Telegram sticker形式に書き出すことが可能です。実際にWebサイトにLottie形式で埋め込みたい場合は、「JSON URL」を選択した状態で「Copy link」ボタンをクリックし、埋め込みコードを取得してください。まとめLottielabは、Web制作やアプリ開発において、オリジナルアニメーションを直感的に作成できる便利なモーションエディターです。シンプルなUIで学習コストを少なく編集できるため、動画編集スキルを持たないデザイナーでも効率的にアニメーションを制作できます。基本機能は無料で使えるため、ぜひ本記事を参考にしながらオリジナルアニメーション制作に挑戦してみてください。Lottielabを活用することで、あなたのクリエイティブな可能性が広がることを応援しています！