PLST (plst.com/jp) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 PLST（プラステ）はファーストリテイリング傘下のファッションブランド。 UNIQLO と同じ FR プラットフォーム（979 の CSS Custom Properties）を共有するが、 よりライトウェイトで洗練された大人向けの意匠に仕上げている。 実サイトの computed style 実測値に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: UNIQLO と共通の FR デザインシステムをベースに、font-weight: 300 を全面的に採用したライトウェイトなタイポグラフィで「上品・軽やか・大人」を表現。商品写真を主役にする EC レイアウト
• 密度: UNIQLO 同様に商品グリッド主体だが、本文テキストの color が #333（UNIQLO は #000）で柔らかく、プロモーショナル赤も #c93141（UNIQLO の #ee0000 より抑制）と全体的にトーンダウンしている
• キーワード: Light Weight, Refined, Soft Contrast, Minimal, Grown-up Fashion
• 特徴:
  • weight 300 の支配: 見出し（h2）も本文（p）も weight 300。太字は h3 以下やモーダル見出し（700）に限定。繊細で空気感のある印象
  • テキスト色 #333: 純黒ではなくダークグレーを採用。UNIQLO の #000 よりソフトなコントラスト
  • プロモーショナル赤 #c93141: SALE 等のプロモ表示に使う赤。UNIQLO の #ee0000 より落ち着いたワインレッド寄り
  • CTA は角型 radius 2px: UNIQLO の radius 0 よりわずかに角を丸めた設計
  • 検索バーは pill 型 radius 999px: UNIQLO と共通
  • letter-spacing / palt は未使用: ベタ組で構成
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

FR デザインシステムの CSS Custom Properties に基づく。UNIQLO と同じトークン名だが、PLST 独自の値を持つものがある。

Primary（ブランドカラー）

• Primary Black (#000): Primary CTA の背景色。「すべて許可する」「Apply」等の主要ボタン（--backgroundPrimaryDefault）
• Primary Hover (#2a2a2a): ホバー時（--backgroundPrimaryHover）
• Primary Pressed (#3e3e3e): プレス時（--backgroundPrimaryPressed）

Accent

• Accent Blue (#005db5): リンク・通知・フォーカスリング（--backgroundAccentDefault）
• Cookie Badge Blue (#3860be): Cookie フィルターバッジの背景

Promotional

• Promotional Red (#c93141): PLST 独自のプロモーショナル赤。SALE・キャンペーン表示（--body-emphasized-color-promotional）。UNIQLO の #ee0000 より彩度を抑えたワインレッド
• Attention Red (#e00): エラー・注意喚起（--backgroundAttentionDefault、--body-standard-color-error）

Seasonal

• Seasonal Green (#468254): シーズナルバッジの背景
• Dark Blue-Gray (#27455c): ナビ・フッター等のダークアクセント

Background & Surface

css--backgroundNeutralDefault:   #fff;     /* ページ背景 */
--backgroundTertiaryDefault:  #f4f4f4;  /* 薄いグレー面（最頻出 surface） */
--backgroundPrimaryDefault:   #000;     /* Primary CTA 背景 */
--backgroundSecondaryDefault: #6a6a6a;  /* Secondary CTA 背景 */
--backgroundInactiveDefault:  #dadada;  /* 無効状態の背景 */
--backgroundPositiveDefault:  #00ab0f;  /* Success 緑 */

Text

css--body-emphasized-color-primary-dark: #333;     /* PLST 本文テキスト（UNIQLO の #000 より柔らかい） */
--body-standard-color-secondary:     #6a6a6a;  /* サブテキスト */
--body-standard-color-disabled:      #ababab;  /* 無効テキスト */
--body-standard-color-placeholder:   #767676;  /* プレースホルダー */
--body-standard-color-error:         #e00;     /* エラーテキスト */
--body-emphasized-color-promotional: #c93141;  /* プロモーショナル赤（PLST 独自） */

Border

css--border-lines-color:              #dadada;  /* 区切り線 */
--border-focus-color:              #005db5;  /* フォーカスリング */
--border-error-color:              #e00;     /* エラーボーダー */

役割サマリ

• CTA: #000（黒・主要ボタン）
• Promo: #c93141（PLST 独自の赤）
• Accent: #005db5（リンク・フォーカス）
• Body Text: #333（ダークグレー）
• Sub Text: #6a6a6a
• Surface: #f4f4f4（薄いグレー）
• Background: #fff

3. Typography Rules

3.1 和文フォント

• ヒラギノ角ゴ Pro が最優先。ProN ではなく Pro を使用（UNIQLO と同じ、JIS78 字形を優先する方針）
• Hiragino Sans: macOS 10.11 以降のフォールバック
• MS PGothic / BIZ UDGothic / BIZ UDPGothic: Windows 向けフォールバック
• 明朝体は使用していない

3.2 欧文フォント

• Helvetica Neue / Helvetica / Arial: 欧文フォールバック。UNIQLO の独自 UniqloPro フォントは PLST では使わない
• Twemoji Country Flags: 国旗絵文字の統一表示用（UNIQLO と共通、フォントスタック先頭）
• system-ui, -apple-system: システムフォントフォールバック

3.3 font-family 指定

css/* PLST 本文 */
font-family:
  "Twemoji Country Flags",
  "Hiragino Kaku Gothic Pro",
  "Hiragino Sans",
  Meiryo,
  "MS PGothic",
  "BIZ UDGothic",
  "BIZ UDPGothic",
  "Helvetica Neue",
  Helvetica,
  Arial,
  -apple-system,
  system-ui,
  sans-serif;

フォールバックの考え方:

• Twemoji Country Flags を先頭に配置（国旗絵文字の統一表示）
• 和文優先: Hiragino Kaku Gothic Pro を Helvetica Neue より前に配置
• Windows 向けに Meiryo → MS PGothic → BIZ UDGothic の 3 段階フォールバック
• UNIQLO が独自 Web フォント（UniqloPro）を使う一方、PLST はシステムフォントのみで構成

3.4 文字サイズ・ウェイト階層

3.5 行間・字間

• 見出しの font-weight が 300（Light）: UNIQLO と共通の設計思想だが、PLST ではより徹底的に 300 を使う。h2 セクション見出し・ヒーローテキスト・サブテキストすべてが 300
• letter-spacing: 全要素で normal（0）。palt も未使用。完全なベタ組
• line-height: 見出し 1.3〜1.4、本文 1.5。UNIQLO と同程度の設定

3.6 禁則処理・改行ルール

css/* 特別な指定なし（デフォルト動作） */
word-break: normal;
overflow-wrap: normal;
line-break: auto;

3.7 OpenType 機能

• font-feature-settings の明示指定なし（normal）
• palt は使用していない（ベタ組）
• kern の明示指定もなし

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（黒）

• Background: #000（hover #2a2a2a / pressed #3e3e3e）
• Color: #fff
• Border Radius: 2px（UNIQLO の 0 より微妙に丸い）
• Font Weight: 700
• Font Size: 14px〜16px
• Padding: 適宜

Secondary（アウトライン）

• Background: transparent
• Color: #000 / Border: #dadada
• Border Radius: 2px
• Hover: bg #f4f4f4

Search Pill

• Background: rgba(255,255,255,0.95)
• Color: #767676（プレースホルダー）
• Border Radius: 999px（完全な pill）

Category Pill

• Background: #fff
• Color: #000
• Border Radius: 999px

Cookie Filter Badge

• Background: #3860be
• Border Radius: 17px

Inputs

• Background: #fff
• Border: 1px solid #dadada
• Border (focus): 1px solid #005db5
• Border (error): 1px solid #e00
• Border Radius: 2px
• Font Size: 14px
• Font Family: 本文と同じスタック

Cards

• Background: #fff
• Border: 1px solid #dadada
• Border Radius: 2px
• Padding: 16px
• Shadow: なし（フラットデザイン基調）
• Hover: 微細なシャドウ追加

5. Layout Principles

Spacing Scale

FR デザインシステム共通のスペーシングスケール:

Container

• Max Width: 1200px（商品グリッド）
• Padding (horizontal): 16px（モバイル）〜32px（デスクトップ）

Grid

• 商品グリッド: 2〜4 カラム（レスポンシブ）
• Gutter: 8px〜16px

6. Depth & Elevation

PLST はフラットデザインが基調で、shadow の使用は最小限。

7. Do's and Don'ts

Do（推奨）

• font-weight: 300 を見出し・本文に積極的に使う。PLST の「軽やかさ」の核心
• テキスト色は #333 を使う。純黒 #000 は CTA ボタン背景のみ
• プロモ赤は #c93141 を使う。#ee0000（UNIQLO）は使わない
• CTA ボタンは radius 2px の角型。pill 型は検索バーとカテゴリボタンのみ
• フォントスタックは Twemoji Country Flags → Hiragino Kaku Gothic Pro の順序を守る

Don't（禁止）

• 見出しに font-weight: 700 を多用しない（h3/h4/モーダル以外は 300）
• テキストに #000 を使わない（ボタン背景・ボーダー以外）
• CTA ボタンに radius 999px（pill）を使わない（検索バー・カテゴリを除く）
• letter-spacing や palt を適用しない（ベタ組を維持）
• UNIQLO の UniqloPro フォントを PLST に適用しない

8. Responsive Behavior

Breakpoints

FR デザインシステム共通:

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）

フォントサイズの調整

• モバイルでは hero テキストを 24px 程度に縮小（デスクトップ 32px の 75%）
• 本文は 14px を維持
• 見出しはデスクトップの 70〜80% に縮小

9. Agent Prompt Guide

クイックリファレンス

Primary CTA:    bg #000, text #fff, radius 2px
Promo Red:      #c93141
Accent Blue:    #005db5
Text Primary:   #333
Text Secondary: #6a6a6a
Background:     #fff
Surface:        #f4f4f4
Font:           "Twemoji Country Flags", "Hiragino Kaku Gothic Pro", "Hiragino Sans", Meiryo, "MS PGothic", "BIZ UDGothic", "BIZ UDPGothic", "Helvetica Neue", Helvetica, Arial, -apple-system, system-ui, sans-serif
Body Size:      14-16px
Body Weight:    300
Line Height:    1.5

プロンプト例

PLST のデザインシステムに従って、商品一覧ページを作成してください。
- 本文テキスト色: #333（純黒は使わない）
- フォント: 上記 font-family を使用
- 見出し・本文の weight は 300（Light）を基本とする
- CTA ボタン: bg #000, text #fff, radius 2px
- SALE 表示: #c93141（UNIQLO の #ee0000 ではなく PLST 独自の赤）
- サーフェス背景: #f4f4f4
- letter-spacing / palt は適用しない

UNIQLO との主な差分