生産性/タスク管理UI設計ガイド -- "Quiet Focus"
生産性ツールのUIは、存在感を消すことが最高の仕事だ。ユーザーが意識するのはタスクの進捗とドキュメントの内容であり、UIのボタンやボーダーではない。道具は透明であるほど優れている。
本テンプレートは Notion と Todoist から着想を得た「Quiet Focus」設計システムを定義する。ウォームグレー/セピアのトーンが長時間の作業でも目に優しく、ブルーのアクセントが「次のアクション」を静かに示す。
核心となる設計思想
UIは「透明な道具」に徹する。ユーザーの集中を妨げる装飾は一切排除し、コンテンツ（タスク・ノート・ドキュメント）が画面の主役であり続ける。色を使うのは「意味がある時だけ」。優先度、ステータス、エラー。それ以外はモノクロームで良い。
1. デザイン哲学 -- 「静かな集中」
Notion のアプローチ -- 書くことに集中させる
Notion の UI が優れているのは、「ツールバー」と「コンテンツ」の境界が曖昧な点だ。ページを開くと、そこにはほぼ白紙のキャンバスがあり、タイプするだけで構造化された文書が生まれる。この「インラインエディティング」の感覚がこのテンプレートの核心にある。
Todoist のアプローチ -- タスク完了の快感
Todoist はチェックボックスを「押す」瞬間に小さな達成感を演出する。取り消し線が引かれ、テキストがグレーアウトし、微かなアニメーションで「終わった」感覚を強化する。この小さなフィードバックが、タスク管理ツールの習慣化に大きく貢献する。
ダッシュボードプレビュー
このテンプレートの適用範囲
| カテゴリ | 適合度 | 具体例 |
|---|---|---|
| タスク管理 | 最適 | ToDoリスト、プロジェクト管理、スプリント管理 |
| ノート・ドキュメント | 最適 | ナレッジベース、Wiki、メモアプリ |
| プロジェクト管理 | 最適 | カンバンボード、ガントチャート、リソース管理 |
| CRM | 適合 | 顧客管理、パイプライン管理 |
| 学習管理 | 適合 | コース管理、進捗トラッカー |
| フード/旅行 | 非推奨 | 写真重視のUIには TRAVEL / FOOD_DELIVERY |
| ゲーミング | 非推奨 | GAMING_APP を使用 |
2. ウォームグレー配色システム
なぜニュートラルグレーではなくウォームグレーなのか
純粋なグレー（#f5f5f5 等）は冷たく無機質だ。長時間の作業環境においては、微かにセピアがかったウォームグレーの方が目に優しく、「紙に書いている」ような親しみを感じさせる。Notion がニュートラルグレーではなくウォームグレー（#f7f7f5）を選んでいるのは、この理由だ。
WARM GREY HIERARCHY
優先度カラーシステム
PRIORITY COLORS
優先度色の使い分け
P1（赤）は本当に緊急なタスクだけに使う。赤を多用すると「全部緊急」に見え、優先度の意味が消失する。大半のタスクは P3（青）か P4（灰）になるべきだ。
3. インラインエディティングの設計
生産性ツールの核心は「見る」と「編集する」がシームレスであること。テキストをクリックするとそのままカーソルが入り、Enterで確定。モーダルや別画面への遷移は不要。
設計のポイント:
- テキストは通常時に
border: noneで「静的テキスト」に見える - ホバーで
bg-hoverを適用し「編集可能」を暗示 - フォーカス時に
border-bottom: 2px solid #2383e2で編集モードを明示 - Escapeでキャンセル、Enterで確定
4. 使用上の注意
サイドバーのネスト
ページ/フォルダのネストは padding-left 24px ずつで表現する。3階層以上のネストは認知負荷が高くなるため、フラットな構造を推奨する。折りたたみ矢印（三角形アイコン）で子要素の表示/非表示を制御する。
カンバンボードのスクロール
デスクトップでは全カラムを表示するが、カラム数が多い場合は水平スクロールを許可する。モバイルではカラム切り替えタブ（「未着手」「進行中」「完了」）で1カラムずつ表示する。
キーボードショートカット
パワーユーザーはマウスを使わない。以下のショートカットを推奨:
Ctrl+N: 新規タスクCtrl+Enter: タスク完了トグルTab: インデント（ネスト）Shift+Tab: アンインデント