DNP（大日本印刷） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 角丸をほぼ使わない直線基調の総合企業サイト。深いコバルトブルー1色でブランドを立て、面は白と極薄のブルーグレーだけで構成する。装飾よりも情報の到達性を優先した設計
• 密度: 事業領域・IR・ニュースを1枚に載せる情報密度の高いコーポレート型。カードは等幅グリッドで整列し、リンクは矢印付きの矩形ボタンで統一される
• キーワード: 直線的、堅牢、青一色、情報量が多い、フラット

このサイト最大の特徴は自社書体を Web フォントとして使っていること。 DNP は秀英体の版元であり、見出しには 秀英角ゴシック金 B JIS2004 が実際にロードされて適用される（document.fonts で loaded を確認済み）。あわせて YakuHanJP（約物半角）が全要素のフォールバック先頭に置かれ、括弧・句読点のアキを詰めている。この2つを外すとサイトの印象は再現できない。

2. Color Palette & Roles

Primary（ブランドカラー）

• DNP Blue (#1432aa): ブランドの中核。見出し文字色・主要CTAの面色・ナビゲーションの面色を兼ねる。トップの uniqueBackgrounds で最多（13件）
• Blue Secondary (#5365ac): ニュース種別バッジの面色。ニュース一覧では 79 件と支配的
• Accent Orange (#e13000): ヘッダー右端の「お問合わせ」CTA 専用。ページ内で1〜2件しか出ない。多用しない

Surface（面色）

• Background (#ffffff): ページ背景。body に明示指定（pageBackground.resolved 根拠 body）
• Surface Blue (#e6f1fb): 事業領域チップ・注目リンクの淡い面。関連色に #e8f1fa があり、セクション見出し帯に使われる
• Surface Gray (#f9f9f9): ヘッダーのユーティリティ領域・セレクトボックスの面
• Surface Blue Gray (#eeeff3): ニュース一覧の日付カラム・パンくずの帯

Neutral（ニュートラル）

• Text Primary (#333333): 本文テキスト。純黒は使わない
• Text Secondary (#555555): ヘッダー補助リンク・セレクトのラベル
• Border (#666666): アウトラインボタンの枠。DNP のボタンは枠が濃い
• Border Light (#8c8c8c): セレクトボックスの枠
• Carousel Dot (#787878): ヒーローカルーセルの非アクティブドット（アクティブは #1432aa）

注意 — #0000ff は設計色ではない: computedStyles の一部の <a> / <p> に color: rgb(0, 0, 255) が出るが、これらは直下が <img> だけでテキストノードを持たない要素（バナーリンク）。文字が描画されないため色は画面に出ない。ブランドの青として採用してはいけない。

3. Typography Rules

3.1 和文フォント

• 本文ゴシック: Noto Sans JP → ヒラギノ角ゴ ProN → メイリオ → ＭＳ Ｐゴシック
• 見出しゴシック: 秀英角ゴシック金 B JIS2004（DNP 自社書体。Web フォントとして実ロードされる）→ ヒラギノ角ゴ ProN 以下同じ
• 明朝体: 使用しない

3.2 欧文フォント

• 約物: YakuHanJP（すべてのスタックの先頭。括弧・句読点を半角幅に詰める）
• サンセリフ: 数値・英字見出しの一部に Arial を先頭にした別スタックがある
• 等幅: 定義なし

3.3 font-family 指定

css/* 本文・ナビゲーション・UI 全般 */
font-family: YakuHanJP, "Noto Sans JP", "ヒラギノ角ゴ ProN",
             "Hiragino Kaku Gothic ProN", メイリオ, Meiryo,
             "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* 見出し（h1〜h3・リード文）— 秀英角ゴシック金 */
font-family: YakuHanJP, "秀英角ゴシック金 B JIS2004",
             "Shuei KakuGo Kin B JIS2004", "Hiragino Kaku Gothic ProN",
             メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* 欧文まじりの小見出し（数値・英字ラベル） */
font-family: Arial, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
             メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

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

• YakuHanJP を必ず先頭に置く。 約物だけを差し替える専用フォントで、和文本体は次のフォントが担当する
• 見出しは自社書体を第2優先に置き、非対応環境ではヒラギノ角ゴ ProN に落ちる
• 末尾に ＭＳ Ｐゴシック まで残すレガシー互換のスタック。Windows の古い環境まで面倒を見る方針

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

body 自体は font-size: 16px / line-height: 16px（＝1.0）というリセット値。行間は各コンポーネントが個別に持つので、body の値を本文の行間として引き継いではいけない。

3.5 行間・字間

• 本文の行間: 1.5〜1.6。ニュースなど長文のブロックで 1.6（25.6px / 16px）
• 見出しの行間: 1.3（見出し）〜1.8（h3 のみ広い）
• 字間: 全要素 normal。letter-spacing を一切使っていない
• 字面の調整は letter-spacing ではなく YakuHanJP による約物の詰めだけで行う

ガイドライン:

• このサイトを再現するときに letter-spacing: 0.04em などを足さない。入れると別のサイトになる
• 行間はコンポーネント単位で明示する（継承に頼らない）

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;

• 見出しは短く畳んで折り返しを想定しない設計。長い事業名は <br> で明示的に折る
• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

css/* このサイトは font-feature-settings を使わない */
font-feature-settings: normal;

• palt は 0 件（トップ・下層ともに DOM 全走査で normal 以外を返す要素なし）
• 字詰めは palt ではなく YakuHanJP という専用フォントを先頭に置く方式で実現している。palt を足すと二重に詰まって崩れる

3.8 縦書き

該当なし。

4. Component Stylings

すべてのボタンが border-radius: 0。 角丸を持つのはカルーセルのドット（10px ＝ 実質円形）だけ。

Buttons

Primary（青ベタ／右矢印つき）

• Background: #1432aa
• Text: #ffffff
• Padding: 12px 48px 12px 16px ← 右の 48px は矢印アイコンの領域
• Border Radius: 0
• Font Size: 14px / Font Weight: 700

Accent（お問合わせ専用）

• Background: #e13000
• Text: #ffffff
• Padding: 12px 40px 12px 14px
• Border Radius: 0
• Font Size: 14px / Font Weight: 400

Secondary（白地・濃い枠）

• Background: #ffffff
• Text: #333333
• Border: 1px solid #666666
• Padding: 10px 25px 10px 20px（幅広版は 10px 40px 10px 20px / 10px 56px 10px 20px）
• Border Radius: 0
• Font Size: 16px / Font Weight: 700

Large Nav Card（アイコン付きの大型リンク）

• Background: transparent
• Border: 1px solid #666666
• Padding: 25px 34px 25px 120px ← 左の 120px はアイコンの領域
• Font Size: 16px / Font Weight: 700

Tint Chip（事業領域チップ）

• Background: #e6f1fb
• Text: #1432aa
• Padding: 10px 16px
• Border Radius: 0
• Font Size: 16px / Font Weight: 400

Badges

• Background: #5365ac / Text: #ffffff
• Padding: 4px 10px / Border Radius: 0 / Font Size: 12px
• ニュース種別（ニュースリリース／研究開発／企業情報）に使う

Inputs / Select

• Background: #f9f9f9
• Border: 1px solid #8c8c8c
• Border Radius: 0
• Padding: 12px 36px 12px 12px（右は矢印領域）
• Font Size: 14px / Text: #555555

Cards

• Background: #ffffff（強調カードは #e6f1fb）
• Border: 1px solid #666666（枠だけで面を作る。影は使わない）
• Border Radius: 0
• Padding: 20px〜25px

Carousel

• Dot: 10px radius（円）／非アクティブ #787878 ／アクティブ #1432aa
• 再生・停止ボタンは #1432aa のベタ

5. Layout Principles

Spacing Scale

実測から読み取れる刻み。4の倍数を基本にする。

Container

• Max Width: 1200px
• Padding (horizontal): 16px（モバイル）／ 20px（デスクトップ）

Grid

• おすすめコンテンツ / ピックアップ: 4カラム
• ニュース一覧: 日付カラム（#eeeff3 の帯）＋ 本文カラムの2分割
• Gutter: 20px 前後

6. Depth & Elevation

このサイトは影を使わない。 DOM 全走査で見つかる box-shadow は白のインセット（実質リセット）4件のみ。

7. Do's and Don'ts

Do（推奨）

• YakuHanJP をすべての font-family の先頭に置く
• 見出しは 秀英角ゴシック金 B JIS2004 を第2優先に置き、ヒラギノ角ゴ ProN へフォールバックさせる
• ボタン・カード・入力欄の border-radius は 0 にする
• 主要な見出しの文字色は #1432aa、本文は #333333 にする
• ボタンの矢印・アイコン分の余白は padding の左右非対称で確保する（12px 48px 12px 16px）
• 浮きは影ではなく枠線と面色で表す

Don't（禁止）

• letter-spacing を足さない。 このサイトは全要素 normal
• font-feature-settings: "palt" を使わない。 YakuHanJP と競合する
• #e13000（オレンジ）を一般的なCTAに広げない。「お問合わせ」1箇所のための色
• #0000ff を青として採用しない（画像のみのリンクに残るUA由来の値で、画面には出ない）
• body の line-height: 16px（＝1.0）を本文の行間として継承しない
• 角丸・ドロップシャドウでカードを浮かせない

8. Responsive Behavior

Breakpoints

CSS の @media から実測した値。

補助的に 300px / 800px の分岐もある。

タッチターゲット

• 最小 44px × 44px。padding: 12px 16px ＋ 14px の文字で概ね 42–44px になるので、モバイルでは縦 padding を 14px に増やす

フォントサイズの調整

• 見出し 40px → 28px、32px → 24px 程度に縮小
• 本文 16px は据え置き。ナビ 14px も据え置き

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #1432aa
Accent (問合せのみ): #e13000
Badge: #5365ac
Text Color: #333333
Background: #ffffff
Surface: #e6f1fb / #f9f9f9 / #eeeff3
Border: #666666
Font (body): YakuHanJP, "Noto Sans JP", "ヒラギノ角ゴ ProN", メイリオ, sans-serif
Font (heading): YakuHanJP, "秀英角ゴシック金 B JIS2004", "ヒラギノ角ゴ ProN", メイリオ, sans-serif
Body Size: 16px
Line Height: 1.5
Letter Spacing: normal（絶対に足さない）
Border Radius: 0
Shadow: なし

プロンプト例

DNP のデザインシステムに従って、ニュース一覧ページを作成してください。
- 見出しは秀英角ゴシック金のスタック、色は #1432aa、32px / 700 / line-height 1.3
- 本文は Noto Sans JP のスタック、色は #333333、16px / 400 / line-height 1.5
- letter-spacing はどこにも入れない（このサイトは全要素 normal）
- font-feature-settings も使わない（YakuHanJP が約物を処理する）
- 種別バッジは #5365ac / 白文字 / 12px / padding 4px 10px / 角丸なし
- 日付カラムの帯は #eeeff3
- 「一覧を見る」は #1432aa のベタ、白文字、14px / 700、padding 12px 48px 12px 16px、角丸なし
- 影は使わず、区切りは 1px solid #666666
- コンテナ幅は 1200px