厳選・オープン・無料
Motion
スケジューリングとタスク管理を自動化し、生産性を2倍にするAI駆動のプラットフォーム。
productivitysaas
01
デザイン DNA
生産性AI効率自動化ワークフロー
カレンダー、メモ、タスクをAIを駆動するハブに統合した、洗練されたデジタルワークスペース。
02
カラー
#2c77e7Accent
#101828Ink
#475467Ink soft
#ffffffBG
#f0f4f8BG soft
#f7f8fbBG quiet
#787f86Muted
rgba(71, 84, 103, 0.1)Line
クリーンな白の背景に、控えめなグレーのアクセントと、鮮やかな青のプライマリアクションカラーを配置。
03
タイポグラフィ
humanist-sans · monospace
- display
64px · 700 - headline
40px · 700 - body
16px · 400 - small
14px · 400 - label
12px · 600
本文テキストおよびUI要素にはInterを使用 · 大きなディスプレイ见出しにはAlbert Sansを使用 · ディスプレイテキストにはタイトな文字間隔を維持 · 強調やラベルにはセミボールドウェイトを使用
04
余白
4px
8px
12px
16px
24px
32px
40px
48px
64px
96px
可読性を確保するための、十分な余白を持つ一貫した4pxグリッドシステム
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(71, 84, 103, 0.1)
0 4px 6px -1px rgba(0, 0, 0, 0.05) · 0 2px 4px -2px rgba(0, 0, 0, 0.05) · 0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1) · 0 20px 25px -5px rgba(0, 0, 0, 0.1) · 0 8px 10px -6px rgba(0, 0, 0, 0.1)
06
レイアウト
1200container
12columns
24pxgutter
768 / 1024 / 1280breakpoints
ヒーローには中心配置のシングルカラムレイアウト、フィーチャーセクションには多カラムレイアウトを採用
07
モーションとインタラクション
150msmicro
150mssmall
150msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
すべてのインタラクティブ要素に滑らかなトランジション (150ms) · ホバーステートのカラートランジション · スケールや移動のためのトランスフォームトランジション · 奥行き効果のためのボックスシャドウトランジション
控えめな色の暗化とシャドウの強化 · ボタンのわずかなスケール縮小 (0.98)
08
コンポーネント
- button ソリッドブルー (#2c77e7) に白テキスト、角丸 (8px)、控えめなシャドウ、およびホバー状態のトランジション
- card 白背景に控えめなボーダー、角丸 (8-12px)、および柔らかいシャドウ
- chip 明るい背景と控えめなボーダーを持つ小さな角丸ラベル
- input 控えめなボーダー、角丸 (8px)、およびプレースホルダーテキストを持つ白入力欄
- hero グラデーションテキストの強調、サブテキスト、および目立つCTAボタンを備えた、大きく中央配置された见出し
09
文体と禁止事項
- トーン 自信に満ち、プロフェッショナルで、成果に焦点を当てた口調
- 見出し 利点や優位性を強調する、大胆で直接的な記述
- CTA 明確な価値提案を伴うアクション重視（例：「Motionを無料でお試しください」）
- 明るいグラデーションを到处に使用しない — スクリーンショットでは特定のテキストのハイライトにのみ控えめなグラデーションが使われている
- 複数のCTAで画面を雑然とさせない — スクリーンショットではセクションごとに主要な1つの「Motionを無料でお試しください」ボタンが表示されている
- 重いボーダーを使用しない — スクリーンショットでは不透明度の低い非常に控えめな1pxボーダーが使われている
- 色で過剰に盛り込まない — スクリーンショットでは中立的なグレーを基調に、青のアクセントが主に使用されている
- 装飾的なフォントを使用しない — スクリーンショットではクリーンで読みやすいサンセリフフォントが使われている
- テキストを小さくしすぎない — スクリーンショットでは読みやすい本文テキストとして最小14pxを維持している
- 避ける: 過度に専門的な用語
- 避ける: 受動態
- 避ける: 具体的でない曖昧な約束
- 避ける: 過度の感嘆符の使用
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
これはMotionと呼ばれるプレミアムSaaS生産性プラットフォームで、生産性を2倍にするAI駆動のワークスペースとしてポジショニングされています。主要なデザイン要素には、クリーンな白背景 (#ffffff) に控えめなグレーアクセント (#f0f4f8, #787f86) と鮮やかなブループライマリカラー (#2c77e7) が含まれます。タイポグラフィにはヒューマニストサンセリフフォント (Inter および Albert Sans) を使用し、大きく太字の见出し (64px、700ウェイト) とクリーンな本文テキスト (16px、400ウェイト) を採用しています。重要なデザイン制約として、重いシャドウやボーダーの使用を避け、十分な余白を維持し、CTAは目立つが過度でないようにし、すべてのテキストが十分なコントラスト比を維持するようにしています。このデザインは、主要な利点を述べる文脈でグラデーションテキスト効果を控えめに使用しつつ、明確さとプロフェッショナルさを重視しています。
en · zh-CN · zh-TW · ja · ko