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。
368 lines
39 KiB
Markdown
368 lines
39 KiB
Markdown
# PlayStationにインスパイアされたデザインシステム
|
||
|
||
> Category: メディア・コンシューマー
|
||
> ゲームコンソールの小売。3面チャンネルレイアウト、静かな権威感の表示書体、シアンのホバースケール。
|
||
|
||
## 1. ビジュアルテーマと雰囲気
|
||
|
||
PlayStation.comは、エンターテインメントを販売するプレミアムコンシューマーエレクトロニクスブランドのマーケティング部門のように振る舞っている。ページは**交互のサーフェスによる縦型チャンネル**として構成されている。ほぼ黒に近いマストヘッドとヒーロー、中間部に連なる紙のような白いエディトリアルパネル、そして全体の体験をアンカーする深いコバルトブルーのフッターだ。これらのサーフェスモードの間で、サイトはPS5コンソール、ゲームのカバーアート、DualSenseコントローラーといったフォトグラフィーや3Dプロダクトレンダリングに強く依存し、ハードウェアが感情的な役割を担いながら、クロームは抑制された状態に保たれる。
|
||
|
||
タイポグラフィの特徴的な表現は、**大きいサイズでのSST Light（ウェイト300）**だ。ソニーのカスタムSSTファミリーは、22pxから54pxの範囲でウェイト300が使用されており、表示見出しに囁くような上品な品質を与え、ゲームストアよりも高級時計の広告に近い印象を醸し出している。この「静かな権威感」は、The VergeのManuka的な叫びやWiredの新聞スタンド密度とは正反対だ。PlayStationはタイポグラフィを後退させ、プロダクトを前面に立てることを望んでいる。ボディとUIはウェイト500〜700に依存しているが、*表示*の声は一貫して細く穏やかだ。
|
||
|
||
抑制が破れる唯一の場面は**インタラクション**だ。すべてのプライマリボタンには同一のホバー動作がある。フィルがエレクトリックシアン`#1eaedb`に切り替わり、2pxの白いボーダーが現れ、2pxのPlayStationブルーのアウターリングが背後に広がり、ボタン全体が**1.2倍にスケールアップ**する。この色のポップ、ボーダー、リング、リフトスケールの組み合わせは、主要ブランドの中でソニー独自のシグネチャームーブだ。1ページ全体で何百回も繰り返されるミニチュアの「電源オン」アニメーションだ。
|
||
|
||
**主な特徴：**
|
||
- 3面チャンネルレイアウト：ほぼ黒のヒーロー、紙のような白いコンテンツ、コバルトブルーのフッター — 交互に配置され、決して混ざり合わない
|
||
- 表示用途に22〜54pxでSSTウェイト300を使用 — プロダクト写真を主役にする「静かな権威感」の見出し
|
||
- PlayStation Blue `#0070cc` をブランドアンカーとして使用、シアン `#1eaedb` はホバー/フォーカス状態専用
|
||
- すべてのインタラクティブ要素はホバー時に1.2倍スケール — PlayStation独自のシグネチャー「電源オン」リフト
|
||
- 全999pxラジウスのピルボタン、12〜24pxの角丸矩形のカードアート
|
||
- コマースオレンジ `#d53b00` はPlayStation Store / 購入状態のCTAのみに使用
|
||
- 最大2120pxまでの広いブレークポイント対応 — 4Kテレビの閲覧コンテキストまでスケール
|
||
|
||
## 2. カラーパレットと役割
|
||
|
||
### プライマリ（ブランドアンカー）
|
||
- **PlayStation Blue** (`#0070cc`): ブランドのアンカーカラー。プライマリフッター、インラインリンク、ダークサーフェスのプライマリボタンフィル、および「公式」マーカーすべてに使用される。これは不変として扱うこと — コンシューマーの記憶においてブランドが最も強く結びついている色だ。
|
||
- **Console Black** (`#000000`): マストヘッド、ヒーローバックドロップ、プロダクトプレゼンテーションゾーンのための純粋な黒。PlayStationは美術館が彫刻を際立たせるために黒を使うように、ハードウェアを引き立てるために黒を使う。
|
||
|
||
### セカンダリとアクセント
|
||
- **PlayStation Cyan** (`#1eaedb`): インタラクションカラー。ボタンとリンクのホバー、フォーカス、アクティブ状態のみに適用される。デフォルトの背景や静止時のテキストカラーとして使用してはならない。フルシグネチャー処理のために、ホバー時は2pxの`#ffffff`ボーダーと2pxの`#0070cc`アウターリングとペアで使用すること。
|
||
- **Link Hover Blue** (`#1883fd`): インラインテキストリンクのホバーに使用されるより明るいバリアント。シアンとは区別される — これはリンクカラーであり、シアンはボタンカラーだ。
|
||
- **Dark Link Blue** (`#0068bd`): ライトサーフェス上の静止時リンクカラー — ブランドブルーのわずかにより彩度の高い従兄弟。
|
||
|
||
### サーフェスと背景
|
||
- **Paper White** (`#ffffff`): マストヘッドとフッターの間のエディトリアルパネルのプライマリコンテンツキャンバス。
|
||
- **Ice Mist** (`#f5f7fa`): ライトセクショングラジエントの大気的な終端。特定のパネルを純白から浮き上がらせるためにさりげなく使用される。
|
||
- **Divider Tint** (`#f3f3f3`): コンテンツ行の間の静かなhorizontal ruleカラー。
|
||
- **Masthead Black** (`#000000`): 上部ナビゲーションとヒーローキャンバス — プロダクト優先ゾーン専用。
|
||
- **Shadow Black** (`#121314`): パネルに大気的な深みが必要な場合のダークセクショングラジエントの開始アンカー。
|
||
- **Filter Mist** (`rgba(245, 247, 250, 0.3)`): スティッキーフィルターバーの背後に使用される半透明背景 — サイト唯一の「グラスモーフィズム」の瞬間。
|
||
|
||
### ニュートラルとテキスト
|
||
- **Display Ink** (`#000000`): 白いサーフェスのプライマリ表示見出し。
|
||
- **Deep Charcoal** (`#1f1f1f`): ボディ見出しと静止時リンクカラー — 大きなブロックでの視覚的なリングを軽減するため、純粋な黒よりわずかにソフト。
|
||
- **Body Gray** (`#6b6b6b`): セカンダリボディテキストとメタデータ。
|
||
- **Mute Gray** (`#cccccc`): 三次ラベル、無効状態。
|
||
- **Placeholder Ink** (`rgba(0, 0, 0, 0.6)`): フォームプレースホルダーテキスト — 60%の黒で、独立したグレー値ではない。
|
||
- **Inverse White** (`#ffffff`): ダークおよびブルーサーフェスのプライマリテキスト。
|
||
- **Dark-Link Blue** (`#53b1ff`): ダーク/ブラックサーフェス上の静止時リンクカラー — 黒地での視認性のためのPlayStation Blueの明るい浮遊バリアント。
|
||
|
||
### セマンティックとコマース
|
||
- **Commerce Orange** (`#d53b00`): PlayStation Storeの購入状態CTA、価格コールアウト、「セール中」バッジ専用。サイト唯一のウォームカラー — 控えめに使用し、コマースコンテキスト以外では絶対に使わないこと。
|
||
- **Commerce Orange Active** (`#aa2f00`): コマースボタンの押下/アクティブ状態。
|
||
- **Warning Red** (`#c81b3a`): フォームエラーと破壊的アクションの警告。
|
||
- **Shadow Wash 80** (`rgba(0, 0, 0, 0.8)`): プロダクト写真上のヒーローテキストに使用されるドラマチックなスクリム。
|
||
- **Shadow Wash 16** (`rgba(0, 0, 0, 0.16)`): カードの低いウェイトのエレベーションリング。
|
||
- **Shadow Wash 08** (`rgba(0, 0, 0, 0.08)`): 羽毛のように軽いカードエレベーション — ほとんど見えないが、白いパネルを白い背景から分離する。
|
||
- **Shadow Wash 06** (`rgba(0, 0, 0, 0.06)`): システムで最も軽いシャドウ。
|
||
|
||
### グラジエントシステム
|
||
PlayStationは**2つのセクショングラジエント**のみを使用する：
|
||
- **ライトセクショングラジエント**: `#ffffff` → `#f5f7fa` — パネルをキャンバスから静かに浮き上がらせる、ほぼ知覚できないウォッシュ。
|
||
- **ダークセクショングラジエント**: `#121314` → `#000000` — ヒーローパネルに色相シフトを導入せずに微妙なビネットを与える短い縦方向のウォッシュ。
|
||
|
||
どちらのグラジエントも**セクション背景としてのみ使用**され、コンポーネント内では使用しない。グラジエントボタン、グラジエントテキスト、グローイングヘイローは存在しない。ブランドはブルーだ — ブルーからパープルでも、ブルーからシアンでもない。
|
||
|
||
## 3. タイポグラフィルール
|
||
|
||
### フォントファミリー
|
||
- **SST** / **Playstation SST** (Sony、プロプライエタリ) — フォールバック: `Arial`、`Helvetica`。Toshi OmagariとAkira Kobayashiによってデザインされたソニーのカスタムグローバル書体。ホームページ全体でウェイト300 / 500 / 600 / 700をカバーする。**22〜54pxでのウェイト300**がPlayStationのタイポグラフィシグネチャーだ。
|
||
- **SST（コンデンスド/オルタネート）** — フォールバック: `helvetica`、`arial`。幅が重要な少数のUIモジュールで使用されるコンプレスされたバリアント。
|
||
- **Arial** — システムサンセリフでレンダリングされるまれなボタンバリアントのためのユーティリティフォールバック。
|
||
|
||
### 階層
|
||
|
||
| 役割 | フォント | サイズ | ウェイト | ラインハイト | レタースペーシング | 備考 |
|
||
|---|---|---|---|---|---|---|
|
||
| Hero Display (XL) | SST | 54px / 3.38rem | 300 | 1.25 | -0.1px | ページ上で最も大きなSSTの瞬間 — 静かなウェイトの高級見出し |
|
||
| Hero Display (L) | SST | 44px / 2.75rem | 300 | 1.25 | 0.1px | セカンダリヒーロー見出し |
|
||
| Large Display | SST | 35px / 2.20rem | 300 | 1.25 | — | フィーチャーパネルの見出し |
|
||
| Mid Display | SST | 28px / 1.75rem | 300 | 1.25 | 0.1px | セクション見出し |
|
||
| Compact Display | SST | 22px / 1.38rem | 300 | 1.25 | 0.1px | モジュールタイトル — 引き続きライトウェイト300 |
|
||
| Playstation SST Sub | Playstation SST | 22.5px / 1.41rem | 400 | 1.30 | — | プロモーショナルサブ見出し |
|
||
| UI Heading Small | SST | 18px / 1.13rem | 600 | 1.00 | — | タイトなUI見出し |
|
||
| Button / CTA | SST | 18px / 1.13rem | 500 | 1.25 | 0.4px | プライマリボタンラベル |
|
||
| Button / Emphasized | SST | 18px / 1.13rem | 700 | 1.25 | 0.45px | 高強調CTA（購入、購読） |
|
||
| Button Serif | SST | 18px / 1.13rem | 600 | 1.50 | — | セカンダリボタンラベル |
|
||
| Body Relaxed | SST | 18px / 1.13rem | 400 | 1.50 | 0.1px | 標準読み物ボディ |
|
||
| Link Body | SST | 18px / 1.13rem | 400 | 1.50 | — | インラインリンクテキスト |
|
||
| Compact Button | SST | 14px / 0.88rem | 700 | 1.25 | 0.324px | カード内ミニCTA |
|
||
| Utility Caption | SST | 14px / 0.88rem | 500 | 1.50 | — | キャプション、タグラベル |
|
||
| Caption Body | SST | 14px / 0.88rem | 400 | 1.50 | — | 標準メタデータ |
|
||
| Playstation Caption Bold | Playstation SST | 14px / 0.88rem | 700 | 1.40 | — | 強調キャプション |
|
||
| Playstation Caption Mid | Playstation SST | 14px / 0.88rem | 600 | 1.40 | — | セミボールドキャプション |
|
||
| Playstation Button | Playstation SST | 14.4px / 0.90rem | 700 | 1.00 | 0.144px | タイトなリーディングのUIボタン |
|
||
| Playstation Tab | Playstation SST | 14px / 0.88rem | 400 | 1.10 | 0.14px | タブ/ピルラベル |
|
||
| Playstation Compact Caption | Playstation SST | 12.8px / 0.80rem | 400 | 1.10 | — | 最小UIキャプション |
|
||
| Micro Caption | SST | 12px / 0.75rem | 500 | 1.50 | — | フッターのマイクロコピー、法的テキスト |
|
||
| Compact Caption Bold | SST | 12.06px / 0.75rem | 700 | 1.50 | — | 強調マイクロテキスト |
|
||
|
||
### 原則
|
||
- **大きいサイズでのウェイト300が声だ。** PlayStationは、ヒーロー見出しにライトウェイト表示を使用する唯一の主要コンソールブランドだ。表示タイポグラフィを500や700に「アップグレード」したくなる衝動に抵抗すること — 静けさこそが個性だ。
|
||
- **UIレイヤーでのウェイトジャンプ。** 18px未満では、視認性のためにシステムは500〜700にシフトする。300（表示）→ 400（ボディ）→ 500（キャプション）→ 700（ボタン）というウェイトグラジエントが階層を形成する。
|
||
- **レタースペーシングはほぼゼロに近い。** ほとんどの値は0.1〜0.45pxで、正またはわずかに負の値だ。54pxヒーローの`-0.1px`は、表示タイポグラフィを「デザインされた」と読ませるのに十分なほどタイトにするが、タイポグラフィ的なステートメントにはならない。
|
||
- **2つのSSTケーシング。** 「SST」と「Playstation SST」は、わずかに異なるメトリックセットを持つ機能的に同一のファミリーだ（Playstation SSTは小さいサイズでよりタイト）。ソニーの内部ライセンス以外の目的では互換可能として扱うこと。
|
||
- **オールキャップスなし。** The VergeやWiredとは異なり、PlayStationはUPPERCASEラベルをほとんど使用しない。キッカーとタグはタイトルケースまたはセンテンスケースのまま — これも「静かな権威感」の表れだ。
|
||
- **どこにもセリフなし。** システム全体がサンセリフだ。プリントボイスのカウンターポイントは存在しない。
|
||
|
||
## 4. コンポーネントスタイリング
|
||
|
||
### ボタン
|
||
|
||
**プライマリ — PlayStation Blue ピル**
|
||
- Background: `#0070cc` (PlayStation Blue)
|
||
- テキスト: `#ffffff`、SST 18px / 500 / 0.4px トラッキング
|
||
- ボーダー: 静止時はなし
|
||
- ボーダーラジウス: `999px` — フルピル
|
||
- パディング: ~`12px 24px`（サイズクラスによって変動）
|
||
- アウトライン: 静止時は`rgb(255, 255, 255) none 0px`
|
||
- **ホバー（シグネチャームーブ）**:
|
||
- Backgroundが`#1eaedb`（PlayStation Cyan）にフィル
|
||
- テキストは`#ffffff`を維持
|
||
- 2pxの`#ffffff`ボーダーが現れる
|
||
- 2pxの`#0070cc`アウターリングシャドウが広がる（`0 0 0 2px #0070cc`）
|
||
- `transform: scale(1.2)` — ボタンが実際に20%拡大する
|
||
- アクティブ: `opacity: 0.6` — プレスを示す素早いディム
|
||
- フォーカス: ホバーと同様だが、リングが`rgb(0, 114, 206) 0px 0px 0px 2px`のフォーカスシャドウに変わる
|
||
- トランジション: background、transform、shadowに約180ms ease
|
||
|
||
**セカンダリ — ダーク上の白いアウトライン**
|
||
- Background: `#ffffff`
|
||
- テキスト: `#0172ce`（PlayStation Blueバリアント）
|
||
- ボーダー: `2px outset #000000` — 現代のCSSでは極めてまれな真の`outset`ボーダー
|
||
- ラジウス: 様々（多くの場合`999px`または`36px`）
|
||
- パディング: `16px 20px`
|
||
- ホバー: 同じシグネチャーシアンフィル + scale(1.2) + リング処理
|
||
- フォーカス: 同じリング処理
|
||
|
||
**コマースオレンジ**
|
||
- Background: `#d53b00` (Commerce Orange)
|
||
- テキスト: `#ffffff`、SST 18px / 700 / 0.45px トラッキング
|
||
- ボーダーラジウス: `999px` — ピル
|
||
- PS Store / 購入 / Subscribe Plus CTAのみに使用
|
||
- アクティブ: backgroundが`#aa2f00`にダーク化
|
||
- ホバー: 他のボタンと同様のシアンインバートルールに従う（オレンジ固有のホバーではない）
|
||
|
||
**トランスペアレントゴースト**
|
||
- Background: transparent
|
||
- テキスト: `#1f1f1f`（Deep Charcoal）
|
||
- ボーダー: `1px solid #dedede`
|
||
- パディング: `0 10px`（タイト、ナビ最適化）
|
||
- ホバー: シアンフィル、白テキスト、2px白ボーダー、scale(1.2)
|
||
- アクティブ: テキストが`#0072ce`にシフト、opacity 0.6
|
||
|
||
**アイコンサークル**
|
||
- Background: 写真上では`rgba(0, 0, 0, 0.2)`、ライトサーフェスでは`#ffffff`
|
||
- ボーダーラジウス: `100%` — 完全な円
|
||
- カルーセルの前後矢印とシェアボタンに使用
|
||
- ホバー: `var(--color-role-backgrounds-primary-link-hover)`（ライト上では大体`#e5e5e5`）に明るくなる
|
||
|
||
**ミニCTA（カード内）**
|
||
- SST 14px / 700 / 0.324px トラッキング
|
||
- パディング ~8px 16px
|
||
- ラジウス: `999px`
|
||
- ゲームカードの「今すぐ購入」/「カートに追加」ミニCTAに使用
|
||
|
||
### カードとコンテナ
|
||
|
||
**ヒーローカード（ゲームフィーチャー）**
|
||
- Background: フォトグラフィー/レンダリング — 通常は黒アンカー
|
||
- ボーダーラジウス: フィーチャーカードの場合`24px`または`19px`
|
||
- パディング: 32〜48pxの内部
|
||
- シャドウ: `rgba(0, 0, 0, 0.8) 0px 5px 9px 0px` — カードがヒーロー写真と重なる場合のみ使用されるドラマチックなドロップシャドウ
|
||
- ホバー: 微妙なスケールトランスフォーム、プライマリCTAにシアンアウトラインが現れる
|
||
|
||
**ゲームカバータイル**
|
||
- Background: パディングなしのゲームカバーアート
|
||
- ボーダーラジウス: `12px`または`13px`（画像）/ `19px`（カードフレーム）
|
||
- シャドウ: `rgba(0, 0, 0, 0.08) 0px 5px 9px 0px` — 羽毛のような軽いエレベーション
|
||
- ホバー: カードのプライマリCTAがシアンに点灯し、カード自体が1.02×スケールする場合がある
|
||
- トランジション: transformに200ms ease
|
||
|
||
**コンテンツパネル（ホワイト）**
|
||
- Background: `#ffffff`またはライトセクショングラジエント`#ffffff → #f5f7fa`
|
||
- ボーダー: 通常なし。スペーシングと微妙なシャドウで隣接要素と分離
|
||
- ラジウス: パネル階層に応じて`12px`〜`24px`
|
||
- シャドウ: `rgba(0, 0, 0, 0.06) 0px 5px 9px 0px` — システム最軽量
|
||
|
||
**ダーク上のダークカード**
|
||
- Background: 写真上では`rgba(0, 0, 0, 0.2)`
|
||
- ボーダーラジウス: `6px`（コンパクト）または`24px`（フィーチャー）
|
||
- ヒーロービデオ上の「プレスキット」または「スタットブロック」インレイに使用
|
||
|
||
### インプットとフォーム
|
||
- **デフォルト**: `#ffffff`背景、`1px solid #cccccc`ボーダー、`3px`ボーダーラジウス（システムの他の部分よりもタイト — インプットはPlayStationが本当にコンパクトになる唯一の場所）、`#1f1f1f`のSST 16pxテキスト、`rgba(0, 0, 0, 0.6)`のプレースホルダー。
|
||
- **フォーカス**: `box-shadow: 0 0 0 2px #0070cc`による2pxの`#0070cc`フォーカスリング。ボーダーカラーの変更なし — リングが役割を担う。
|
||
- **エラー**: ボーダーとテキストが`#c81b3a`（Warning Red）にシフト、同じ赤のインラインエラーテキストが下に表示される。
|
||
- **トランジション**: ボーダーとシャドウに約180ms ease。
|
||
|
||
### ナビゲーション
|
||
|
||
- **トップナビ**: 左揃えのPlayStationロゴ（白）、SST 14〜16px / 500で中央揃えのカテゴリリンク、右揃えの小さな「Sign In」CTAを持つ、黒（`#000000`）のフルブリードストリップ。
|
||
- **ナビリンクのホバー**: カラーが`#ffffff`から`#1883fd`（Link Hover Blue）に遷移し、アンダーラインなし。
|
||
- **アクティブセクション**: `#0070cc`の微妙な2pxアンダーラインでマーク。
|
||
- **モバイル**: ナビゲーションはハンバーガードロワーに折りたたまれる。ドロワー内では、リンクが16pxのギャップと20pxの水平パディングで縦に積み重なる。
|
||
- **スティッキー動作**: ナビはスクロール時に上部に固定される。ライトサーフェスゾーンに入っても**反転しない** — 全体を通して黒背景を維持する。
|
||
|
||
### 画像処理
|
||
|
||
- **アスペクト比**: 16:9のヒーロービデオ/写真、1:1のコンソールレンダリング、3:4のゲームカバーアート、4:3のライフスタイルイメージリー。
|
||
- **コーナー**: カードコンテキストに応じて`12px`、`13px`、または`24px`に角丸。ゲームカバーは`6〜12px`、ヒーロー画像は`24px`。
|
||
- **フルブリード**: マストヘッドヒーローとフッタープロモーショナルバナーのみ。それ以外はすべてパディングされたコンテンツカラム内に収まる。
|
||
- **シャドウ**: ヒーローではドラマチックな`rgba(0, 0, 0, 0.8) 0 5px 9px 0`ドロップ、グリッドタイルでは羽毛のような`rgba(0, 0, 0, 0.06) 0 5px 9px 0`。
|
||
- **ホバー**: 画像は静止したまま、カードフレームとプライマリCTAが反応する。
|
||
- **遅延読み込み**: フォールドより下のすべてに`loading="lazy"`、マストヘッドヒーローは`eager`。
|
||
|
||
### ゲームストアピル（独自の特徴）
|
||
- Background: `#ffffff`
|
||
- テキスト: `#000000`、SST 14px / 500
|
||
- パディング: `14px 18px`
|
||
- ラジウス: `9999px` — フルピル
|
||
- ゲームカバーの隣にプラットフォーム（「PS5」、「PS4」、「PSVR2」）をラベルするために配置される中立的なピルタグ。白地に暗いコントラスト。
|
||
|
||
## 5. レイアウト原則
|
||
|
||
### スペーシングシステム
|
||
- **ベースユニット**: 8px。
|
||
- **スケール**: 1、2、3、4.5、5、8、9、10、12、14、15、16、18、20、21px。
|
||
- **セクションパディング**: 主要パネル間の垂直方向に48〜96px。ヒーローからコンテンツへのトランジションは大きい値を使用。
|
||
- **カードパディング**: 20〜32pxの内部。フィーチャーヒーローカードは48pxまで拡張可能。
|
||
- **インラインスペーシング**: 見出しとデックの間に8〜12px、デックとCTAの間に12〜16px。
|
||
- **マイクロスケール**: 1/2/3/4.5/5/9/10/12の値は、エディトリアルリズムではなく、ピルパディング、キャプションスペーシング、ボーダーオフセットに使用される。
|
||
|
||
### グリッドとコンテナ
|
||
- **最大幅**: ~1920px（dembrandtが2120pxまでのブレークポイントを検出）。コンテナキャップはパネルに応じて通常`1280〜1920px`。
|
||
- **カラムパターン**: 階層に応じて3/4/6カラムのゲームタイル行に解決する12カラムのレスポンシブグリッド。ヒーローゾーンは多くの場合12カラムにスパン、フィーチャードタイルは6+3+3または4+4+4構成に配置される。
|
||
- **アウターパディング**: 16pxモバイル → 48pxタブレット → 64〜96pxデスクトップ。
|
||
- **ガター**: カラム間に16〜24px、タイルクラスター内部では狭め（8〜12px）。
|
||
|
||
### ホワイトスペースの哲学
|
||
PlayStationはホワイトスペースを高級ブランドが店舗照明を扱うように扱う — プレミアムシグナルとして。モジュール間の垂直方向の余白は他のどの主要小売サイトよりも明らかに多く、白いエディトリアルパネルはヒーロースケールのパディングで見出し1つ + 画像1つ + CTA1つだけを保持することが多い。その効果は、各プロダクトがサムネイルのグリッドで競い合うのではなく、独自の「ギャラリールーム」を持つ「ギャラリーペース」だ。
|
||
|
||
### ボーダーラジウススケール
|
||
- **2px** — クッキーバナーボタンと小さな管理UI
|
||
- **3px** — フォームインプット、タブパネル（他のすべてよりもタイト — 意図的な「機能的UI」のキュー）
|
||
- **6px** — コンパクトボタンとインライン画像
|
||
- **12px** — 標準ゲームカバー画像とコンテンツ画像
|
||
- **13px** — 特定のフィギュアラッパー（ネスティングのための12pxからの1pxオフセット）
|
||
- **19px** — フィーチャーカード
|
||
- **20px** — インラインタグスパン
|
||
- **24px** — ヒーローカード、プライマリフィーチャーフレーム
|
||
- **36px** — フルピルナビとセカンダリボタンバリアント
|
||
- **48px** — 大型フィーチャーボタン
|
||
- **999px / 100%** — フルピルプライマリボタンと円形アイコンボタン
|
||
|
||
11の個別のラジウス値 — このカタログのどのサイトよりもリッチなラジウスシステムの1つ。PlayStationは異なる*階層*のために意図的に異なるラジウスを使用するため、この幅が存在する：ユーティリティに3px、メディアに12px、フィーチャーに24px、CTAに999px。
|
||
|
||
## 6. 深度とエレベーション
|
||
|
||
| レベル | 処理 | 使用 |
|
||
|---|---|---|
|
||
| 0 | シャドウなし | `#ffffff`上のデフォルトコンテンツ |
|
||
| 1 | `rgba(0, 0, 0, 0.06) 0 5px 9px 0` | 羽毛のようなエディトリアルパネルのリフト |
|
||
| 2 | `rgba(0, 0, 0, 0.08) 0 5px 9px 0` | 標準グリッドタイルのエレベーション |
|
||
| 3 | `rgba(0, 0, 0, 0.16) 0 5px 9px 0` | 強調カード（ホバーまたはアクティブ） |
|
||
| 4 | `rgba(0, 0, 0, 0.8) 0 5px 9px 0` | ヒーローオーバーレイシャドウ — 写真上で使用されるドラマチックなドロップ |
|
||
| 5 | `0 0 0 2px #0070cc`（フォーカスリング） | プライマリボタンフォーカス状態 |
|
||
| 6 | `0 0 0 2px #000000`（ホバーリング） | セカンダリボタンホバーリング |
|
||
| 7 | セクショングラジエント`#121314 → #000000` | ダークヒーローパネルの大気的な深み |
|
||
|
||
PlayStationの深度の哲学は**レイヤード化されているが抑制されている**。シャドウスケールは通常状態で0.06から0.16まで走り、ヒーロードロップでは0.8に跳び上がる — 0.2、0.3、0.4という中間地はない。その効果として、ページのほとんどがほぼフラットに見えるが、ヒーローカードが写真の上に浮かぶ必要があるとき、本当に*浮かぶ*。エレベーションは囁くか叫ぶかのどちらかで、つぶやくことはない。
|
||
|
||
### デコレーティブな深度
|
||
- **セクショングラジエント**（ダークとライト、どちらも上記で説明済み） — セクション背景としてのみ使用
|
||
- **フォーカス/ホバーリング**は2pxで、状態に応じて常にブルーまたはシアン
|
||
- **2つのセクショングラジエント以外のグロー、ブラー、大気的エフェクトなし**
|
||
- **グラジエントボタンやテキストなし** — ビジュアルシステムはセクショントランジション以外ではすべてのソリッドカラーブロック
|
||
|
||
## 7. すべきこととすべきでないこと
|
||
|
||
### すべきこと
|
||
- **すること：** PlayStation Blue (`#0070cc`) をプライマリCTAフィルとフッターアンカーとして使用すること。これがブランドのアンカーカラーだ。
|
||
- **すること：** 22px以上のすべての表示見出しにSSTウェイト300を使用すること。静かなウェイトの見出しが声だ。
|
||
- **すること：** すべてのプライマリボタンにフルホバーシグネチャーを適用すること：シアンフィル + 2px白ボーダー + 2pxブルーアウターリング + `scale(1.2)`。
|
||
- **すること：** プライマリとコマースボタンにフルピルラジウス（`999px`）を使用すること。
|
||
- **すること：** PlayStation Cyan (`#1eaedb`) をホバー、フォーカス、アクティブ状態専用として予約すること — 静止時背景として使用しないこと。
|
||
- **すること：** Commerce Orange (`#d53b00`) はPlayStation Store / 購入CTAと価格コールアウトにのみ使用すること。
|
||
- **すること：** ダークヒーローパネルと白いコンテンツパネルを交互に配置し、深いブルーのフッターでアンカーすること — 3面チャンネルレイアウトがページリズムだ。
|
||
- **すること：** カードがプロダクト写真と重なる場合はドラマチックな`rgba(0, 0, 0, 0.8)`ヒーロードロップシャドウを使用すること。
|
||
- **すること：** すべてのスクロール位置でトップナビを黒に保つこと — ライトパネル上で白に反転しない。
|
||
|
||
### すべきでないこと
|
||
- **しないこと：** 表示見出しをボールドにすること。22〜54pxでのウェイト300がPlayStationの声だ。ウェイト700の表示タイプは「別のゲーム小売業者」に見える。
|
||
- **しないこと：** オールキャップスのラベルやキッカーを使用すること。PlayStationはほとんど大文字を使用しない — 静かな権威感のブランドであって、危険テープのブランドではない。
|
||
- **しないこと：** 2つの宣言されたセクショングラジエント以外でグラジエントボタン、テキスト、または背景を使用すること。
|
||
- **しないこと：** コマースオレンジ以外のウォームカラーを導入すること。赤いCTA、黄色のハイライト、緑の成功ピルはない。
|
||
- **しないこと：** ボタンやメディアに角丸なしのコーナーを使用すること。システムには11のラジウスがある — 1つを選ぶこと、ただし`0`は絶対に使わないこと。
|
||
- **しないこと：** プライマリボタンの`scale(1.2)`ホバームーブをスキップすること。リフトスケールはブランドインタラクションシグネチャーだ。
|
||
- **しないこと：** セリフ書体を使用すること。システムは100% SSTサンセリフだ。
|
||
- **しないこと：** シアン`#1eaedb`を静止時のテキストや背景色として表示すること。それは動作中にのみ存在する。
|
||
- **しないこと：** 注目を競い合うパネルをデザインすること。PlayStationのホワイトスペースリズムは各モジュールに独自の「ギャラリールーム」を与える。
|
||
|
||
## 8. レスポンシブ動作
|
||
|
||
### ブレークポイント
|
||
|
||
| 名前 | 幅 | 主な変更 |
|
||
|---|---|---|
|
||
| Small Mobile | <400px | シングルカラム、ナビはハンバーガーに折りたたみ、SSTヒーローは~28pxにスケール |
|
||
| Mobile | 400–599px | シングルカラム、タイルはフルワイドにスタック、パディングは16pxに広がる |
|
||
| Large Mobile | 600–767px | 引き続きシングルカラムだが、一部モジュールで2カラムタイルオプション |
|
||
| Tablet Portrait | 768–1023px | 2カラムゲームグリッド、ナビは引き続きコンデンスド |
|
||
| Tablet Landscape | 1024–1279px | 3〜4カラムグリッド、フルナビ復活 |
|
||
| Desktop | 1280–1599px | フルエディトリアルグリッド、最大ヒーロー表示スケール（44〜54px） |
|
||
| Large Desktop | 1600–1919px | コンテナが1600pxでキャップ、マージンが拡張 |
|
||
| 4K / Big-Screen | ≥1920px | コンテナが最大1920pxに拡張、ヒーローコンテンツがTVの視聴距離に合わせてスケールアップ |
|
||
| Ultra-Wide | ≥2120px | 極端なブレークポイント — ページはアンカーされたまま、アウターマージンが余分な幅を吸収 |
|
||
|
||
dembrandtのスイープが320pxから2120pxの間で30のブレークポイントを検出した — 異常に広いレスポンシブ範囲だ。PlayStationはPS5オーナーがコンソールのブラウザやスマートフォンからTVへのキャストを通じてTVでサイトを閲覧することが多いため、**大画面コンテキスト**（1920〜2120px）に特化してチューニングしている。ほとんどの小売サイトは1440pxでチューニングを止めるが、PlayStationは4Kまでチューニングを続ける。
|
||
|
||
### タッチターゲット
|
||
- プライマリピルボタンは~48〜56pxの高さ（SST 18pxテキスト + ~12〜16pxの垂直パディング） — WCAG AAAを快適にクリア。
|
||
- ナビリンクはデスクトップで小さめ（~32〜40px）、モバイルではドロワー内で48px以上にパッドアウト。
|
||
- アイコンサークルボタンは40〜48px — タッチフレンドリー。
|
||
|
||
### 折りたたみ戦略
|
||
- **ナビ**: ビューポートが狭まるにつれ、フルナビ → コンデンスド → ハンバーガードロワー。ロゴは左に固定、CTAは右に固定。
|
||
- **グリッド**: 6カラム → 4カラム → 3カラム → 2カラム → 1カラム。ゲームタイルカードはカバーアートをクリッピングせずにリフローする。
|
||
- **スペーシング**: セクションパディングがビューポートの縮小に応じて96px → 64px → 48px → 32px → 24pxに引き締まる。
|
||
- **タイポグラフィ**: SSTヒーローが54px → 44px → 35px → 28px → 22pxにスケール。ライトウェイト300はすべてのサイズで保持される。
|
||
- **ヒーロー写真**: アートディレクションのスワップ — デスクトップはワイド16:9クロップ、モバイルはプロダクト中心の4:3または1:1クロップ。
|
||
|
||
### 画像動作
|
||
- レスポンシブラスター（アートディレクション付き`srcset` + `<picture>`）、アスペクト比はブレークポイントごとに保持。
|
||
- 4K対応: TVブラウジングでのアップスケールを避けるため、1920px以上では高密度画像を配信。
|
||
- フォールドより下はすべて`loading="lazy"`、ヒーローはプリロードヒント付きで`eager`。
|
||
|
||
## 9. エージェントプロンプトガイド
|
||
|
||
### クイックカラーリファレンス
|
||
- **プライマリCTA**: 「PlayStation Blue (`#0070cc`)」
|
||
- **ホバー / フォーカスアクセント**: 「PlayStation Cyan (`#1eaedb`)」
|
||
- **背景（ホワイトサーフェス）**: 「Paper White (`#ffffff`)」
|
||
- **背景（ダークサーフェス）**: 「Console Black (`#000000`)」
|
||
- **ホワイト上の見出しテキスト**: 「Display Ink (`#000000`)」
|
||
- **ホワイト上のボディテキスト**: 「Deep Charcoal (`#1f1f1f`)」
|
||
- **ブラック上のボディテキスト**: 「Inverse White (`#ffffff`)」
|
||
- **コマース / 購入アクセント**: 「Commerce Orange (`#d53b00`)」
|
||
- **フッターアンカー**: 「PlayStation Blue (`#0070cc`)」
|
||
|
||
### コンポーネントプロンプト例
|
||
1. *「`#0070cc`のPlayStation Blueフィル、SST 18px / 500 / 0.4pxトラッキングの白テキスト、999pxのボーダーラジウス、12px × 24pxのパディングを持つプライマリCTAボタンを作成してください。ホバー時に、背景が`#1eaedb`のPlayStation Cyanに遷移し、2pxの`#ffffff`ボーダーが現れ、2pxの`#0070cc`アウターリングがbox-shadowを通じて広がり、ボタン全体が1.2×にスケールします — すべて180ms easeのトランジションで。」*
|
||
2. *「`#000000`のConsole Blackキャンバス上に、`#ffffff`の54px SSTウェイト300の見出し（-0.1pxのレタースペーシングと1.25のラインハイト）を持つヒーローパネルをデザインしてください。標準のPlayStationホバー処理を持つシングルプライマリCTAを下に配置します。オールキャップスラベルはどこにも使用しません。」*
|
||
3. *「ゲームカバータイルを作成してください：12pxのボーダーラジウスを持つ3:4のアスペクト比画像、羽毛のような`rgba(0, 0, 0, 0.08) 0 5px 9px 0`ドロップシャドウ、下に14px SST 700のタイトル、12px SST 500のプラットフォームタグ、PlayStation BlueのミニCTA（14px / 700 / 0.324pxトラッキング）。」*
|
||
4. *「PlayStation Store購入用のコマースピルボタンを作成してください：`#d53b00`のCommerce Orangeフィル、SST 18px / 700 / 0.45pxトラッキングの`#ffffff`テキスト、999pxのラジウス、12px × 28pxのパディング。アクティブ状態は`#aa2f00`にダーク化。ホバーは1.2×スケールを伴う標準シアンインバートに従います。」*
|
||
5. *「ダークヒーローセクション間の白いコンテンツパネルをデザインしてください：微妙な`#ffffff → #f5f7fa`ライトセクショングラジエントを持つ`#ffffff`背景、24pxのボーダーラジウス、48pxの内部パディング、羽毛のような`rgba(0, 0, 0, 0.06) 0 5px 9px 0`エレベーション、35px SST 300の見出し、18pxのボディ段落、シングルプライマリCTA。」*
|
||
|
||
### イテレーションガイド
|
||
このデザインシステムで生成された既存の画面を改善する場合：
|
||
1. **表示ウェイトを確認すること。** 22px以上のすべての見出しはSSTウェイト300であるべきだ。ヒーロースケールでウェイト500または700を見かけたら、PlayStation の声を失っている。
|
||
2. **ホバー処理を確認すること。** すべてのプライマリボタンはホバー時にシアンフィル + 白ボーダー + ブルーリングの組み合わせで1.2×スケールする必要がある。4つのうち1つでも欠けたらインタラクションシグネチャーが壊れる。
|
||
3. **コーナーを確認すること。** すべてのコンテナとボタンは2、3、6、12、13、19、20、24、36、48、または999px / 100%に収まるべきだ。角丸なしのコーナーは声を壊す。
|
||
4. **カラーの広がりを確認すること。** クロムに表示されるのは、PlayStation Blue（`#0070cc`）、Cyan（`#1eaedb`）、Commerce Orange（`#d53b00`）、および宣言されたグレー/ブラック/ホワイトのみであるべきだ。他の色相が見えたら修正すること。
|
||
5. **サーフェスの交互配置を確認すること。** ページはダークヒーロー → 白コンテンツ → ダークヒーロー → 白コンテンツ → ブルーフッターと交互になるべきだ。同じサーフェスのパネルが隣接している場合はトランジションを挿入すること。
|
||
6. **ケーシングを確認すること。** センテンスケースとタイトルケースのみ。オールキャップスのラベル、ボタン、キッカーはない。大文字が見えたら変換すること。
|
||
7. **シャドウのウェイトを確認すること。** シャドウの不透明度は0.06 / 0.08 / 0.16 / 0.8に収まるべきだ — 中間値はない。0.1、0.2、0.3、0.5のドロップシャドウが見えたら、最も近い宣言済みティアに修正すること。
|
||
8. **ホワイトスペースを確認すること。** 2つのモジュールが「競い合って」いる（注意を争っている）ように感じたら、48〜96pxの垂直方向の余白を追加すること。PlayStationのギャラリーペースリズムは交渉の余地がない。
|