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

Create a free website with Framer, the website builder loved by startups, designers and agencies.