厳選・オープン・無料
Todoist
明瞭さとシンプルさのためにデザインされた、世界最高のToDoリストアプリ。
productivitysaas
01
デザイン DNA
タスク管理組織化シンプルさ生産性プロフェッショナル
あなた的人生のための、整理された清潔なデジタルノート
02
カラー
#E44232Accent
#25221EInk
rgba(37,34,30,0.66)Ink soft
#FFFFFFBG
#F9F7F6BG soft
#FEFDFCBG quiet
rgba(37,34,30,0.49)Muted
rgba(37,34,30,0.18)Line
単一の高彩度赤アクセントを用いた暖かいニュートラル
03
タイポグラフィ
humanist-sans · geometric-sans
- display
56px · 500 - h2
36px · 500 - body
18px · 400 - small
15px · 400
プライマリな表示およびUIテキストにはInterを使用 · セカンダリな本文テキストにはGraphikを使用 · 装飾的または引用要素にはCaeciliaを使用 · 見出しは太字でトラッキングをタイトに · 本文テキストは通常のウェイトで行間をゆったりと
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
一貫した4pxのベースグリッドと、セクション間に豊かなホワイトスペース
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(37,34,30,0.18)
0px 1px 0px 0px rgba(37, 34, 30, 0.04) · 0px 14px 19px -9px rgba(37, 34, 30, 0.07) · 0px 10px 48px 0px rgba(37, 34, 30, 0.18)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
12カラムのグリッドと余裕のあるマージン、中央に揃えられたコンテンツブロック
07
モーションとインタラクション
150msmicro
350mssmall
500msmedium
cubic-bezier(0.2, 0.8, 0.2, 1)easing
Transformベースのホバーエフェクト · 滑らかな背景色のトランジション · インタラクティブ要素の微細なスケールアニメーション
微細なtransformスケールとカラーブライトネスの上昇 · スプリングイージングで縮小
08
コンポーネント
- button プライマリアクションのための、グラデーション背景と微細なシャドウを備えた角丸長方形
- card 微細なボーダーと角丸を備えた清潔な白いコンテナ
- chip 微細な背景を持つピル型カテゴリセレクター
- input 微細なボーダーと角丸を備えた清潔なフィールド
- hero 太字の見出しとプロダクトモックアップを用いた2カラムレイアウト
09
文体と禁止事項
- トーン フレンドリー、親しみやすく、自信に満ちた
- 見出し 明瞭さとシンプルさを強調する、短く力強いフレーズ
- CTA 「無料で始める」などの直接的で行動を促すフレーズ
- 冷たい青のアクセントを使用しない — スクリーンショットでは暖かい赤のアクセントが使われています
- 暗い背景を使用しない — スクリーンショットでは主に白または明るい背景が使われています
- 太いボーダーを使用しない — スクリーンショットでは微細な1pxのボーダーが使われています
- 角が尖ったデザインを使用しない — スクリーンショットでは角丸（8-15pxの角丸半径）が使われています
- 本文テキストにセリフフォントを使用しない — スクリーンショットではサンセリフフォントが使われています
- 密集したテキストブロックを使用しない — スクリーンショットでは豊かなホワイトスペースと短い段落が使われています
- 複数の競合するアクセントカラーを使用しない — スクリーンショットでは単一の赤のアクセントが使われています
- 避ける: 技術用語や複雑な専門用語
- 避ける: 攻撃的またはプレッシャーをかけるような言葉
- 避ける: 過度に企業的またはフォーマルなトーン
- 避ける: ヒーローセクションの密集した段落
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（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
Todoistは、世界最高のToDoリストアプリとしてポジショニングされた高級SaaS生産性ツールです。デザインは、暖かく清潔な美学と豊かなホワイトスペースを通じて明瞭さを強調しています。主要なカラーには、白（#FFFFFF）と暖かいオフホワイト（#F9F7F6）の背景、濃いインク色（#25221E）のテキスト、そして特徴的な赤のアクセント（#E44232）が含まれます。タイポグラフィは、表示用にヒューマニストサンス（Inter）、本文用にジオメトリックサンス（Graphik）を使用します。インターフェースは、角丸（8-12px）、微細なシャドウ、12カラムのグリッドレイアウトを特徴としています。重要な制約事項：冷たい青、暗い背景、尖った角、密集したテキストブロック、複数のアクセントカラーは絶対に使用しないでください。システムは、シンプルさと明瞭さを強調する短い見出しを用いた、フレンドリーで親しみやすいトーンを維持しています。
en · zh-CN · zh-TW · ja · ko