Notion Dev（Notion Developer Platform）日本語版 DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 抽出元: https://www.notion.com/ja/product/dev 取得日: 2026-05-14

Notion 本体（白基調・8px 角丸・モノクロブランド）とは別の意匠で、開発者向けプラットフォーム専用のキャンペーンページ。CSS 変数も --color-campaigns-dev-platform-dos-blue のように "dos"（DOS／BSOD ブルー）と命名されている。

1. Visual Theme & Atmosphere

• デザイン方針: ページ全体がコバルトブルー #1313ba の "ベタ塗り" 背景。BSOD・メインフレーム端末を想起させるレトロブルー基調。Notion 本体（白基調）とは正反対
• コーナー: ボタン・CTA は border-radius: 0（角ばった四角）。InlineTextLink 等は 5px。Notion 本体の 8px とは異なる
• 密度: ヒーローは余白広め、データ同期パネル・コードブロックは密度高め
• キーワード: dev、BSOD blue、DOS、cobalt、sharp corner、dot-matrix、mono accent

2. Color Palette & Roles

Primary（ブランドカラー＝ページ背景）

• Dev Blue (#1313ba): NotionDev のブランド色であり、同時にページ全体の背景色。CSS 変数名は --color-campaigns-dev-platform-dos-blue。"ブランド" と "面" が同一であることが NotionDev の最大の特徴
• Dev Blue α (#1313baa8): 同色の 66% 透過。ライト面上の本文・補助テキストで使用

Surface（面の色）

• Page Background / Brand (#1313ba): ページ全体の主背景。ヒーロー、ナビ、フッター含む大半の面
• Surface Light (#F6F6FC): セクション切り替え時のライト面、コードブロック・カードの面色（ライト lavender）
• Surface Translucent (rgba(246, 246, 252, 0.44)): ブルー面上に重ねる半透明パネル／ターミナル枠（98 回出現で最頻）。Workers / Agent Tools の浮遊パネルなど
• Surface Lavender (#CBCBEF): バッジ・ラベルの面色（"Untriaged"、"Triaged" 等のステータス）
• Embedded Product UI (#111111): ページ内に埋め込まれた Notion 製品 UI モックアップの背景色（Notion ダークモードの再現）。ページ本来の背景ではない点に注意

Text Colors

• Text on Brand (#FFFFFF): ブルー面の本文・H1・ナビゲーション（NotionDev の大半のテキスト）
• Text on Brand (Muted) (rgba(255, 255, 255, 0.75)): ブルー面の補助テキスト
• Text on Light (#1313ba): ライト面の H2/H3、CTA テキスト（ブランド色＝テキスト色）
• Text on Light (Body) (rgba(19, 19, 186, 0.66)): ライト面の本文。黒ではなくブランド色を 66% 透過で使う点が NotionDev 固有

Semantic（参考：Notion のデザイントークンより）

• Red 500 (#f64932): エラー
• Orange 500 (#ff6d00): 警告
• Blue 500 (#097fe8): 情報（Notion 本体の青、Dev Blue とは別物）

Neutral Scale（参考：Notion のグレースケール）

• gray-100 #f9f9f8 → gray-900 #191918
• ライト本文補助には gray-700 #494744、gray-500 #78736f 相当を流用してよい

3. Typography Rules

3.1 和文フォント

• ゴシック体: システムフォントに依存（-apple-system 経由で OS 標準の和文ゴシックが適用される）。Notion 本体と同じ方針

3.2 欧文フォント

• サンセリフ: NotionInter（Inter のカスタムビルド）を最優先で使用
• 等幅: iA Writer Mono（CSS 変数 --font-family-primary-mono で定義）。コードブロック・キーボードショートカット・"/dev/notion" 等のキャンペーンコピーで使用

3.3 font-family 指定

css/* 本文・見出し（実測値） */
font-family: NotionInter, Inter, -apple-system, "system-ui", "Segoe UI",
  Helvetica, "Apple Color Emoji", Arial, sans-serif,
  "Segoe UI Emoji", "Segoe UI Symbol";

/* 等幅 / コード */
font-family: "iA Writer Mono", SFMono-Regular, Menlo, Consolas,
  "Liberation Mono", monospace;

フォールバックの考え方:

• 本体 Notion と同じ NotionInter → Inter → OS システムフォントの順
• 和文専用フォントは指定しない（OS 任せ）
• 絵文字は "Apple Color Emoji" と "Segoe UI Emoji" の両 OS 対応

3.4 文字サイズ・ウェイト階層

3.5 行間・字間

• 本文の行間: 24px（1.5）。Notion 本体と同じ
• 見出しの行間: Display は 1.0（タイト）、H1 は ≈1.04、H3 (sm) は 1.56
• 見出しの字間: 負の letter-spacing を採る（H1: -2.125px、H2: -1.875px、H3: -0.125px）。Inter のオプティカルサイズに合わせた詰め処理
• 本文の字間: normal（0）

ガイドライン:

• 64px 以上の大見出しでは letter-spacing: -0.033em 程度を必ず指定する（Inter の太字は字間が広く感じやすいため）
• 本文の letter-spacing は 0 を維持。日本語に負の値を入れない

3.6 禁則処理・改行ルール

cssword-break: break-word;
overflow-wrap: break-word;

禁則対象:

• 行頭禁止: ）」』】〕〉》」】、。，．・：；？！
• 行末禁止: （「『【〔〈《「【

3.7 OpenType 機能

cssfont-feature-settings: "lnum", "locl" 0;

• lnum: Lining Figures — 数字をベースラインに揃えた等高グリフ
• locl 0: ローカライズ形式を無効化 — Inter のデフォルトグリフを維持
• 本体 Notion と同じ設定。ナビゲーション・本文・CTA を含むほぼ全要素で適用されているのが実測で確認できた

3.8 縦書き

該当なし

4. Component Stylings

Buttons

NotionDev の特徴は CTA が border-radius: 0（角ばった四角） であること。Notion 本体（8px）と差別化されている。

Primary CTA（ナビ右上の「Notionを無料で始める」）

• Background: #FFFFFF
• Text: #1313ba
• Padding: 4px 14px
• Border: 1px solid rgba(255, 255, 255, 0)（透明）
• Border Radius: 0
• Font Size: 16px / Weight: 500 / Line Height: 24px
• Font Feature Settings: "lnum", "locl" 0 を継承

Tertiary CTA（フッターの言語切替「日本語」など）

• Background: #1313ba
• Text: #FFFFFF
• Padding: 4px 14px
• Border: 1px solid #FFFFFF
• Border Radius: 0

Ghost / Outline（ナビの「ログイン」）

• Background: transparent
• Text: #FFFFFF
• Border: 1px solid #FFFFFF
• Border Radius: 0
• Padding: 4px 14px

Small Pill（"例を見る" などの軽い CTA）

• Background: transparent
• Text: #1313ba
• Border Radius: 0
• Padding: 3px 11px
• Font Size: 14px / Weight: 500

Menu Button（"Claude" などのタブ切替）

• Background: #F6F6FC
• Text: #1313ba
• Padding: 8px 16px
• Border Radius: 0
• Font Size: 14px / Weight: 500

Inline Text Link

• Color: #1313ba
• Decoration: ホバーで underline
• Font Feature Settings: "lnum", "locl" 0
• Border Radius (フォーカスリング想定): 5px

Inputs

• Background: #FFFFFF（ライト） / #1A1A1A（ダーク）
• Border: 1px solid rgba(0, 0, 0, 0.13)（ライト） / 1px solid rgba(255, 255, 255, 0.13)（ダーク）
• Border (focus): 1px solid #1313ba
• Border Radius: 0（NotionDev は四角を統一）
• Padding: 6px 10px
• Font Size: 14px / Line Height: 20px
• Color: #1313ba（ライト面） / #FFFFFF（ダーク面）

Badges / Labels

• Background: #CBCBEF（ラベンダー）または rgba(203, 203, 239, 0.44)
• Text: #1313ba
• Padding: 2px 8px
• Border Radius: 0 または 2px
• Font Size: 12〜14px / Weight: 500
• 用途: "Enterprise"、"Account access"、"Imports & exports" 等の機能ラベル

Cards / Panels

• Background: #F6F6FC または rgba(246, 246, 252, 0.44)（ダーク面でのオーバーレイ）
• Border: 1px solid rgba(255, 255, 255, 0.08)（ダーク面）
• Border Radius: 0〜5px（パネル種別による）
• Padding: 24px
• Shadow: 通常はフラット。必要に応じて --shadow-200 を流用

Code Block / Terminal Pane

• Background: #F6F6FC または #111111
• Font Family: "iA Writer Mono", SFMono-Regular, monospace
• Font Size: 14px / Line Height: 20px
• Color: #1313ba（ライト面） / #CBCBEF（ダーク面）
• Padding: 16〜24px
• Border Radius: 0

5. Layout Principles

Spacing Scale（Notion のデザイントークン由来）

セクション間の縦余白は --spacing-l = 120px を基本に。

Container

• Max Width: 1200px
• Padding (horizontal): 32px（デスクトップ） / 16px（モバイル）

Grid

• セクション内グリッドは 12 カラム可変
• Gutter: 24px

6. Depth & Elevation

NotionDev は基本フラット。シャドウは抑制し、面色・ボーダー・余白で階層を表現する。Notion のデザイントークンから流用する場合:

7. Do's and Don'ts

Do（推奨）

• ページ背景には必ず #1313ba（Dev Blue）を使う。これが NotionDev の最大のアイデンティティ。CSS 変数 --color-campaigns-dev-platform-dos-blue
• ブルー面の本文・見出しは白 #FFFFFF で打つ
• ライト面の本文には黒ではなく rgba(19, 19, 186, 0.66) を使う。NotionDev の "全部が青っぽい" 統一感はここから生まれる
• CTA・パネル・コードブロックの角は border-radius: 0 で揃える
• 大見出し（48px 以上）には letter-spacing: -0.033em 前後の負の字間を入れる
• コード・ターミナル風コピーは iA Writer Mono で組む
• 数字を扱う UI には font-feature-settings: "lnum", "locl" 0 を必ず指定

Don't（禁止）

• ページ背景を黒 #111111 や #191918 にしない。#111111 は埋め込み Notion 製品 UI モックアップ専用
• Notion 本体の角丸 8px を使わない（NotionDev は角ばっている）
• 本文に純黒 #000000 や rgba(0,0,0,0.95) を使わない（青のトーンを崩す）
• Notion 本体の青 #0075de（--color-blue-500）と Dev Blue #1313ba を混同しない
• letter-spacing をプラス側に広げない（Inter は字間が広く感じやすい）
• 安易にシャドウを盛らない（NotionDev はフラット基調、点線で領域を区切るのが特徴）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）

フォントサイズの調整

• モバイルでは Display を 40〜48px、H2 を 32〜36px に縮小
• 本文は 16px を維持
• 大見出しの letter-spacing は 画面サイズが小さくなるほど 0 に近づける（小さい字に負の字間は不要）

9. Agent Prompt Guide

クイックリファレンス

Page Background / Brand: #1313ba（dev-platform "dos" blue — ページ背景そのもの）
Surface (Light): #F6F6FC
Surface (Translucent on Brand): rgba(246, 246, 252, 0.44)
Lavender Accent: #CBCBEF
Text on Brand: #FFFFFF（ブルー面の本文・H1）
Text on Light: #1313ba（見出し）／ rgba(19, 19, 186, 0.66)（本文）
Embedded Product UI Only: #111111
Font: NotionInter, Inter, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif
Code Font: "iA Writer Mono", SFMono-Regular, Menlo, monospace
Body Size: 16px / line-height: 1.5
Display Size: 64px / line-height: 1.0 / letter-spacing: -0.033em
font-feature-settings: "lnum", "locl" 0
Button Radius: 0（角ばった四角）

プロンプト例

Notion Developer Platform (NotionDev) のデザインシステムに従って、API ドキュメントのトップページを作成してください。
- ページ背景: #1313ba（コバルトブルーのベタ塗り — ブランド＝面色）
- フォント: NotionInter, Inter, -apple-system, sans-serif
- コード: "iA Writer Mono", SFMono-Regular, monospace
- ブルー面の本文: 16px / line-height: 1.5 / color: #FFFFFF
- ヒーロー H1: 64px / 700 / line-height: 64px / color: #FFFFFF / letter-spacing: -2.125px
- ライト面（部分セクション #F6F6FC）の H1: 54px / 700 / color: #1313ba / letter-spacing: -1.875px
- ライト面の本文: 16px / 400 / color: rgba(19, 19, 186, 0.66)
- font-feature-settings: "lnum", "locl" 0
- Primary CTA: 白背景 #FFFFFF、テキスト #1313ba、padding 4px 14px、border-radius: 0
- Ghost CTA: 透明背景、白テキスト、白ボーダー、padding 4px 14px、border-radius: 0
- 浮遊パネル: rgba(246, 246, 252, 0.44) 半透明、点線で領域を区切る
- Badge: 背景 #CBCBEF、テキスト #1313ba、border-radius: 0

CSS 変数体系（抜粋・実測 424 件のうち主要なもの）

css/* NotionDev 固有のブランドトークン */
--color-campaigns-dev-platform-dos-blue: #1313ba;
--color-campaigns-dev-platform-dos-alpha-blue: #1313baa8;

/* フォント */
--font-family-primary-sans: NotionInter;
--font-family-primary-mono: "iA Writer Mono";
--font-family-fallback-sans: Inter, -apple-system, BlinkMacSystemFont,
  "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
  "Segoe UI Emoji", "Segoe UI Symbol";

/* font-size スケール（rem） */
--font-size-50: 0.75rem;   /* 12px */
--font-size-100: 0.875rem; /* 14px */
--font-size-200: 1rem;     /* 16px */
--font-size-300: 1.125rem; /* 18px */
--font-size-600: 2rem;     /* 32px */
--font-size-800: 3.375rem; /* 54px */
--font-size-900: 4rem;     /* 64px */

/* border-radius（NotionDev は 0 を多用） */
--border-radius-0: 0;
--border-radius-300: 0.3125rem;  /* 5px - InlineTextLink */
--border-radius-500: 0.5rem;     /* 8px - 本体 Notion 互換 */

/* spacing */
--spacing-16: 1rem;   /* 16px */
--spacing-24: 1.5rem; /* 24px */
--spacing-l: 120px;   /* セクション縦余白 */

注: NotionDev は本体 Notion と同じ CSS 変数体系を共有しつつ、--color-campaigns-dev-platform-dos-* でキャンペーン固有の色を上書きしている。実装時はこのキャンペーン変数を優先する。