Pen Online（ペンオンライン） DESIGN.md

Pen Online 公式サイト（https://www.pen-online.jp/）のデザイン仕様書。 1998 年創刊、CCCメディアハウス発行のカルチャー・デザイン誌『Pen』のオンライン版。 実サイトの computed style 実測（2026-05-08 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白 #ffffff × 純黒 #000000 の モノクロームエディトリアル。雑誌ブランドの権威性を、Optima Nova LT Pro と FOT-筑紫ゴシック Pr5 D の有償フォント混植で表現
• 密度: 雑誌の柱組のように 多段グリッドで構成。letter-spacing を意図的に広く取ることで雑誌組版の格調を再現
• キーワード: モノクローム、Optima Nova LT Pro（欧文）+ FOT-筑紫ゴシック Pr5 D（和文）の混植、letter-spacing 0.04〜0.17em の幅広い字間設計、palt 全面適用、純白・純黒・グレーのみ、塗りつぶさない line-only ボタン
• 特徴:
  • 欧文は Optima Nova LT Pro 系2種 — Medium（ナビ・本文）と Light（display 大見出し）の使い分け。Optima Nova は人文系サンセリフで、Hermann Zapf 設計の名書体を Akira Kobayashi がリバイバル。雑誌的な格調を担う書体選定
  • 和文は FOT-筑紫ゴシック Pr5 D（フォントワークス） — Pr5 = JIS2004 字形、D = Demi Bold 相当の力強さ。Adobe Fonts のサブスクリプション書体
  • 混植見出し書体 TsuGoProB-SyntaxNextLTProM — 筑紫ゴシック B + Syntax Next M を組み合わせた商用混植エンジン。24px 記事タイトルで letter-spacing 4.032px (0.168em) という非常に広い字送り
  • 全要素 weight 400 — Optima Nova の Medium / Light をフォント側で切り替え、CSS の font-weight は 400 で固定
  • letter-spacing は要素ごとに細かく設計 — 16px本文 0.48px (0.03em) / 24px 大ナビ 0.96px (0.04em) / 24px 記事 4.032px (0.168em)
  • font-feature-settings: "palt" 全面適用 — 約物の自然なスペース調整で日本語組版を整える
  • アクセント色なし — 純白 #ffffff × 純黒 #000000 × 微グレー #f6f6f6 のみで構成。雑誌の モノクロ印刷的ミニマリズム
  • ナビゲーションのモーダル背景は中明度グレー #86878d — メニュー閉じる/開く時に画面を覆う色
  • ボタンは2系統 — (1) 白地黒文字に 1px solid #000 の線ボタン（"Buy Now" の販売 CTA）、(2) 黒地白文字の塗り（"ログイン" の機能 CTA）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Pen Black (#000000): 本文・見出し・メインロゴ・ボタン
• Page White (#ffffff): ページ背景の純白

Surface（背景）

• Page Background (#ffffff): 純白
• Soft Surface (#f6f6f6): 補助面・記事間の境界（rgb(246, 246, 246)）
• Nav Modal Gray (#86878d): ハンバーガーメニュー開閉時のモーダル面（rgb(134, 135, 141)）
• Nav Inner Mid (#9d9d9d): ナビ "Series" 等の中明度面（rgb(157, 157, 157)）
• Nav Inner Dark (#6f6f74): ナビ "Magazine" 等の濃いグレー面（rgb(111, 111, 116)）

Text / Foreground

• Text Primary (#000000): 本文・見出し・リンクのすべて
• Text Inverse (#ffffff): 暗色帯・ナビ展開時の白文字

Border

• Button Border (#000000): ボタン・タグの 1px 線

3. Typography Rules

3.1 和文フォント

Pen Online は FOT-筑紫ゴシック Pr5 D（Fontworks / Adobe Fonts） を主役書体に据える、有償 WebFont 前提の設計。

• 第1候補（和文）: FOT-筑紫ゴシック Pr5 D（Adobe Fonts 配信、有償）
• 最終フォールバック: sans-serif

注意: ヒラギノ・游ゴシック・Noto Sans JP のいずれもフォールバックに置かない。Adobe Fonts が読めない環境では汎用 sans-serif に直行する潔さ。

筑紫ゴシック Pr5 D の特徴

• Pr5 = Adobe-Japan1-5 / JIS2004 字形 に対応
• D = Demi Bold 相当 の重み。一般的な R（Regular）より太い
• 本文用としては やや太い印象で、雑誌の力強い見出しに合う

3.2 欧文フォント

Optima Nova LT Pro 系2種 を使い分ける、雑誌的編集タイポグラフィ：

• OptimaNovaLTPro-Medium — ナビ・タグ・メタ情報・小見出し
• OptimaNovaLTPro-Light — 40px 大見出し "Latest" 等の display 用
• TsuGoProB-SyntaxNextLTProM — 24px 記事タイトル混植専用（筑紫ゴシック B + Syntax Next M）

Optima Nova LT Pro は Hermann Zapf 設計の Optima を、Akira Kobayashi がリバイバルした人文系サンセリフ。雑誌の権威性を象徴する書体。

3.3 font-family 指定

実サイトの実測値（用途別）:

css/* 和文・本文 */
font-family: "FOT-筑紫ゴシック Pr5 D", sans-serif;

/* 欧文・ナビ・タグ */
font-family: OptimaNovaLTPro-Medium, sans-serif;

/* 大見出し display */
font-family: OptimaNovaLTPro-Light, sans-serif;

/* 記事タイトル混植 */
font-family: TsuGoProB-SyntaxNextLTProM, sans-serif;

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

• すべて sans-serif に直行する シングルフォール構成
• ヒラギノ・游ゴシック・Noto を経由しない
• WebFont 前提で、読めなければ OS デフォルト sans-serif で潔く落とす

3.4 font-size

実測のサイズスケール（PC 1440px ビュー）：

3.5 line-height

実測値：

• Body 16px / メインロゴ: 16px / 16px = 1.00（タイトな組み）
• 大見出し Optima 40px: 58px / 40px = 1.45
• 記事タイトル h2 24px: 36px / 24px = 1.50
• 記事メタ h2 14px: 22.4px / 14px = 1.60
• ナビ大 24px: 24px / 24px = 1.00
• ボタン a 16px: 23px / 16px = 1.44

特徴: 本文クラスタ（14〜16px）で line-height 1.4〜1.6。雑誌の柱組と同等。

3.6 letter-spacing

Pen Online の最大の特徴は letter-spacing の幅広い設計：

0.168em の超広字間 が Pen の象徴的な雑誌タイポグラフィ。一般的な日本語サイトでは 0.04〜0.1em だが、Pen は記事タイトルだけ 0.168em まで広げる。

3.7 font-feature-settings

cssfont-feature-settings: "palt";

• palt は body / h2 / a / li / button ほぼ全要素に適用
• 約物（句読点・括弧）の自然なスペース調整
• 例外: 「ログイン」黒地ボタンは normal

3.8 ウェイト戦略

Pen Online は CSS の font-weight 400 で固定し、フォント側で重みを切り替える。

雑誌的アプローチ: フォントファミリー名で重みを表現する Adobe Fonts/Fontworks 流の運用。

4. Component Stylings

4.1 ボタン（販売 / 線ボタン）

cssfont-family: OptimaNovaLTPro-Medium, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 23px;
letter-spacing: 0.48px;
color: #000000;
background-color: #ffffff;
border: 1px solid #000000;
border-radius: 0;
padding: 2px 10px 1px;
font-feature-settings: "palt";

• 白地黒文字 + 1px 黒線 のミニマル販売 CTA
• "Buy Now" 等の購入導線
• 角丸ゼロ
• padding が極小（縦 2px / 横 10px）— 雑誌のタグのように見える

4.2 ボタン（機能 / 黒塗り）

cssfont-family: "FOT-筑紫ゴシック Pr5 D", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 16px;
letter-spacing: normal;
color: #ffffff;
background-color: #000000;
border: 1px solid #000000;
border-radius: 0;
font-feature-settings: normal;

• 黒地白文字 の機能 CTA
• "ログイン" 等のアカウント機能
• letter-spacing は normal（広げない）
• font-feature-settings も normal

4.3 ボタン（登録 / 線ボタン和文）

cssfont-family: "FOT-筑紫ゴシック Pr5 D", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 16px;
letter-spacing: 0.448px;
color: #000000;
background-color: transparent;
border: 1px solid #000000;
border-radius: 0;
font-feature-settings: "palt";

• 透明地に 1px 黒線 の和文ボタン
• "新規会員登録" 等のサインアップ導線

4.4 ナビゲーション

css/* 大ナビカテゴリ "Art&Design" */
font-family: OptimaNovaLTPro-Light, sans-serif;
font-size: 24px;
line-height: 24px;
letter-spacing: 0.96px;
color: #ffffff;  /* 暗色面の上 */

/* サブナビ "Pen Meet" */
font-family: OptimaNovaLTPro-Medium, sans-serif;
font-size: 16px;
letter-spacing: 0.48px;
color: #ffffff;

• ハンバーガーメニュー展開時に Nav Modal Gray #86878d 面の上に白文字
• カテゴリは Optima Light、サブナビは Optima Medium で重みを変える

4.5 記事カード

• 写真 + タイトル + メタ情報の縦配置
• 背景: #ffffff または #f6f6f6
• 罫線: なし
• 影: なし（box-shadow: none）
• 角丸: 0px
• タイトルは 24px / 筑紫ゴシック+Syntax 混植 / letter-spacing 4.032px (0.168em)

4.6 タグ・バッジ

cssfont-family: OptimaNovaLTPro-Medium, sans-serif;
font-size: 11〜12px;
color: #000000;
background-color: transparent;
border: 1px solid #000000;
padding: 2px 8px;
border-radius: 0;

• カテゴリタグは 白地に黒線
• "Buy Now" ボタンと同じスタイル

5. Layout Principles

• コンテナ最大幅: 1280〜1440px
• グリッド: 記事は 3 列〜2 列（PC）
• セクション間余白: 60〜80px
• 見出しは左揃えが基本（雑誌の柱組）
• 記事タイトルは 24px / 筑紫+Syntax 混植で組み、和文・欧文混在の文字列でも一貫した表情を保つ

6. Depth & Elevation

• 影は使わない（box-shadow: none）
• 階層は 面色 #ffffff → #f6f6f6 → #86878d → #000 の段階で表現
• ホバー状態は色の反転（白地→黒塗り、黒線→太線）
• 角丸は使わない（border-radius: 0）

7. Do's and Don'ts

✅ Do

• 欧文は Optima Nova LT Pro / 和文は FOT-筑紫ゴシック Pr5 D の有償フォント混植
• 記事タイトルには TsuGoProB-SyntaxNextLTProM の混植エンジンを使う
• letter-spacing は 要素ごとに細かく設計（0.03〜0.168em）
• 記事タイトル 24px だけ letter-spacing 4.032px (0.168em) で雑誌的字送り
• 全要素の CSS font-weight は 400 で固定（重みはフォント側で表現）
• palt を全面適用して約物のスペースを整える
• ボタンは 白地に 1px 黒線（販売）か 黒地に白文字（機能）の二択
• 角丸ゼロを徹底する

❌ Don't

• ヒラギノ・游ゴシック・Noto Sans JP をフォールバックに置かない（sans-serif 直行）
• font-weight を 600 や 700 にしない（フォント側で重みを表現）
• 記事タイトルの letter-spacing を normal にしない（0.168em が雑誌の格調）
• アクセントカラー（赤・青等）を使わない（モノクロームを保つ）
• 角丸を入れない（border-radius: 0）
• ボタンを大きな padding で組まない（雑誌タグのように小さく）

8. Responsive Behavior

• PC 1440px をベース幅とする
• タブレット（〜1024px）: 3 列 → 2 列、ナビをハンバーガー化
• モバイル（〜768px）: 1 列、本文を 14px に微縮小
• letter-spacing は em 換算なので全ブレークポイントで維持
• 記事タイトル 24px / 4.032px は維持（モバイルでも雑誌感を保つ）

9. Agent Prompt Guide

AI エージェントに Pen Online 風 UI を生成させる際のプロンプト。

Generate a Japanese editorial / culture magazine UI in the Pen Online visual style.

Visual:
- Pure white background (#ffffff) with pure black text (#000000)
- Monochrome only — NO accent colors
- Soft surface #f6f6f6 for subtle separation
- Nav modal background gray #86878d (hamburger expand state)
- Editorial magazine layout — column-based, multi-tier grids
- No shadows, no rounded corners, no fills (except black-on-white CTAs)

Typography:
- 和文: "FOT-筑紫ゴシック Pr5 D", sans-serif (Adobe Fonts subscription, no Hiragino/Yu Gothic fallback)
- 欧文 nav/body: OptimaNovaLTPro-Medium, sans-serif
- 欧文 display: OptimaNovaLTPro-Light, sans-serif (40px hero "Latest" etc)
- 記事タイトル: TsuGoProB-SyntaxNextLTProM, sans-serif (筑紫 Gothic + Syntax Next mix engine)
- ALL CSS font-weight: 400 (weight expressed by font name: Medium/Light/Demi)
- Apply font-feature-settings: "palt" globally

letter-spacing scale (the SIGNATURE of Pen):
- Body 16px: normal (0)
- Nav small 16px: 0.48px (0.03em)
- Nav main 24px Light: 0.96px (0.04em)
- Display 40px Optima Light: 1.6px (0.04em)
- Article meta 14px: 1.568px (0.112em)
- ARTICLE TITLE 24px: 4.032px (0.168em) — extreme wide spacing, the magazine signature
- Pen registration link 16px: 0.448px (0.028em)

Components:
- Buy Now button: white bg, 1px solid #000, color #000, padding 2px 10px 1px (small magazine tag)
- Login button: black bg #000, white text, font-feature normal, no letter-spacing
- 新規会員登録: transparent bg, 1px solid #000, color #000, palt on
- Article cards: photo + 24px wide-spacing title + 14px meta, no shadow, no border, no radius
- Nav modal: bg #86878d, white text, OptimaNova for English, 筑紫 for Japanese

Color Strategy:
- Brand: pure black + pure white only
- Surfaces: #ffffff / #f6f6f6 / #86878d (modal) / #000
- NEVER use accent colors — monochrome editorial discipline

Avoid:
- Color accents (red/blue/orange) — Pen is strictly monochrome
- font-weight: 600/700 (use 400 always; weight comes from font name)
- Hiragino, Yu Gothic, Noto fallback (single-fall to generic sans-serif)
- Removing the 0.168em title letter-spacing (it's the magazine voice)
- Rounded corners (radius 0 everywhere)
- Box shadows / elevation effects
- Big buttons (Pen buttons are small, magazine-tag sized)