厳選・オープン・無料
Jitter
すべてのチームのための超高速モーション
designmotion
01
デザイン DNA
モーションアニメーションスピードコラボレーションチーム
ブラウザのためのデジタルアニメーションスタジオ
02
カラー
#A481FFAccent
#19171CInk
#6E6E73Ink soft
#FFFFFFBG
#F2F1F3BG soft
#E5E4E7BG quiet
#97979BMuted
rgba(215, 215, 219, 1)Line
柔らかい紫色のアクセントを1色加えたモノクロマティックなスケール
03
タイポグラフィ
grotesque-sans · humanist-sans · monospace
- display
72px · 800 - body
18px · 400
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
4pxのベースライングリッドと40pxのセクションパディングによる一貫したリズム
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
なし、または1px solidの微細なボーダー
0px 9px 21px 0px rgba(25, 23, 28, 0.1) · 0px 38px 38px 0px rgba(25, 23, 28, 0.09) · 0px 85px 51px 0px rgba(25, 23, 28, 0.05)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央寄せの単一カラムヒーロー、フル幅のロゴバンド
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
スクロールトリガーによるフェードイン · 複雑なスプリングベースのリニアトランスフォーム · opacityトランジション
カーソルをpointerにし、滑らかなトランジション · 微細なscaleまたはopacityのフィードバック
08
コンポーネント
- button 柔らかい紫色の背景に暗いテキスト、または暗い背景に白いテキストを持つピル-shaped(丸みのある)ボタン
- card 微細なシャドウと角丸を持つ白い背景
- chip 明るいグレーの背景を持つピル-shaped(丸みのある)タグ
- input 角丸を持つ標準フォームフィールド
- hero 目立つCTAボタン付きの中央寄せの大きなタイポグラフィ
09
文体と禁止事項
- トーン 自信に満ち、率直で、力を与える
- 見出し 短く、パワフルで、アクション导向
- CTA 明確で、摩擦が少なく、励むような
- 雑然とした背景を使用しない — スクリーンショットではクリーンな白や柔らかいグレーの背景を使用
- 装飾的なセリフフォントを使用しない — スクリーンショットではクリーンなサンセリフタイポグラフィのみを使用
- 多様なアクセントカラーを使用しない — スクリーンショットでは単一の支配的な紫色のアクセントを使用
- プライマリボタンにシャープな角を使用しない — スクリーンショットでは完全に丸みのあるピルボタンを使用
- 密で、複数カラムのレイアウトを使用しない — スクリーンショットでは明確な単一カラムのヒーローセクションを使用
- 小さく、雑然としたヘッドラインを使用しない — スクリーンショットでは大きく、太字で、インパクトのあるディスプレイタイプを使用
- 避ける: 専門用語
- 避ける: 複雑な文
- 避ける: 硬い企業言語
- 避ける: 曖昧な約束
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Jitterは、高速でコラボレーティブなモーションデザインツールです。デザインでは、CTA(行動喚起)に単一の柔らかい紫色のアクセントカラーを使用したクリーンな白い背景を採用しています。タイポグラフィは太字でクリーンで、ディスプレイ用にはgrotesque-sans、本文用にはhumanist-sansを使用。主要なデザイン要素には、大きくインパクトのあるヘッドライン、ピル-shaped(丸みのある)ボタン、十分な余白が含まれます。ダークモード、複雑なカラーパレット、セリフタイポグラフィは避けてください。重要な禁止事項:雑然とした背景、多様なカラー、ボタンのシャープな角を避けてください。
en · zh-CN · zh-TW · ja · ko