# DESIGN.md — 日本デザインセンター (Nippon Design Center / NDC) > 日本デザインセンター（https://www.ndc.co.jp/）のデザイン仕様書。 > 2026-05-08 取得の computed style と CSS Custom Properties に基づく。 --- ## 1. Visual Theme & Atmosphere - **デザイン方針**: 1959年創業、亀倉雄策・原弘・田中一光らが設立した日本を代表するデザイン会社の公式サイト。「美意識のある社会」を掲げ、3言語（日本語・英語・中国語）対応の極めて精緻な可変フォントシステムを構築。**コンテンツ第一・余白第一**の現代的なエディトリアル設計 - **密度**: コンテンツ最大幅 93.75rem (1500px)、サイドパディング 6rem (96px)、12カラムグリッド + 2remギャップ。**変則的でないシステマティックな組み方** - **キーワード**: エディトリアル、可変フォント、3言語対応、明朝×サンセリフの混在、超精緻、デザイン会社の矜持 - **特徴**: フォントウェイトを 340 / 450 / 520 という**3段階の数値**で制御（Variable Font）。背景は純白ではなくほんのわずかに温かい **#fcfcfc**（pale gray）。日本語明朝に **Source Serif 4 + 筑紫明朝**、サンセリフに **Acumin + Tazugane Gothic** という重層的な多言語スタック --- ## 2. Color Palette & Roles NDC は彩度のあるブランドカラーを持たない。すべての色は CSS Custom Properties (`--color-*`) で定義され、テキスト・面・線・エラーの 4 役のみで構成される極めてミニマルな体系。 ### Primary（テキスト系） - **Black / Text** (`#1a1a1a`): 本文・見出しの基調色。純黒 #000000 ではなく、わずかに浮いた黒 - **Gray** (`#6f6f6f`): 二次情報・補足テキスト - **White** (`#ffffff`): 写真上の白文字、ヘッダーロゴ ### Surface - **Background** (`#fcfcfc`): ページ背景。極めて淡いオフホワイト（pale gray） - **Footer** (`#f5f5f5`): フッター背景。一段濃いグレー - **Border** (`#eeeeee`): カード境界・水平線 - **Underline** (`#dddddd`): リンク下線 ### Error - **Error** (`#e61000`): エラーメッセージ - **Error Background** (`#ffebee`): エラー領域の背景 ### CSS Custom Properties ```css --color-black: #1a1a1a; --color-white: #fff; --color-pale-gray: #fcfcfc; --color-bg-footer: #f5f5f5; --color-gray: #6f6f6f; --color-border: #eee; --color-underline: #ddd; --color-error: #e61000; --color-bg-error: #ffebee; --color-bg: #fcfcfc; --color-text: #1a1a1a; ``` --- ## 3. Typography Rules ### 3.1 和文フォント（明朝） 3 言語向けに **3 段階のサイズ別**で定義。Variable Font で字幅を最適化。 ```css --font-ja: "custom-source-serif-4-variable", "FOT-筑紫明朝 Pr6 R", serif; --font-large-ja: "custom-source-serif-4-subhead-variable", "FOT-筑紫明朝 Pr6 R", serif; --font-small-ja: "custom-source-serif-4-small-text-variable", "FOT-筑紫明朝 Pr6 R", serif; --font-ja-device: YuMincho, "Hiragino Mincho ProN", serif; /* デバイスフォントフォールバック */ ``` - **Source Serif 4 (variable)**: Adobe による可変ウェイト・オプティカルサイズ対応の欧文セリフ。NDC はこれを和文用にカスタマイズ - **FOT-筑紫明朝 Pr6 R**: フォントワークスの和文明朝体。手書き感を抑えた現代的な明朝 - **YuMincho / Hiragino Mincho ProN**: 安全側のデバイスフォント ### 3.2 サンセリフフォント ```css --font-ja-sans: "custom-acumin-variable", "Helvetica Neue", "TazuganeGothicStdN-Book", sans-serif; --font-ja-sans-medium: "custom-acumin-variable", "Helvetica Neue", "TazuganeGothicStdN-Regular", sans-serif; --font-ja-sans-bold: "custom-acumin-variable", "Helvetica Neue", "TazuganeGothicStdN-Medium", sans-serif; ``` - **Acumin (variable)**: Adobe の可変ウェイト Grotesque サンセリフ。Helvetica よりも幾何学的 - **TazuganeGothicStdN**: 字游工房の「タズガネ角ゴシック」。Acumin との混植のために設計された現代的な和文ゴシック - ウェイト別に **Book / Regular / Medium** の 3 段階を切り替える ### 3.3 ウェイトシステム（Variable Font） ```css --font-ja-weight: 340; /* 通常本文 */ --font-ja-weight-medium: 450; /* 中見出し */ --font-ja-weight-bold: 520; /* 大見出し・強調 */ --font-en-weight: 360; --font-en-weight-medium: 450; --font-en-weight-bold: 520; ``` **慣例的な 400 / 700 ではなく、340 / 450 / 520 という細かい数値を採用**。Variable Font ならではの精緻な制御で、明朝とサンセリフの**視覚的ウェイトを揃える**設計思想。 ### 3.4 文字サイズ・ウェイト階層（実測値） | Role | Size | Family | Weight | Line Height | Letter Spacing | |------|------|--------|--------|-------------|----------------| | Body | 16.87px | Source Serif 4 (jp) | 340 | 1.8 (30.36px) | normal | | Hero Title (display) | 75.9px | Acumin (sans) | 340 | 1.8 (136.62px) | -0.01em | | Hero Subtitle | 33.73px | Acumin (sans) | 520 | 1.65 (55.66px) | 0.025em | | Hero CTA Title | 33.73px | Acumin (sans) | 520 | 1.8 (60.72px) | 0.03em | | Section Title (h2) | 25.30px | Acumin (sans) | 520 | 1.6 (40.48px) | 0.025em | | Body Lead | 21.08px | Acumin (sans) | 520 | 1.8 (37.95px) | 0.03em | | Topics Tag | 14.76px | Acumin (sans) | 520 | 1.8 (26.57px) | normal | | News List | 13.70px | Acumin (sans) | 340 | 1.8 (24.67px) | normal | | Small Text | 14.76px | Source Serif 4 small | 340 | 1.8 (26.57px) | normal | | Cookie CTA | 14.76px | Acumin (sans) | 340 | 1.0 (14.76px) | normal | | Language Selector | 16.87px | Acumin (sans) | 450 | 1.8 (30.36px) | normal | **注目点**: - 大見出しは**サンセリフ Acumin**、本文は**明朝 Source Serif 4** という二刀流 - 数値はすべて非整数（16.87 / 14.76 / 13.70）— 1rem = 16px ベースの相対サイズ計算で生まれる値 - 大型タイトル（75.9px）は letter-spacing を **-0.01em** とわずかに詰める（display 用途） - 中型タイトル（21〜34px）は **+0.025〜0.03em** と開ける（読みやすさ重視） ### 3.5 行間・字間 - **本文**: `line-height: 1.8`（30.36px / 16.87px）— 日本語編集物の標準 - **見出し（大）**: `line-height: 1.6〜1.8` — 詰めすぎず開けすぎず - **大型 display**: `line-height: 1.8` を維持しつつ `letter-spacing: -0.01em` で字を寄せる ### 3.6 OpenType 機能 ```css font-feature-settings: "chws"; ``` - **chws** (Contextual Half-Width Spacing): 約物の半角詰め。日本語組版で記号類を自然に詰める機能 - **palt は使用しない** — chws のみで字詰めを最小限に行う、控えめなアプローチ ### 3.7 多言語対応 3 言語ごとに完全に独立したフォントスタックを定義。 ```css --font-cn: "custom-source-serif-4-variable", "Songti SC", "STSong", "SimSun", serif; --font-cn-sans: "custom-acumin-variable", "SF Pro SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; ``` 中国語の場合、ウェイト基準も独立して定義（`--font-cn-weight: 360, medium 480, bold 500`）。**和文・欧文・中文で視覚ウェイトが揃うよう、それぞれ別の数値で制御**。 --- ## 4. Component Stylings ### Buttons **Primary CTA / Cookie Accept（黒）** - Background: `#1a1a1a` - Text: `#ffffff` - Font Family: Acumin Variable, Helvetica Neue, TazuganeGothicStdN-Book - Font Size: 14.76px - Font Weight: 340 - Line Height: 1.0 (14.76px) - Padding: 15.17px 14.76px - Border Radius: **0.4375rem (7px)** — `--border-radius` グローバルトークン - Border: 1px solid `#1a1a1a` - Letter Spacing: normal - font-feature-settings: `"chws"` **Secondary CTA / Cookie Decline（白）** - Background: `#fcfcfc` - Text: `#1a1a1a` - Border: 1px solid `#eeeeee` - 他の値は Primary と同じ ### Inputs / Select - Border Radius: 0.4375rem (7px) - Border: 1px solid `#eeeeee` - Padding: 12px 16px - Background: `#ffffff` - Font Size: 16.87px - Font Family: Acumin Variable ### Cards - Background: `#ffffff` - Border Radius: 0.4375rem - Border: 1px solid `#eeeeee` - Shadow: なし（フラット） - Padding: 内側は 24〜32px ### Footer - Background: `#f5f5f5` - Border-top: なし（背景色の差で区切る） - Padding: 64〜96px 上下 --- ## 5. Layout Principles ### Container（CSS Custom Properties から実測） ```css --grid-columns: 12; --grid-gap: 2rem; /* 32px */ --padding-side: 6rem; /* 96px */ --content-limit: 93.75rem; /* 1500px */ --header-height: 4.5rem; /* 72px */ --border-radius: .4375rem; /* 7px */ ``` - **最大幅 1500px**: 一般的な 1200px より広い。エディトリアルなボリューム感を出す - **サイドパディング 96px**: 左右に大きく余白を取る、原研哉的な美意識 - **12カラム + 32px ギャップ**: 標準的だが、組み合わせで余白が大きく見える - **ヘッダー高 72px**: 細身 ### Z-Index ```css --z-index-global-header: 1000; --z-index-menu: 2000; --z-index-loading: 5000; --z-index-gui: 999999; ``` 明確な階層と意図的な「桁の飛び」で、競合を避けながら可読性を保つ。 ### Animation Curves ```css --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-out-quint: cubic-bezier(.22, 1, .36, 1); --ease-base-transform: cubic-bezier(.16, 1, .3, 1); --ease-base-material: ease-out; --duration-base-transform: 1s; --duration-base-material: .3s; ``` - 装飾的なトランスフォーム（フェード・移動）には **1秒** の遅めのカーブ（ease-out-expo） - マテリアル的な状態変化（ホバー）には **0.3秒** の速いイージング --- ## 6. Depth & Elevation NDC はシャドウを基本的に使わず、**境界線と背景色の差**だけで階層を表現する。 | Level | Shadow | 用途 | |-------|--------|------| | 0 | none | 標準。すべての面要素 | | 1 | （未使用） | – | | 2 | （未使用） | – | **ヘッダーは sticky だが、box-shadow は付かない**。スクロール時もフラットなまま。 --- ## 7. Do's and Don'ts ### Do（推奨） - **明朝（Source Serif 4 + 筑紫明朝）と Acumin（サンセリフ）を組み合わせる**。本文 = 明朝、見出し = サンセリフが基本 - フォントウェイトは **340 / 450 / 520** の 3 段階（Variable Font）。400 / 500 / 700 ではない - 背景は **#fcfcfc**（pale gray）。純白を使わない - 本文色は **#1a1a1a**（純黒不可） - **Border Radius: 0.4375rem (7px)** をすべての面要素に適用 - **コンテンツ最大幅 1500px、サイドパディング 96px** を遵守 - font-feature-settings は `"chws"` を指定。palt は使わない - 大型タイトルは `letter-spacing: -0.01em` でわずかに詰める - 中型タイトルは `letter-spacing: 0.025〜0.03em` で開ける - アニメーションは **ease-out-expo / 1秒** を装飾的トランスフォームに使う ### Don't（禁止） - 純黒 `#000000` を本文や見出しに使わない（#1a1a1a が基準） - 純白 `#ffffff` 一色のページ背景を作らない（#fcfcfc が標準） - ウェイトに **400 / 700** を直接指定しない（Variable Font の 340 / 520 を使う） - 鋭い直角の CTA（`border-radius: 0`）を使わない（7px が標準） - 鮮やかなブランドカラーを導入しない（無彩色 + #e61000 のみ） - ドロップシャドウを多用しない（フラット運用） - 和文・欧文に同じフォントを使わない（明確に別スタックで指定） - `palt` を使った字詰めを行わない（chws のみ） - 言語別のウェイト調整を省略しない（jp / en / cn でそれぞれ別ウェイト基準を定義する） --- ## 8. Responsive Behavior ### Breakpoints | Name | Width | 説明 | |------|-------|------| | Mobile | ≤ 767px | スマートフォン | | Tablet | 768〜1024px | iPad | | Desktop | > 1024px | デスクトップ | ### モバイル時の調整 - サイドパディング 96px → 24px に縮小 - グリッド 12カラム → 4カラム - ヒーロータイトル 75.9px → 36〜40px - ヘッダーはハンバーガーメニュー化 ### タッチターゲット - CTA は最小 44px の高さ（15.17 + 14.76 + 15.17 = 45.10px）を確保 --- ## 9. Agent Prompt Guide ### クイックリファレンス ``` Brand: 日本デザインセンター (Nippon Design Center / NDC) Body Color: #1a1a1a (純黒不可) Surface: #fcfcfc (pale gray, 純白不可) Footer Surface: #f5f5f5 Border: #eeeeee Underline: #dddddd Error: #e61000 Body Font (jp): "Source Serif 4 Variable", "FOT-筑紫明朝 Pr6 R", serif Sans Font (jp): "Acumin Variable", "Helvetica Neue", "TazuganeGothicStdN-Book", sans-serif Body Size: 16.87px (1.054rem) Body Line Height: 1.8 (30.36px) Weight Scale: 340 (regular) / 450 (medium) / 520 (bold) Letter Spacing (display): -0.01em Letter Spacing (heading): 0.025〜0.03em font-feature-settings: "chws" (palt 不使用) Border Radius: 0.4375rem (7px) Container Max Width: 93.75rem (1500px) Side Padding: 6rem (96px) Grid: 12 columns / 2rem gap Header Height: 4.5rem (72px) Animation: cubic-bezier(.16, 1, .3, 1) / 1s ``` ### プロンプト例 ``` 日本デザインセンター（NDC）のデザインシステムに従って、新しいプロジェクト紹介ページを作成してください。 - 本文フォント: Source Serif 4 Variable + 筑紫明朝（明朝） - 見出しフォント: Acumin Variable + Tazugane Gothic（サンセリフ） - ウェイトは 340 / 450 / 520 の 3 段階のみ使用 - 背景 #fcfcfc、本文色 #1a1a1a、純黒・純白は使わない - 大見出しは Acumin 33.73px / 520 / line-height 1.65 / letter-spacing 0.025em - 本文は Source Serif 4 16.87px / 340 / line-height 1.8 - CTA は黒（#1a1a1a）背景 + 白文字、border-radius 7px、padding 15.17px 14.76px - コンテンツ最大幅 1500px、サイドパディング 96px、12カラムグリッド - font-feature-settings: "chws"（palt 不使用） - 装飾的なトランスフォームは cubic-bezier(.16, 1, .3, 1) / 1秒 ``` ### 字詰め・組版の重要ポイント 1. **明朝（本文） × サンセリフ（見出し） の二刀流**: NDC のシグネチャ。和文サイトでこの構成は珍しい 2. **Variable Font の数値ウェイト**: 340 / 450 / 520 を使い、和文・欧文・中文の視覚ウェイトを精緻に揃える 3. **背景は #fcfcfc**: 純白を避け、わずかに温かみを持たせる 4. **コンテンツ最大幅 1500px + サイドパディング 96px**: 一般的なサイトより広く、余白も大きい 5. **palt ではなく chws**: 約物の半角詰めだけを行う、控えめな組版 6. **3 言語対応のフォントシステム**: jp / en / cn ごとに完全に独立したスタックとウェイト基準を持つ --- **取得日**: 2026-05-08 **出典**: https://www.ndc.co.jp/, https://www.ndc.co.jp/work/ **抽出方法**: Headless Chrome (Puppeteer) による computed style 実測 + CSS Custom Properties 抽出