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

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

> Category: メディア・コンシューマー
> ビジュアル探索。レッドアクセント、マソングリッド、画像ファースト。

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

Pinterest のウェブサイトは、ビジュアル探索をライフスタイル誌のように演出する、温かくインスピレーション溢れるキャンバスです。デザインは柔らかくやや温かみのある白い背景を基調とし、Pinterest レッド（`#e60023`）を唯一の大胆なブランドアクセントとして使用しています。多くのテックプラットフォームのクールなブルーとは異なり、Pinterest のニュートラルスケールには明確な温かみが感じられます——グレーはクールなスチールではなく、オリーブ/サンドトーン（`#91918c`、`#62625b`、`#e5e5e0`）に傾いており、居心地よくクラフト感のある雰囲気を作り出し、ブラウジングへの誘いを高めています。

タイポグラフィには Pin Sans を使用しています——日本語フォントを含む幅広いフォールバックスタックを持つカスタムプロプライエタリフォントで、Pinterest のグローバルなリーチを反映しています。ディスプレイサイズ（70px、ウェイト 600）では、Pin Sans は大きく親しみやすいヘッドラインを生み出します。小さいサイズではシステムはコンパクトです：ボタン 12px、キャプション 12–14px。CSS 変数の命名システム（`--comp-*`、`--sema-*`、`--base-*`）は、洗練された3層のデザイントークンアーキテクチャを示しています：コンポーネントレベル、セマンティックレベル、ベースレベルのトークンです。

Pinterest の特徴は、寛大なボーダーラジウスシステム（12px–40px、円形には 50%）と温かみのあるボタン背景です。セカンダリボタン（`#e5e5e0`）はコールドグレーではなく、明確に温かみのあるサンドトーンを持ちます。プライマリレッドボタンは 16px のラジウスを使用——丸みがありますが、ピル形ではありません。温かみのあるバッジ背景（`hsla(60,20%,98%,.5)`——微妙なイエロー温色調）と写真主体のレイアウトを組み合わせることで、コーポレートでステリルではなく、手作り感があり個人的なデザインが生まれています。

**主な特徴：**
- オリーブ/サンドトーンのニュートラルカラーを持つ温かい白いキャンバス——居心地よく、クリニカルではない
- Pinterest レッド（`#e60023`）を唯一の大胆なアクセントとして——控えめにならず、常に自信に満ちている
- グローバルフォールバックスタック（CJK を含む）を持つ Pin Sans カスタムフォント
- 3層トークンアーキテクチャ：`--comp-*` / `--sema-*` / `--base-*`
- 温かみのあるセカンダリサーフェス：サンドグレー（`#e5e5e0`）、温かいバッジ（`hsla(60,20%,98%,.5)`）
- 寛大なボーダーラジウス：標準 16px、大きなコンテナには最大 40px
- 写真ファーストのコンテンツ——ピン/画像が主要なビジュアル要素
- ダークに近いパープルのテキスト（`#211922`）——温かみがあり、プラムのヒントを持つ

## 2. カラーパレットとロール

### プライマリブランド
- **Pinterest レッド**（`#e60023`）：プライマリ CTA、ブランドアクセント——大胆で自信に満ちた赤
- **グリーン 700**（`#103c25`）：`--base-color-green-700`、成功/ネイチャーアクセント
- **グリーン 700 ホバー**（`#0b2819`）：`--base-color-hover-green-700`、プレスされたグリーン

### テキスト
- **プラムブラック**（`#211922`）：プライマリテキスト——プラムのアンダートーンを持つ温かいニアブラック
- **ブラック**（`#000000`）：セカンダリテキスト、ボタンテキスト
- **オリーブグレー**（`#62625b`）：セカンダリ説明、ミュートテキスト
- **ウォームシルバー**（`#91918c`）：`--comp-button-color-text-transparent-disabled`、無効テキスト、入力ボーダー
- **ホワイト**（`#ffffff`）：ダーク/カラーサーフェス上のテキスト

### インタラクティブ
- **フォーカスブルー**（`#435ee5`）：`--comp-button-color-border-focus-outer-transparent`、フォーカスリング
- **パフォーマンスパープル**（`#6845ab`）：`--sema-color-hover-icon-performance-plus`、パフォーマンス機能
- **レコメンデーションパープル**（`#7e238b`）：`--sema-color-hover-text-recommendation`、AI レコメンデーション
- **リンクブルー**（`#2b48d4`）：リンクテキストカラー
- **Facebook ブルー**（`#0866ff`）：`--facebook-background-color`、ソーシャルログイン
- **プレストブルー**（`#617bff`）：`--base-color-pressed-blue-200`、プレスした状態

### サーフェスとボーダー
- **サンドグレー**（`#e5e5e0`）：セカンダリボタン背景——温かみがあり、クラフト感がある
- **ウォームライト**（`#e0e0d9`）：円形ボタン背景、バッジ
- **ウォームウォッシュ**（`hsla(60, 20%, 98%, 0.5)`）：`--comp-badge-color-background-wash-light`、微妙な温かいバッジ背景
- **フォグ**（`#f6f6f3`）：ライトサーフェス（50% 不透明度）
- **ボーダー無効**（`#c8c8c1`）：`--sema-color-border-disabled`、無効ボーダー
- **ホバーグレー**（`#bcbcb3`）：`--base-color-hover-grayscale-150`、ホバーボーダー
- **ダークサーフェス**（`#33332e`）：ダークセクションの背景

### セマンティック
- **エラーレッド**（`#9e0a0a`）：チェックボックス/フォームエラー状態

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

### フォントファミリー
- **プライマリ**：`Pin Sans`、フォールバック：`-apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial`

### 階層

| ロール | フォント | サイズ | ウェイト | 行高 | 文字間隔 | 備考 |
|------|------|------|--------|-------------|----------------|-------|
| ディスプレイヒーロー | Pin Sans | 70px (4.38rem) | 600 | normal | normal | 最大インパクト |
| セクション見出し | Pin Sans | 28px (1.75rem) | 700 | normal | -1.2px | ネガティブトラッキング |
| ボディ | Pin Sans | 16px (1.00rem) | 400 | 1.40 | normal | 標準読み取り |
| キャプションボールド | Pin Sans | 14px (0.88rem) | 700 | normal | normal | 強いメタデータ |
| キャプション | Pin Sans | 12px (0.75rem) | 400–500 | 1.50 | normal | 小テキスト、タグ |
| ボタン | Pin Sans | 12px (0.75rem) | 400 | normal | normal | ボタンラベル |

### 原則
- **コンパクトなタイプスケール**：範囲は 12px–70px で劇的なジャンプ——ほとんどの機能的テキストは 12–16px で、密度の高いアプリのような情報階層を作ります。
- **温かいウェイト分布**：見出しに 600–700、ボディに 400–500。超軽量ウェイトなし——テキストは常に実質感があります。
- **見出しのネガティブトラッキング**：28px 見出しの -1.2px により、居心地よく親密なセクションタイトルが生まれます。
- **シングルフォントファミリー**：Pin Sans がすべてを担当——セカンダリディスプレイやモノスペースフォントは検出されませんでした。

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

### ボタン

**プライマリレッド**
- 背景：`#e60023`（Pinterest レッド）
- テキスト：`#000000`（黒——赤に対するコントラストとしては珍しい選択）
- パディング：6px 14px
- ラジウス：16px（寛大な丸み、ピル形ではない）
- ボーダー：`2px solid rgba(255, 255, 255, 0)`（透明）
- フォーカス：CSS 変数によるセマンティックボーダー + アウトライン

**セカンダリサンド**
- 背景：`#e5e5e0`（温かいサンドグレー）
- テキスト：`#000000`
- パディング：6px 14px
- ラジウス：16px
- フォーカス：同じセマンティックボーダーシステム

**サーキュラーアクション**
- 背景：`#e0e0d9`（ウォームライト）
- テキスト：`#211922`（プラムブラック）
- ラジウス：50%（円形）
- 用途：ピンアクション、ナビゲーションコントロール

**ゴースト/トランスペアレント**
- 背景：透明
- テキスト：`#000000`
- ボーダーなし
- 用途：第三のアクション

### カードとコンテナ
- 寛大なラジウス（12px–20px）を持つ写真ファーストのピンカード
- ほとんどのカードに従来のボックスシャドウなし
- 白または温かいフォグ背景
- 一部の画像コンテナに 8px の白い太いボーダー

### インプット
- メール入力：白い背景、`1px solid #91918c` ボーダー、16px ラジウス、11px 15px パディング
- フォーカス：CSS 変数によるセマンティックボーダー + アウトラインシステム

### ナビゲーション
- 白または温かい背景上のクリーンなヘッダー
- Pinterest ロゴ + 検索バーを中央に
- ナビリンクに Pin Sans 16px
- アクティブ状態に Pinterest レッドアクセント

### 画像処理
- ピンスタイルのマソングリッド（Pinterest のシグネチャレイアウト）
- 画像の角丸：12px–20px
- 写真をプライマリコンテンツとして——すべてのピンは画像
- フィーチャード画像コンテナに太い白いボーダー（8px）

## 5. レイアウト原則

### スペーシングシステム
- ベースユニット：8px
- スケール：4px、6px、7px、8px、10px、11px、12px、16px、18px、20px、22px、24px、32px、80px、100px
- 大きなジャンプ：セクション間隔に 32px → 80px → 100px

### グリッドとコンテナ
- ピンコンテンツにマソングリッド（シグネチャレイアウト）
- 寛大な最大幅を持つ中央揃えのコンテンツセクション
- フルワイドのダークフッター
- プライマリナビゲーション要素としての検索バー

### ホワイトスペース哲学
- **インスピレーション密度**：マソングリッドはピンをぎっしりと詰め込みます——コンテンツ密度自体が価値提案です。ホワイトスペースはグリッド内ではなく、セクション間に存在します。
- **上で呼吸し、下で密度を**：ヒーロー/フィーチャーセクションには寛大なパディングを。ピングリッドはコンパクトでイマーシブ。

### ボーダーラジウススケール
- スタンダード（12px）：小カード、リンク
- ボタン（16px）：ボタン、入力、中サイズカード
- コンフォータブル（20px）：フィーチャーカード
- ラージ（28px）：大きなコンテナ
- セクション（32px）：タブ要素、大パネル
- ヒーロー（40px）：ヒーローコンテナ、大型フィーチャーブロック
- サークル（50%）：アクションボタン、タブインジケーター

## 6. 奥行きと高さ

| レベル | 処理 | 用途 |
|-------|-----------|-----|
| フラット（レベル 0）| シャドウなし | デフォルト——ピンはシャドウではなくコンテンツに依存 |
| サブトル（レベル 1）| 最小シャドウ（トークンより） | 高架のオーバーレイ、ドロップダウン |
| フォーカス（アクセシビリティ）| `--sema-color-border-focus-outer-default` リング | フォーカス状態 |

**シャドウ哲学**：Pinterest は最小限のシャドウを使用します。マソングリッドは、エレベーション効果ではなくコンテンツ（写真）に依存して視覚的な興味を作り出します。深度は、サーフェスカラーの温かみとコンテナの寛大な丸みから生まれます。

## 7. やること・やらないこと

### やること
- 温かいニュートラル（`#e5e5e0`、`#e0e0d9`、`#91918c`）を使用する——温かいオリーブ/サンドトーンがアイデンティティ
- Pinterest レッド（`#e60023`）はプライマリ CTA のみに適用する——大胆でシングル
- Pin Sans のみを使用する——すべてに一つのフォント
- 寛大なボーダーラジウスを適用する：ボタン/入力に 16px、カードに 20px 以上
- マソングリッドを密に保つ——コンテンツ密度が価値
- 温かいバッジ背景（`hsla(60,20%,98%,.5)`）を微妙な温かいウォッシュに使用する
- プライマリテキストには `#211922`（プラムブラック）を使用する——純粋な黒より温かい

### やらないこと
- クールなグレーのニュートラルを使用しない——常に温かい/オリーブトーン
- プライマリテキストに純粋な黒（`#000000`）を使用しない——プラムブラック（`#211922`）を使用する
- ピル形のボタンを使用しない——16px ラジウスは丸みがあるが、ピル形ではない
- 重いシャドウを追加しない——Pinterest はデザイン上フラットで、深度はコンテンツから
- カードに小さなボーダーラジウス（<12px）を使用しない——寛大な丸みが核心
- 追加のブランドカラーを導入しない——赤 + 温かいニュートラルが完全なパレット
- 細いフォントウェイトを使用しない——Pin Sans は最低 400

## 8. レスポンシブ動作

### ブレークポイント
| 名前 | 幅 | 主な変更 |
|------|-------|-------------|
| モバイル | <576px | シングルカラム、コンパクトレイアウト |
| モバイルラージ | 576–768px | 2 カラムピングリッド |
| タブレット | 768–890px | 拡張グリッド |
| デスクトップスモール | 890–1312px | 標準マソングリッド |
| デスクトップ | 1312–1440px | フルレイアウト |
| ラージデスクトップ | 1440–1680px | 拡張グリッドカラム |
| ウルトラワイド | >1680px | 最大グリッド密度 |

### 折りたたみ戦略
- ピングリッド：5+ カラム → 3 → 2 → 1
- ナビゲーション：検索バー + アイコン → 簡略化されたモバイルナビ
- フィーチャーセクション：サイドバイサイド → スタック
- ヒーロー：70px → 比例的にスケールダウン
- フッター：ダークマルチカラム → スタック

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

### クイックカラーリファレンス
- ブランド：Pinterest レッド（`#e60023`）
- 背景：ホワイト（`#ffffff`）
- テキスト：プラムブラック（`#211922`）
- セカンダリテキスト：オリーブグレー（`#62625b`）
- ボタンサーフェス：サンドグレー（`#e5e5e0`）
- ボーダー：ウォームシルバー（`#91918c`）
- フォーカス：フォーカスブルー（`#435ee5`）

### コンポーネントプロンプト例
- 「ヒーローを作成：白い背景。ヘッドラインは 70px Pin Sans ウェイト 600、プラムブラック（#211922）。レッド CTA ボタン（#e60023、16px ラジウス、6px 14px パディング）。セカンダリサンドボタン（#e5e5e0、16px ラジウス）。」
- 「ピンカードをデザイン：白い背景、16px ラジウス、シャドウなし。写真が上部を埋め、下に 16px Pin Sans ウェイト 400 の説明、#62625b で。」
- 「円形アクションボタンを構築：#e0e0d9 背景、50% ラジウス、#211922 アイコン。」
- 「入力フィールドを作成：白い背景、1px solid #91918c、16px ラジウス、11px 15px パディング。フォーカス：セマンティックトークンによるブルーアウトライン。」
- 「ダークフッターをデザイン：#33332e 背景。白い Pinterest スクリプトロゴ。12px Pin Sans リンク、#91918c で。」

### イテレーションガイド
1. いたるところに温かいニュートラル——オリーブ/サンドグレー、クールスチールは決して使わない
2. Pinterest レッドは CTA のみ——大胆でシングル
3. ボタン/入力に 16px ラジウス、カードに 20px 以上——寛大だがピル形ではない
4. Pin Sans が唯一のフォント——UI は 12px でコンパクト、ディスプレイは 70px
5. 写真がデザインを担う——UI は温かくミニマルを保つ
6. テキストにはプラムブラック（#211922）——純粋な黒より温かい