workbuddy_skills/open-design/design-systems/nvidia/DESIGN-ja.md

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

> Category: メディア＆コンシューマー
> GPUコンピューティング。グリーン＆ブラックのエネルギー、テクニカルパワーの美学。

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

NVIDIAのウェブサイトは、デザインの抑制を通じて圧倒的な計算パワーを伝える、ハイコントラストでテクノロジー志向の体験です。ページはスターク・ブラック（`#000000`）とホワイト（`#ffffff`）を基盤に構築され、NVIDIAのシグネチャーグリーン（`#76b900`）がアクセントとして際立ちます。このグリーンはブランドの指紋として機能するほど独自のものです。自然の緑ではなく、GPUがレンダリングする光の電気的でライムシフトしたグリーン——シャルトルーズとケリーグリーンの間に位置し、テクノロジー業界の人々に即座に「NVIDIA」を想起させます。

カスタムのNVIDIA-EEAフォントファミリー（ArialとHelveticaをフォールバックとして使用）は、クリーンでインダストリアルなタイポグラフィの声を作り出します。36pxボールドで行間1.25（タイト）の見出しは、密度が高く権威ある文章ブロックを生成します。このフォントにはシリコンバレーのサンセリフが持つジオメトリックな遊び心はなく、ヨーロッパ的で実用的、エンジニアリング重視です。本文テキストは15〜16pxで動作し、読みやすいが余裕のあるサイズではなく、画面の実装面積がGPUメモリのように最適化されている印象を維持します。

NVIDIAのデザインを他のダークバックグラウンドのテックサイトと区別しているのは、グリーンアクセントの規律ある使用方法です。`#76b900`はボーダー（`2px solid #76b900`）、リンク下線（`underline 2px rgb(118, 185, 0)`）、CTAに現れますが、メインコンテンツのバックグラウンドや大きな表面領域には決して使われません。グリーンはシグナルであり、サーフェスではありません。深いシャドウシステム（`rgba(0, 0, 0, 0.3) 0px 0px 5px`）と最小限のボーダー半径（1〜2px）と組み合わさることで、全体的な印象は精密工学ハードウェアをピクセルで表現したものになります。

**Key Characteristics:**
- NVIDIA グリーン（`#76b900`）を純粋なアクセントとして——ボーダー、下線、インタラクティブなハイライトのみに使用
- ブラック（`#000000`）が主要なバックグラウンドで、ダークセクションにはホワイト（`#ffffff`）テキスト
- NVIDIA-EEA カスタムフォント（Arial/Helvetica フォールバック付き）——インダストリアル、ヨーロッパ的、クリーン
- タイトな行間（見出しに1.25）で密度が高く権威ある文章ブロックを実現
- 最小限のボーダー半径（1〜2px）——全体を通じてシャープでエンジニアリングされた角
- グリーンボーダーボタン（`2px solid #76b900`）を主要なインタラクティブパターンとして
- Font Awesome 6 Pro/Sharp アイコンシステム（ウェイト900）でシャープなアイコノグラフィを実現
- マルチフレームワークアーキテクチャ（PrimeReact、Fluent UI、Element Plus）でリッチなインタラクティブコンポーネントを実現

## 2. カラーパレット＆役割

### プライマリブランド
- **NVIDIA グリーン**（`#76b900`）：シグネチャー——ボーダー、リンク下線、CTAのアウトライン、アクティブインジケーター。大きなサーフェスフィルには決して使用しない。
- **トゥルーブラック**（`#000000`）：ページの主要バックグラウンド、ライトサーフェスのテキスト、支配的なトーン。
- **ピュアホワイト**（`#ffffff`）：ダークバックグラウンドのテキスト、ライトセクションのバックグラウンド、カードのサーフェス。

### 拡張ブランドパレット
- **NVIDIA グリーン ライト**（`#bff230`）：ハイライトやホバー状態のための明るいライムアクセント。
- **オレンジ 400**（`#df6500`）：アラート、フィーチャードバッジ、またはエネルギー関連コンテキストのウォームアクセント。
- **イエロー 300**（`#ef9100`）：セカンダリウォームアクセント、製品カテゴリのハイライト。
- **イエロー 050**（`#feeeb2`）：コールアウトバックグラウンド用のライトウォームサーフェス。

### ステータス＆セマンティック
- **レッド 500**（`#e52020`）：エラー状態、破壊的アクション、重大なアラート。
- **レッド 800**（`#650b0b`）：深刻な警告バックグラウンド用のディープレッド。
- **グリーン 500**（`#3f8500`）：成功状態、ポジティブインジケーター（ブランドグリーンより暗い）。
- **ブルー 700**（`#0046a4`）：情報提供のアクセント、リンクホバーの代替。

### デコラティブ
- **パープル 800**（`#4d1368`）：グラデーション終端、プレミアム/AIコンテキスト用のディーププレッド。
- **パープル 100**（`#f9d4ff`）：ライトパープルのサーフェスティント。
- **フューシャ 700**（`#8c1c55`）：特別プロモーションやフィーチャードコンテンツのためのリッチアクセント。

### ニュートラルスケール
- **グレー 300**（`#a7a7a7`）：ミュートしたテキスト、無効化されたラベル。
- **グレー 400**（`#898989`）：セカンダリテキスト、メタデータ。
- **グレー 500**（`#757575`）：ターシャリテキスト、プレースホルダー、フッター。
- **グレーボーダー**（`#5e5e5e`）：サブトルなボーダー、区切り線。
- **ニアブラック**（`#1a1a1a`）：ダークサーフェス、ブラックページ上のカードバックグラウンド。

### インタラクティブ状態
- **リンク デフォルト（ダーク背景）**（`#ffffff`）：ダークバックグラウンド上のホワイトリンク。
- **リンク デフォルト（ライト背景）**（`#000000`）：ライトバックグラウンド上のグリーン下線付きブラックリンク。
- **リンク ホバー**（`#3860be`）：すべてのリンクバリアントでホバー時にブルーシフト。
- **ボタン ホバー**（`#1eaedb`）：ボタンホバー状態のティールハイライト。
- **ボタン アクティブ**（`#007fff`）：アクティブ/押下時のボタン状態のブライトブルー。
- **フォーカスリング**（`#000000 solid 2px`）：キーボードフォーカス用のブラックアウトライン。

### シャドウ＆深度
- **カードシャドウ**（`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`）：浮き上がったカードのサブトルなアンビエントシャドウ。

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

### フォントファミリー
- **プライマリ**：`NVIDIA-EMEA`、フォールバック：`Arial, Helvetica, sans-serif`
- **アイコンフォント**：`Font Awesome 6 Pro`（ソリッドアイコンにウェイト900、レギュラーに700）
- **アイコンシャープ**：`Font Awesome 6 Sharp`（ライトアイコンにウェイト300、レギュラーに400）

### 階層

| 役割 | フォント | サイズ | ウェイト | 行間 | 文字間隔 | 備考 |
|------|------|------|--------|-------------|----------------|-------|
| ディスプレイヒーロー | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25 (tight) | normal | 最大インパクトの見出し |
| セクション見出し | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25 (tight) | normal | セクションタイトル、カード見出し |
| サブ見出し | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75 (relaxed) | normal | 機能説明、サブタイトル |
| カードタイトル | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25 (tight) | normal | カードおよびモジュール見出し |
| ボディ ラージ | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67 (relaxed) | normal | 強調されたボディ、リードパラグラフ |
| ボディ | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | 標準的な読み物テキスト |
| ボディ ボールド | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | 強調ラベル、ナビゲーションアイテム |
| ボディ スモール | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67 (relaxed) | normal | セカンダリコンテンツ、説明文 |
| ボディ スモール ボールド | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | 強調されたセカンダリコンテンツ |
| ボタン ラージ | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25 (tight) | normal | プライマリCTAボタン |
| ボタン | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25 (tight) | normal | 標準ボタン |
| ボタン コンパクト | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00 (tight) | 0.144px | スモール/コンパクトボタン |
| リンク | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | ナビゲーションリンク |
| リンク 大文字 | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | `text-transform: uppercase`、ナビラベル |
| キャプション | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | メタデータ、タイムスタンプ |
| キャプション スモール | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25 (tight) | normal | 細字、法的テキスト |
| マイクロラベル | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | `text-transform: uppercase`、小さなバッジ |
| マイクロ | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00 (tight) | normal | 最小のUIテキスト |

### 原則
- **ボールドをデフォルトの声として**：NVIDIAは見出し、ボタン、リンク、ラベルにウェイト700を多用します。ウェイト400は本文テキストと説明文のみに使用——それ以外はすべてボールドで、自信と権威を表現します。
- **タイトな見出し、余裕のあるボディ**：見出しの行間は一貫して1.25（タイト）で、本文テキストは1.50〜1.67にリラックスします。このコントラストがコンテンツブロックの上部に視覚的な密度を生み出し、段落での快適な読みやすさを実現します。
- **ナビゲーションには大文字**：リンクラベルにはウェイト700で`text-transform: uppercase`を使用し、ハードウェア仕様ラベルのようなナビゲーションの声を作り出します。
- **装飾的なトラッキングなし**：コンパクトボタン（0.144px）を除き、文字間隔は全体を通じてnormalです。フォント自体が操作なしでインダストリアルなキャラクターを持ちます。

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

### ボタン

**プライマリ（グリーンボーダー）**
- Background: `transparent`
- Text: `#000000`
- Padding: 11px 13px
- Border: `2px solid #76b900`
- Radius: 2px
- Font: 16px ウェイト700
- Hover: background `#1eaedb`、text `#ffffff`
- Active: background `#007fff`、text `#ffffff`、border `1px solid #003eff`、scale(1)
- Focus: background `#1eaedb`、text `#ffffff`、outline `#000000 solid 2px`、opacity 0.9
- 用途：プライマリCTA（「詳細を見る」「ソリューションを探る」）

**セカンダリ（グリーンボーダー 細線）**
- Background: transparent
- Border: `1px solid #76b900`
- Radius: 2px
- 用途：セカンダリアクション、代替CTA

**コンパクト / インライン**
- Font: 14.4px ウェイト700
- Letter-spacing: 0.144px
- Line-height: 1.00
- 用途：インラインCTA、コンパクトナビゲーション

### カード＆コンテナ
- Background: `#ffffff`（ライト）または`#1a1a1a`（ダークセクション）
- Border: なし（クリーンエッジ）または`1px solid #5e5e5e`
- Radius: 2px
- Shadow: 浮き上がったカードには`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`
- Hover: シャドウの強調
- Padding: 内部16〜24px

### リンク
- **ダーク背景上**：`#ffffff`、下線なし、ホバーで`#3860be`にシフト
- **ライト背景上**：`#000000`または`#1a1a1a`、下線`2px solid #76b900`、ホバーで`#3860be`にシフト、下線が消える
- **グリーンリンク**：`#76b900`、ホバーで`#3860be`にシフト
- **ミュートリンク**：`#666666`、ホバーで`#3860be`にシフト

### ナビゲーション
- ダークブラックバックグラウンド（`#000000`）
- ロゴは左揃え、NVIDIA ワードマークを際立たせる
- リンク：NVIDIA-EMEA 14px ウェイト700 大文字、`#ffffff`
- Hover: 色のシフト、下線の変化なし
- 製品カテゴリ用のメガメニュードロップダウン
- スクロール時にバックドロップ付きスティッキー

### 画像処理
- 製品/GPUレンダリングをヒーロー画像として使用し、多くの場合フルワイド
- スクリーンショット画像に奥行きを出すためのサブトルシャドウ
- ダークヒーローセクション上のグリーングラデーションオーバーレイ
- 50%半径の円形アバターコンテナ

### 特徴的なコンポーネント

**製品カード**
- 最小半径（2px）のクリーンなホワイトまたはダークカード
- タイトルにグリーンアクセントボーダーまたは下線
- ボールド見出し＋ライターな説明のパターン
- 下部にグリーンボーダー付きCTA

**テックスペックテーブル**
- インダストリアルグリッドレイアウト
- 交互の行バックグラウンド（サブトルなグレーシフト）
- ボールドラベル、レギュラー値
- 主要メトリクスのグリーンハイライト

**Cookie/同意バナー**
- 固定された下部配置
- 角丸ボタン（2px半径）
- グレーボーダー処理

## 5. レイアウト原則

### スペーシングシステム
- ベースユニット：8px
- スケール：1px、2px、3px、4px、5px、6px、7px、8px、9px、10px、11px、12px、13px、15px
- 主要なパディング値：8px、11px、13px、16px、24px、32px
- セクション間隔：48〜80pxの垂直パディング

### グリッド＆コンテナ
- 最大コンテンツ幅：約1200px（contained）
- コンテインされたテキストを持つフルワイドヒーローセクション
- フィーチャーセクション：製品カード用の2〜3カラムグリッド
- 記事/ブログコンテンツには1カラム
- ドキュメントにはサイドバーレイアウト

### 余白の哲学
- **目的ある密度**：NVIDIAは典型的なSaaSサイトよりも密なスペーシングを使用し、技術コンテンツの密度を反映しています。余白は概念を分離するために存在し、豪華な空白を作り出すためではありません。
- **セクションのリズム**：ダークセクションとホワイトセクションが交互に続き、バックグラウンドカラー（スペーシングだけでなく）でコンテンツブロックを分離します。
- **カードの密度**：製品カードは16〜20pxのギャップで隣接して配置され、ギャラリー感よりもカタログ感を作り出します。

### ボーダー半径スケール
- マイクロ（1px）：インラインスパン、小さな要素
- 標準（2px）：ボタン、カード、コンテナ、インプット——ほぼすべてのデフォルト
- サークル（50%）：アバター画像、円形タブインジケーター

## 6. 深度＆エレベーション

| レベル | 処理 | 用途 |
|-------|-----------|-----|
| フラット（レベル0） | シャドウなし | ページバックグラウンド、インラインテキスト |
| サブトル（レベル1） | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | 標準カード、モーダル |
| ボーダー（レベル1b） | `1px solid #5e5e5e` | コンテンツ区切り、セクションボーダー |
| グリーンアクセント（レベル2） | `2px solid #76b900` | アクティブ要素、CTA、選択アイテム |
| フォーカス（アクセシビリティ） | `2px solid #000000` アウトライン | キーボードフォーカスリング |

**シャドウの哲学**：NVIDIAの深度システムは最小限で実用的です。本質的にシャドウ値は1つだけ——30%の不透明度での5pxアンビエントブラー——で、カードとモーダルに控えめに使用されます。主要な深度シグナルはシャドウではなく、_カラーコントラスト_です。ブラックバックグラウンドの隣のホワイトセクション、ブラックサーフェス上のグリーンボーダー。これにより、深度が模擬光ではなく素材の違いから生まれる、ハードウェアのような視覚的レイヤリングが生まれます。

### デコラティブな深度
- ヒーローコンテンツの後ろのグリーングラデーションウォッシュ
- セクション遷移のためのダーク・トゥ・ダーカーグラデーション（ブラックからニアブラック）
- グラスモーフィズムやブラーエフェクトなし——雰囲気よりも明確さ

## 7. レスポンシブ挙動

### ブレークポイント
| 名前 | 幅 | 主な変化 |
|------|-------|-------------|
| モバイル スモール | <375px | コンパクトな1カラム、パディング縮小 |
| モバイル | 375-425px | 標準モバイルレイアウト |
| モバイル ラージ | 425-600px | ワイドモバイル、2カラムのヒント |
| タブレット スモール | 600-768px | 2カラムグリッドが始まる |
| タブレット | 768-1024px | フルカードグリッド、拡張ナビ |
| デスクトップ | 1024-1350px | 標準デスクトップレイアウト |
| ラージデスクトップ | >1350px | 最大コンテンツ幅、余裕のあるマージン |

### タッチターゲット
- ボタンは快適なタップターゲットとして11px 13pxのパディングを使用
- ナビゲーションリンクは14px大文字で適切なスペーシング
- グリーンボーダーボタンはダークバックグラウンド上でハイコントラストのタッチターゲットを提供
- モバイル：フルスクリーンオーバーレイでハンバーガーメニューへ折りたたみ

### 折りたたみ戦略
- ヒーロー：36px見出しが比例してスケールダウン
- ナビゲーション：〜1024pxで全横方向ナビゲーションがハンバーガーメニューに折りたたまれる
- 製品カード：3カラムから2カラム、単一カラムのスタックへ
- フッター：複数カラムのグリッドが単一のスタックカラムに折りたたまれる
- セクション間隔：モバイルでは64〜80pxが32〜48pxに縮小
- 画像：アスペクト比を維持し、コンテナ幅にスケール

### 画像の挙動
- GPU/製品レンダリングはすべてのサイズで高解像度を維持
- ヒーロー画像はビューポートに合わせて比例してスケール
- カード画像は一貫したアスペクト比を使用
- フルブリードのダークセクションはエッジ・トゥ・エッジ処理を維持

## 8. レスポンシブ挙動（拡張）

### タイポグラフィのスケーリング
- ディスプレイ36pxはモバイルで〜24pxにスケール
- セクション見出し24pxはモバイルで〜20pxにスケール
- 本文テキストはすべてのブレークポイントで15〜16pxを維持
- ボタンテキストは一貫したタップターゲットのために16pxを維持

### ダーク/ライトセクション戦略
- ダークセクション（ブラック背景、ホワイトテキスト）とライトセクション（ホワイト背景、ブラックテキスト）が交互に続く
- グリーンアクセントは両方のサーフェスタイプで一貫して維持される
- ダーク上：リンクはホワイト、下線はグリーン
- ライト上：リンクはブラック、下線はグリーン
- この交互配置がナチュラルなスクロールリズムとコンテンツグルーピングを生み出す

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

### クイックカラーリファレンス
- プライマリアクセント：NVIDIA グリーン（`#76b900`）
- バックグラウンド ダーク：トゥルーブラック（`#000000`）
- バックグラウンド ライト：ピュアホワイト（`#ffffff`）
- 見出しテキスト（ダーク背景）：ホワイト（`#ffffff`）
- 見出しテキスト（ライト背景）：ブラック（`#000000`）
- 本文テキスト（ライト背景）：ブラック（`#000000`）またはニアブラック（`#1a1a1a`）
- 本文テキスト（ダーク背景）：ホワイト（`#ffffff`）またはグレー300（`#a7a7a7`）
- リンクホバー：ブルー（`#3860be`）
- ボーダーアクセント：`2px solid #76b900`
- ボタンホバー：ティール（`#1eaedb`）

### コンポーネントプロンプト例
- "ブラックバックグラウンドのヒーローセクションを作成してください。見出しは36px NVIDIA-EMEA ウェイト700、line-height 1.25、カラー #ffffff。サブタイトルは18px ウェイト400、line-height 1.67、カラー #a7a7a7。CTAボタンはtransparentバックグラウンド、2px solid #76b900ボーダー、2px半径、11px 13pxパディング、テキスト #ffffff。ホバー：background #1eaedb、テキストホワイト。"
- "製品カードをデザインしてください：ホワイトバックグラウンド、2px border-radius、box-shadow rgba(0,0,0,0.3) 0px 0px 5px。タイトルは20px NVIDIA-EMEA ウェイト700、line-height 1.25、カラー #000000。ボディは15px ウェイト400、line-height 1.67、カラー #757575。タイトルにグリーン下線アクセント：border-bottom 2px solid #76b900。"
- "ナビゲーションバーを構築してください：#000000バックグラウンド、スティッキートップ。NVIDIAロゴ左揃え。リンクは14px NVIDIA-EMEA ウェイト700大文字、カラー #ffffff。ホバー：カラー #3860be。グリーンボーダーCTAボタン右揃え。"
- "ダークフィーチャーセクションを作成してください：#000000バックグラウンド。セクションラベルは14px ウェイト700大文字、カラー #76b900。見出しは24px ウェイト700、カラー #ffffff。説明文は16px ウェイト400、カラー #a7a7a7。20pxギャップで3つの製品カードを一列に並べる。"
- "フッターをデザインしてください：#000000バックグラウンド。リンクグループ付きの複数カラムレイアウト。リンクは14px ウェイト400、カラー #a7a7a7。ホバー：カラー #76b900。下部バーに12pxの法的テキスト、カラー #757575。"

### イテレーションガイド
1. `#76b900`を常にアクセントとして使用し、バックグラウンドフィルには決して使わない——ボーダー、下線、ハイライト用のシグナルカラー
2. ボタンはデフォルトでグリーンボーダーのtransparent——フィルされたバックグラウンドはホバー/アクティブ状態のみに現れる
3. ウェイト700はすべてのインタラクティブおよび見出し要素の支配的な声；400は本文段落のみ
4. ボーダー半径はすべてに対して2px——このシャープで最小限の丸みはインダストリアル美学のコア
5. ダークセクションはホワイトテキスト；ライトセクションはブラックテキスト——グリーンアクセントは両方で同様に機能する
6. リンクホバーはリンクのデフォルトカラーに関わらず常に`#3860be`（ブルー）
7. 見出しのline-height 1.25、本文テキストのline-height 1.50〜1.67——視覚的階層のためにこのコントラストを維持する
8. ナビゲーションには大文字14pxボールドを使用——このハードウェアラベルタイポグラフィはブランドボイスの一部