武田薬品工業（Takeda） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 見出しほど細い逆ウェイト階層。 36px の見出しを weight 300（Light）で組み、16px の小見出しを 700 で組む。角丸 30px の大きなボタンと、タケダレッド #BD120A 1 色で面を作る
• 密度: 低い。本文 16px / 行間 1.5、#edf2f4 の淡い面で区切り、白地に大きく余白をとる
• キーワード: タケダレッド、Light な大見出し、角丸 30px、字間ゼロ、Desktop/Mobile 2 本立てのトークン

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

1. 宣言した Gotham が 1 要素も描画されていない。 @font-face に gotham 200 / 300 / 400 / 500 / 700 / 800 の 6 ウェイト（＋gotham Fallback）があり、html にも font-family: var(--font-gotham), ui-sans-serif, … と書かれているが、document.fonts で 7 本とも unloaded。body 以下が "Noto Sans JP", … で上書きするため、2 ページとも可視 0 要素
2. 実際に描画されるウェイトは 400 と 700 の 2 本だけ。 隠し div の幅実測で欧文が 300 = 400 = 500 → 540.06px / 700 = 800 → 570.92px。CSS が 300 や 500 を当てても 400 で出る
3. font-weight: 325 という非整数ウェイトが 11 要素（ナビとフッターのリンク 16px / 14px）。Noto Sans JP は 400 / 700 の 2 本しか読んでいないので、325 も 400 で描画される
4. ウェイトの階層が逆転している。 --h1-fontWeight: 300 / --h2-fontWeight: 300 / --h3-fontWeight: 500 / --h4-fontWeight: 500 / --h5-fontWeight: 700。実測でも H2 36px → weight 300、H3 24px → weight 500。大きい見出しほど細い

html に font-feature-settings: normal を明示的に書いて約物の詰めを打ち消している。letter-spacing も可視 130/134・90/90 要素が normal。詰めも空けもしない。

CSS Custom Properties は 93 個が自社トークン（＋Swiper 2）。すべてのタイポグラフィ値に …Mobile の対が用意された Desktop / Mobile 2 本立てのシステム。Next.js（_next/static）＋ next/font ＋ Tailwind で組まれており、フォントは 41 件すべて自社ドメイン www.takeda.com からセルフホスト。

2. Color Palette & Roles

Primary（ブランドカラー）

CMP の赤 #FF0000 をブランド赤と混同しない。 OneTrust の Apply / Cancel ボタンが rgb(255, 0, 0) で、Filter Icon の rgb(56, 96, 190) も OneTrust 由来。サイト本体の赤は #BD120A だけ。

Neutral（ニュートラル）

• Text Primary (#333333): --colorDarkGrey / --textColor。可視 732 要素（2 ページ合計）で圧倒的最多。このサイトは本文に純黒を使わない
• Text on Dark (#ffffff): 赤面・写真の上（可視 38 要素）
• Text Muted (#a1a4ac): --colorMediumGrey。文字 4 要素 / 罫線 3 要素
• Surface Light (#edf2f4): --colorLightGrey。面 18 要素 / 罫線 8 要素。「私たちのストーリー」などセクションの地
• Hover Grey (#DCE6E9): --colorHoverGrey。2 ページとも可視 0 要素
• Deep Navy (#27455c): 面 8 要素。トークン化されていない直書きの色
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255, 255, 255) / 根拠 body）

Gradient

css/* ヒーローの帯 */
linear-gradient(to right, rgb(189, 18, 10), rgb(161, 177, 196));

/* 写真の上に文字を載せるための覆い */
linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));

赤 #BD120A から青灰 #A1B1C4 へ横に流すグラデーションがヒーローの地。角度・停止位置を丸めずそのまま使う。

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: Noto Sans JP。自社ドメインからセルフホスト（next/font）。読み込んでいるのは 400 と 700 の 2 本だけ
• Noto Sans JP Fallback は next/font が生成するメトリクス整合用のフォールバック（size-adjust 付き・local() ベース）。loaded と出るがフォントファイルは要求されない。これを書体として数えない
• 明朝体は使わない

3.2 欧文フォント

• 宣言: Gotham（200 / 300 / 400 / 500 / 700 / 800 の 6 ウェイト）。--font-gotham 経由で html に指定
• 実装: 描画されていない。 document.fonts で 6 本とも unloaded。body 以下の font-family が "Noto Sans JP", "Noto Sans JP Fallback", ui-sans-serif, … で上書きするため、可視要素は 2 ページとも 0
• 実際に欧文を組んでいるのは Noto Sans JP のラテングリフ

実サイトはこうだが、正しくはこう。 Gotham を使いたいなら body 側のスタック先頭に入れる必要がある。現状の実装は html にだけ当てているため、body の宣言に負けて一度も当たらない。

3.3 font-family 指定

css/* html（宣言されているが body に上書きされて効かない） */
html {
  font-family: var(--font-gotham), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", …;
  font-feature-settings: normal;
}

/* body 以下（実際に描画されるのはこちら・可視 134 要素 / 89 要素） */
font-family: "Noto Sans JP", "Noto Sans JP Fallback", ui-sans-serif, system-ui, -apple-system,
             "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
             "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

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

• 和文を先頭に置き、欧文も同じ書体で受ける単一書体構成
• 2 番目の "Noto Sans JP Fallback" は next/font の size-adjust 付きローカル代替。Web フォント到着前後でレイアウトがずれないための仕掛けで、書体の選択肢ではない
• 3 番目以降は Tailwind の font-sans 既定スタックがそのまま残っている
• スタック途中に generic の sans-serif が入っているため、それ以降の絵文字フォントには到達しない（実害は無いが、意図した指定ではない）

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

html { font-size: 16px } 固定（7 幅で確認）。トークンはすべて rem。

• ウェイトの実測分布: 400（127 要素）／ 700（37）／ 325（22）／ 300（19）／ 500（12）／ 600（7）
• font-weight: 325 はナビとフッターのリンク専用（各拠点のウェブサイト お問い合わせ 採用情報 財務ハイライト など）。Noto Sans JP は 400 / 700 しか読んでいないので実際は 400 で描画される
• 600 の 7 要素は OneTrust の CMP（Cookie 設定 すべて拒否する 等、13.008px / 0.13008px）

3.5 行間・字間

• 本文の行間: 1.50（可視 113 要素で最多）。body は line-height: 24px（16px × 1.5）
• 本文ブロックの行間: 1.625rem = 26px（--bodyBlock-fontLineHeight）
• 見出しの行間: H1 46/42 = 1.10、H2 43/36 = 1.19、H3 32/24 = 1.33。大きい見出しほど行間が詰まる
• 字間: normal。 可視 130/134（トップ）・90/90（下層）
• 端数の 0.13008px / 0.144px / 0.96px はすべて OneTrust 由来。サイト本体の字間ではない

ガイドライン:

• letter-spacing を足さない
• line-height はトークンの rem 値をそのまま使う（--h1-fontLineHeight: 2.875rem = 46px）。比率に直すと Mobile 側の値（--h2-fontLineHeightMobile: 2rem）と噛み合わなくなる
• 見出しは 1.1〜1.33、本文は 1.5〜1.625 の二層

3.6 禁則処理・改行ルール

css/* body */
word-break: break-word;

• word-break: break-word を body に当てている（7 幅で確認）
• html に font-feature-settings: normal / text-size-adjust: 100% を明示
• line-break / auto-phrase の指定は無い

3.7 OpenType 機能

csshtml {
  font-feature-settings: normal;   /* 明示的に打ち消している */
}

• palt も halt も使わない。 html で normal と書いて既定を固定している
• 実測では効く（40px の 「東京」、（映画）。・ が normal 360px → "palt" 300px）が、使わないと決めている
• tnum（等幅数字）も未使用

3.8 縦書き

css/* 該当なし */

• writing-mode: vertical-rl は 2 ページとも 0 要素

4. Component Stylings

Buttons

Primary（塗り）

• Background: #BD120A（--buttonPrimary-backgroundColor）
• Background (hover): #891515（--buttonPrimary-hoverBackgroundColor）
• Text: #ffffff（--buttonPrimary-textColor）
• Padding: 14px 40px
• Border Radius: 1.875rem = 30px（四隅それぞれに個別トークン）
• Border: 1px solid #BD120A
• Font Size: 16px（--cta-fontSize）
• Font Weight: 300（--cta-fontWeight）

CTA のウェイトが 300（Light）。ボタンの文字を太くしない。

Secondary（枠線）

• Background: transparent
• Text: #333333（--buttonSecondary-textColor）
• Border: 1px solid #BD120A
• Padding: 12px 32px
• Border Radius: 30px
• Font Size: 16px / Weight 300

Pill（アイコンボタン）

• Border Radius: 9999px（Tailwind の rounded-full。可視 11 要素）
• 例: Calendar / Arrow right のアイコン円

Inputs

• Border Radius: 2px（CMP 由来の 2px とは別に、サイト本体の入力欄は 4px）
• Focus: rgb(189, 18, 10) 0px 0px 0px 1px inset（赤の内側リング。可視 2 要素）

Cards

• Background: #ffffff / セクション地は #edf2f4
• Border Radius: 30px、または上下だけの 30px 30px 0px 0px / 0px 0px 30px 30px（可視 8 要素）
• Shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px ／ rgba(0, 0, 0, 0.1) 0px 10px 15px（Depth 参照）

Media

• 画像の角丸も --globalMedia-borderRadiusTopLeft 〜 BottomRight の 4 隅個別トークンで 1.875rem = 30px
• 四隅を個別に持つのがこのサイトの設計。片側だけ落とした形（カードの上半分だけ丸い等）を作れるようになっている

5. Layout Principles

Spacing Scale

Container

• ヒーローの帯: 1200 × 380px
• html / body ともに 16px 固定なので、rem はそのまま 16 倍で px に直せる

Grid

• Tailwind のユーティリティで組まれており、固定のカラムトークンは持たない
• 角丸は 1.875rem（30px）と 9999px（full）の 2 種が語彙

6. Depth & Elevation

影は Tailwind の既定値をそのまま使っている（0 0 transparent を含む 3 連の形で出る）。独自の影トークンは持たない。

7. Do's and Don'ts

Do（推奨）

• font-family は "Noto Sans JP", "Noto Sans JP Fallback", ui-sans-serif, system-ui, … を使う（Gotham を前提にしない）
• ウェイトは 400 と 700 の 2 段で考える。300 / 325 / 500 を書いても 400 で出る
• 見出しほど細くする。 H1 / H2 = 300、H3 / H4 = 500、H5 = 700、本文 = 400、CTA = 300
• letter-spacing: normal を貫く
• font-feature-settings: normal を html に書く（既定の揺れを止める）
• 行間はトークンの rem 値をそのまま使う。 H1 2.875rem / H2 2.6875rem / H3 2rem / 本文 1.625rem
• すべてのタイポグラフィ値に Mobile の対を用意する（--h1-fontSize / --h1-fontSizeMobile）
• 角丸は 30px（1.875rem）と 9999px の 2 種
• 本文色は #333333、面は #ffffff / #edf2f4
• CTA は #BD120A 塗り / 白文字 / radius 30px / 16px weight 300 / padding 14px 40px

Don't（禁止）

• Gotham を前提に組まない（@font-face は 6 ウェイトあるが 2 ページとも可視 0 要素）
• font-weight: 325 を書かない（400 で出る。非整数ウェイトは読み込んだ 2 本では再現されない）
• font-weight: 500 や 300 で太さが変わると期待しない（欧文実測で 300 = 400 = 500）
• letter-spacing を足さない
• font-feature-settings: "palt" を足さない（html で明示的に normal にしている設計を壊す）
• 本文色を #000000 にしない（実サイトは #333333 が 732 要素）
• #FF0000 を使わない（OneTrust の色。ブランド赤は #BD120A）
• #891515 / #DCE6E9 を静的な面に使わない（ホバー専用・可視 0 要素）
• 角丸を 4px や 8px にしない（語彙は 30px と full）
• 13.008px / 14.4px / 0.13008px といった端数を真似しない（すべて CMP 由来）

8. Responsive Behavior

Breakpoints

7 幅（1440 / 1200 / 1024 / 834 / 768 / 767 / 375px）で実測した結果、ルートは完全固定。切り替えはトークンの …Mobile 対とメディアクエリで行う。

• html も body も 7 幅すべてで 16px / 24px から 1 度も動かない。 流体（vw）も clamp() も使っていない
• 崖は 767px より下。834px でも 768px でも 767px でも Desktop の値が出る
• Mobile の値はトークン側に --h1-fontSizeMobile: 1.875rem（30px）として用意されている

Desktop / Mobile のトークン対応

16px 以下は一切変えない。 縮むのは H1〜H4 だけで、しかも大きい見出しほど大きく縮む。

タッチターゲット

• Primary ボタン: padding 14px 40px + 16px → 高さ約 54px（満たす）
• Secondary ボタン: padding 12px 32px + 16px → 高さ約 50px（満たす）
• ナビリンク: 16px / 行高 24px → 高さ 24px。モバイルでは縦の当たり判定を確保すること

9. Agent Prompt Guide

クイックリファレンス

Takeda Red:   #BD120A   （hover: #891515）
Text Color:   #333333
Text on Dark: #ffffff
Muted:        #a1a4ac
Surface:      #edf2f4
Background:   #ffffff

Font: "Noto Sans JP", "Noto Sans JP Fallback", ui-sans-serif, system-ui, -apple-system, …
  （Gotham は宣言のみで描画されない。実在ウェイトは 400 / 700 の 2 本）
Root: html 16px 固定 / body 16px（7 幅とも不変）
Body Size: 16px / line-height 1.625rem (26px)
Weight: H1=300 H2=300 H3=500 H4=500 H5=700 Body=400 CTA=300  ← 見出しほど細い
Letter Spacing: normal（例外なし）
font-feature-settings: normal（html に明示）
Border Radius: 1.875rem (30px) / 9999px
Focus Ring: #BD120A 0 0 0 1px inset

プロンプト例

武田薬品のデザインシステムに従って、企業情報ページを作成してください。
- font-family は "Noto Sans JP", "Noto Sans JP Fallback", ui-sans-serif, system-ui, -apple-system
  （Gotham は使わない。実在するウェイトは 400 と 700 だけ）
- 見出しほど細くする: h1 42px/300、h2 36px/300、h3 24px/500、h4 20px/500、h5 16px/700
- 本文 16px/400、line-height 1.625rem(26px)。見出しの行間は h1 2.875rem / h2 2.6875rem / h3 2rem
- letter-spacing は全要素 normal、html に font-feature-settings: normal を書く
- 本文色 #333333、セクション地 #edf2f4、ページ背景 #ffffff
- CTA は #BD120A 塗り / 白文字 / border-radius 30px / 16px weight 300 / padding 14px 40px
- 枠線 CTA は transparent / #333333 / 1px solid #BD120A / radius 30px / weight 300
- 画像・カードの角丸は四隅それぞれ 1.875rem(30px) のトークンで持つ
- フォーカスは #BD120A の inset 1px リング
- モバイル（767px 以下）では h1 30px / h2 24px / h3 20px / h4 18px に落とし、16px 以下は変えない