プラチナ万年筆（PLATINUM PEN） DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-09-29 / 対象: https://www.platinum-pen.co.jp/, /brands/izumo/

1. Visual Theme & Atmosphere

• デザイン方針: 黒の面に蒔絵の写真を置き、文字は小さく空けて添える。 画面の主役は常に製品写真で、テキストは 10〜13px に抑えて字間だけ空ける。角丸も影も使わない
• 密度: 低い。1画面に1つの主題。商品一覧ですら 10px のラベルを並べる
• キーワード: Adobe Fonts 3書体、palt 全面適用、Medium 基調、黒2種、角丸ゼロ

このサイトの核心は3つある。

1. font-feature-settings: "palt" を body に1回だけ書いて全体に継承させている（CSS 全文で 1 件、実測 560〜564 要素に効いている）。要素ごとに書かない。 1行で全ページの約物が詰まる
2. 書体は Adobe Fonts（Typekit）から3本。 欧文 myriad-pro、和文 kozuka-gothic-pr6n（小塚ゴシック Pr6N）、ラベル用に urw-din。body のスタックは欧文が先頭の和欧二層で、英数字だけ Myriad Pro、かなと漢字は小塚ゴシックに落ちる
3. font-weight: 700 が 1 要素も無い。 実測は 500 が 161 要素で最多、次いで 400（28）・600（9）。CSS 全文でも font-weight: 500 が 83 回で圧倒的。太字を書かない設計で、強調はサイズと字間でつける

ルートの font-size は 10px、body は 15px。rem は 1rem = 10px で換算する。

2. Color Palette & Roles

Primary（ブランドカラー）

彩度を持つブランドカラーが無い。 黒・白・グレーだけで組み、色は製品写真が担う。

黒が2つある（#040000 と #131312）のは実装の実態。 どちらも「ほぼ黒」だが値が違う。テキストには #040000、ナビ・カテゴリラベルには #131312 と使い分けられている。#000000 に丸めないこと（面の黒とテキストの黒を区別している設計が消える）。

Neutral（ニュートラル）

• Text on Dark (#ffffff): 黒面の上のテキスト。可視 53 / 42 要素
• Gray（ページャ・補助面） (#666666): カルーセルのインジケータ（可視 26 要素）
• Gray Light (#9e9e9e): インジケータの非選択（可視 4 要素）
• Surface (#f7f7f7): セクションの面（可視 2 要素。CSS 全文で 4 回）
• Overlay: rgba(0, 0, 0, 0.4) / rgba(255, 255, 255, 0.75)（各 2 要素）。写真の上に文字を置くときの調整
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 body）

pageBackground.resolved は #ffffff だが、トップの viewport 最上部を面積で見ると #000000 が 1,134,720 px² を占める（heroCovered は false）。ヒーローが黒、その下のコンテンツが白、という2層構造。「このサイトは黒地」とも「白地」とも書かないこと。

リンクの例外

• #359bf5（可視 1 要素）は Cookie バナー内の「プライバシーポリシー」リンク。サイトのリンク色ではないので採用しない

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: 小塚ゴシック Pr6N（kozuka-gothic-pr6n）。Adobe Fonts 配信。可視 156 要素（下層）で最多
• 明朝体: 使用しない（CSS に "游明朝", "YuMincho Medium", "Hiragino Mincho ProN", …, serif の宣言が1回あるが、実測で 0 要素）

3.2 欧文フォント

• サンセリフ（本文の英数字）: Myriad Pro（myriad-pro）。Adobe Fonts 配信。body のスタック先頭
• ラベル・見出しの英字: URW DIN（urw-din）。可視 27 / 12 要素（SEARCH LANGUAGE GIFT VIEW MORE）。CSS 全文で font-family: urw-din, sans-serif が 31 回

dnp-shuei-4go-std（DNP 秀英4号）の宣言が CSS に 1 回あるが、実測で 0 要素。 読み込まれていない書体なので、「秀英4号を使っているサイト」と書かないこと。

3.3 font-family 指定

body の実装をそのまま（!important も実サイトのまま）:

cssbody {
  margin: 0;
  font-family: "myriad-pro", "kozuka-gothic-pr6n", "YuGothic",
               "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ",
               sans-serif !important;
  font-feature-settings: "palt";        /* ← ここ1行で全体が詰まる */
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

• 欧文（Myriad Pro）が先頭、和文（小塚ゴシック Pr6N）が2番目の和欧二層。英数字は Myriad Pro の字形で出て、かな・漢字は小塚ゴシックに落ちる
• Adobe Fonts が落ちたときの受け皿が YuGothic → Hiragino Kaku Gothic ProN → Meiryo と、Windows と macOS の両方を押さえている
• !important は WordPress テーマの上書き対策。 新規実装では不要

セクションごとの指定:

css/* 和文の見出し・本文（CSS 全文で 50 回） */
font-family: "kozuka-gothic-pr6n", sans-serif;

/* 英字ラベル・VIEW MORE（CSS 全文で 31 回） */
font-family: urw-din, sans-serif;

Adobe Fonts（Typekit）の kit は ezj0xos、https://p.typekit.net/p.css?s=1&k=ezj0xos&ht=tk&f=26879.26880 で2書体を配信している。

Adobe Fonts はドメインライセンスなので、別ドメインでは表示されない。 ローカル検証や別サイトで近似させるなら:

• kozuka-gothic-pr6n → Noto Sans JP（小塚より少し太いが骨格が近い）
• myriad-pro → Source Sans 3（Adobe 自身の後継。字形がほぼ同系）
• urw-din → Archivo / Oswald（DIN 系の縦長サンセリフ）

@font-face は document.fonts に載らない。 実測の fontFaces に出るのは Script / nautica の3件だけで、全部 unloaded。Typekit が動的に CSS を注入するため、document.fonts の一覧では Adobe Fonts の実体を確認できない。「@font-face が空＝Web フォントを使っていない」と読み違えないこと。

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

最も多いサイズが 10px と 12px。 下層ページは 10px が 107 要素 / 12px が 93 要素。このサイトは文字を小さく組む。 本文既定の 15px はほとんど使われていない。

3.5 行間・字間

字間は em を各要素に当てる。 CSS 全文での宣言は 0.06em が 45 回で最多、次いで 0.1em（10回）、0.12em（9回）、0.02em（5回）、0.04em（3回）。px 直書きは 1.8px（2回）と 5px（1回）の例外だけ。

• normal は 29〜53 要素。空けないのは、グローバルナビの一部とページャの数字だけ
• 行間は normal が最多（トップ 61 要素）。折り返す本文には 1.30 が当たる（下層 125 要素）
• 惹句だけ 1.50、ブランドの説明文は 2.00（下層 1 要素：「日本の神々が年に一度集まり、太古より祀られる場所」）

css/* 商品名・一覧ラベル */
letter-spacing: .1em;
line-height: 1.3;

/* ナビゲーション */
letter-spacing: .12em;

/* 英字ラベル（URW DIN） */
letter-spacing: .06em;

/* ブランドの惹句 */
font-size: 25px;
font-weight: 500;
line-height: 1.5;
letter-spacing: .05em;

3.6 禁則処理・改行ルール

• word-break / line-break / overflow-wrap の宣言は無い（ブラウザ既定）
• 商品名は 『八雲白檀』 のように二重鉤括弧を含む。palt が全体に効いているので、鉤括弧の前後は自動的に詰まる

3.7 OpenType 機能

css/* body に1回だけ。子要素では書かない */
body {
  font-feature-settings: "palt";
}

• CSS 全文で font-feature-settings の宣言は 1 件のみ。それが 実測 560〜564 要素に継承されている
• 値は "palt"（1 を付けない書き方）。実サイトのまま
• 要素ごとに書き足さない。 継承で足りる

3.8 縦書き

使用しない（実測 writing-mode: vertical-rl の要素 0 件）。

ブランドページのヒーローに縦組みの「出雲」が見えるが、これは画像に焼き込まれた文字（蒔絵の写真に重ねたロゴ）。CSS で縦組みを実装しない。

3.9 ウェイトの落とし穴

• font-weight: 700 が実測 0 要素。 CSS 全文でも font-weight: 500 が 83 回に対し 700 は 3 回、bold が 13 回
• 小塚ゴシック Pr6N は EL / L / R / M / B / H の6ウェイトを持つが、Typekit の kit が配信しているのは fvd=n4（Regular）と fvd=n7（Bold）の2本
• つまり CSS が当てている 500 / 600 は、配信されている 400 と 700 の間で最近傍に寄る。意図した「Medium」「DemiBold」の太さでは出ない可能性がある

新規実装での扱い: 400 と 500 の2段で組む。 700 は使わない（このサイトの静けさが壊れる）。強調はサイズ（10px ↔ 25px）と字間（.04em ↔ .12em）でつける。

4. Component Stylings

Buttons

Primary（黒の面）

• Background: #000000
• Text: #ffffff
• Border Radius: 0px
• Padding: 0px 10px
• Font Size: 12px / Weight: 400 / Letter Spacing: 1.2px（= .1em）

Outlined（VIEW MORE）

• Background: transparent
• Text: #ffffff
• Border: 2px solid #ffffff（1px ではない）
• Border Radius: 0px
• Font: URW DIN 11.232px / 500 / letter-spacing: .12em

List（新着情報一覧）

• Background: #000000 / Border: 2px solid #000000
• Border Radius: 0px
• Font Size: 10px / Weight: 500 / Letter Spacing: 1.2px

Carousel Indicator

• Background: #666666（非選択）/ #ffffff（選択）/ #9e9e9e
• Border Radius: 50%（実測 16 要素）
• このサイトで角丸が付く唯一の要素

Cards

• Background: #ffffff / #f7f7f7
• Border Radius: 0px（例外として 9px が 3 要素、66px が 2 要素）
• Shadow: なし
• 商品名は 13px / 500 / line-height: 1.3 / letter-spacing: .1em

Inputs

• CSS Custom Properties がフォーム用にだけ 6 個ある（下記）。色やタイポグラフィのトークンは存在しない

css:root {
  --input-rect-height: 40px;
  --cb-radio-size: 20px;
  --form-row-gap: 50px;
  --dt-label-color: #999;          /* = #999999。実サイトは 3 桁で書いている */
  --dt-label-text: "任意";
  --inner-text-color: #999999;     /* 同じ色を 6 桁でも書いている */
}

同じ #999999 が 3 桁（--dt-label-color）と 6 桁（--inner-text-color）で二重に宣言されている。 値は同一なので、新規実装ではどちらかに寄せてよい。

--dt-label-text: "任意" は CSS 変数に日本語の文言を入れている例（::after { content: var(--dt-label-text) } で使う）。この6個を「デザイントークン」と読み違えないこと。 問い合わせフォームのためだけの変数で、サイト全体の設計は hex 直書き。

5. Layout Principles

Container

• Max Width: 1014px（実測 5〜6 要素で最多）。半端な値だが、これがこのサイトの本文幅
• 補助的に 1200px（2 要素）/ 1260px（1 要素）/ 100%（フルブリード）

Grid

• gap はほぼ使わない（実測 0px が 3 回、80px / 20px が各 1 回）
• ヒーロー・ブランドページは全幅（100%）の写真セクションを縦に積む

Spacing

• トークン化された余白スケールは無い
• フォームの行間隔だけ --form-row-gap: 50px で変数化されている

6. Depth & Elevation

影を一切使わない。 実測で box-shadow を持つ要素は 両ページとも 0 種 / 0 要素。

面の区別は黒（#000000）と白（#ffffff）と #f7f7f7 の差だけでつける。 影を足すと、写真主体の静けさが壊れる。

7. Do's and Don'ts

Do（推奨）

• font-feature-settings: "palt" を body に1回だけ書く。 子要素で繰り返さない
• body のスタックは欧文先頭（"myriad-pro", "kozuka-gothic-pr6n", …）。英数字を Myriad Pro の字形で出す意図
• フォールバックに YuGothic と Hiragino Kaku Gothic ProN の両方を入れる（Adobe Fonts が落ちたときの受け皿）
• 英字ラベルは urw-din で letter-spacing: .06em 〜 .12em
• 文字は小さく組む（一覧ラベル 10px / 商品名 13px / ナビ 12px）
• 字間は em（.06em を基準に、.02em 〜 .12em）
• テキストの黒は #040000、ナビの黒は #131312
• 角丸は 0px（カルーセルのインジケータだけ 50%）

Don't（禁止）

• font-weight: 700 を使わない（実測 0 要素。このサイトは太字を書かない）
• #000000 をテキスト色に使わない（#040000 / #131312 の2種を区別している）
• 影を足さない（実測 0 種）
• --input-rect-height 等の6個を色・タイポのトークンとして拡張しない（フォーム専用）
• document.fonts が空なのを「Web フォント未使用」と解釈しない（Adobe Fonts は載らない）
• dnp-shuei-4go-std を使わない（宣言はあるが実測 0 要素）
• 縦組みを CSS で実装しない（ヒーローの縦書きは画像）

8. Responsive Behavior

Breakpoints

境界は 768px の1本だけ。 CSS 全文での出現回数が桁違いに多い。

• 2分岐だけで組む。 タブレット専用のレイアウトを持たない
• prefers-reduced-motion に対応している（カルーセルのアニメーションを止める）

実サイトに screen and (min-width: 768px) and (max-width: 767px) という、絶対にマッチしない条件が 2 件ある。 下限が上限を上回っているため、この中の宣言はどの画面幅でも適用されない。複製したコードの書き換え漏れとみられる。真似しないこと。

タッチターゲット

• ナビゲーションは 12px / line-height: normal と小さい。モバイルでは padding で 44px を確保する

9. Agent Prompt Guide

クイックリファレンス

Text Color:    #040000（本文）/ #131312（ナビ・ラベル）
Background:    #ffffff（コンテンツ）/ #000000（ヒーロー・ヘッダー）
Surface:       #f7f7f7
Font (body):   "myriad-pro", "kozuka-gothic-pr6n", "YuGothic",
               "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", sans-serif
Font (和文):   "kozuka-gothic-pr6n", sans-serif
Font (英字):   urw-din, sans-serif
Root Size:     10px  (1rem = 10px)
Body Size:     15px（ただし実装の主役は 10px / 12px / 13px）
Line Height:   1.3（本文）/ 1.5（惹句）/ 2.0（ブランド説明）
Letter Spacing: .06em を基準（.02em 〜 .12em）
Weights:       400 / 500 / 600  ← 700 は使わない
Container:     1014px
Radius:        0（カルーセルのドットのみ 50%）
Shadow:        なし
palt:          body に1回だけ

プロンプト例

プラチナ万年筆のデザインシステムに従って、商品一覧セクションを作成してください。

- body に font-feature-settings: "palt" を1回だけ書き、子要素では繰り返さない
- font-family は "myriad-pro", "kozuka-gothic-pr6n", "YuGothic",
  "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", sans-serif（欧文が先頭）
  ※ Adobe Fonts が使えない環境では kozuka-gothic-pr6n → Noto Sans JP、
    myriad-pro → Source Sans 3、urw-din → Archivo で近似する
- セクション見出しは英字を urw-din 18px / 500 / letter-spacing: .06em、
  その下に和文を 10px / 500 / letter-spacing: .1em で小さく添える
- 商品名は 13px / font-weight: 500 / line-height: 1.3 / letter-spacing: .1em
- カテゴリラベルは 10px / 500 / letter-spacing: .04em
- テキストの色は #040000、ナビ・ラベルは #131312（#000000 は面にだけ使う）
- VIEW MORE ボタンは透明地に 2px solid #ffffff、border-radius: 0、
  urw-din 11px / 500 / letter-spacing: .12em
- font-weight: 700 は使わない。角丸と影も使わない
- コンテナは max-width: 1014px、ブレークポイントは 768px の1本