皆さんはLottie使ってますか？aftereffectsで作ったアニメーションが簡単にサイトに埋め込めるかつ、豊富なイベントでタイミングの調整などができて便利ですよね。
僕も過去に何度かLottieを使ったサイトを制作してきました。ただデザイナーから渡されたjsonファイルの確認が結構めんどくさいですよね。
同じ経験者の方ならわかりますが、実際に書き出されたデータを見るには Lottie filesというLottie公式のサービスで確認する方法があります。ただしこのサービス、プランが分かれていて無料プランだと10個までしか確認することができません。結構きついです。
もしくはエンジニアが実際にサイトに埋め込んでそのURLをデザイナーが確認する方法です。デザイナーとしてもちゃんと書き出されてるか早く確認したいのに、、となりますよね。
ちなみに僕はEagleというPCのアプリを使ってます。買い切りで4000円くらいかかりますが確実な方法です。Eagleについては本当におすすめのアプリなのでまた別の記事にまとめます。
LottieFiles: Download Free lightweight animations for website & apps.
Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time!
Eagle - デザイン整理 もっと簡単に
Eagle なら、事例・ひらめき・スクショ・画像・動画・音声・ムードボードなどを簡単整理。 インスピレーションを刺激して、作業効率アップ！
アプリの紹介
Lottie Animation Checker
Lottieアニメーションファイルのプレビュー・検証ツール。ドラッグ&ドロップでLottieファイルを読み込み、再生速度、ズーム、背景色などを詳細にコントロール。デザイナーとデベロッパーのためのLottieアニメーション確認ツールです。
そういう経緯を含めて新たに確認するツールが欲しいなと思い、確認できるツールを作りました。
使い方はシンプルにjsonファイルをドラッグ&ドロップするだけで確認できます。簡単ですね。
機能は
🎯 基本機能
- ドラッグ&ドロップでファイル読み込み（.json/.lottie対応）
- スペースキーで再生/一時停止
- 再生速度調整（0.1倍〜3倍速）
- ズーム機能（10%〜300%）
🎨 カスタマイズ
- 背景色変更（カラーピッカー）
- レンダラー切り替え（SVG/Canvas）
- ループ再生のON/OFF
- Fit Windowで画面サイズに最適化
📊 詳細情報
- ファイルサイズ、解像度、フレームレート表示
- 2種類のプログレスバー（％表示/フレーム単位）
- ドラッグでシーク可能
💾 便利機能
- 設定の自動保存（ブラウザに記憶）
- ドラッグ可能なコントロールパネル
- ファイル検証（不正なファイルを自動検出）
- モバイル対応（レスポンシブデザイン）
という感じです。
UIについてもなるべく無駄なものを省いて必要な機能のみを入れています。
CSSのUIライブラリみたいなものは入れておらずバニラでスタイリングしてますが、パラメータ調整ライブラリにはTweakpaneを使っています。操作が直感的に個人的にはdat.guiよりTweakpaneの方が好きです。
Tweakpane
A compact pane for fine-tuning parameters and monitoring value changes
後から気づいたのですがのパラメータ調整ライブラリって日本の方のコントリビュータが多数いるんですね。びっくりしました。
感想
開発時間自体はそんなにかかっていません。機能がそこまでないですし別におしゃれなこともしていないからです。何時間かかったんだろうと思ってgitのリポジトリを元に確認すると7.8時間くらいでした。ほとんどはClaude Codeが作ってくれましたが、CSSスタイリングや自作したライブラリ、クラス命名規則のルールなどかなり厳密に指定することによって開発時間を少なくしています。
フロントはAstroで作り、サーバーはCloudflareです。
Vibe Codingはやはり楽しいですね。AIに指示をして、作ってもらってる時間で私は仕事を進めていました。本業の会社でかなりLottieを使う機会があるかと思うので、会社のメンバーにもおすすめしていきたいです。
もしもこういう機能が欲しいと声があったらぼちぼち追加していきます。