Linear: ソフトウェアデザインの新標準
Linearが現代ソフトウェアのデザイン標準となった方法：キーボードファーストUX、楽観的UI、コマンドパレット、ダークモード。CSSとTypeScriptの実装パターン付き。
Linear：ソフトウェアデザインの新基準
「ソフトウェアは主張を持ち、高速であるべきだ。」— Karri Saarinen、Linear CEO
Linearは、モダンなソフトウェアがどのような体験をもたらせるかを再定義したプロジェクト管理ツールだ。2019年にUberとAirbnbの元デザイナーたちによって立ち上げられ、B2Bソフトウェアが醜くて遅い必要はないことを証明している。
Linearが重要な理由
Linearは、肥大化した委員会設計のエンタープライズソフトウェアに対するデザインステートメントとして存在する。デザイナーがデザイナーのために作ると何が起こるかを示している。
主な成果： - エンタープライズソフトウェアをコンシューマーソフトウェアのように感じさせた - キーボードファーストのインターフェースも美しくなりうることを証明 - パフォーマンスが機能であることを実証 - SaaS製品の品質に新たな基準を確立
主なポイント
- 速度は指標ではなく機能である — Linearの100ms以下のインタラクションへの執念は、体感パフォーマンスが感情的な反応を生み出すことを証明している
- キーボードファーストはパワーユーザーの勝利を意味する — コマンドパレット（Cmd+K）とニーモニックショートカット（Sでステータス、Pで優先度）は、初心者を阻害することなくエキスパートを加速させる
- 情報密度がホワイトスペースに勝る — より少ないクロームでより多くのデータを表示；クリックの後ろに隠すのではなくホバーで詳細を表示
- ダークモードが主要体験 — ダークファーストでデザインすることでプレミアムな美学を作り、パワーユーザーの目の疲れを軽減
- 楽観的UIが待ち時間を排除 — まずローカルで更新し、バックグラウンドで同期し、実際にエラーが発生したときだけ表示
コアデザイン原則
1. 機能としての速度
Linearは執念的に速い。すべてのインタラクションが瞬時に感じられる。
その実現方法： - 楽観的UIアップデート（成功を前提とし、失敗時にロールバック） - ローカルファーストアーキテクチャ - 積極的なキャッシング - 最小限のネットワークリクエスト
実装のポイント：
// 楽観的更新パターン
function updateIssue(id: string, changes: Partial<Issue>) {
// 1. ローカル状態を即座に更新
localStore.update(id, changes)
// 2. 成功状態を表示
ui.showSaved()
// 3. バックグラウンドでサーバーと同期
api.updateIssue(id, changes).catch(() => {
// 4. 失敗時のみロールバック
localStore.rollback(id)
ui.showError()
})
}
デザインへの応用: - ローディング状態は可能な限り見えないようにする - スケルトンスクリーンは必要な場合のみ - ユーザーの次のアクションを妨げない
2. キーボードファースト、マウスフレンドリー
Linearはパワーユーザー向けに設計されていますが、初心者にも親しみやすい設計です。
コマンドパレット（Cmd+K）： - すべてのアクションへの汎用エントリーポイント - すべてをファジー検索 - キーボードショートカットを発見しやすくする - キーボードから手を離す必要がない
┌────────────────────────────────────────────────────────────┐
│ Cmd+K │
├────────────────────────────────────────────────────────────┤
│ > 課題、プロジェクト、コマンドを検索... │
│ │
│ 最近 │
│ ├─ FE-123 ナビゲーションアニメーションを修正 Cmd+O │
│ ├─ BE-456 APIレート制限 Cmd+O │
│ └─ 新規課題を作成 C │
│ │
│ コマンド │
│ ├─ ステータスを変更 S │
│ ├─ 課題を割り当て A │
│ └─ 優先度を設定 P │
│ │
└────────────────────────────────────────────────────────────┘
実装原則： - すべてのアクションにキーボードショートカットがある - ショートカットは覚えやすい（SでStatus、PでPriority） - マウスは完璧に動作する。キーボードはさらに速い - ヘルプはいつでもキー1つで呼び出せる
3. 適切な情報密度
Linearは多くの情報を雑然と感じさせずに表示します。
密度のバランスの取り方：
雑然（典型的なエンタープライズ）:
┌────────────────────────────────────────────────────────────┐
│ [ ] * FE-123 | Fix bug | John | High | In Progress | 2d │
│ Tags: frontend, urgent, sprint-12, reviewed │
│ Created: Jan 1 | Updated: Jan 5 | Due: Jan 10 │
│ Comments: 5 | Attachments: 2 | Subtasks: 3/5 │
├────────────────────────────────────────────────────────────┤
│ [ ] * FE-124 | Another bug | Jane | Medium | Todo | 1d │
│ ...（すべてのメタデータを繰り返し） │
└────────────────────────────────────────────────────────────┘
LINEARのアプローチ:
┌────────────────────────────────────────────────────────────┐
│ [x] FE-123 ナビゲーションアニメーションのバグを修正 ^ John ** │
│ [ ] FE-124 ユーザープロファイルエンドポイントを更新 Jane * │
│ [x] FE-125 ダークモードトグルを追加 ^ Alex ***│
└────────────────────────────────────────────────────────────┘
^ ^
優先度 担当者 見積もり
（キャレット）（名前）（ドット）
原則： - 各レベルで必要な情報のみを表示 - テキストラベルよりもアイコンやシンボルを使用する - ホバー/選択時に詳細を表示 - 必要に応じた段階的な情報開示
4. 一貫したビジュアル言語
Linearのデザインシステムは緊密で一貫性がある。
カラーシステム：
/* Linear風セマンティックカラー */
:root {
/* ステータスカラー - 高彩度で明確 */
--status-backlog: #6B7280; /* グレー - 未着手 */
--status-todo: #3B82F6; /* ブルー - 準備完了 */
--status-progress: #F59E0B; /* アンバー - 作業中 */
--status-done: #10B981; /* グリーン - 完了 */
--status-cancelled: #EF4444; /* レッド - キャンセル */
/* 優先度 - 一貫した色相変化 */
--priority-urgent: #EF4444; /* 赤 */
--priority-high: #F97316; /* オレンジ */
--priority-medium: #EAB308; /* 黄色 */
--priority-low: #6B7280; /* グレー */
--priority-none: #374151; /* ダークグレー */
/* サーフェス階層 */
--bg-primary: #0D0D0D; /* メイン背景 */
--bg-elevated: #141414; /* カード、パネル */
--bg-hover: #1F1F1F; /* ホバー状態 */
--bg-active: #292929; /* アクティブ/選択時 */
}
タイポグラフィ:
/* Linearはすべてにおいて Inter を使用 */
:root {
--font-family: 'Inter', -apple-system, sans-serif;
/* タイトなスケール、高い可読性 */
--text-xs: 11px; /* メタデータ */
--text-sm: 12px; /* セカンダリ */
--text-base: 13px; /* 本文（一般的なサイズより小さめ） */
--text-lg: 14px; /* 強調 */
--text-xl: 16px; /* 見出し */
--text-2xl: 20px; /* ページタイトル */
}
5. デフォルトでダークモード
Linearはダークモードを主要な体験として選択しました。
これが機能する理由： - パワーユーザーの目の疲れを軽減（長時間使用時） - プレミアムで集中しやすい美的印象を演出 - ステータスカラーが際立つ - 開発者ツールの美学に沿っている
実装：
/* ダークファーストデザイン */
:root {
color-scheme: dark;
--text-primary: rgba(255, 255, 255, 0.95);
--text-secondary: rgba(255, 255, 255, 0.65);
--text-tertiary: rgba(255, 255, 255, 0.45);
--border-default: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.12);
}
/* ライトモードをオーバーライドとして設定 */
[data-theme="light"] {
--text-primary: rgba(0, 0, 0, 0.90);
--text-secondary: rgba(0, 0, 0, 0.60);
/* ... */
}
6. 心地よいマイクロインタラクション
Linearのすべてのインタラクションは熟考されています。
例： - パワーユーザーの目の疲れを軽減（長時間） - プレミアムで集中した美学を作成 - ステータスカラーをポップさせる - チェックボックスには心地よいクリックフィードバックがある
アニメーションの原則：
/* Linearのモーション */
:root {
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--duration-fast: 100ms; /* マイクロフィードバック */
--duration-normal: 150ms; /* 標準トランジション */
--duration-slow: 250ms; /* ページトランジション */
}
.issue-card {
transition:
transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out);
}
.issue-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
学ぶべきデザインパターン
コマンドパレット
LinearのCmd+Kは、今やモダンなソフトウェアで期待されるパターンとなっています。
実装ガイド：
<!-- コマンドパレットの構造 -->
<dialog class="command-palette" aria-label="コマンドメニュー">
<header>
<input
type="text"
placeholder="課題やコマンドを検索..."
aria-describedby="command-hint"
/>
</header>
<nav aria-label="コマンド結果">
<section aria-label="最近">
<h3>最近</h3>
<ul role="listbox">
<li role="option" tabindex="0">
<span class="issue-id">FE-123</span>
<span class="issue-title">バグ修正</span>
<kbd>Cmd+O</kbd>
</li>
</ul>
</section>
<section aria-label="コマンド">
<h3>コマンド</h3>
<!-- ... -->
</section>
</nav>
</dialog>
コンテキストメニュー
必要なものだけを表示する右クリックメニュー。
課題を右クリック：
┌────────────────────────────────┐
│ 課題を開く Cmd+O │
│ 新しいタブで開く Cmd+Shft+O │
├────────────────────────────────┤
│ ステータスを設定 S │
│ 優先度を設定 P │
│ 担当者を割り当て A │
├────────────────────────────────┤
│ リンクをコピー Cmd+C │
│ IDをコピー │
├────────────────────────────────┤
│ 削除 Backspace │
└────────────────────────────────┘
インライン編集
モーダルダイアログなしで編集。
変更前（クリックで編集）:
┌────────────────────────────────────────┐
│ ナビゲーションのバグを修正 [編集] │
└────────────────────────────────────────┘
AFTER（クリックでインライン編集）:
┌────────────────────────────────────────┐
│ Fix navigation bug| │ ← カーソルが
│ ────────────────── │ その場に表示
└────────────────────────────────────────┘
Linearから学ぶべきこと
あらゆるソフトウェアプロジェクトに適用できること
- 速度は妥協できない - 体感速度と実際のパフォーマンスの両方を最適化する
- あらゆる場所にキーボードショートカット - ただし必須にはしない
- コマンドパレット - 万能のアクセスポイント
- 正しいダークモード - 後付けではなく設計の中心に
- 情報密度 - より少ないスペースでより多くを表示
- 一貫したデザイン言語 - すべての要素が関連性を持つ
具体的なテクニック
| テクニック | 適用方法 |
|---|---|
| 楽観的UI | まずローカルで更新し、バックグラウンドで同期 |
| あいまい検索 | コマンドパレットにFuse.jsなどを使用 |
| 覚えやすいショートカット | SでStatus、PでPriority、AでAssign |
| 控えめな浮き上がり | ホバー時に1-2pxの浮き上がり、派手な影は使わない |
| 意味のある色 | 一貫したステータス/優先度の色システム |
| タイトなタイポグラフィ | 本文13px、密だが読みやすく |
Linearチームの名言
「私たちは速度を機能として考えています。300msかかるものは壊れているように感じます。」
「すべてのピクセルに意図があるべきです。なぜそこにあるか説明できないなら、削除してください。」
「キーボードファーストは、キーボードオンリーという意味ではありません。 それはパワーユーザーを尊重するということです。」
よくある質問
Linearが他のプロジェクト管理ツールより速い理由は？
Linearは楽観的UIアップデート、ローカルファーストアーキテクチャ、積極的なキャッシングを採用しています。課題のステータスを変更すると、バックグラウンドで同期が行われている間にUIは即座に更新されます。Linearはネットワークリクエストをブロックするのではなく、成功を前提として動作し、エラーが発生した場合のみ表示するため、ほとんどの操作が瞬時に感じられます。
Linearのコマンドパレット（Cmd+K）はどのように機能しますか？
コマンドパレットは、課題、プロジェクト、コマンド全体でファジー検索を使用するユニバーサルなエントリーポイントです。ニーモニックキーボードショートカット（Sでステータス、Pで優先度、Aでアサイン）をサポートしており、ユーザーはパレットを通じてこれらを発見し、その後パレットを開かずに直接使用できます。これにより、初心者からパワーユーザーへの段階的な学習パスが生まれます。
Linearがダークモードをデフォルトに選んだ理由は？
Linearはアプリケーションで長時間作業するパワーユーザー向けに設計されています。ダークモードは目の疲れを軽減し、典型的なエンタープライズソフトウェアと差別化するプレミアムな美しさを生み出し、ステータスカラーをより鮮やかに見せます。 ライトモードはオーバーライドとして存在しますが、ダークモードが主要なデザインターゲットです。
Linearはどのようにして雑然とした印象を与えずに高い情報密度を実現しているのか？
Linearはテキストラベルの代わりにシンボルやアイコンを使用し、リストレベルでは必要最小限のメタデータのみを表示し、ホバーや選択時に詳細を表示します。タイポグラフィのスケールは一般的なものより詰まっており（本文13px）、一貫したスペーシングが無駄な余白なしに視覚的なリズムを生み出しています。
Linearのキーボードショートカットへのアプローチは？
Linearのすべてのアクションにはキーボードショートカットがあり、ショートカットは覚えやすいニーモニック方式です。コマンドパレットは各アクションの横にショートカットを表示することで、ユーザーにショートカットを教えます。つまり、マウスユーザーも問題なく作業できますが、キーボードユーザーはより速く作業できます。設計哲学は「キーボードファースト、マウスフレンドリー」です。
リソース
- ウェブサイト: linear.app
- 変更履歴: Linear自体の変更履歴も美しくデザインされています
- ブログ: チームによるエンジニアリングとデザインに関する投稿
- Twitter: デザインの更新情報は@linear