TOPPAN（TOPPANホールディングス） DESIGN.md

TOPPAN（https://www.holdings.toppan.com/ja/）のデザイン仕様書。 1900年創業の総合印刷会社。印刷テクノロジーを核に、情報コミュニケーション・生活産業・エレクトロニクス事業を展開。 実サイトの computed style 実測（2026-05-25 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 1900年創業の印刷会社としての精密さ・権威性を、完全直角（radius 0px）のボタンと**自社開発書体「凸版文久ゴシック」**で体現。クリーンで無駄のない、工業的な美しさ
• 密度: 本文は 13–14px と小さめ。見出しは英文 Roboto Bold で大胆に（64px）、和文は控えめ（18–25px）。英語と日本語のコントラストで情報階層を作る
• キーワード: 印刷精密、直角ボタン、ブルー権威、自社書体、バイリンガル・タイポグラフィ
• 特徴:
  • 自社開発書体「凸版文久ゴシック（Toppan Bunkyu Gothic）」 を全面採用。Pr6N R（Regular）と Pr6N DB（Demi Bold）の2ウェイト。Adobe Fonts（TypeKit）経由で配信。印刷会社が自社の書体を Web に使うこと自体がブランドステートメント
  • 英語見出しは Roboto Bold。和文カスタム書体＋欧文 Roboto のバイリンガル・タイポグラフィ体系
  • 全ボタンが radius 0px（完全直角）。pill や角丸を一切使わない。活版印刷の版面のような、紙の上のシャープさをデジタルに持ち込む設計思想
  • ブランドカラーは #0068b5（TOPPAN ブルー）。コーポレートサイト全体の基調色。ダークネイビー #193264 をセクション背景に使い、奥行きを出す
  • 「TOPPA!!! TOPPAN」のブランドメッセージ — 限界を突破する（突破＝TOPPA）意志を社名に重ねた力強いコピー
  • ページ背景は白 #ffffff。ダークネイビーセクションとの二極構成
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand

• TOPPAN Blue (#0068b5): メインのブランドカラー。CTA ボタン背景、見出しアクセント、リンク色（12要素で使用）
• Dark Navy (#193264): ダークセクション背景。フッター・特集エリアなどの重厚な面に使用
• Deeper Blue (#00469b): ホバー・アクティブ時のブルー。TOPPAN Blue のダーク派生

Surface

• Light Blue Surface (#dfeaff): ブルー系の薄い面。ハイライト・バッジ背景
• Light Gray (#f1f1f1): ボタン面・セクション背景のニュートラルグレー
• Near-light Gray (#f0f0f0 / #f4f4f4): カード面・セパレータ背景

Neutral

Overlay

• Dark Overlay: rgba(0, 0, 0, 0.8) — モーダル・メニューオーバーレイ

Semantic（実測未確認・推奨値）

• Danger: #cc0000
• Success: #008844
• Warning: #cc6600

3. Typography Rules

3.1 和文フォント

• ゴシック体: 凸版文久ゴシック Pr6N（Toppan Bunkyu Gothic Pr6N） — TOPPAN が開発した自社書体。Regular（R）と Demi Bold（DB）の2ウェイト。Adobe Fonts（TypeKit）経由で Web 配信
• フォールバック: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• サンセリフ: Roboto — 英語見出し専用。Bold（700）を多用
• 和文の凸版文久ゴシック内の欧文グリフは本文で使用
• フォールバック: Arial, Helvetica, sans-serif

3.3 font-family 指定

css/* 和文（本文・和文見出し） */
font-family: "凸版文久ゴシック Pr6N R", "凸版文久ゴシック Pr6N DB",
  "Hiragino Sans", "Hiragino Kaku Gothic ProN",
  "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

/* 英語見出し */
font-family: Roboto, Arial, Helvetica, sans-serif;

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

• 凸版文久ゴシックは Adobe Fonts ライセンスのため、未契約環境では Hiragino Sans へフォールバック
• 英語見出しは Roboto を最優先。和文と異なるフォントを意図的に使い分けるバイリンガル設計
• 和文フォールバックに欧文専用書体を挟まない

代替フォント注記: 凸版文久ゴシック Pr6N は Adobe Fonts のドメインライセンスのため、デザインのプレビューや社外資料で再現できない場合がある。代替として Noto Sans JP（weight 400 / 700）を使用すると、幾何学的なゴシック体として近い印象を得られる（preview.html はこの代替を使用）。

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

実測値（トップ／会社概要ページ、2026-05-25 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 英語見出し (40–64px): 1.0（タイトに詰めて力強さを出す）
• 和文見出し (25px): 1.86（46.4px / 25px — 和文は広め）
• 和文小見出し (18–24px): 1.4（33.6px / 24px）
• 本文 (14px): 1.5（21px / 14px）
• ナビ (13–14px): 1.0（一行高さ）

字間 (letter-spacing) — 実測:

• 英語見出し (64px): 1px（0.016em — 微量の正トラッキング）
• 英語見出し (40px): 1.2px（0.03em）
• 和文小見出し: 0.5px（0.02–0.03em）
• 本文: normal（明示的な letter-spacing 指定なし）

ガイドライン:

• 英語見出しは line-height 1.0 + 微量の正トラッキング で活版印刷のような密度感
• 和文見出しは line-height 1.4–1.86 で日本語の可読性を確保
• 本文の letter-spacing は normal（凸版文久ゴシックのメトリクスに委ねる）

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

• 和文見出しは <br> で改行位置を手動指定するケースがある

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• 凸版文久ゴシックのデフォルトメトリクスに任せる方針

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

全ボタン共通: border-radius: 0px（完全直角）。TOPPAN の全ボタンは角丸なし。これは印刷版面のシャープさをデジタルに引き継ぐ意図的なデザイン

Primary CTA（ブルー直角） — "詳しく見る"

• Background: #0068b5
• Text: #ffffff
• Padding: 12px 32px
• Border Radius: 0px
• Font: 凸版文久ゴシック Pr6N, 14px, weight 400 (DB)
• Border: none

Secondary CTA（白直角） — ダークセクション上

• Background: #ffffff
• Text: #323232
• Padding: 12px 32px
• Border Radius: 0px
• Font: 凸版文久ゴシック Pr6N, 14px, weight 400 (DB)
• Border: none

Tertiary（グレー面直角） — 補助アクション

• Background: #f1f1f1
• Text: #323232
• Padding: 12px 32px
• Border Radius: 0px
• Font: 凸版文久ゴシック Pr6N, 14px, weight 400 (DB)
• Border: none

Ghost Button（透明直角） — 会社概要ページ

• Background: transparent
• Text: #0068b5
• Padding: 12px 32px
• Border Radius: 0px
• Border: 1px solid #0068b5
• Font: 凸版文久ゴシック Pr6N, 14px, weight 400 (DB)

Inputs（推奨実装）

• Background: #ffffff
• Border: 1px solid #cccccc
• Border (focus): 1px solid #0068b5
• Border Radius: 0px（ボタンと統一）
• Padding: 12px 16px
• Font: 凸版文久ゴシック Pr6N, 14px, weight 400
• Height: 44px

Cards / Surfaces

• Background: #ffffff（メイン）/ #f1f1f1（グレー面）/ #f4f4f4（薄いグレー面）
• Border: 1px solid #e0e0e0 または border なし
• Border Radius: 0px（直角が基本）
• Shadow: 基本フラット（box-shadow: none）

Header

• Background: #ffffff（白）
• Border Bottom: 1px solid #e0e0e0
• Position: fixed or sticky
• 透過なし（STORES のような半透明 header ではない）

Dark Section

• Background: #193264（ダークネイビー）
• Text: #ffffff
• ボタンは白直角（bg #ffffff / text #323232）
• 英語見出しは Roboto Bold 白

Footer

• Background: #193264（ダークネイビー）
• Text: #ffffff / rgba(255, 255, 255, 0.7)
• Padding: 48px 24px

5. Layout Principles

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

Container

• Max Width: 1200px
• Padding (horizontal): mobile 16px / desktop 24–32px

Border Radius Scale

TOPPAN は単一の radius 値 0px で統一。角丸のスケールを持たない。

Grid

• 12 カラムグリッドが実装上自然（CSS Grid または Flexbox）
• Gutter: 24px

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• 立体感は ダークネイビー #193264 セクションと白セクションの二極構成で表現
• 階層はシャドウではなく背景色の切り替えで作る（印刷的な面分割）

7. Do's and Don'ts

Do（推奨）

• 和文フォントは 凸版文久ゴシック Pr6N を最優先、フォールバックは Hiragino Sans → Noto Sans JP → Yu Gothic → Meiryo
• 英語見出しは Roboto Bold を使い、和文と明確に書体を分ける
• 本文の line-height は 1.5 を基本にする
• 英語見出しの line-height は 1.0 でタイトに詰める
• 全ボタン・全入力欄は border-radius: 0px（完全直角） を徹底する
• 主要 CTA は #0068b5 の直角ブルーボタン を使う
• ダークセクションは #193264（Dark Navy） を使い、白い直角ボタンを配置する
• 本文テキストは #323232（ダークグレー）を使う
• 色は クールトーン（ブルー系）で統一する

Don't（禁止）

• 角丸ボタン（border-radius > 0）を使わない — TOPPAN は全コンポーネントが直角。pill（9999px）は絶対に使わない
• 主要 CTA に 黒 #000000 や緑 #00ff00 を使わない — TOPPAN Blue #0068b5 がブランドカラー
• 英語見出しに 凸版文久ゴシックを使わない — 英語は Roboto Bold
• 和文見出しに Roboto を使わない — 和文は凸版文久ゴシック
• 本文に 純黒 #000000 を使わない — #323232 がテキストカラー
• ウォームトーンのグレー（#737368 等の R=G>B 傾向）を使わない — TOPPAN はクールニュートラル
• ダークセクションに 純黒 #000000 を使わない — #193264（ブルー系ネイビー）が正解
• line-height: 1.0 を和文本文に使わない — 1.0 は英語見出し専用

8. Responsive Behavior

Breakpoints（推奨値）

モバイル時の調整

• 英語見出し H2: 64px → 36–40px
• セクション英語 H2: 40px → 24–28px
• 和文ページ H1: 25px → 20–22px
• 本文サイズは 14px を維持
• ナビはハンバーガーメニュー化（"Menu" 10px ラベル付き）

タッチターゲット

• 主要 CTA: 高さ 44px 以上
• ナビリンク: padding で 44px × 44px を確保

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

TOPPAN Blue (CTA): #0068b5
Deeper Blue (Hover): #00469b
Dark Navy (Section BG): #193264
Light Blue Surface: #dfeaff
Light Gray: #f1f1f1
Text Primary: #323232
White: #ffffff
Overlay: rgba(0, 0, 0, 0.8)

和文 Font: "凸版文久ゴシック Pr6N R", "凸版文久ゴシック Pr6N DB", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif
英語 Font: Roboto, Arial, Helvetica, sans-serif
（凸版文久ゴシック不在時の代替: Noto Sans JP）

Body Size: 14px / line-height 1.5 / weight 400 / letter-spacing normal
英語 Hero: 64px / line-height 1.0 / weight 700 / letter-spacing 0.016em / Roboto
和文 Heading: 25px / line-height 1.86 / weight 400 (DB) / letter-spacing normal
Sub Heading: 18–24px / line-height 1.4 / weight 400 (DB) / letter-spacing 0.02em

Border Radius: 0px（全コンポーネント完全直角）
Shadow: 基本 none。階層は背景色の切り替え（白 ↔ #193264）で表現

プロンプト例

TOPPAN のデザインに従って、事業紹介セクションを作成してください。
- 和文フォント: "凸版文久ゴシック Pr6N R", "凸版文久ゴシック Pr6N DB", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif
- 英語見出し: Roboto, 40px / weight 700 / line-height 1.0 / letter-spacing 0.03em / color #ffffff（ダークセクション上）
- 和文小見出し: 24px / weight DB / line-height 1.4 / letter-spacing 0.02em / color #0068b5
- 本文: 14px / weight 400 / line-height 1.5 / letter-spacing normal / color #323232
- 主要 CTA: 背景 #0068b5（TOPPAN Blue）/ 白文字 / border-radius 0px（完全直角）/ padding 12px 32px
- セカンダリ CTA: 背景 #ffffff / 文字 #323232 / radius 0px / padding 12px 32px
- ゴースト CTA: 背景 transparent / 文字 #0068b5 / border 1px solid #0068b5 / radius 0px
- ダークセクション: 背景 #193264 / テキスト #ffffff
- カード背景: 白 #ffffff / グレー面 #f1f1f1
- box-shadow は基本 none。立体感は白 ↔ #193264 の背景色切り替えで表現
- 全コンポーネントを border-radius: 0px で統一する（角丸は一切使わない）