厳選・オープン・無料

LottieFiles

ウェブサイト、アプリ、プレゼンテーション、ソーシャルなどにおいて、軽量なアニメーションを作成、管理、実装します。

designmotion
LottieFiles のスクリーンショット
↓ デザインシステムをダウンロード (13 MB)OpenDesign で開く

オリジナル: https://lottiefiles.com

📦 パックの中身を見る →

01

デザイン DNA

モーションアニメーション軽量インタラクティブ開発者

開発者とデザイナーの両方にとって、アニメーションを身近にする、遊び心のあるモーションデザインツールキット。

02

カラー

#00b894Accent
#1a1a2eInk
#4a4a6aInk soft
#ffffffBG
#f6f7f5BG soft
#6b7280Muted
rgba(235,238,235,0.5)Line

クリーンでコントラストの高いパレット。ニュートラルなホワイトとダークの背景に対し、鮮やかなティール色のアクセントを単色配置し、個性を出すための遊び心のあるマルチカラーイラストを使用します。

03

タイポグラフィ

humanist-sans · ui-monospace

04

余白

4px
8px
12px
16px
24px
32px
48px
64px
96px

一貫した4pxベースグリッドによる余裕のあるホワイトスペース。要素間に呼吸できる余白を生み出します。

05

サーフェス (角丸 / 影 / 罫線)

sm · 6px
md · 8px
lg · 16px
pill · 9999px

0 1px 2px 0 rgba(0,0,0,0.05) · 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

水平方向に十分なパディングを持つ標準的な中央揃えコンテナ、左揃えコンテンツのフルワイドヒーローセクション。

07

モーションとインタラクション

150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

インタラクティブ要素のhover状態におけるスムーズなトランジション · UIフィードバックのためのtransformとopacityのアニメーション · ボタンやリンクのカラーおよび背景色のトランジション

150～300msのカラーおよびbackground-colorトランジション、微妙なopacity変化 · transformとscaleのマイクロインタラクション

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

LottieFiles — 桌面首屏（hero）
桌面首屏（hero）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 移动首屏
移动首屏

実ページから取得 · 実 computed styles

11

System Prompt

LottieFilesは、開発者とデザイナーのためのモーションデザインプラットフォームです。ポジション：軽量なアニメーションのための遊び心のあるSaaSツール。主要なHEXカラー：#ffffff（背景）、#1a1a2e（テキスト）、#00b894（ティールアクセント）、#f6f7f5（ソフト背景）。フォントカテゴリ：表示および本文にhumanist-sans、コードにui-monospace。重要な禁止事項：1) 堅苦しい鋭角を使用しない — 丸み/pill形状を使用。2) イラストをフラットにしない — 遊び心のある3Dキャラクタースタイルを維持。3) モノクロームにしない — クリーンなティールをプライマリーに保ちながら、イラストでは鮮やかなマルチカラーアクセントを維持。4) 密集したレイアウトを作成しない — 余裕のあるホワイトスペースを維持。5) セリフ体フォントを使用しない — クリーンなサンセリフにとどめる。6) 攻撃的なCTAを使用しない — フレンドリーでアクション志向のコピーを維持。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

en · zh-CN · zh-TW · ja · ko