Todoist: 17年間にわたる温かみのあるミニマリズムと最大限の抑制

9 分で読める • 126 語
Todoist: 17年間にわたる温かみのあるミニマリズムと最大限の抑制 screenshot

「Clarity, finally.」 — Todoist

Todoistは17年以上にわたり、一つの信念のもとに運営されてきた。最高のタスク管理ツールとは、実際に使い続けられるものである。2007年にAmir Salihefendicによって設立されたTodoistは、GTD、バレットジャーナル、セカンドブレイン、AIエージェントなど、あらゆる生産性トレンドを乗り越えてきた。それは、複雑さを追い求めることを拒否し続けたからだ。完全リモートかつ黒字経営の企業であるDoistは、5,000万人以上のプロフェッショナルに対し、目新しさではなく一貫性と抑制に基づいたデザイン哲学でサービスを提供している。グロースハックなし、ダークパターンなし、コア機能に対する「アップグレードしてアンロック」の壁もない。その結果、「タスク管理ツールは明らかにこうあるべきだ」と感じさせる、必然的な製品が生まれた。

重要なポイント

  1. ブランドカラーは一色で十分 - Todoistはプライマリーのクリックトゥアクションとロゴにのみ赤（#E34432）を使用し、それ以外には一切使わない。この極端な抑制により、赤い要素のすべてが重要に感じられる。
  2. 不透明度ベースのテキスト階層が自然な調和を生む - すべてのテキストは、単一の温かみのあるダークブラウン（rgb(37,34,30)）を異なる不透明度（100%、66%、49%、18%、7%）で派生させており、複数のグレー値を使う必要がない。
  3. 温かみのあるオフホワイトは白ではない - #FEFDFB（ほとんど知覚できないクリーム色）の背景は、無機質さと親しみやすさの違いを生む。そしてほとんどのユーザーはこれに意識的に気づくことはない。
  4. シャドウはほぼ不要 - Todoistは色とスペーシングだけで視覚的な階層構造を実現している。デザインのどこにもシャドウはほぼ存在しない。
  5. 17年間の洗練は17の機能に勝る - デザインのどこにも新しさやトレンドは感じられない。すべてが約20年にわたってテスト、洗練、実証されてきたかのように感じられる。

Todoistが重要な理由

Todoistは、長寿と抑制がデザインにおける競争優位になることを実証している。競合他社が機能の均衡やビジュアルトレンドを追い求める一方、Todoistのデザインは引き算によって進化してきた。キャプチャ、整理、実行というコアループに寄与しないものを削除してきたのだ。AIへのアプローチ（音声入力を構造化タスクに変換する「Ramble」）にも同じ哲学が反映されている。新しいインタラクションパラダイムを創り出すのではなく、既存のワークフローに奉仕するのだ。

主な実績： - 50M以上のプロフェッショナルに、すべてのプラットフォーム（Web、iOS、Android、Mac、Windows）で一貫したビジュアル言語を提供 - 約100名の独立した黒字企業として、寛大なフリーミアムモデルを維持 - 自然言語入力解析（「毎週火曜の午後5時に食料品を買う」が繰り返しタスクになる）を構築し、フォーム入力の摩擦を排除

コアデザイン原則

1. 単色のブランドカラー

赤（#E34432）が唯一のブランドカラーである。プライマリーのCTAボタン、ロゴ、そしてブランドの瞬間にのみ登場する。それだけだ。セカンダリーアクセントなし、グラデーションなし、カラーシステムなし。この規律こそがデザインそのものだ。すべてが注意を奪い合うとき、何も際立たない。赤を重要な瞬間だけに制限することで、Todoistは視線が正確に向くべき場所に導かれることを保証している。

ホバーステートは#CF3520に暗くなり、テキストリンクは別のブルー（#0F66AE）を使用して、下線付きの青いテキストがクリック可能であるという慣習を維持している。しかしブランド自体は、外科的な精度で適用された単一の色だ。

アプリ内の優先度システムは、機能的な意味を持つ場合にのみ色を導入する。P1 緊急（#D1453B）、P2 高（#EB8909）、P3 中（#246FE0）、P4 デフォルト（色なし）。ここでも、色は装飾ではなく情報に奉仕している。

2. 不透明度ベースのテキスト階層

現代の生産性ツールの中で最も規律あるタイポグラフィシステム。ページ上のすべてのテキストはrgb(37,34,30)——温かみのあるダークブラウンブラックで、オフホワイトの背景に合った微かな温かみのあるアンダートーンを持つ。見出しは不透明度100%。本文は66%。控えめなキャプションは49%。ボーダーや微細な区切り線は18%。背景のティントは7%。

この単一色相のアプローチは、複数のグレー値では実現できない調和を生み出す。すべてのテキスト要素が同じベースカラーを共有し、存在感だけが変化するからだ。テキストシステムにはグレー値もセカンダリーカラーもゼロだ。

不透明度スケール:
100% ████████████████████ 見出し、プライマリーテキスト
 66% █████████████        本文、説明文
 49% ██████████           キャプション、メタデータ
 18% ████                 ボーダー、微細な区切り線
  7% ██                   背景ティント

すべて rgb(37, 34, 30) から派生

3. 温かみのあるミニマリズム

背景色#FEFDFB——rgb(254,253,252)——は純粋な白とほとんど区別がつかない。しかしその違いがすべてだ。この温かみのあるオフホワイトは、アプリを起動したときに無機質なソフトウェアではなく、整理されたノートブックを開くような感覚をもたらす親しみやすいキャンバスを作り出す。プロダクトのスクリーンショットは、重いシャドウやボーダーなしにレイアウトの中に自然に溶け込む。

グリーンサーフェス（#F4FBF7）とセージサーフェス（#F6FAEB）は、同様に微妙な色相のシフトでセクションの差別化を実現している。これらは大胆なセクション区切りではなく、注意を要求することなく視線を導く穏やかな環境変化だ。

転用可能なパターン

Todoistのデザインシステムは、そのシンプルさゆえに驚くほど移植性が高い。不透明度ベースのテキスト階層はどのプロジェクトにも適用できる。rgb(37,34,30)を独自のベーステキストカラーに置き換えれば、5段階の不透明度が即座に調和のとれたタイプシステムを生み出す。

CSSの実装はこのアプローチのエレガンスを示している：

:root {
  /* Todoist's warm minimal palette */
  --color-background: #FEFDFB;
  --color-surface-green: #F4FBF7;
  --color-surface-sage: #F6FAEB;
  --color-text: rgb(37, 34, 30);
  --color-text-secondary: rgba(37, 34, 30, 0.66);
  --color-text-muted: rgba(37, 34, 30, 0.49);
  --color-text-faint: rgba(37, 34, 30, 0.18);
  --color-text-whisper: rgba(37, 34, 30, 0.07);
  --color-brand: #E34432;
  --color-brand-hover: #CF3520;
  --color-link: #0F66AE;

  /* Typography */
  --font-sans: Graphik, "Graphik fallback", Arial, Helvetica, sans-serif;
}

/* Warm off-white body */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text);
  background-color: var(--color-background);
}

/* Hero — confident but not aggressive */
h1 {
  font-size: 55px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.55px;
}

/* Single-color CTA — red IS the elevation */
.button-primary {
  background-color: var(--color-brand);
  color: white;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  border: none;
  transition: background-color 0.15s ease;
}
.button-primary:hover {
  background-color: var(--color-brand-hover);
}

カスタム書体Graphik（Commercial Type製）は、ジオメトリックとヒューマニストの間の絶妙なバランスに位置する。Interよりも温かく、Helveticaよりもフォーマルではない。そのニュートラルな温かみは、オフホワイトの背景とブラウンブラックのテキストに調和する。ハッシュ付きファイル名パターン（Graphik-af49fcca2967e850）はNext.jsのフォント最適化を示しており、システムフォントでは保証できない一貫したクロスプラットフォームレンダリングを実現している。

見出しの55px/600ウェイト、行間1.15は、RivianやObsidianのような記念碑的な1.0の行間と比べて、明らかに親しみやすい。ネガティブレタースペーシングはサイズ全体で一貫した-1%の比率を維持しており（55pxで-0.55px、38pxで-0.38px）、恣意的な値ではなく比例的なタイトニングを実現している。

SwiftUIでは、不透明度ベースのテキストシステムがクリーンに変換できる：

extension Color {
    static let todoistBg = Color(red: 254/255, green: 253/255, blue: 252/255)
    static let todoistText = Color(red: 37/255, green: 34/255, blue: 30/255)
    static let todoistSecondary = Color(red: 37/255, green: 34/255, blue: 30/255).opacity(0.66)
    static let todoistMuted = Color(red: 37/255, green: 34/255, blue: 30/255).opacity(0.49)
    static let todoistBrand = Color(red: 227/255, green: 68/255, blue: 50/255)
    static let todoistSurface = Color(red: 244/255, green: 251/255, blue: 247/255)
}

// Opacity-based text hierarchy in practice
VStack(alignment: .leading, spacing: 8) {
    Text("Clarity, finally.")
        .font(.system(size: 55, weight: .semibold))
        .tracking(-0.55)
        .foregroundStyle(Color.todoistText)

    Text("Join 50+ million professionals who simplify work and life.")
        .font(.system(size: 16))
        .foregroundStyle(Color.todoistText.opacity(0.66))
}

デザインの教訓

抑制は競争優位である。 Todoistの単一ブランドカラーは、すべての赤い要素に意味を持たせる。競合他社が3色や4色のアクセントカラーを使うと、何も際立たない。Todoistが1色だけを使うと、CTAは見逃しようがない。

温かみのあるオフホワイトの背景は感情的な質感を変える。 #FFFFFFと#FEFDFBの違いはRGBでわずか3ポイント——単独ではほぼ知覚できないが、全体として見ると変革的だ。温かみのある背景は、体験全体を親しみやすく人間的に感じさせる。無機質な白はインターフェースをツールのように感じさせる。温かみのあるオフホワイトは、居心地のよい空間のように感じさせる。

不透明度による階層はグレースケールよりも調和的である。 一つのベースカラーの5段階は、すべてのテキスト要素が同じ色相を共有するため、手間なく統一感を生み出す。5つの異なるグレー値（例：#333、#666、#999、#CCC、#EEE）は、それぞれが単に異なる強度ではなく異なる色であるため、微妙な不調和を生む。

スペーシングと色で十分なとき、シャドウは避ける。 Todoistは、ドロップシャドウなしで視覚的な階層構造全体が機能することを証明している。赤いCTAが際立つのは、温かみのある落ち着いたキャンバス上で唯一の彩度の高い色だからであり、表面の上に浮いているからではない。このアプローチはより優雅に経年変化し、デバイス間でより一貫したレンダリングを実現する。

温かみがブランドならば、マーケティングでのダークモードは避ける。 温かみのあるオフホワイトのキャンバスはTodoistのアイデンティティだ。ダークモードはアプリ内に存在する（長時間のセッションで実用的だから）が、マーケティングサイトは常にライトモードだ。教訓：温かみがブランドの核心であるなら、最も目に触れる画面でそれを守るべきだ。

トレンドに走るタイポグラフィの極端さは避ける。 100px以上のディスプレイテキストなし、極端なネガティブトラッキングなし、ウェイト800なし。Graphikの600が最も太い。この抑制により、デザインは時代遅れにならない。5年前にも適切に見え、5年後にも適切に見えるだろう。

よくある質問

Todoist のデザインが「デザインされた」のではなく「必然的」に感じられるのはなぜですか？

17年間の継続的な改良の賜物です。すべての要素が、よりトレンディなものに置き換えられることなく、複数のデザイントレンドを生き延びてきました。温かみのあるオフホワイトの背景、単一の赤アクセント、不透明度ベースのテキスト階層、そして Graphik 書体は、流行を追った選択ではなく、約20年にわたって自らの価値を証明してきた耐久性のある選択です。付け足されたものやトレンディに感じるものが何もないとき、デザインは必然的に感じられるのです。

Todoist の不透明度ベースのテキスト階層はどのように機能していますか？

ページ上のすべてのテキストは、単一の色 — rgb(37,34,30)（温かみのあるダークブラウンブラック）— を5段階の不透明度で使用しています：見出しに100%、本文に66%、キャプションに49%、ボーダーに18%、背景のティントに7%です。すべての要素が同じベースの色相を共有しているため、異なるグレー値のパレットを必要とせずに、階層が自然にまとまりのあるものになります。

Todoist がブランドカラーを1色だけに限定しているのはなぜですか？

抑制こそがデザイン戦略です。赤（#E34432）をCTAボタンとブランドの要所に限定することで、Todoist は視線が正確に必要な場所に向かうことを保証しています。セカンダリアクセントが注意を奪い合うことはありません。単一のブランドカラーという規律は、クロスプラットフォームの一貫性も簡素化します — 同じ赤がWeb、iOS、Android、Mac、Windows のすべてで、複雑なカラーシステムなしに同一に機能します。

デザイナーは Todoist のAI機能へのアプローチから何を学べますか？

Todoist のAI機能「Ramble」は、チャットボットや新しいインタラクションパラダイムを導入するのではなく、音声入力を構造化されたタスクに変換します。その教訓は、AIは新しいワークフローを作り出すのではなく、既存のワークフローに奉仕すべきだということです。デザインは、自然言語入力を最も目立つ要素として維持することでこれを支えています — 文章をタイプするか話すだけで、システムが解析を行います。AIのブランディングも、チャットバブルも、目新しさのための目新しさもありません。

Todoist はシャドウを使わずにどのようにビジュアル階層を実現していますか？

色とスペーシングだけで実現しています。温かみのあるオフホワイトの背景（#FEFDFB）が繊細なキャンバスを提供します。単一の赤いCTAは、パレット全体で唯一の彩度のある色であるため目立ちます。タイポグラフィの階層は、1つのベースカラーのサイズと不透明度のバリエーションから生まれます。セクションの区別には、グリーン（#F4FBF7）やセージ（#F6FAEB）の面への穏やかな変化を使用しています。その結果、経年劣化しにくく、あらゆるデバイスで一貫してレンダリングされる、フラットでまとまりのあるデザインが生まれています。

参考文献