共同印刷 / TOMOWEL（Kyodo Printing） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 234 個の CSS 変数で組まれた本格的なデザインシステム。 色は 9 段スケール、余白は Tailwind 風の --space-*、文字サイズは全段が clamp() の流体。値を直書きしないことが前提になっている
• 密度: 中。角丸 10px の白いカードを rgba(0,0,0,0.12) 0 4px 24px の柔らかい影で浮かせ、ベージュ #f8f6f1 の地に並べる
• キーワード: 234 トークン、全段 clamp、字間ゼロ、既定ウェイト 500、マゼンタ #df003a

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

1. letter-spacing を一切触らない。 実測で可視 173 要素中 170 要素が normal（下層は 55/55 ＝ 全部）。CSS 全文でも letter-spacing の宣言は 0.1em / 0.2em / 0.01em / 0.4em の 4 つしかなく、本文には 1 つも当たっていない。例外は部門名の 3 要素（24px に 0.1em ＝ 2.4px）だけ
2. 本文の既定ウェイトが 500（Medium）。 body { font-weight: var(--font-medium) } で、実測 可視 133 要素が 500。400 はフッターのリンク 6 要素だけ。Noto Sans JP の 400 / 500 / 700 を Google Fonts から読み込んでいるので、500 は合成ではなく実体
3. 文字サイズが全段 clamp() の流体。 html は 16px 固定だが body 自体が --text-md: clamp(0.875rem, 0.818rem + 0.24vw, 1rem)。4 幅で測ると 1440px → 16px / 1200px → 15.968px / 834px → 15.0896px / 375px → 14px と連続的に動く。px で書き写すとブレークポイント間で別物になる
4. 書体は和文・欧文・数字の 3 本立て。 --font-sans-serif（Noto Sans JP・160 要素）/ --font-en（Lato・7 要素）/ --font-num（Roboto・6 要素）。数字専用に Roboto を持っているのが珍しく、業績ハイライトの 99.9 100.0 27.3 が 54px の Roboto で組まれる

2. Color Palette & Roles

Primary（ブランドカラー）

色はすべて 9 段スケール（-10 が最淡 → -90 が最濃）で定義されている。

--color-main-10 #ffeaef / -20 #fbcfda / -30 #f494ac / -40 #f1547d / -50 #df003a（= --color-main）
--color-main-60 #b2002e / -70 #8e0025 / -80 #580017 / -90 #37000e

Semantic（意味的な色）

• Danger (#b00000, --color-danger) / Danger Light (#f4d7d7)
• Link (#df003a, --color-link) — リンク色＝ブランド色

ESG セクションの 3 色

サステナビリティの E / S / G を色で分ける。テキスト色は -80、地色は -10 を使う。

事業部門の色

Neutral（ニュートラル）

トップと下層で地色が違う。 トップは #f8f6f1（クリーム）、下層は #f6f6f6（グレー）。どちらもトークン化されている。

宣言はあるが使われていない色

--color-sub-red / --color-sub-cream / --color-sub-blue / --color-sub-yellow の 4 系統（各 10 段・計 40 個）は、-20 のクリームを除いて可視 0 要素。 「サブカラーが 4 色ある」と読まず、実装に出ているのはマゼンタと ESG・部門色だけと理解すること。

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP（Google Fonts・400 / 500 / 700 の 3 ウェイトが loaded）。実測 可視 160 要素
• 明朝体: --font-serif に游明朝のスタックが宣言されているが、DOM 全走査で可視 0 要素

css/* 宣言はあるが、実測で 1 要素も使われていない */
--font-serif: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;

3.2 欧文フォント

• サンセリフ: Lato（400 / 700 が loaded・可視 7 要素）。セクションの欧文見出し（News Release Topics Business Introduction）とコピーライト
• 数字: Roboto（500 が loaded・可視 6 要素）。業績ハイライトの数値専用（54px）

koharu という @font-face が 1 件宣言されているが unloaded で、可視 0 要素。 使われていない。

3.3 font-family 指定

css--font-sans-serif: "Noto Sans JP", sans-serif;   /* 既定。可視 160 要素 */
--font-en:         "Lato", sans-serif;            /* 欧文見出し。可視 7 要素 */
--font-num:        "Roboto", sans-serif;          /* 数値。可視 6 要素 */
--font-serif:      "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;  /* 可視 0 */

body { font-family: var(--font-sans-serif); }

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

• Web フォント ＋ generic family の最小チェーン。 OS ローカル書体の書き分けはしない
• --font-serif だけが OS ローカル書体のチェーンを持つが、実装では使われていない

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

サイズはすべて clamp() のトークン。 4 幅での実測値を併記する（px 直書きではなくトークンを使うこと）。

ウェイトは 400 / 500 / 700 の 3 段（トークンは --font-normal: 400 / --font-medium: 500 / --font-bold: 700）。実測は 500 が 133 要素、700 が 33、400 が 6。600 は存在しない。

3.5 行間・字間

行間もトークン化されている。

css--line-height-xs: 1.4;   /* ナビ・UI。実測 28 要素 */
--line-height-sm: 1.5;   /* カードのタイトル。実測 16 要素 */
--line-height-md: 1.6;   /* 既定。本文・セクション見出し。実測 56 要素（最多） */
--line-height-lg: 1.8;   /* 読み物の本文。実測 40 要素 */
--line-height-xl: 2.2;   /* 宣言のみ・実測 0 要素 */

• 本文の行間は 1.6（--line-height-md）。読み物のリード・説明文は 1.8（--line-height-lg）
• セクション見出しも 1.6。見出しだけ詰める設計ではない
• 字間は normal が既定（可視 170/173 要素）。日本語本文に letter-spacing を足さない

ガイドライン:

• letter-spacing を書かない。 このサイトは Noto Sans JP の素の字送りをそのまま使う
• 字間を空けるのは「部門名」のような見出しラベルだけ（24px に 0.1em）
• 行間は 5 段のトークンから選ぶ。 1.4（UI）/ 1.5（カード）/ 1.6（本文・見出し）/ 1.8（読み物）
• --line-height-xl: 2.2 は実装で使われていない。 「このサイトは行間 2.2 を使う」と読まないこと

3.6 禁則処理・改行ルール

css/* 実サイトの宣言 */
word-break: break-all;    /* 一部のブロック */
word-break: break-word;
word-break: keep-all;
html { line-break: normal; text-rendering: optimizelegibility; }
body { text-rendering: optimizespeed; }

• html に text-rendering: optimizelegibility、body に optimizespeed を重ねて書いている（後勝ちで body の optimizespeed が効く）。実サイトはこうだが、意図としては optimizeLegibility を残したかったはず
• html { text-underline-offset: 0.07em } — 下線をベースラインからわずかに離す。日本語の下付き文字にかからないようにする配慮

3.7 OpenType 機能

font-feature-settings は 1 要素も使っていない（実測 0 件・CSS 全文でも宣言なし）。

• palt を足さないこと。 字間を normal に保つのと同じ思想で、Noto Sans JP の既定の字送りで組む

3.8 縦書き

該当なし（writing-mode: vertical-* は 0 要素）。

4. Component Stylings

Buttons

Main（白＋枠＋ピル・最も多い CTA）

• Background: #ffffff
• Text: #333333
• Border: 1px solid #d9d9d9
• Padding: 14px 20px
• Border Radius: 40px
• Font: --text-md（16px）/ weight 500 / letter-spacing normal
• Shadow: rgba(0,0,0,0.16) 0 0 8px（--shadow-m ＝ u-shadow-m を付けたときだけ）

Tab（選択 / 非選択）

Font: --text-xs（14px）/ weight 500

Nav Pill（製品・サービス）

• Background: #f9e9e9 / Text: #df003a
• Border: 2px solid #f9e9e9（地色と同色の 2px 枠）
• Padding: 4px 14px / Border Radius: 40px
• Font: 14px / weight 500

Carousel Arrow

• Background: transparent / Text: #df003a
• Border: 2px solid #df003a / Border Radius: 50%

Contact（ヘッダー右上）

• Background: #f8f6f1 / Text: #333333
• Border Radius: 0 0 10px（左下だけ角丸を落とした変則）
• Padding: 0 17px / Font: 16px / weight 500

Page Top

• Background: #333333 / Text: #ffffff / Border Radius: 50%
• Shadow: rgba(0,0,0,0.12) 0 0 6px（--shadow-s）

Tags

• Background: #4d4d4d（--color-gray-80）/ Text: #ffffff
• Font: --text-2xs（12px）/ weight 500 / letter-spacing normal
• Padding: 2px（カード内）/ 3px 8px（単体）
• Border Radius: 3px（--r-s）

Cards

• Background: #ffffff
• Border: なし
• Border Radius: 10px（--r-l。実測 34 要素で最多）
• Padding: 30px 53px 30px 35px（企業情報カード）
• Shadow: rgba(0,0,0,0.12) 0 4px 24px（--shadow-l・11 要素）

Radius トークン

css--r-s: 3px;    /* タグ */
--r-m: 6px;    /* 宣言のみ・実測 0 */
--r-l: 10px;   /* カード（34 要素） */

ピル（40px / 60px）と円（50%）はトークン外の直書き。

5. Layout Principles

Spacing Scale

Tailwind 風の --space-* が 34 段（--space-1 = 4px の 4px グリッド）。

（以降 --space-96 = 384px まで。値は常に「トークン番号 × 4px」）

px の別名トークンも 22 段ある（--10px: 0.625rem 〜 --60px: 3.75rem）。rem を px の名前で引けるようにしたもので、html は 16px 固定なので --16px = 1rem = 16px。

Container

• Max Width: 1200px（実測 3 要素で最多）
• サブの幅: 1280px（全幅寄りのブロック）、782px（本文カラム）、412px（カード）

Grid

• gap: 40px（--space-10）
• トップのニュースは 3 カラムのカード、企業情報は 2 カラム

レイアウト用の計算トークン

css--header-height: 80px;
--contentfull-margin:  calc((100vw - 100% - 0px) / 2 * -1);  /* 全幅ブロックの負マージン */
--contentfull-padding: calc((100vw - 100% - 0px) / 2);
--ease: cubic-bezier(0.215, 0.61, 0.355, 1);
--opacity: 0.75;   /* ホバー時 */
--scale: 1.03;     /* ホバー時の拡大 */
--move: 4px;       /* ホバー時の移動量 */

6. Depth & Elevation

影は 3 段のトークンで管理されている。 --shadow-s と --shadow-m は y オフセット 0 の全方向の影、--shadow-l だけ y に 4px 落ちる。カードを浮かせるのが --shadow-l、ボタンの縁取りが --shadow-s / --shadow-m、という使い分け。 検出される 4 つ目の rgba(0,0,0,0.15) 0 0 2px, rgba(0,0,0,0.3) 0 2px 10px は **Cookie 同意バー（trust360）**のもの。

7. Do's and Don'ts

Do（推奨）

• 値を直書きせず 234 個のトークンを使う。 色は 9 段（-10〜-90）、余白は --space-*、サイズは --text-*、行間は --line-height-*、角丸は --r-*、影は --shadow-*
• 文字サイズは clamp() のトークンで書く。 font-size: 16px ではなく font-size: var(--text-md)
• letter-spacing を書かない（既定は normal）。空けるのは部門名のような見出しラベルだけ（0.1em）
• 本文の既定ウェイトは 500（--font-medium）。400 ではない
• 行間は 1.6（本文・見出し）/ 1.8（読み物）/ 1.4（UI）/ 1.5（カード）
• 書体は **Noto Sans JP（和文・既定）/ Lato（欧文見出し）/ Roboto（数値）**の 3 本立て
• 数値の強調は Roboto（業績ハイライトの 54px）
• ブランド色は #df003a、本文色は #333333
• カードは radius 10px ＋ --shadow-l、CTA は radius 40px のピル、タブは 60px
• ESG は テキスト -80 ／ 地色 -10 の組で色分けする
• 地色はトップが #f8f6f1、下層が #f6f6f6

Don't（禁止）

• font-size を px で直書きしない。 全段が clamp() なので、834px 幅では 16px が 15.09px になる。px に固定すると他の要素と段差が出る
• font-feature-settings: "palt" を足さない（実サイトは 0 要素）
• 本文に letter-spacing を足さない（可視 170/173 要素が normal）
• font-weight: 400 を本文の既定にしない（実サイトは 500）。600 は使わない（トークンに無い）
• --line-height-xl: 2.2 を使わない（宣言のみ・実装 0 要素）
• 游明朝（--font-serif）を前提に組まない（宣言はあるが可視 0 要素）
• koharu を参照しない（unloaded・可視 0 要素）
• サブカラー（--color-sub-red / -blue / -yellow）を使わない（クリームの -20 以外は可視 0 要素）
• --r-m: 6px を使わない（実測 0 要素。角丸は 3px / 10px / 40px / 60px / 50%）
• 本文色を #000000 にしない（実サイトは #333333）

8. Responsive Behavior

Breakpoints

• only screen and ... を明示する記法

文字サイズは全段が流体

• html は 16px 固定だが body が --text-md の clamp()。4 幅の実測は 1440px → 16px / 1200px → 15.968px / 834px → 15.0896px / 375px → 14px
• ブレークポイントで段階的に切り替わるのではなく、vw で連続的に動く。メディアクエリで font-size を上書きする必要がない
• 行間は --line-height-* の比率なので、サイズに追従して自動で広がる

タッチターゲット

• Main ボタン（padding: 14px 20px ＋ 16px / lh 1.6）で高さ 約 54px — 44px を満たす
• タブ（padding: 7px 18px ＋ 14px / lh 1.4）は高さ 約 34px で下回る。モバイルでは上下の padding を増やすこと

9. Agent Prompt Guide

クイックリファレンス

Brand:       #df003a（--color-main / --color-link）
Text:        #333333（--color-type）
Tag BG:      #4d4d4d（--color-gray-80）
Border:      #d9d9d9（--color-border）
Background:  #f8f6f1（トップ）/ #f6f6f6（下層）
Font (JP):  var(--font-sans-serif) = "Noto Sans JP", sans-serif
Font (EN):  var(--font-en)         = "Lato", sans-serif
Font (Num): var(--font-num)        = "Roboto", sans-serif
Body: font-size: var(--text-md)  /* clamp(0.875rem, 0.818rem + 0.24vw, 1rem) = 14〜16px */
      font-weight: var(--font-medium)  /* 500 */
      line-height: var(--line-height-md)  /* 1.6 */
Letter Spacing: normal（本文には書かない）
font-feature-settings: 使わない
Radius: --r-s 3px（タグ）/ --r-l 10px（カード）/ 40px・60px（ピル）
Shadow: --shadow-l 0 4px 24px rgba(0,0,0,.12)（カード）
Space:  --space-N = N × 4px
Container: 1200px / 本文カラム 782px

プロンプト例

共同印刷（TOMOWEL）のデザインシステムに従って、ニュース一覧ページを作成してください。
- :root に下記のトークンを定義し、値を直書きしない
  --font-sans-serif: "Noto Sans JP", sans-serif / --font-en: "Lato", sans-serif /
  --font-num: "Roboto", sans-serif
  --text-md: clamp(0.875rem, 0.818rem + 0.24vw, 1rem)
  --text-3xl: clamp(1.25rem, 0.966rem + 1.21vw, 1.875rem)
  --line-height-xs: 1.4 / --line-height-sm: 1.5 / --line-height-md: 1.6 / --line-height-lg: 1.8
  --color-main: #df003a / --color-type: #333333 / --color-gray-80: #4d4d4d /
  --color-border: #d9d9d9 / --color-bg-news: #f8f6f1
  --r-s: 3px / --r-l: 10px / --shadow-l: 0 4px 24px rgba(0,0,0,.12) / --space-N は N×4px
- body { font-family: var(--font-sans-serif); font-size: var(--text-md);
         font-weight: var(--font-medium); line-height: var(--line-height-md); color: var(--color-type) }
- letter-spacing は書かない。font-feature-settings も使わない
- セクション見出しは font-size: var(--text-3xl) / weight 700 / line-height 1.6。
  欧文の見出し（News Release など）だけ var(--font-en)
- 数値の強調は var(--font-num) / 54px / weight 500 / line-height 1.2
- カードは background #ffffff / border-radius var(--r-l) / box-shadow var(--shadow-l) / 枠線なし
- タグは background var(--color-gray-80) / 白文字 / 12px / border-radius var(--r-s)
- タブの選択状態は background var(--color-main) / 白文字 / border-radius 60px / padding 7px 18px、
  非選択は白地 / 文字 var(--color-main) / 1px solid var(--color-border)
- CTA は白地 / 1px solid var(--color-border) / border-radius 40px / padding 14px 20px
- ページ背景は var(--color-bg-news)、コンテナ幅は 1200px、グリッドの gap は 40px