NISSAN (日産自動車) DESIGN.md

Japan

日産自動車（https://www.nissan.co.jp/）のデザイン仕様書。グローバル自動車メーカーの日本向けコーポレートサイト。車両ラインナップ、WEBカタログ、試乗予約等を提供。実サイトの computed style 実測（2026-05-22 取得）に基づく。

Raw DESIGN.md

At a glance

Group: Japan
Main color: #c3002fRed design systems
Fonts: ShinGoPro-RegularShinGoPro-Bold

Colors in this file

#c3002f
角型CTA（border-radius: 0px）
#ffffff
Primary CTA
#343434
Text Primary
#1a1a1a
Dark
#eeeeee
Secondary CTA
#666666
Text Secondary
#000000
Secondary CTA
#070707
ダークカラー #1a1a1a
#f6f6f6
Surface Light
#8a8a8a
Text Muted

日産自動車（https://www.nissan.co.jp/）のデザイン仕様書。グローバル自動車メーカーの日本向けコーポレートサイト。車両ラインナップ、WEBカタログ、試乗予約等を提供。実サイトの computed style 実測（2026-05-22 取得）に基づく。

1. Visual Theme & Atmosphere

デザイン方針: 直線的で構造的な自動車メーカーらしいレイアウト。角型CTA（border-radius: 0px） がブランドの最大の視覚的特徴。NISSAN Red #c3002f を差し色に使い、ダークヘッダーとホワイト基調のコンテンツエリアで堅実さと先進性を両立
密度: 車両カード中心のグリッドレイアウト。本文 line-height 1.5 で標準的。見出しはタイトに line-height 1.0 で詰める。情報密度は中程度で、車両画像とCTAの視認性を優先
キーワード: 角型CTA、NISSAN Red、ダークヘッダー、ShinGoPro の端正な字面、自動車メーカーの堅実さ
特徴:
- 和文フォントに ShinGoPro（新ゴ Pro、Morisawa Adobe Fonts） を採用。日本語を主体に組まれた代表的なゴシック体で、自動車メーカーの堅実なイメージと合致
- ブランドカラーは #c3002f（NISSAN Red）。「WEBカタログ」「詳しくはこちら」等の主要CTAすべてに使用。背景色として面で使い、白文字を載せる
- ダークカラー #1a1a1a をヘッダー、カード背景、オーバーレイに使用。#070707 はヘッダー内ボタンのニアブラック
- 角型ボタン（border-radius: 0px）が最大のブランド要素。pill や角丸を使わず、直線的・構造的なデザイン言語を貫徹
- テキストカラーは #343434（見出し）と #666666（本文）の2段階。純黒 #000000 は避け、やや柔らかいダークグレーを使用
- サーフェスは #f6f6f6（タブ非活性）/ #eeeeee（セカンダリボタン・お知らせ面）の控えめなグレー
- リガチャ無効化 font-feature-settings: "clig" 0, "liga" 0 をナビに適用
- ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

NISSAN Red (#c3002f): メインのブランドカラー。主要CTA「WEBカタログ」「詳しくはこちら」の背景色。uniqueBackgrounds で 19 件出現
Dark (#1a1a1a): ダークカード・ヘッダー背景・オーバーレイ。36 件出現
Near Black (#070707): ヘッダー内ボタンの背景

CTA / Buttons

Primary CTA: 背景 #c3002f / 文字 #ffffff / border 1px solid #c3002f / radius 0px（角型）/ padding 12px 25px
Secondary CTA: 背景 #eeeeee / 文字 #000000 / border 1px solid #eeeeee / radius 0px（角型）/ padding 12px 25px
Header Button: 背景 #070707 / 文字 #ffffff / padding 6px 20px / font 12px / weight 700 / letter-spacing 0.9px
Guide CTA: 背景 #c3002f / radius 8px / border 1px solid #c3002f / padding 8px 28px 8px 12px（右矢印用の非対称パディング）

Neutral

Token	hex	RGB	役割
Text Primary	`#343434`	(52, 52, 52)	見出し・主要テキスト
Text Secondary	`#666666`	(102, 102, 102)	本文テキスト
Text Muted	`#8a8a8a`	(138, 138, 138)	ミュートリンク・補助テキスト
Text Black	`#000000`	(0, 0, 0)	ナビリンク・一部本文
Surface Light	`#f6f6f6`	(246, 246, 246)	タブ非活性の背景
Surface Gray	`#eeeeee`	(238, 238, 238)	セカンダリボタン・お知らせ面
Surface Notice	`#f2f2f2`	(242, 242, 242)	お知らせ背景のバリエーション
Background	`#ffffff`	(255, 255, 255)	ページ背景

Semantic（実測未確認・推奨値）

実サイトには明確なエラー／成功色は表面化していない。自動車メーカーサイト向けに推奨する補完値:

Danger: #d32f2f 程度の赤（NISSAN Red と区別するためやや明るめ）
Success: #2e7d32 程度のグリーン
Warning: #f57c00 程度のオレンジ

3. Typography Rules

3.1 和文フォント

ゴシック体: ShinGoPro（新ゴ Pro） を最優先。Morisawa Adobe Fonts のフォント。Regular（400）と Bold（700）の2ウェイト
フォールバック: "Hiragino Kaku Gothic ProN"（Apple OS）→ "Noto Sans JP"（Linux／Android）→ "Yu Gothic"（Windows）→ "Meiryo"（古い Windows）→ sans-serif
明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

専用の欧文書体は持たず、ShinGoPro の欧文グリフを優先
フォールバックに各OSのシステム和文フォントの欧文グリフ
純粋な欧文サンセリフ（Helvetica Neue / Inter 等）は font-family に含まれない

3.3 font-family 指定

css/* 全要素共通（body, h1~h4, p, a, span, button, nav, header, footer） */
font-family: ShinGoPro-Regular, "Hiragino Kaku Gothic ProN",
  "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

/* 見出し・ボタン（Bold ウェイト） */
font-family: ShinGoPro-Bold, "Hiragino Kaku Gothic ProN",
  "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

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

ShinGoPro（Adobe Fonts）を最優先し、和文・欧文ともにブランド書体で統一する
Adobe Fonts ライセンス上 Web では use.typekit.net 経由でしか配信されないため、未契約環境では即座に Hiragino Kaku Gothic ProN へフォールバック
フォールバックは 和文を持つフォントだけで構成。Helvetica Neue 等の欧文専用書体は挟まない

代替フォント注記: ShinGoPro は Adobe Fonts のドメインライセンスのため、デザインのプレビューや社外資料で再現できない場合がある。代替として Zen Kaku Gothic New（weight 400 / 700）を使用すると、同じ Morisawa 系の書体であり字面の端正さが近い印象を出せる（preview.html はこの代替を使用）。

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

実測値（トップページ、2026-05-22 取得）

Role	Font	Size	Weight	Line Height	Letter Spacing	Color	備考
Section H2	ShinGoPro-Bold	28px	700	28px (x1.0)	0.1px (0.004em)	`#343434`	「人気モデルランキング」等
H3 Card Title	ShinGoPro-Bold	18px	700	20px (x1.11)	0.1px (0.006em)	`#343434`	「セレナ」「ノート」等の車名
Body	ShinGoPro-Regular	14px	400	22px (x1.57)	normal	`#666666`	本文テキスト
Tab Label	ShinGoPro-Regular	18px	400	18px (x1.0)	0.1px (0.006em)	`#343434`	「ボディタイプ」「価格帯」等
Body P	ShinGoPro-Regular	14px	400	21px (x1.5)	normal	`#000000`	一部の段落テキスト
Caption	ShinGoPro-Regular	13px	400	13px (x1.0)	normal	`#666666`	補足テキスト・キャプション
Small	ShinGoPro-Regular	12px	400	16.8px (x1.4)	normal	`#666666`	注釈・免責事項
Nav Link	ShinGoPro-Regular	14px	400	24px (x1.71)	0.9px (0.064em)	`#000000`	グローバルナビ
Header Button	ShinGoPro-Bold	12px	700	—	0.9px (0.075em)	`#ffffff`	「販売店検索」等

3.5 行間・字間

行間 (line-height) --- 実測:

本文 (14px): 1.5~1.57（21~22px / 14px）--- 自動車サイトの標準的な値
補助テキスト (13px): 1.0（13px / 13px）--- タイトに詰める
小注釈 (12px): 1.4（16.8px / 12px）
見出し (28px): 1.0（28px / 28px）--- 極めてタイト
タブ (18px): 1.0（18px / 18px）--- 一行高さ
ナビ (14px): 1.71（24px / 14px）--- ナビは広め

字間 (letter-spacing) --- 実測:

本文: normal（明示的な指定なし）
見出し: 0.1px（微小な正のトラッキング、ほぼゼロに近い）
ナビ・ヘッダーボタン: 0.9px（0.064~0.075em）--- 広めのトラッキングでゆったり

ガイドライン:

日本語本文は line-height 1.5 + letter-spacing normal が NISSAN の基本リズム
見出しは line-height 1.0 で極めてタイトに詰め、ブロック感を出す
ナビとヘッダーボタンのみ letter-spacing 0.9px で広めに。ブランドの堅実さを文字の間隔で表現

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

車名・価格等の固有名詞は white-space: nowrap で折り返し防止を推奨

3.7 OpenType 機能

css/* ナビゲーション */
font-feature-settings: "clig" 0, "liga" 0;

ナビリンクでリガチャ（合字）を明示的に無効化。clig（文脈依存合字）と liga（標準合字）をともに off
palt は使用しない。ShinGoPro のメトリクスをそのまま活かす方針
本文には font-feature-settings: normal が適用されている

3.8 縦書き

該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（NISSAN Red・角型） --- 「WEBカタログ」「詳しくはこちら」

Background: #c3002f
Text: #ffffff
Border: 1px solid #c3002f
Padding: 12px 25px
Border Radius: 0px（角型 --- NISSAN の最大のブランド要素）
Font: ShinGoPro-Regular, 14px, weight 400
Transition: opacity 0.3s

Secondary CTA（グレー・角型） --- 「オンライン見積り」等

Background: #eeeeee
Text: #000000
Border: 1px solid #eeeeee
Padding: 12px 25px
Border Radius: 0px（角型）
Font: ShinGoPro-Regular, 14px, weight 400

Header Button（ニアブラック・角型） --- 「販売店検索」「試乗車検索」

Background: #070707
Text: #ffffff
Padding: 6px 20px
Border Radius: 0px
Font: ShinGoPro-Bold, 12px, weight 700, letter-spacing 0.9px

Guide CTA（NISSAN Red・角丸） --- ガイドページ内

Background: #c3002f
Text: #ffffff
Border: 1px solid #c3002f
Padding: 8px 28px 8px 12px（右矢印アイコン用の非対称パディング）
Border Radius: 8px（例外的に角丸を使用）

Inputs（推奨実装）

Background: #ffffff
Border: 1px solid #cccccc
Border (focus): 1px solid #c3002f
Border Radius: 0px（ボタンと統一して角型を推奨）
Padding: 12px 16px
Font: ShinGoPro-Regular, 14px, weight 400
Height: 44px

Cards / Surfaces

Background: #ffffff（メイン）/ #1a1a1a（ダークカード）/ #eeeeee（お知らせ面）
Border: なし（画像カードが多く、枠線を使わない）
Border Radius: 0px（角型が基本）
Shadow: 基本フラット（box-shadow: none）
車両カードは画像が全幅を占め、その下にテキスト情報を配置

Header

Background: #1a1a1a ~ #070707（ダーク）
Position: fixed top: 0
z-index: 100 程度
白文字ナビ + NISSAN Red/ニアブラックのCTAボタン

Tab Navigation

Active Tab: #ffffff 背景、#343434 テキスト
Inactive Tab: #f6f6f6 背景、#343434 テキスト
Border Radius: 0px
Font: 18px, weight 400, letter-spacing 0.1px

Footer

Background: #1a1a1a（ダーク）
Text: #ffffff / #8a8a8a
Padding: 48px 24px

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Token	Value	用途
XS	4px	アイコンと文字の間
S	8px	ボタン内の縦余白
M	16px	カード内の段落間
L	25px	CTAボタンの横余白（実測）
XL	48px	セクション間の縦余白
XXL	80px	ヒーロー上下のゆとり

Container

Max Width: 1200px 程度（中央寄せのコンテナ）
Padding (horizontal): mobile 16px / desktop 24~32px

Border Radius Scale

Token	Value	用途
None	0px	主要CTA・セカンダリCTA・カード・タブ（基本）
Small	8px	ガイドCTAの例外的な角丸

重要: NISSAN のデザイン言語は 角型（radius 0px）が基本。pill（9999px）や大角丸（16px）は使用しない。

Grid

車両一覧: 3~4カラムグリッド（CSS Grid / Flexbox）
Gutter: 16~24px

6. Depth & Elevation

Level	Shadow	用途
0	`none`	カード・ボタン・タブ（基本フラット）
1	`0 2px 8px rgba(0, 0, 0, 0.08)`	ホバー時のカード浮き上がり（推奨）
2	`0 4px 16px rgba(0, 0, 0, 0.12)`	ドロップダウン・メガメニュー
3	`0 8px 32px rgba(0, 0, 0, 0.16)`	モーダル・ダイアログ（推奨）

実測ではほぼ全要素 box-shadow: none
立体感は ダークサーフェス #1a1a1a と ライトサーフェス #ffffff のコントラストで表現
影を使う場合も控えめな黒の透明度で、自動車メーカーの堅実さを維持

7. Do's and Don'ts

Do（推奨）

和文フォントは ShinGoPro を最優先、フォールバックは Hiragino Kaku Gothic ProN → Noto Sans JP → Yu Gothic → Meiryo
主要CTAは角型（border-radius: 0px） を徹底する。これが NISSAN の最大のブランド要素
主要CTAの背景色は #c3002f（NISSAN Red） を使い、白文字を載せる
見出しの line-height は 1.0 でタイトに。本文は 1.5 で標準的に
ナビ・ヘッダーボタンの letter-spacing は 0.9px で広めにとる
ダークヘッダー #1a1a1a + 白文字ナビの配色を維持する
テキストカラーは #343434（見出し）/ #666666（本文）の2段階で使い分ける
セカンダリCTAは #eeeeee 背景 + 黒文字の角型ボタン

Don't（禁止）

CTAに pill（border-radius: 9999px）や角丸（8px 以上）を使わない --- NISSAN は角型が基本（ガイドページの例外を除く）
主要CTAに 黒やグレーを使わない --- NISSAN Red #c3002f が主要CTAの唯一のブランドカラー
テキストの色に 純粋な #000000 を見出しに使わない --- #343434 を使う（ナビリンクの #000000 は例外）
ヘッダーを 白やライトグレーにしない --- NISSAN はダークヘッダーが基本
palt（プロポーショナル字詰め）を 有効にしない --- ShinGoPro のメトリクスをそのまま使う
冷たいブルーやグリーンをアクセント色にしない --- NISSAN のアクセントは赤（#c3002f）のみ
本文に line-height: 1.2 以下 を使わない（可読性が著しく低下する）

8. Responsive Behavior

Breakpoints（推奨値）

Name	Width	説明
Mobile	<= 767px	モバイルレイアウト（ハンバーガーナビ）
Tablet	<= 1023px	タブレットレイアウト
Desktop	> 1024px	デスクトップレイアウト

モバイル時の調整

Section H2: 28px → 22~24px
車両グリッド: 3~~4カラム → 1~~2カラム
本文サイズは 14px を維持（line-height も 1.5 維持）
ナビはハンバーガー化、展開時にフルスクリーンメニュー

タッチターゲット

主要CTA: 高さ 44px 以上（padding 12px 25px + 14px font + line-height >= 44px）
ヘッダーボタン: 高さ 34px 程度（padding 6px 20px）

ダークモード

該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

NISSAN Red (CTA): #c3002f
Dark (Header/Card): #1a1a1a
Near Black (Header Button): #070707
Text Primary (見出し): #343434
Text Secondary (本文): #666666
Text Muted: #8a8a8a
Surface Light: #f6f6f6
Surface Gray: #eeeeee
Background: #ffffff

Font: ShinGoPro-Regular, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif
（ShinGoPro 不在時の代替提案: Zen Kaku Gothic New）

Body Size: 14px / line-height 1.5 / weight 400 / letter-spacing normal
Heading Size: 28px / line-height 1.0 / weight 700 / letter-spacing 0.1px
Caption: 13px / line-height 1.0 / letter-spacing normal
Small: 12px / line-height 1.4 / letter-spacing normal
Nav: 14px / line-height 1.71 / letter-spacing 0.9px

Border Radius: 0px（角型が基本。pill や大角丸は使わない）
Shadow: 基本 none。階層はダークサーフェスとライトサーフェスのコントラストで表現

プロンプト例

NISSAN のデザインに従って、車両ラインナップのグリッドセクションを作成してください。
- フォント: ShinGoPro-Regular, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif
- セクション見出し: 28px / weight 700 / line-height 1.0 / letter-spacing 0.1px / color #343434
- カードタイトル（車名）: 18px / weight 700 / line-height 1.11 / letter-spacing 0.1px / color #343434
- 本文: 14px / weight 400 / line-height 1.5 / letter-spacing normal / color #666666
- 主要CTA: 背景 #c3002f（NISSAN Red）/ 白文字 / border-radius 0px（角型）/ border 1px solid #c3002f / padding 12px 25px
- セカンダリCTA: 背景 #eeeeee / 黒文字 / border-radius 0px（角型）/ padding 12px 25px
- ヘッダー: 背景 #1a1a1a（ダーク）/ 白文字ナビ
- カード背景: 白 #ffffff（基本）、ダークカード #1a1a1a も可
- box-shadow は基本 none。フラットなデザイン
- 見出しは #343434、本文は #666666。純黒 #000000 は見出しに使わない
- CTAに pill（radius 9999px）や角丸を使わない --- 角型（0px）が NISSAN のブランド

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/nissan.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

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

代官山蔦屋書店 (Daikanyama T-SITE)

Japan · Noto Sans Japanese

代官山蔦屋書店（https://store.tsite.jp/daikanyama/）のデザイン仕様書。 2026-05-08 取得の computed style に基づく。

Yakult（ヤクルト）

Japan · Roboto

Yakult（https://www.yakult.co.jp/）のデザイン仕様書。乳酸菌飲料「ヤクルト」を中心に、食品・飲料・化粧品を展開する健康企業。実サイトの computed style 実測（2026-05-31 取得）に基づく。

NTT docomo

Japan · ヒラギノ角ゴ Pro W3

NTT docomo（https://www.docomo.ne.jp/）のデザイン仕様書。実サイトの CSS computed style に基づく。日本最大の携帯キャリアのコーポレートサイト。

MORINAGA

Japan · 游ゴシック

MORINAGA（https://www.morinaga.co.jp/）のデザイン仕様書。 2026-05-21 取得の computed style に基づく。森永製菓のコーポレートサイト。チョコボール、ハイチュウ、ダース、森永ミルクキャラメル等の菓子ブランドを展開する日本の総合製菓メーカー。

KEYENCE（キーエンス）

Japan · source-han-sans-japanese

KEYENCE（キーエンス）のデザイン仕様書。

Onitsuka Tiger（オニツカタイガー）

Japan · matter

Onitsuka Tiger（https://www.onitsukatiger.com/jp/ja-jp/）のデザイン仕様書。 ASICS のヘリテージファッションブランド。ラグジュアリーストリートウェアとハイファッションスニーカーで知られる。実サイトの computed style 実測（2026-05-21 取得）に基づく。

All Design.md files Browse by font