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 — システムサンセリフでレンダリングされるまれなボタンバリアントのためのユーティリティフォールバック。

階層

原則

• 大きいサイズでのウェイト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. 深度とエレベーション

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. レスポンシブ動作

ブレークポイント

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のギャラリーペースリズムは交渉の余地がない。