Design System Preview
Nikon — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

法人のお客様 個人のお客様

01 / Colors

カラーパレット

Brand
Primary
#222222
コーポレートカラー
Black
#000000
ヒーロー背景
Text
Text Primary
#222222
本文テキスト
Text Secondary
#555555
補足テキスト
Text Disabled
#949494
無効テキスト
Text White
#ffffff
ダーク背景上
Surface & Background
Page BG
#f3f3f3
ページ背景
Surface
#ffffff
カード・入力欄
Footer BG
#111111
フッター背景
Nav BG
rgba(0,0,0,0.7)
ナビ背景
Border
#949494
入力欄ボーダー

02 / Typography — 実測値

タイポグラフィ階層

BUSINESS — ヒーロータイトル
40px / 500 / line-height: 1.5 / letter-spacing: 0.06emヒーロー
セクション見出し — Heading 1
30px / 500 / line-height: 1.5メインコンテンツ
サブ見出し — Heading 2
18px / 500 / line-height: 1.5メインコンテンツ
本文テキスト — 記事コンテンツ用の広い行間。line-height: 1.9 のゆったりとした行間で、ニコンの技術や製品について長文を読みやすく提供します。
18px / 400 / line-height: 1.9記事ページ
本文テキスト — 標準の行間。リンクブロックやニュースリスト等に使用。
18px / 400 / line-height: 1.5トップページ
ナビゲーション — Nav Link (14px)
14px / 400 / line-height: 1.5
コピーライト — Caption (12px)
12px / 400 / line-height: 1.5フッター

記事ページの組版サンプル

光の力で、不可能を超えていく

ニコンは「光利用技術」と「精密技術」をコアコンピタンスとし、映像事業、精機事業、ヘルスケア事業、コンポーネント事業など幅広い領域で革新的な製品を生み出しています。

カメラやレンズの映像事業に加え、半導体露光装置やFPD露光装置の精機事業、網膜画像診断装置などのヘルスケア事業を展開。光の可能性を追求し続けています。


04 / Buttons

ボタンバリエーション

個人のお客様
Hero Outline
Cookie Dark
Cookie Light

05 / Cards

カードコンポーネント

Z fc — 美しさへの挑戦

ヘリテージデザインとミラーレス技術の融合。ニコンの伝統を継承しながら、最新の映像体験を提供します。

Z 8 — プロフェッショナル

4571万画素の高画質と高速連写性能。プロの現場で求められる信頼性と機動力を両立。

NIKKOR Z レンズ群

大口径Zマウントが実現する圧倒的な光学性能。広角から超望遠まで、あらゆる表現をサポート。


06 / Forms

フォーム要素

デフォルト — pill 型 radius: 22px, border: #949494
フォーカス — border: #222222
エラー — border: #c62828

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし(基本レイアウト)
Page Top Button
rgba(0,0,0,0.92) 0 0 10px 0

08 / Layout

コンテンツ幅

Main Container 1280px
Article Content 700px