ダークテーマ デザインインスピレーション
2024年、ダークモードはもはや「オプション」ではない。Android、iOS、Windows、macOS -- 主要OS全てがダークモードをネイティブサポートし、調査によればユーザーの81.9%がダークモードを常用している（Android Authority, 2023）。OLEDディスプレイでは最大60%のバッテリー節約効果があり、眼精疲労の軽減は臨床的にも確認されている。
しかし、「色を反転すればダークモードになる」という誤解が根強い。実際には、ダークモードのデザインはライトモード以上に繊細な輝度設計を必要とする。背景の黒にも深度があり、テキストの白にも階層がある。この微妙な差異を意図的に設計できるかどうかが、「暗いだけのUI」と「プレミアムなダークUI」を分ける境界線だ。
このページは、Linear と Supabase のデザイン言語から抽出した実戦的なダークテーマシステムを、豊富なビジュアル例とともに解説するデザインインスピレーション記事である。SaaS ダッシュボード、開発者ツール、管理画面、データ分析ツール -- あらゆるプロダクトのダークモード設計に応用できる。
このページの使い方
スクロールするだけでデザインのアイデアが得られるように設計しています。各セクションにインラインHTMLのビジュアル例を配置しているため、コードを読まなくても視覚的にパターンを把握できます。Stitch向けプロンプトも最終セクションに収録しています。
デザイン哲学 -- 暗闇が母体
暗闇が母体。コンテンツが光として浮かぶ。
従来のダークモードは「白いUIを暗くしたもの」だった。背景を黒に、テキストを白に反転し、影を濃くする。この手法は確かに「暗く」はなるが、根本的な問題を孕んでいる -- 光の中で設計された情報構造を、闇の中に無理やり押し込めているのだ。
このプリセットは逆のアプローチを取る。最初から暗闇を前提に設計する。暗闇は「背景」ではなく「母体」であり、コンテンツは「その上に置かれるもの」ではなく「暗闇から浮かび上がる光」である。
この哲学的な転換が、具体的なデザイン判断に直結する:
- 影を使わない: 暗い背景の上に影を落としても視認できない。代わりに、輝度の微差とボーダーで深度を表現する
- 純白を避ける:
#ffffffは暗闇の中で目を射る。#f7f8f8まで輝度を落とすことで、長時間の使用に耐える - アクセントを節制する: 暗い背景ではどんな色も強く見える。アクセントカラーは「ここを見ろ」という明確な意図があるときだけ使う
Linear のアプローチ -- プレミアムコードエディタの精密さ
Linear は SaaS ダッシュボードのダークモードにおける到達点のひとつだ。その特徴を分解すると:
- 輝度ステップが極めて小さい -- 背景色の差は3-5%のブライトネス差しかない。これが「精密機器」のような印象を生む
- 半透明ボーダー --
rgba(255,255,255, 0.05-0.12)の範囲で、ソリッドカラーのボーダーは一切使わない - アクセントは1色のみ -- インディゴブルー (#5e6ad2) がCTAとアクティブ状態だけに現れる。それ以外はグレースケールの世界
- フォントウェイトの節制 -- Bold (700) を使わず、510 (Medium) が最も重いウェイト。これが「叫ばないUI」を作る
Supabase のアプローチ -- 影なしの深度表現
Supabase もまたダークモードネイティブのプロダクトだが、Linear とは少し異なる味わいがある:
- エメラルドグリーンのアクセント -- ダーク背景にグリーンが映える。技術的な信頼感と親しみやすさの両立
- ボーダー階層による深度 -- 影を使わず、ボーダーの透明度を3段階に分けることで奥行きを表現
- コードブロックの統合 -- 開発者ツールとして、コードの表示がファーストクラスシチズン。背景色を最も暗い階層にすることで「沈んだ」印象を与える
共通項 -- SaaS・開発者ツール・ダッシュボードのダークモード原則
Linear、Supabase、そして GitHub、Vercel、Raycast -- 優れたダークモードUIに共通するのは次の原則だ:
- 影を使わずに深度を表現する (輝度ステップ + 半透明ボーダー)
- アクセントカラーは1-2色に制限する
- テキストは4段階の輝度階層を持つ
- ホバー/アクティブ状態は
rgba(255,255,255)の透明度変化で表現する
以下が、これらの原則を統合した SaaS ダッシュボードのプレビューである:
カラー3層理論 -- 背景・テキスト・アクセント
優れたダークテーマは3つの独立したカラー層で構成される。各層が独自の役割を持ち、互いに干渉しない。これを「カラー3層理論」と呼ぶ。
第1層: 背景サーフェス（キャンバス）
背景色は #08090a から #191a1b まで、わずか3-5%のブライトネス差で4段階の深度を構成する。この微差が「精密機器」のような印象を生む。
Background Surface Hierarchy
なぜ4段階なのか?
- bg-deepest (#08090a): 入力欄の内部やページ全体の最深部。「窪み」を表現する
- bg-base (#0f1011): メインコンテンツ領域の標準背景。最も多くの面積を占める
- bg-panel (#141516): サイドバー、ヘッダー、ナビゲーション。bg-base より「手前」にある印象を作る
- bg-surface (#191a1b): カード、ドロップダウン、ポップオーバー。最も手前に浮上する要素
背景階層の使い分け図
+-----------------------------------------------+ bg-deepest (#08090a)
| +-------------------------------------------+ |
| | bg-base (#0f1011) | | メインコンテンツ
| | +-------------+ +---------------------+ | |
| | | bg-panel | | bg-surface (card) | | |
| | | #141516 | | #191a1b | | |
| | | sidebar | | +--------+ | | |
| | | | | |deepest | input | | |
| | | | | |#08090a | | | |
| | | | | +--------+ | | |
| | +-------------+ +---------------------+ | |
| +-------------------------------------------+ |
+-----------------------------------------------+正しい方法 vs 誤った方法:
ダーク背景で領域を分離する際、初心者はソリッドなボーダーや明確な色差を使いがちだ。しかし正しいアプローチは、輝度の微差で自然な深度を生むことだ。
誤り: 強いボーダーと均一な背景
背景が同一で、太いボーダーだけが分離手段。平面的で安っぽい印象。
推奨: 輝度ステップ + 微細ボーダー
背景色の差 + 半透明ボーダーで奥行きが生まれる。高級感がある。
| Token | 値 | 役割 |
|---|---|---|
| bg-deepest | #08090a | 最深部。入力欄内部・ページ基盤 |
| bg-base | #0f1011 | メインコンテンツ領域 |
| bg-panel | #141516 | サイドバー・ヘッダー・ナビ |
| bg-surface | #191a1b | カード・ドロップダウン・浮上面 |
| bg-hover | rgba(255,255,255,0.03) | ホバー状態 |
| bg-active | rgba(255,255,255,0.05) | アクティブ・選択状態 |
第2層: テキスト階層（情報の優先度）
テキストの輝度は「情報の匂い」を作る。ユーザーは文字を読む前に、輝度の差からどこが重要かを無意識に判断する。これを「情報の匂い (information scent)」と呼ぶ。
4段階テキスト階層の設計意図:
| Token | 値 | コントラスト比 | 用途 |
|---|---|---|---|
| text-primary | #f7f8f8 | 15.8:1 | 見出し、重要な数値、ユーザーが最初に見るべき情報 |
| text-secondary | #d0d6e0 | 11.3:1 | 本文テキスト、説明文、サブタイトル |
| text-muted | #8a8f98 | 5.9:1 | タイムスタンプ、補助情報、プレースホルダー |
| text-disabled | #62666d | 3.5:1 | 無効化要素、最低優先度の注記 |
なぜ #ffffff を使わないのか
純白 (#ffffff) はダーク背景上でコントラスト比 19.6:1 になり、WCAGの最低基準 4.5:1 の4倍以上となる。これは過剰であり、長時間の使用で眼精疲労を引き起こす。#f7f8f8 はわずか2%輝度を下げただけだが、この差が「刺さない白」と「目に優しい白」を分ける。プロダクトの使用時間が長いほど、この差は大きくなる。
第3層: アクセントとセマンティック（注意の誘導）
"One accent to rule them all" -- アクセントカラーは1色で十分だ。
ダーク背景ではどんな彩度のある色も強く主張する。だからこそ、アクセントの使用は極めて節制する必要がある。CTAボタンとアクティブ状態 -- この2箇所だけにアクセントを許可する。
Accent Usage Examples
セマンティックカラーのルール: セマンティックカラー（成功・エラー・警告・情報）はバッジやインジケーターでのみ使用し、背景は15%不透明度にする。テキストカラーとして直接使うことで、ダーク背景でも視認性を確保する。
| Token | 値 | 用途 |
|---|---|---|
| accent-primary | #5e6ad2 | CTA・アクティブ状態・リンク |
| accent-hover | #7b85e0 | アクセントのホバー |
| accent-active | #4e5abf | アクセントの押下状態 |
| accent-muted | rgba(94,106,210,0.15) | バッジ背景 |
| success | #10B981 | 成功・完了 |
| error | #EF4444 | エラー・削除 |
| warning | #F59E0B | 警告・保留 |
| info | #3B82F6 | 情報・ヒント |
ボーダーの哲学 -- 半透明白の威力
ダークモードのボーダーは、UIの印象を大きく左右する要素でありながら、見過ごされがちだ。
核心的なルール: ソリッドカラー (#333333 等) のボーダーは使用しない。常に rgba(255,255,255, 0.05-0.12) の半透明白を使う。
なぜか? 半透明ボーダーは背景色に自動適応する。bg-base の上でも bg-surface の上でも、同じ rgba(255,255,255, 0.08) が自然に馴染む。ソリッドカラーだと背景ごとに調整が必要になる。
Avoid: Solid Border
Card Title
border: #333333 -- 硬質で背景と馴染まない
Recommended: Semi-transparent
Card Title
border: rgba(255,255,255,0.08) -- 有機的で適応的
3段階のボーダー透明度:
| Token | 値 | 用途 |
|---|---|---|
| border-subtle | rgba(255,255,255,0.05) | テーブル行の区切り、セクション間の微妙な分離 |
| border-standard | rgba(255,255,255,0.08) | カード外枠、入力欄、ドロップダウン |
| border-emphasis | rgba(255,255,255,0.12) | アクティブなカード、ホバー時の強調、選択中要素 |
| border-focus | #5e6ad2 | フォーカスリング。アクセントカラーを直接使用 |
Border Opacity Comparison
subtle
standard
emphasis
focus
タイポグラフィ
フォントとウェイトの選定
| 種類 | フォント | 用途 |
|---|---|---|
| Primary | Inter Variable | 全UIテキスト |
| Monospace | JetBrains Mono | コードブロック・数値 |
| Fallback | -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif | システムフォント |
ウェイトは3種類に制限する:
- 400 -- 本文テキスト
- 510 -- 見出し、強調ラベル
- 590 -- 特に強い強調が必要な場面のみ（ほぼ使わない）
Bold (700) は使用禁止
ダークモードでは高輝度テキスト自体が十分な視覚的重みを持つ。700ウェイトを使うと「叫んでいる」印象になる。510で十分だ。
サイズ階層
| Role | Size | Weight | Letter Spacing |
|---|---|---|---|
| Display Hero | 48px | 510 | -1.056px |
| Heading 1 | 32px | 510 | -0.704px |
| Heading 2 | 24px | 510 | -0.528px |
| Heading 3 | 20px | 510 | -0.320px |
| Heading 4 | 16px | 510 | -0.176px |
| Body | 15px | 400 | normal |
| Body Small | 14px | 400 | normal |
| Caption | 13px | 400 | normal |
24px以上のテキストにはネガティブレタースペーシングを適用する。大きなテキストは文字間が広く見えるため、詰めることで凝縮感を出す。
コンポーネントパターンギャラリー
ボタン（6バリエーション）
Button Variants
Hover States (simulated with lighter background)
ボタンのCSS仕様
/* Primary */
background: #5e6ad2; color: #ffffff; padding: 8px 16px;
border-radius: 6px; box-shadow: none; transition: background 150ms ease;
/* Secondary */
background: rgba(255,255,255,0.05); color: #d0d6e0;
border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
/* Ghost */
background: transparent; color: #d0d6e0;
hover: background rgba(255,255,255,0.03);
/* Icon */
width: 32px; height: 32px; background: transparent;
hover: background rgba(255,255,255,0.05);
/* Destructive */
background: #EF4444; color: #ffffff;
hover: background #DC2626;
/* Pill */
border-radius: 9999px; /* 他は Primary と同じ */カード（4パターン）
Card Pattern 1: Simple
Card Pattern 2: Stat Card
Card Pattern 3: List Card
Card Pattern 4: Media Card
テーブル（2パターン）
標準データテーブル
コンパクトテーブル（価格データ向け）
入力フォーム（4タイプ）
Text Input States
Search Input
Select / Dropdown
Toggle / Switch
バッジ（6+タイプ）
Standard Badges
Pill Badges (rounded)
Dot Indicator Badges
ナビゲーション
Horizontal Navigation
Sidebar Navigation
Breadcrumb
レイアウトパターン -- 実践的な構成例
パターン1: SaaS ダッシュボード
冒頭のプレビューが典型的な SaaS ダッシュボードレイアウトだ。構成要素を分解すると:
- ヘッダー:
bg-panel+ 下ボーダー。高さ48px。ナビゲーションリンクとユーザー情報 - サイドバー:
bg-panel+ 右ボーダー。幅200-240px。セクション分けされたナビ - メインコンテンツ:
bg-base。統計カード群 + データテーブル
パターン2: データテーブルビュー
上記の「標準データテーブル」セクションが該当する。ポイントは:
- フィルターバーがテーブルと一体化（同じ
border-radiusの中に格納） - テーブルヘッダーは
bg-panelで「手前」に浮かせる - 行間の区切りは
border-subtle(0.05) - ホバー行は
bg-hover(rgba 0.03) で微かに明るくする
パターン3: 詳細/エディタビュー（分割ペイン）
パターン4: 設定画面
プロジェクト種別 適用ガイド
このダークテーマは汎用的だが、プロジェクトの性質によって最適な適用方法が異なる。
SaaS ダッシュボード向け
データ表示が中心のSaaSでは、このテーマがそのまま適合する。
適用のポイント:
- アクセントカラーをブランドカラーに差し替える（後述のカスタマイズレシピ参照）
- 統計カードは
bg-surface+ 数値を大きく表示 - グラフエリアの背景は
bg-baseを使い、グラフの色をアクセント系で統一
| 適合度 | プロジェクト例 |
|---|---|
| 最適 | SaaS ダッシュボード、プロジェクト管理ツール |
| 適合 | CRM、分析ツール、課金管理 |
開発者ツール向け
IDE、CLI GUI、API管理ツールなど、開発者が長時間使うツール。
適用のポイント:
- Monospace フォント (JetBrains Mono) の使用頻度を上げる
- コードブロックの背景は
bg-deepest(最暗) - ターミナル風の表示エリアを組み込む
| 適合度 | プロジェクト例 |
|---|---|
| 最適 | IDE、API管理、CLI GUI |
| 適合 | ドキュメントサイト、SDK管理 |
管理画面向け
テーブルとフォームが中心の管理画面。
適用のポイント:
- テーブルの情報密度を高める（コンパクトテーブルパターン使用）
- ステータスバッジを多用する
- バルクアクション（一括操作）のUIを追加
| 適合度 | プロジェクト例 |
|---|---|
| 最適 | 管理画面、CMS、ユーザー管理 |
| 適合 | 在庫管理、注文管理 |
データ分析/BI向け
チャートやグラフが中心の分析ツール。
適用のポイント:
- チャートエリアの背景は
bg-panel(やや明るい) にして視認性を確保 - 数値表示には
font-variant-numeric: tabular-numsを必ず指定 - KPI カードの数値はアクセントカラーで強調
| 適合度 | プロジェクト例 |
|---|---|
| 最適 | モニタリングダッシュボード、BI ツール |
| 適合 | ログビューア、パフォーマンス分析 |
非推奨のプロジェクト
ゲーム・エンタメ系やコーポレートサイトには、このテーマは向かない。ゲーム系は GAMING_APP プリセットを、コーポレートはライトモード系テンプレートの使用を推奨する。
カスタマイズレシピ
レシピ1: ブランドカラーへの差し替え
アクセントカラーを #5e6ad2 からプロジェクトのブランドカラーに変更する手順。
Step 1: メインカラーを決める（例: Supabase風グリーン #10B981）
Step 2: ホバー/アクティブ/ミュートを導出する
accent-primary: #10B981 (ブランドメイン)
accent-hover: #34D399 (10-15%明るく)
accent-active: #059669 (10-15%暗く)
accent-muted: rgba(16,185,129,0.15) (15%不透明度)Step 3: ビフォー/アフター確認
Before (Indigo)
After (Emerald)
変更してはいけないもの
背景階層 (bg-deepest ~ bg-surface) とテキスト階層 (text-primary ~ text-disabled) はプリセットの核心だ。これらを変更するとダークテーマ全体のバランスが崩れる。アクセントカラーだけを差し替えること。
レシピ2: セカンドアクセントの追加
メインアクセント以外にもう1色必要な場合（例: 成功アクションに専用色を割り当てたい場合）。
ルール: セカンドアクセントはセマンティックカラーの中から選ぶ。新しい色を発明しない。
primary-accent: #5e6ad2 (メインCTA)
secondary-accent: #10B981 (成功系アクション: 保存、承認、公開)両方のアクセントが隣り合わないようにレイアウトする。1つの画面で2つのアクセント色が隣接すると、どちらが優先かわからなくなる。
レシピ3: ウォームグレーへのシフト
デフォルトのブルーグレーから、ウォームグレー（暖かみのあるグレー）へシフトする方法。
/* デフォルト (blue-grey) */
bg-base: #0f1011
text-muted: #8a8f98
/* ウォーム化 */
bg-base: #11100f (赤みを微量追加)
text-muted: #98928a (暖色寄りに)いつウォームグレーを使うか
金融系、ホスピタリティ、ヘルスケアなど、「冷たさ」を避けたいドメインで有効。テック系やエンジニアリングツールでは、デフォルトのブルーグレーの方が適合する。
レシピ4: 情報密度の引き上げ
データが多い管理画面で、1画面に表示できる情報量を増やす方法。
変更点:
- Body フォントサイズ: 15px -> 13px
- カードパディング: 16px -> 12px
- テーブル行パディング: 10px -> 6px
- ギャップ: 16px -> 8px
/* コンパクトモード */
.compact { font-size: 13px; }
.compact .card { padding: 12px; }
.compact .table-row { padding: 6px 12px; }
.compact .gap { gap: 8px; }Do's and Don'ts
Do: 輝度ステップで深度を表現する
Don't: 影に頼る
Do: テキスト階層で情報の優先度を示す
4段階の輝度差を使い分けることで、ユーザーの視線を自然に誘導できる。
Don't: 全てのテキストを同じ輝度にする
テキストが全て同じ色だと、どこから読めばいいかわからない。情報の「匂い」がなくなる。
Do: アクセントを節制する
アクセントカラーは画面上の1-2箇所だけに使う。「ここを見ろ」という明確な意図を持たせる。
Don't: アクセントを乱用する
全てがアクセント色だと、何も目立たない。
Do: 半透明ボーダーを使う
rgba(255,255,255, 0.08) はどんな背景にも自然に馴染む。
Don't: ソリッドカラーのボーダーを使う
#333333 や #444444 は背景によって浮いたり沈んだりする。
Stitch プロンプト集
以下は、Stitch に対してこのダークテーマを適用したUIを生成させるためのプロンプト例だ。
ダッシュボードホームページ
## Design System
- Background: #0f1011 (main), #141516 (sidebar/header), #191a1b (cards)
- Text: #f7f8f8 (headings), #d0d6e0 (body), #8a8f98 (muted)
- Accent: #5e6ad2 (CTA only)
- Borders: rgba(255,255,255,0.08) — no solid color borders
- No box-shadows except modals
- Font weight: 510 max (no bold)
## Layout
SaaS dashboard with:
- Top header bar (48px height, bg-panel)
- Left sidebar (240px width, bg-panel)
- Main content area with 3 stat cards in a row
- Data table below with 5 rows, status badges
- Primary + Secondary button row at bottomデータテーブルページ
## Design System
(同上)
## Layout
Full-width data table page:
- Filter bar at top (search input + 2 dropdown filters)
- Table with columns: Name, Status (colored badge), Priority, Assignee, Updated
- 8+ rows with alternating hover state (rgba 0.03)
- Pagination bar at bottom (Previous / 1 2 3 / Next)
- Bulk action bar appears when rows selected設定フォーム
## Design System
(同上)
## Layout
Settings page with max-width 600px:
- Page title + description
- Section "General": project name input, description textarea
- Section "Notifications": 3 toggle rows with label + description
- Section "Danger Zone": red border card with delete button
- Save button (primary) at bottom詳細ビュー + サイドバー
## Design System
(同上)
## Layout
Split pane detail view:
- Left panel (260px): scrollable list of items with active indicator (2px accent left border)
- Right panel: detail view with title, metadata, badges, description, and code block
- Divider between panels: rgba(255,255,255,0.05)ログイン/サインアップ
## Design System
(同上)
## Layout
Centered auth card on bg-deepest (#08090a) background:
- Card (bg-surface, max-width 400px, centered)
- Logo area at top
- Email input + Password input
- Primary "Sign In" button (full width)
- "Forgot password?" link in text-muted
- Divider with "or" text
- "Sign up" link at bottomエンプティステート
## Design System
(同上)
## Layout
Empty state centered in content area:
- Large icon placeholder (48x48, text-disabled color)
- Heading: "No projects yet" (text-primary, 20px)
- Description: "Create your first project to get started" (text-muted, 14px)
- Primary CTA button below
- Optional: secondary text link "Learn more"