UI Skillbook
2

日本デザインセンター (Nippon Design Center / NDC) DESIGN.md

Japan

日本デザインセンター（https://www.ndc.co.jp/）のデザイン仕様書。 2026-05-08 取得の computed style と CSS Custom Properties に基づく。

Raw DESIGN.md

At a glance

Group
Japan
Main color
#e61000Red design systems
Fonts
custom-acumin-variablecustom-source-serif-4-variablecustom-source-serif-4-subhead-variableFOT-筑紫明朝 Pr6 R

Colors in this file

  • #1a1a1a

    Black / Text

  • #fcfcfc

    で制御（Variable Font）。背景は純白ではなくほんのわずかに温かい

  • #ffffff

    White

  • #eeeeee

    Border

  • #f5f5f5

    Footer

  • #e61000

    Error

  • #000000

    Black / Text

  • #6f6f6f

    Gray

  • #dddddd

    Underline

  • #ffebee

    Error Background

日本デザインセンター（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 文字サイズ・ウェイト階層（実測値）

RoleSizeFamilyWeightLine HeightLetter Spacing
Body16.87pxSource Serif 4 (jp)3401.8 (30.36px)normal
Hero Title (display)75.9pxAcumin (sans)3401.8 (136.62px)-0.01em
Hero Subtitle33.73pxAcumin (sans)5201.65 (55.66px)0.025em
Hero CTA Title33.73pxAcumin (sans)5201.8 (60.72px)0.03em
Section Title (h2)25.30pxAcumin (sans)5201.6 (40.48px)0.025em
Body Lead21.08pxAcumin (sans)5201.8 (37.95px)0.03em
Topics Tag14.76pxAcumin (sans)5201.8 (26.57px)normal
News List13.70pxAcumin (sans)3401.8 (24.67px)normal
Small Text14.76pxSource Serif 4 small3401.8 (26.57px)normal
Cookie CTA14.76pxAcumin (sans)3401.0 (14.76px)normal
Language Selector16.87pxAcumin (sans)4501.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 機能

cssfont-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 はシャドウを基本的に使わず、境界線と背景色の差だけで階層を表現する。

LevelShadow用途
0none標準。すべての面要素
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

NameWidth説明
Mobile≤ 767pxスマートフォン
Tablet768〜1024pxiPad
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 抽出

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/ndc.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "ndc" })

Related Design.md files

ITOKI (イトーキ)

Japan · Noto Sans JP

ITOKI（https://www.itoki.jp/）コーポレートサイトのデザイン仕様書。 「明日の『働く』を、デザインする。」を掲げるオフィス家具メーカー。 創業130年以上の歴史を持ち、チェア・デスク・ロッカーなどのオフィス製品から、ワークプレイスソリューションまでを手がける。 白を基調に、コーポレートネイビー #003349 と暖かみのあるコーラルレッド #ea6359 を要所で効かせるクリーンで信頼感のあるデザイン。 Not…

ORBIS（オルビス）

Japan · open sans

ORBIS（https://www.orbis.co.jp/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

BIOTOP（ビオトープ）

Japan · din-2014

BIOTOP（https://www.biotop.jp/）のデザイン仕様書。 東京・大阪・福岡・神戸・札幌に展開する、アパレル／フラワーショップ／カフェを内包した複合セレクトショップ（JUN グループ／WordPress ベース）。 最大の特徴は 画像を全面に敷き、その上に白文字を直接置く「雑誌の見開き」構成、din-2014 の大文字英字タイポグラフィ、そして差し色をディープグリーン #354443 ただ一色に絞った設計。角は基本…

GLICO

Japan · 游ゴシック

GLICO（https://www.glico.com/jp/）のデザイン仕様書。 2026-05-21 取得の computed style に基づく。 江崎グリコのコーポレートサイト。ポッキー・プリッツ・ビスコ等を擁する日本を代表する菓子メーカー。

にんべん（NINBEN）

Japan · ヒラギノ明朝 ProN

にんべん（NINBEN）のデザイン仕様書。

COHINA（コヒナ）

Japan · Noto Sans JP

COHINA（https://cohina.net/）のデザイン仕様書。 小柄な女性のための D2C ファッションブランド。Shopify ベースの EC サイト。 実サイトの computed style 実測（2026-05-09 取得）に基づく。

All Design.md filesBrowse by font