Notionにインスパイアされたデザインシステム

Category: 生産性・SaaS オールインワンワークスペース。温かみのあるミニマリズム、セリフ体見出し、柔らかなサーフェス。

1. ビジュアルテーマと雰囲気

Notionのウェブサイトは、ツール自体の哲学を体現しています。邪魔にならない白紙のキャンバスです。このデザインシステムは冷たいグレーではなく温かみのあるニュートラルカラーを基盤としており、質の高い紙のような、滅菌されたガラスとは対照的な、親しみやすいミニマリズムを生み出しています。ページキャンバスは純白（#ffffff）ですが、テキストは純粋な黒ではなく、読書体験をほんのり和らげる温かみのある近黒（rgba(0,0,0,0.95)）です。温かみのあるグレースケール（#f6f5f4、#31302e、#615d59、#a39e98）は黄色みがかった茶色の下地を持ち、インターフェースに触感のある、ほとんどアナログ的な温もりを与えています。

カスタムフォントのNotionInter（Interを改変したもの）はこのシステムの骨格です。ディスプレイサイズ（64px）では積極的なネガティブレタースペーシング（-2.125px）を使用し、圧縮された精緻な見出しを生み出しています。ウェイトの幅は典型的なシステムより広く、ボディに400、UI要素に500、セミボールドラベルに600、ディスプレイ見出しに700を使用します。OpenType機能の"lnum"（ライニングニューメラル）と"locl"（ローカライズされた字形）は大きなテキストで有効化されており、精読する際に気づくタイポグラフィの洗練さを加えています。

Notionのビジュアル言語を際立たせているのは、ボーダーの哲学です。重いボーダーやシャドウではなく、Notionは超極細の1px solid rgba(0,0,0,0.1)ボーダーを使用しています。これは囁くように存在するボーダーで、重みなく構造を生み出す、かすかな区切り線です。シャドウシステムも同様に抑制されています。累積された不透明度が0.05を超えないマルチレイヤースタックで、見るのではなく感じる奥行きを作り出しています。

主要特性:

• ディスプレイサイズでネガティブレタースペーシングを使用するNotionInter（Interを改変）（64pxで-2.125px）
• 温かみのあるニュートラルパレット：グレーは黄色みがかった茶色の下地を持つ（#f6f5f4温かみのある白、#31302e温かみのある暗色）
• rgba(0,0,0,0.95)による近黒のテキスト——純粋な黒ではなく、微細な温もりを生む
• 超極細ボーダー：全体に1px solid rgba(0,0,0,0.1)——囁き重量の区切り
• 奥行きをほとんど感じさせない0.05未満の不透明度によるマルチレイヤーシャドウスタック
• CTAとインタラクティブ要素の唯一のアクセントカラーとしてのNotion Blue（#0075de）
• ステータスインジケーター用のティントされた青背景を持つピルバッジ（9999px半径）
• 有機的で固定されていないスケールを持つ8pxベース間隔単位

2. カラーパレットと役割

プライマリ

• Notion Black（rgba(0,0,0,0.95) / #000000f2）: プライマリテキスト、見出し、本文。95%の不透明度により、読みやすさを犠牲にせず純粋な黒を和らげる。
• ピュアホワイト（#ffffff）: ページ背景、カードサーフェス、青地のボタンテキスト。
• Notion Blue（#0075de）: プライマリCTA、リンクカラー、インタラクティブアクセント——コアUIクロームで唯一の彩度の高い色。

ブランドセカンダリ

• ディープネイビー（#213183）: セカンダリブランドカラー。強調やダークフィーチャーセクションに控えめに使用。
• アクティブブルー（#005bab）: ボタンのアクティブ/プレス状態——Notion Blueの暗いバリアント。

温かみのあるニュートラルスケール

• ウォームホワイト（#f6f5f4）: 背景サーフェスのティント、セクションの交互配置、微細なカードフィル。黄色の下地が重要。
• ウォームダーク（#31302e）: ダークサーフェス背景、ダークセクションテキスト。標準的なグレーより温かみがある。
• ウォームグレー500（#615d59）: セカンダリテキスト、説明文、ミュートラベル。
• ウォームグレー300（#a39e98）: プレースホルダーテキスト、無効状態、キャプションテキスト。

セマンティックアクセントカラー

• ティール（#2a9d99）: 成功状態、ポジティブインジケーター。
• グリーン（#1aae39）: 確認、完了バッジ。
• オレンジ（#dd5b00）: 警告状態、注意インジケーター。
• ピンク（#ff64c8）: 装飾的アクセント、フィーチャーハイライト。
• パープル（#391c57）: プレミアム機能、深いアクセント。
• ブラウン（#523410）: アーシーアクセント、温かみのあるフィーチャーセクション。

インタラクティブ

• リンクブルー（#0075de）: ホバー時に下線を表示するプライマリリンクカラー。
• リンクライトブルー（#62aef0）: ダーク背景用の明るいリンクバリアント。
• フォーカスブルー（#097fe8）: インタラクティブ要素のフォーカスリング。
• バッジブルー背景（#f2f9ff）: ピルバッジ背景、ティントされた青のサーフェス。
• バッジブルーテキスト（#097fe8）: ピルバッジのテキスト、読みやすさのための濃い青。

シャドウと奥行き

• カードシャドウ（rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px）: マルチレイヤーカードの高さ。
• ディープシャドウ（rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px）: モーダルとフィーチャードコンテンツのための5層深い高さ。
• ウィスパーボーダー（1px solid rgba(0,0,0,0.1)）: 標準的な区切りボーダー——カード、区切り線、セクション。

3. タイポグラフィルール

フォントファミリー

• プライマリ: NotionInter、フォールバック: Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol
• OpenType機能: ディスプレイと見出しテキストで"lnum"（ライニングニューメラル）と"locl"（ローカライズされた字形）を有効化。

階層

原則

• スケールでの圧縮: ディスプレイサイズのNotionInterは64pxで-2.125pxのレタースペーシングを使用し、26pxで-0.625px、16pxで通常へと段階的に緩和されます。この圧縮により見出しに密度が生まれ、ボディサイズでの読みやすさが維持されます。
• 4ウェイトシステム: 400（ボディ/読み物）、500（UI/インタラクティブ）、600（強調/ナビゲーション）、700（見出し/ディスプレイ）。ほとんどのシステムと比べて広いウェイト範囲により、繊細な階層が可能になります。
• 温かみのあるスケーリング: 行の高さはサイズが増すにつれてタイトになります——ボディ（16px）で1.50、サブ見出しで1.23〜1.27、ディスプレイで1.00〜1.04。これにより見出しがより密度が高く、インパクトのあるものになります。
• バッジのマイクロトラッキング: 12pxのバッジテキストはポジティブなレタースペーシング（0.125px）を使用します——システム内で唯一のポジティブトラッキングで、小さなテキストをより広く、読みやすくします。

4. コンポーネントスタイリング

ボタン

プライマリブルー

• 背景: #0075de（Notion Blue）
• テキスト: #ffffff
• パディング: 8px 16px
• 半径: 4px（サブタイル）
• ボーダー: 1px solid transparent
• ホバー: 背景が#005babに暗くなる
• アクティブ: scale(0.9)トランスフォーム
• フォーカス: 2px solidフォーカスアウトライン、var(--shadow-level-200)シャドウ
• 使用場面: プライマリCTA（「Get Notion free」「Try it」）

セカンダリ / ターシャリ

• 背景: rgba(0,0,0,0.05)（半透明の温かみのあるグレー）
• テキスト: #000000（近黒）
• パディング: 8px 16px
• 半径: 4px
• ホバー: テキストカラーシフト、scale(1.05)
• アクティブ: scale(0.9)トランスフォーム
• 使用場面: セカンダリアクション、フォーム送信

ゴースト / リンクボタン

• 背景: 透明
• テキスト: rgba(0,0,0,0.95)
• 装飾: ホバー時に下線
• 使用場面: ターシャリアクション、インラインリンク

ピルバッジボタン

• 背景: #f2f9ff（ティントされた青）
• テキスト: #097fe8
• パディング: 4px 8px
• 半径: 9999px（フルピル）
• フォント: 12px ウェイト600
• 使用場面: ステータスバッジ、フィーチャーラベル、「New」タグ

カードとコンテナ

• 背景: #ffffff
• ボーダー: 1px solid rgba(0,0,0,0.1)（ウィスパーボーダー）
• 半径: 12px（標準カード）、16px（フィーチャード/ヒーローカード）
• シャドウ: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px
• ホバー: 微細なシャドウの強化
• イメージカード: 上部12px半径、画像が上半分を埋める

インプットとフォーム

• 背景: #ffffff
• テキスト: rgba(0,0,0,0.9)
• ボーダー: 1px solid #dddddd
• パディング: 6px
• 半径: 4px
• フォーカス: 青いアウトラインリング
• プレースホルダー: 温かみのあるグレー #a39e98

ナビゲーション

• 白地に横並びのクリーンなナビゲーション、スティッキーなし
• ブランドロゴは左揃え（33x34pxアイコン＋ワードマーク）
• リンク: NotionInter 15px ウェイト500〜600、近黒のテキスト
• ホバー: var(--color-link-primary-text-hover)へのカラーシフト
• CTA: 青いピルボタン（「Get Notion free」）右揃え
• モバイル: ハンバーガーメニューに折りたたみ
• マルチレベルのカテゴリ分けされたメニューを持つ製品ドロップダウン

画像の扱い

• 製品スクリーンショットに1px solid rgba(0,0,0,0.1)ボーダー
• 上部角丸画像: 12px 12px 0px 0px半径
• ダッシュボード/ワークスペースプレビュースクリーンショットがフィーチャーセクションを支配
• ヒーローイラストレーションの背景に温かみのあるグラデーション（装飾的なキャラクターイラスト）

特徴的なコンポーネント

イラスト付きフィーチャーカード

• 大型イラスタティブヘッダー（葛飾北斎の神奈川沖浪裏、製品UIスクリーンショット）
• ウィスパーボーダーを持つ12px半径カード
• タイトルは22px ウェイト700、説明文は16px ウェイト400
• 交互セクション用の温かみのある白（#f6f5f4）背景バリアント

トラストバー / ロゴグリッド

• ブランドカラーで表示された企業ロゴ（信頼されているチームセクション）
• チーム数を表示する横スクロールまたはグリッドレイアウト
• 指標表示: 大きな数字＋説明パターン

指標カード

• 大きな数値表示（例: 「$4,200 ROI」）
• 指標用のNotionInter 40px以上 ウェイト700
• 温かみのあるグレーのボディテキストで下に説明
• ウィスパーボーダーのカードコンテナ

5. レイアウト原則

スペーシングシステム

• ベースユニット: 8px
• スケール: 2px、3px、4px、5px、6px、7px、8px、11px、12px、14px、16px、24px、32px
• マイクロ調整のための小数値（5.6px、6.4px）を持つ固定されない有機的なスケール

グリッドとコンテナ

• 最大コンテンツ幅: 約1200px
• ヒーロー: 十分なトップパディング（80〜120px）を持つ中央揃えの単一カラム
• フィーチャーセクション: カード用の2〜3カラムグリッド
• 交互配置のための全幅温かみのある白（#f6f5f4）セクション背景
• ウィスパーボーダーで囲まれたコード/ダッシュボードスクリーンショット

ホワイトスペース哲学

• 寛大な縦のリズム: 主要セクション間に64〜120px。Notionは広大な縦のパディングでコンテンツを呼吸させます。
• 温かみのある交互配置: 白いセクションと温かみのある白（#f6f5f4）のセクションが交互に配置され、強いカラーブレークなく穏やかな視覚的リズムを生み出します。
• コンテンツファーストの密度: ボディテキストブロックはコンパクト（行の高さ1.50）ですが、十分なマージンに囲まれており、白いスペースの海に読みやすいコンテンツの島を作り出します。

ボーダー半径スケール

• マイクロ（4px）: ボタン、インプット、機能的なインタラクティブ要素
• サブタイル（5px）: リンク、リストアイテム、メニューアイテム
• 標準（8px）: 小さなカード、コンテナ、インライン要素
• 快適（12px）: 標準カード、フィーチャーコンテナ、画像の上部
• 大（16px）: ヒーローカード、フィーチャードコンテンツ、プロモーションブロック
• フルピル（9999px）: バッジ、ピル、ステータスインジケーター
• 円（100%）: タブインジケーター、アバター

6. 奥行きと高さ

シャドウ哲学: Notionのシャドウシステムは、自然に見える柔らかい高さを生み出すために累積する非常に低い個別不透明度（0.01〜0.05）を持つ複数のレイヤーを使用します。4層のカードシャドウは1.04pxから18pxのブラーにまたがり、単一のハードシャドウではなく奥行きのグラデーションを生み出します。5層のディープシャドウは0.05の不透明度で52pxのブラーまで及び、コンピューターで生成された奥行きではなく自然光のような環境遮蔽を生み出します。この多層アプローチにより、要素が上に浮かんでいるのではなく、ページに埋め込まれているように感じます。

装飾的な奥行き

• ヒーローセクション: 装飾的なキャラクターイラスト（遊び心のある手描き風）
• セクション交互配置: 白から温かみのある白（#f6f5f4）への背景シフト
• ハードなセクションボーダーなし——区切りは背景色の変化と間隔から生まれる

7. レスポンシブな振る舞い

ブレークポイント

タッチターゲット

• ボタンは快適なパディングを使用（縦8px〜16px）
• ナビゲーションリンクは15px、適切な間隔あり
• ピルバッジはタップターゲット用に横8pxのパディングを持つ
• モバイルメニュートグルは標準的なハンバーガーボタンを使用

折りたたみ戦略

• ヒーロー: 64pxディスプレイ → モバイルで40px → 26pxにスケール、比例したレタースペーシングを維持
• ナビゲーション: 横並びリンク＋青いCTA → ハンバーガーメニュー
• フィーチャーカード: 3カラム → 2カラム → 単一カラムスタック
• 製品スクリーンショット: レスポンシブ画像でアスペクト比を維持
• トラストバーロゴ: グリッド → モバイルで横スクロール
• フッター: マルチカラム → スタックした単一カラム
• セクション間隔: 80px以上 → モバイルで48px

画像の振る舞い

• ワークスペーススクリーンショットはすべてのサイズでウィスパーボーダーを維持
• ヒーローイラストレーションは比例してスケール
• 製品スクリーンショットはレスポンシブ画像と一貫したボーダー半径を使用
• 全幅の温かみのある白セクションはエッジツーエッジの処理を維持

8. アクセシビリティと状態

フォーカスシステム

• すべてのインタラクティブ要素が目に見えるフォーカスインジケーターを持つ
• フォーカスアウトライン: フォーカスカラー＋シャドウレベル200の2px solid
• すべてのインタラクティブコンポーネントでタブナビゲーションをサポート
• 高コントラストテキスト: 白地の近黒はWCAG AAAを超える（>14:1比率）

インタラクティブ状態

• デフォルト: ウィスパーボーダーを使用した標準的な外観
• ホバー: テキストのカラーシフト、ボタンのscale(1.05)、リンクの下線
• アクティブ/プレス: scale(0.9)トランスフォーム、より暗い背景バリアント
• フォーカス: シャドウ強化を伴う青いアウトラインリング
• 無効: 温かみのあるグレー（#a39e98）テキスト、不透明度の低下

カラーコントラスト

• 白地のプライマリテキスト（rgba(0,0,0,0.95)）: 約18:1比率
• 白地のセカンダリテキスト（#615d59）: 約5.5:1比率（WCAG AA）
• 白地の青いCTA（#0075de）: 約4.6:1比率（大きなテキストに対してWCAG AA）
• バッジ背景（#f2f9ff）上のバッジテキスト（#097fe8）: 約4.5:1比率（大きなテキストに対してWCAG AA）

9. エージェントプロンプトガイド

クイックカラーリファレンス

• プライマリCTA: Notion Blue（#0075de）
• 背景: ピュアホワイト（#ffffff）
• 代替背景: ウォームホワイト（#f6f5f4）
• 見出しテキスト: 近黒（rgba(0,0,0,0.95)）
• ボディテキスト: 近黒（rgba(0,0,0,0.95)）
• セカンダリテキスト: ウォームグレー500（#615d59）
• ミュートテキスト: ウォームグレー300（#a39e98）
• ボーダー: 1px solid rgba(0,0,0,0.1)
• リンク: Notion Blue（#0075de）
• フォーカスリング: フォーカスブルー（#097fe8）

コンポーネントプロンプト例

• 「白い背景のヒーローセクションを作成してください。見出しはNotionInter 64px ウェイト700、行の高さ1.00、レタースペーシング-2.125px、色rgba(0,0,0,0.95)。サブタイトルは20px ウェイト600、行の高さ1.40、色#615d59。青いCTAボタン（#0075de、4px半径、8px 16pxパディング、白いテキスト）とゴーストボタン（透明背景、近黒テキスト、ホバー時に下線）。」
• 「カードをデザインしてください: 白い背景、1px solid rgba(0,0,0,0.1)ボーダー、12px半径。シャドウスタックを使用: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px。タイトルはNotionInter 22px ウェイト700、レタースペーシング-0.25px。ボディは16px ウェイト400、色#615d59。」
• 「ピルバッジを作成してください: #f2f9ff背景、#097fe8テキスト、9999px半径、4px 8pxパディング、NotionInter 12px ウェイト600、レタースペーシング0.125px。」
• 「ナビゲーションを作成してください: 白いヘッダー。リンクにNotionInter 15px ウェイト600、近黒テキスト。右揃えの青いピルCTA「Get Notion free」（#0075de背景、白いテキスト、4px半径）。」
• 「交互セクションレイアウトをデザインしてください: 白いセクションと温かみのある白（#f6f5f4）セクションが交互に配置されます。各セクションは縦64〜80pxのパディング、最大幅1200px中央揃え。セクション見出しは48px ウェイト700、行の高さ1.00、レタースペーシング-1.5px。」

反復ガイド

1. 常に温かみのあるニュートラルカラーを使用してください——Notionのグレーは黄色みがかった茶色の下地を持ちます（#f6f5f4、#31302e、#615d59、#a39e98）、青みがかったグレーは使用しない
2. レタースペーシングはフォントサイズに合わせてスケールします: 64pxで-2.125px、54pxで-1.875px、26pxで-0.625px、16pxで通常
3. 4つのウェイト: 400（読む）、500（インタラクト）、600（強調）、700（告知）
4. ボーダーは囁きです: 1px solid rgba(0,0,0,0.1)——より重くしない
5. シャドウは4〜5層を使用し、個別不透明度は0.05を超えない
6. 温かみのある白（#f6f5f4）セクション背景は視覚的リズムに不可欠
7. ステータス/タグにはピル（9999px）、ボタンとインプットには4px半径
8. Notion Blue（#0075de）はコアUIで唯一の彩度の高い色——CTAとリンクに控えめに使用