admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
234 lines
17 KiB
Markdown
234 lines
17 KiB
Markdown
# 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）——純粋な黒より温かい
|