PARCO（パルコ） DESIGN.md

株式会社パルコ コーポレートサイト（https://www.parco.co.jp/）のデザイン仕様書。 1969年創業、渋谷・池袋・名古屋などの都市型商業施設を運営する流通企業。 実サイトの computed style 実測（2026-05-07 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白背景 #ffffff × 濃グレー文字 #2c2c2c のミニマル構成。装飾色を持たず、文字情報そのものをグラフィカルに見せるコーポレート寄りのタイポグラフィ主導デザイン
• 密度: 横並びナビ・カードの内側に細いグレー枠（#dedede）を引き、罫線で領域を区切る伝統的な日本企業サイトの構造。情報密度は中庸
• キーワード: 純白背景、濃グレー文字、letter-spacing 広め、palt 有効、見出しは weight 700 + 字間 +0.1em、角丸ゼロ、罫線で区切る
• 特徴:
  • CSS Custom Properties は未定義。色・余白・フォントはすべて旧来 CSS で直書き
  • font-feature-settings: "palt" を全要素に適用 — 和文プロポーショナル詰めをグローバル ON。詰めの効いたコーポレート体裁
  • letter-spacing は body 全体で 0.28px (≈+0.02em)。見出し（h2）はさらに広く 3px (≈+0.1em)、weight 700 のゆったり字面
  • 2 系統の font-family: 和文混在は「NotoSansCJKjp → ヒラギノ角ゴシック → 游ゴシック」、英数字専用要素（日付・タグ）は Lato, sans-serif を使い分け
  • 角丸ゼロ（border-radius: 0px）。タグ・カード・ボタンすべて直角矩形
  • タグバッジは #707070 灰色面 × 白文字 12px（"営業関連" 等）。鮮やかな色を使わない抑制されたカテゴリ表示
  • カードは白背景 + 1px solid #dedede の薄罫線で区切る。影・グラデーション・色面を使わない
  • body の line-height は 1.8（25.2 / 14）— 日本語可読性を意識した広めの行送り
  • CSS 変数なし、UI トークン未整備の旧世代コーポレート CSS の典型例

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。 PARCO のコーポレートサイトは極端に少ないパレットで構成され、UI 自身は無彩色のみ。

Brand

• Brand Logo Black (#000000): "PARCO" ロゴ・ヘッダーの黒
• Body Charcoal (#2c2c2c): 全テキストの基調色。純黒ではなく濃グレー（rgb(44, 44, 44)）。コーポレート文書の落ち着き

Surface（背景）

• Page Background (#ffffff): ページ全体の純白
• Light Gray Surface (#ededed): 「RSS」「12345」等のページネーター背景（rgb(237, 237, 237)）
• Tag Background (#707070): カテゴリタグ（"営業関連" 等）の灰色面
• Pager Inactive (#aeaeae): ページャーの非アクティブ番号

Text / Foreground

• Text Primary (#2c2c2c): 本文・見出し・ナビ全般
• Text Muted (#646464): 日付・キャプション（Lato で組まれる、rgb(100, 100, 100)）
• Text on Tag (#ffffff): タグ内の白文字
• Text Logo (#000000): ロゴ部分の純黒

Border / Divider

• Card Border (#dedede): カード・リンクボックスを区切る 1px 罫線
• Light Divider (#ededed): 補助的な区切り線
• Tag Border: ボーダーは出さず、面色の差で区別

Accent / Semantic

• 実 UI に表面化したアクセント色は存在しない。エラー・成功・警告色の標準は確認できず、UI は完全に無彩色で完結
• 補完する場合は赤 #cc3333 / 青 #3366cc / 緑 #3a8a4d をミュートで

3. Typography Rules

3.1 和文フォント

PARCO は Web フォントを読み込まない。OS/Noto 標準フォントへフォールバックするコーポレート構成。

• 第1候補: NotoSansCJKjp（インストール済みなら Noto Sans CJK JP を使用）
• 第2候補: ヒラギノ角ゴシック / Hiragino Kaku Gothic（Mac）
• 第3候補: 游ゴシック / YuGothic（Windows / Mac 新）
• 第4候補: メイリオ / Meiryo（Windows 旧）
• 最終フォールバック: sans-serif

3.2 欧文フォント

• コーポレート文章中の英数字: 上記和文チェーン先頭（Noto Sans CJK の欧文グリフ）を使用
• 日付・キャプション専用: Lato, sans-serif — 日付や英文単独要素には Lato を当てて視覚的に区別
• 等幅: 該当なし

3.3 font-family 指定

実サイトの実測値（body / h1 / h2 / a / li / span 共通）:

cssfont-family: NotoSansCJKjp, ヒラギノ角ゴシック, "Hiragino Kaku Gothic",
  游ゴシック, YuGothic, メイリオ, Meiryo, sans-serif;

英数字専用要素（日付 <p class="date"> 等）:

cssfont-family: Lato, sans-serif;

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

• 和文は Noto Sans CJK JP を最優先 — Adobe / Google 共同開発のオープンソース日本語フォント
• ヒラギノ → 游ゴシック → メイリオの伝統チェーン
• 英数字専用要素にだけ Lato を切り出す — 日付の "2026/01/23" 等を欧文書体で組む
• AI で再現する場合、"Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif に簡略化して問題なし

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

実測値（トップページ、2026-05-07 取得）

3.5 行間・字間

• 本文の行間: 1.8（25.2 / 14）— 日本語コーポレート文書では広めの値。可読性とゆったり感を両立
• 見出し（h2）の行間: 1.3（39 / 30）— タイトルは詰めて見せる
• 小文字（12px）の行間: 1.8（21.6 / 12）— 本文と同じ比率を維持
• letter-spacing:
  • 本文・ナビ・タグ: 0.28px（≈+0.02em） — 全要素グローバル適用
  • 見出し h2: 3px（≈+0.1em） — タイトルだけ大幅に開く（典型的な日本企業ロゴ風タイポグラフィ）

ガイドライン:

• PARCO の和文は字間を一律で広めに置くことで、コーポレート文書の落ち着きと読みやすさを担保
• **見出しだけ字間を 5 倍に開く（0.28px → 3px）**ことで、本文との階層差を字間で表現
• weight は本文 400、ナビアクティブと見出しで 700 に切り替え

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;

• ブラウザ既定の禁則処理に依存
• 行末に来る句読点・括弧はブラウザの日本語禁則処理に委任

3.7 OpenType 機能

cssfont-feature-settings: "palt";

• palt（プロポーショナル代替メトリクス）を全要素に適用
• "、""。""（""）" 等の日本語約物が詰めて表示され、コーポレート体裁にふさわしい引き締まった字面
• Lato（欧文）には font-feature-settings: "palt" は無効だが、CSS 上は同じ宣言が継承される

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

PARCO のコーポレートサイトには塗りボタンが少なく、リンク化されたカード・テキストボックスが主役。

Card Link（"ビジネスモデル" "開発計画" 等）

• Background: transparent または #ffffff
• Text: #2c2c2c
• Border: 1px solid #dedede
• Border Radius: 0px
• Padding: 32px 5px
• Font: 14px / weight 400 / letter-spacing 0.28px / palt
• Hover: border #2c2c2c / opacity 0.8（推奨）

Tag Badge（"営業関連" 等のカテゴリ）

• Background: #707070
• Text: #ffffff
• Padding: 2px 8px
• Border Radius: 0px
• Font: 12px / weight 400 / letter-spacing 0.28px / palt

Pager Number Inactive

• Background: #ededed
• Text: #2c2c2c
• Border Radius: 50%（円形 — ページャーだけは例外的に丸い）
• Font: 0px（数字を画像置換 or 視覚的に小さく）

Inputs

検索・フォームは Google CSE 由来で簡素:

• Background: #ffffff
• Border: 既定（細い罫線）
• Border Radius: 0px
• Padding: 24px 10px（メインナビ内）
• Font: 14px / Arial / line-height 1.2

Cards / Item Tiles

• Background: #ffffff
• Border: 1px solid #dedede
• Border Radius: 0px
• Padding: 32px 5px 程度
• Shadow: なし
• 構造: ラベル → タイトル → 補足

Header / Nav

• Background: #ffffff
• Color: #2c2c2c（ナビ）/ #000000（ロゴ）
• Logo "PARCO" 左寄せ、グローバルナビは右寄せ
• ナビ項目: 16px / weight 400 → アクティブは weight 700
• Padding: 各項目 26px 10px 20px

Footer

• Background: #ffffff
• Color: #2c2c2c（メイン）
• フッタ見出しは <p class="mds">：14px / weight 400 / letter-spacing 0.28px

5. Layout Principles

Spacing Scale（推奨 4px グリッド）

Container

• Max Width: 1180–1280px（推奨）
• Padding (horizontal): mobile 16px / desktop 32px

Grid

• カード: 2 カラム（mobile）→ 3 カラム（tablet）→ 4 カラム（desktop）
• Gutter: 16〜24px

Border Radius Scale

• 直角矩形が原則。ページャーだけ例外的に円形

6. Depth & Elevation

• PARCO は影を使わない。立体表現はゼロで、罫線（border）で領域を区切る
• カード・モーダルすべてフラット
• ホバー演出は border-color / opacity の変化のみ

7. Do's and Don'ts

Do（推奨）

• 背景は純白 #ffffff、文字は濃グレー #2c2c2c（純黒 #000 ではない）
• 本文 14px / weight 400 / line-height 1.8 / letter-spacing 0.28px を基準に
• 見出し（h2）は 30px / weight 700 / line-height 1.3 / letter-spacing 3px (+0.1em) — 字間を本文の 10 倍開いて階層を作る
• font-feature-settings: "palt" を全要素に適用 — 和文プロポーショナル詰め
• カードは白背景 + 1px solid #dedede 罫線で区切る
• タグは #707070 灰色面 + 白文字 12px — 鮮やかな色を使わない
• 角丸はすべて 0px（ページャーの 50% を除く）
• 日付・英数字専用要素には Lato, sans-serif を当てる
• 影・グラデーション・カラフルなアクセントを使わない

Don't（禁止）

• 純黒 #000000 を本文に使わない（#2c2c2c の濃グレーを厳守）
• 本文 letter-spacing を 0（normal）に戻さない（+0.02em の字間が PARCO の標準）
• 見出しを letter-spacing normal で組まない（+0.1em が必須）
• ボタンに border-radius を付けない（直角を維持）
• カラフルなブランド色・アクセントカラーを UI に追加しない
• 影・elevation を使わない（フラット原則）
• font-feature-settings を normal に戻さない（palt 適用が PARCO の標準）

8. Responsive Behavior

Breakpoints

モバイル時の調整

• Section h2: 30px → 22px / letter-spacing は維持
• Body: 14px 維持（縮小しない）
• ナビは drawer ハンバーガーへ切り替え
• カードグリッド 4 → 2 → 1 カラム

タッチターゲット

• 最小 44×44px。ボタン・タグは padding 8px 16px 以上を確保

ダークモード

• 対応なし。ライトモード固定

9. Agent Prompt Guide

クイックリファレンス

Background: #ffffff（純白）
Text Primary: #2c2c2c（濃グレー、純黒ではない）
Text Muted: #646464（日付・キャプション）
Tag BG: #707070（灰色面）
Tag Text: #ffffff
Border: #dedede（カード罫線）
Light Surface: #ededed（ページャー背景）
Logo Black: #000000

Font (和文): NotoSansCJKjp, ヒラギノ角ゴシック, "Hiragino Kaku Gothic", 游ゴシック, YuGothic, メイリオ, Meiryo, sans-serif
Font (欧文専用): Lato, sans-serif
Web Fallback (簡略): "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif

Body: 14px / weight 400 / line-height 1.8 / letter-spacing 0.28px (+0.02em)
Heading h2: 30px / weight 700 / line-height 1.3 / letter-spacing 3px (+0.1em)
Nav Active: 16px / weight 700 / line-height 1.8 / letter-spacing 0.28px
Tag Badge: 12px / weight 400 / line-height 1.8 / letter-spacing 0.28px / white on #707070
Date (Lato): 12px / weight 400 / line-height 1.8 / color #646464

Border Radius: 0px（ページャーのみ 50%）
Shadow: none（フラット）
font-feature-settings: "palt"（全要素グローバル適用）

プロンプト例

PARCO のデザインに従って、コーポレートお知らせ一覧ページを作成してください。
- 背景: #ffffff（純白）
- フォント (和文): "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif
- フォント (日付): Lato, sans-serif
- font-feature-settings: "palt" を全要素に適用
- 本文 letter-spacing: 0.28px (+0.02em)
- セクション見出し "お知らせ": 30px / weight 700 / line-height 1.3 / letter-spacing 3px (+0.1em) / color #2c2c2c
- 各お知らせカード: 1px solid #dedede / border-radius 0 / padding 32px 5px / 白背景
- カード内日付: Lato 12px / line-height 1.8 / color #646464 / "2026/01/23" 形式
- カード内カテゴリタグ: 12px / 白文字 / 背景 #707070 / padding 2px 8px / radius 0
- 本文: 14px / weight 400 / line-height 1.8 / color #2c2c2c
- ページャー: 数字円形（border-radius 50%）/ 背景 #ededed / アクティブのみ #ffffff
- 影・グラデーション・カラフルなアクセントは一切使わない
- 角丸はすべて 0px（ページャーのみ 50%）