中外製薬（Chugai Pharmaceutical） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 書体を1本に絞り、字詰めと字間で階層を作る。 Noto Sans JP 以外の書体を1要素も使わない（可視 296 / 253 要素すべて）。色面も青1色＋生成りのベージュで、形ではなく文字の組み方でトーンを出している
• 密度: 中〜高。製薬企業の情報量（IR・研究開発・サステナビリティ）を 16px カードで並べるが、行間 1.8 と字間 0.05em で詰めずに読ませる
• キーワード: Noto Sans JP 単一書体、palt 全面、0.05em を全要素に、角丸 16px のカード、影ゼロ

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

1. font-feature-settings: "palt" を実質すべての要素に当てている（実測 1073 要素／下層 882 要素）。和文の約物・仮名が詰まった状態が既定で、「詰めない」要素の方が例外
2. letter-spacing: .05em を CSS 全文で 454 回宣言している。 body からの継承ではなく、要素ごとに 0.05em を書いている。だから 12px→0.6px / 14px→0.7px / 16px→0.8px / 20px→1px / 42px→2.1px とサイズに比例して px が変わる（鹿島建設型）。ただし 68px・82px の大きな数字だけ 0.03em に落としている（2.04px / 2.46px）
3. ウェイトは 300 / 400 / 600 の3段しかなく、600 が既定。 可視 296 要素中 600 が 210 要素、400 が 85 要素。Google Fonts の URL も wght@300;400;600 で、700 は配信されていない（実測で 700 が付くのは Cookie 同意バナーの1要素だけ）。700 を当てると合成太字になる
4. 自前の影を1つも持たない。 box-shadow の実測は Cookie 同意バナーの1件のみ（rgba(0,0,0,.2) 0 0 18px）。カードは 角丸 16px と地色 #f5f5f0 だけで浮かせる

CSS Custom Properties は 20 個すべて自社トークン（--ist-*。プラットフォーム由来 0）。ただし後述のとおり 2 個は実装から参照されていない。

2. Color Palette & Roles

実サイトの :root にある --ist-* 20 個をそのまま写し、var() での参照回数と可視要素数を併記する。

Primary（ブランドカラー）

#0b41cd と #0b41cc が混在する。 面とテキストは --ist-main = #0b41cd だが、 グラデーション宣言だけ linear-gradient(90deg, #f5f5f0, #0b41cc 62%) と 1 低い値を直書きしている。 新規実装では #0b41cd に統一してよい。

Semantic（意味的な色）

Neutral（ニュートラル）

レイアウト用トークン（色ではない）

--ist-headerHeight: 155.7969px（JS が実測値を書き込む）／--ist-headerHeightSp: 0px／--ist-headerMegaMenuHeader: 73px。 --ist-headerHeight は固定値ではなく実行時に更新される。ハードコードしない。

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP のみ。可視テキスト 296 / 253 要素すべてがこれ。明朝も、サブの和文書体も存在しない
• 明朝体: 使わない

3.2 欧文フォント

• 専用の欧文書体を持たない。 英数字も Noto Sans JP の欧文グリフで組む（Our Stories INNOVATION などの欧文見出しを含む）
• フォールバックは sans-serif のみ

3.3 font-family 指定

css/* 実装：CSS 全文で font-family の宣言はこの 1 種類だけ */
font-family: "Noto Sans JP", sans-serif;

ただし実サイトの body は2つのページで違う値を返す。

css/* 旧 common/css/style.css（2世代前のスタイルシートが今も読み込まれている） */
body {
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, arial, helvetica, sans-serif;
  line-height: 1.8;          /* ★この行間は今も生きている */
  color: #222;                /* = #222222 */
  min-width: 1000px; max-width: 1600px;
}

• トップページの body は新しい assets/styles/ist/*.css に上書きされて "Noto Sans JP", sans-serif
• /profile/ の body は旧シートのヒラギノ／メイリオのまま（4 幅すべてで同じ）
• どちらでも描画結果は変わらない。 ist 側が body の子孫すべてに Noto Sans JP を当てているため、可視 253 要素は 1 つ残らず Noto Sans JP で出る
• 新規実装では旧スタックを引き写さない。 font-family: "Noto Sans JP", sans-serif だけ書けばよい

Web フォントの配信: Google Fonts。wght@300;400;600 の 3 ウェイトを unicode-range で分割配信（fonts.gstatic.com へのフォント要求 46 件／document.fonts は各ウェイト 248 サブセット＝ loaded 92・unloaded 156）。 unloaded が多いのは異常ではなく、そのページに出てこない文字のサブセットを読んでいないだけ。

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

html は 4 幅（1440 / 1200 / 834 / 375px）すべてで 16px 固定。body も 16px / line-height: 28.8px（＝1.8）で動かない。流体ルートではないので rem→px の換算は素直に 16 倍でよい。

ウェイトは 300 / 400 / 600 の 3 段しかない。

• 300 … メガメニューの第2階層リンクのみ（16px / line-height: 22.4px）
• 400 … 本文と大きな見出し全部（42px・50px・64px は 400 のまま）
• 600 … 24px 以下の見出し・ナビ・カード見出し。最多の 210 要素
• 700 は Google Fonts に無い。当てると合成太字になる

大見出しほど細い。 64px / 50px / 42px は 400、24px 以下が 600。 「見出し＝太字」で実装すると別物になる。

3.5 行間・字間

• 本文の行間: 1.80（body { line-height: 28.8px } ＝ 16×1.8）。実測でも 1.80 が 47 / 35 要素
• 見出し・カードの行間: 1.40（最多 103 / 85 要素）。読み物の段落は 1.60（71 / 65 要素）
• 字間: 0.05em を要素ごとに宣言する（CSS 全文 454 回）。body 側に 1 回書いて継承させる作りではない
• 例外は 0.03em（68px・82px の数字）と normal（パンくず・CMP）だけ

css/* 実装の型：サイズと一緒に字間も書く */
.heading { font-size: 42px; line-height: 1.4; letter-spacing: .05em; }
.body    { font-size: 16px; line-height: 1.8; letter-spacing: .05em; }
.bignum  { font-size: 82px; line-height: 1;   letter-spacing: .03em; }  /* ★数字だけ詰める */

line-height は比率で書いてよい（body の 28.8px も 1.8 由来）。 letter-spacing を body に 1 回だけ書いて継承させるのは、このサイトの設計ではない。

3.6 禁則処理・改行ルール

css/* 実サイトの指定はこれだけ。word-break / line-break は書いていない */
overflow-wrap: break-word;   /* CSS 全文で 1 箇所 */
word-break: break-all;       /* CSS 全文で 1 箇所 */

• word-break: auto-phrase は使っていない。改行位置はブラウザ既定の禁則処理に任せている
• 見出しの改行は <br> で手で入れている（私たちは病気より先に未来へ行く など）

3.7 OpenType 機能

cssfont-feature-settings: "palt";   /* ★実測 1073 要素（トップ）/ 882 要素（下層） */

• palt が既定。 normal のまま残っているのは OneTrust の Cookie バナーなど外部ウィジェットだけ
• palt と letter-spacing: .05em を同時に使う。詰めてから一律に開く、という組み方
• tnum などの数字用フィーチャーは使っていない

3.8 縦書き

writing-mode が horizontal-tb でない要素は 0 件。縦組みは使わない。

4. Component Stylings

Buttons

Primary（塗り） — 実測 3 要素

• Background: #0b41cd
• Text: #ffffff
• Padding: 4px 52px 4px 20px（右だけ 52px。矢印アイコンのぶん）
• Border Radius: 3px
• Font Size: 16px / Weight: 400 / Letter Spacing: 0.8px（0.05em）
• Border: なし

Secondary（白地・線） — 実測 2 要素

• Background: #ffffff
• Text: #0b41cd
• Border: 1px solid #0b41cd
• Padding: 4px 52px 4px 20px（Primary と同じ）
• Border Radius: 3px
• Font Size: 16px / Weight: 400

ボタンの文字は太らせない（400）。 角丸も 3px だけ。 border-radius: 3px は「ボタン・タグ」専用、16px は「カード」専用で用途が分かれている。

Tags / Badges

• Background: #f5f5f0 / Text: #222222
• Border Radius: 3px / Padding: 0 10px
• Font Size: 12px / Weight: 600 / Letter Spacing: 0.6px

ハッシュタグ（#患者中心 など）は面を持たず、13px / 600 / #0b41cd の文字だけ（51 要素）。

Cards

• Background: #ffffff（画像部）＋ #f5f5f0（本文部）
• Border: なし
• Border Radius: 16px。ただし実装は上下を分けて指定している
  • 画像部 border-radius: 16px 16px 0 0（56 / 26 要素）
  • 本文部 border-radius: 0 0 16px 16px（40 / 18 要素）
• Shadow: なし（§6 参照）
• カード幅: 351px（実測コンテナ 44 件）

Inputs

• サイト内検索のみ。Font Size 16px / line-height: 24px / Letter Spacing 0.8px
• 枠線・角丸は持たず、下線とアイコンで構成

5. Layout Principles

Container

• Max Width: 1366px（実測 15 / 12 要素）。読み物の段落だけ 872px / 830px に絞る
• 旧シート由来の body { min-width: 1000px; max-width: 1600px } が残っている

Grid / Gap

Spacing Scale

明示的なスペーシングトークンは持たない。実測から読み取れるのは 16 / 24 / 32 / 40 の 8px 刻み。

6. Depth & Elevation

自前の box-shadow は 1 つも無い。 実測された唯一の影 rgba(0,0,0,.2) 0 0 18px 0 は OneTrust の Cookie バナーのもので、サイトの設計ではない。

浮きは影ではなく 角丸 16px ＋ 地色 #f5f5f0 で作る。

7. Do's and Don'ts

Do（推奨）

• font-family: "Noto Sans JP", sans-serif だけを書く。他の書体を混ぜない
• すべてのテキスト要素に letter-spacing: .05em を書く（body 継承に頼らない）
• font-feature-settings: "palt" を全体に当てる
• ウェイトは 300 / 400 / 600 の 3 段に収める。24px 以上の見出しは 400 のままにする
• 本文 line-height: 1.8、見出し・カード 1.4、読み物の段落 1.6
• ボタンは border-radius: 3px、カードは 16px。使い分ける
• 面は #ffffff と #f5f5f0 の2枚だけで作る

Don't（禁止）

• font-weight: 700 を当てない。 Google Fonts から 700 を配信していないので合成太字になる
• 大見出しを太字にしない。 42px / 50px / 64px は 400
• 影を足さない（box-shadow は設計に存在しない）
• letter-spacing を 0.05em 以外にしない。例外は 68px・82px の数字（0.03em）だけ
• 旧 body のヒラギノ／メイリオのスタックを引き写さない（実際には 1 要素も描画されていない）
• --ist-lgray (#c8c8c8) を使わない。実装から 1 度も参照されていない
• --ist-headerHeight を固定値としてハードコードしない（JS が実行時に書き換える）

8. Responsive Behavior

Breakpoints

主役は 960px。 767px はその下の微調整。

フォントサイズの調整

• html も body も流体ではない（4 幅すべて 16px / 28.8px）。縮小はブレークポイントごとの個別指定で行う
• (prefers-reduced-motion: reduce) を 133 / 134 回宣言している。アニメーションは必ず止められるようにする

タッチターゲット

最小 44px × 44px を確保する。

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #0b41cd
Surface:       #f5f5f0
Text Color:    #1f1f1f（body）/ #222222（見出し・本文）
Muted:         #767676
Border:        #dfdfdf
Background:    #ffffff
Font:          "Noto Sans JP", sans-serif
Weights:       300 / 400 / 600（700 は無い）
Body Size:     16px
Line Height:   1.8（本文）/ 1.4（見出し・カード）/ 1.6（読み物）
Letter Spacing: .05em（全要素に明示）
Feature:       font-feature-settings: "palt"
Radius:        3px（ボタン・タグ）/ 16px（カード）
Shadow:        なし
Container:     1366px

プロンプト例

中外製薬のデザインシステムに従って、IRニュースの一覧カードを作成してください。
- 書体は "Noto Sans JP", sans-serif のみ。他の書体を混ぜない
- すべてのテキストに letter-spacing: .05em と font-feature-settings: "palt" を当てる
- カードは border-radius: 16px（画像部 16px 16px 0 0 / 本文部 0 0 16px 16px）、
  地色は #f5f5f0、box-shadow は使わない
- カード見出しは 20px / weight 600 / line-height 1.4 / color #0b41cd
- 日付は 12px / weight 400 / color #767676
- 「詳しく見る」ボタンは背景 #0b41cd / 文字 #ffffff / weight 400 /
  border-radius 3px / padding 4px 52px 4px 20px
- font-weight に 700 を使わない（配信されていないウェイト）
- グリッドの gap は 16px、コンテナ幅は 1366px