Interactive Web Animation
Rive / Lottie / SVG
軽量かつ「触れる」アニメーションで、Webサイトのユーザー体験を向上させます。
このサイト内の作品はデザイン、アニメーション、遷移設計まで全て個人で制作しております。
Hover & Click me
Rive
ユーザーのカーソル移動やクリック、ホバーなどにリアルタイムで反応する、次世代のWebアニメーションです。
ファイル内に「ステートマシン(状態管理)」を内蔵しているため、条件に応じた複雑なアニメーションの分岐を、
驚くほど軽いデータ容量で実装可能。サイトの表示速度を一切犠牲にすることなく、リッチで直感的なUI/UXを提供します。
Lottie
(SVG Animation)
After Effectsで制作した緻密で滑らかなアニメーションを、そのままWeb上で完全に再現します。
ベクターデータ(JSON/Lottie形式)として書き出されるため、どれだけ拡大しても画質が劣化せず、スマートフォンからPCまであらゆるデバイスで美しく再生されます。複雑なキャラクターアニメーションを、エンジニアが簡単に実装できる軽量な形式で提供します。
404: Man Not Found
JSONファイルサイズ: 95 KB
寸法: 800 × 600ピクセル
フレームレート: 30FPS
尺: 4秒
ツール:After Effects (Limber / Bodymovin)
ユーザーの離脱を防ぐための404ページ用アニメーション。
モバイル回線でも即座に表示されるよう、
極限までデータを軽量化しました。
Task Completed
dotLottieファイルサイズ: 1.35 KB
寸法: 1920 × 1080ピクセル
フレームレート: 30FPS
尺: 4秒
ツール:After Effects (Limber / Bodymovin)
完了の瞬間を彩る、ミニマルなマイクロアニメーション。ウェブサイトのUIに溶け込み、直感的なUXを提供します。
Powered by Takuan all rights reserved