大塚製薬（Otsuka Pharmaceutical） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 温かみのあるオフホワイト（#f5f4f2）の地に、角丸 20px の白いカードを敷き詰める。製薬企業の硬さを角丸と余白で解く設計
• 密度: 低い。本文の行間は 2.0 倍（実測 106 要素）で、情報量より読みやすさに振っている
• キーワード: TBUDゴシック、UD書体、角丸20px、行間2.0、字間ゼロ

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

1. 和文は TBUDゴシック（モリサワ TypeBank の UD 書体）を TypeSquare で配信している。 実測 TBUDゴシック R 160 要素（下層）／136 要素（トップ）。<body class="typesquare_option"> と typesquare.js → wf.typesquare.com/ab.woff の要求で確定。UD書体を本文に全面採用している企業サイトは珍しい
2. 太さは font-weight ではなくファミリー名で切り替える。 @font-face は TBUDゴシック R も TBUDゴシック B も Sharoa Pro Regular もすべて font-weight: bold で宣言されている（TypeSquare の方式）。太字が要る 1 要素だけ font-family を TBUDゴシック B に差し替えている（実測 1 要素・バーチャル工場見学）。CSS の font-weight を上げても太くならない
3. letter-spacing は全要素 normal。 トップ 143/143 要素、下層 74/74 要素。例外はひとつも無い。font-feature-settings も 0 件で、palt も使っていない。詰めない・空けないのがこのサイトの構えで、代わりに行間 2.0 で余裕を作る

CSS Custom Properties は 0 個（トップ・下層とも）。色もサイズもすべて実値で書かれている。

2. Color Palette & Roles

Primary（ブランドカラー）

青と赤の役割は完全に分かれている。 青は「読む・進む」（リンクとアウトライン）、赤は「新しい」（New バッジとカルーセルの現在位置）。赤を CTA の面色に使わない。

Neutral（ニュートラル）

• Background (#f5f4f2): ページ背景。可視 64 要素。pageBackground.resolved = rgb(245,244,242) / 根拠 body
  • 注意: トップは heroCovered: true（1440×777 のヒーロー画像が全面を覆う）。ヒーローの青空はページの地色ではない。 地色は #f5f4f2
• Surface (#ffffff): カードの面。角丸 20px の白カードがこの地色の上に乗る構造
• Text Primary (#000000): 本文・見出し（可視 77 要素）。純黒を使う
• Text Muted (#5c5c5c): フッターの規約リンク類（可視 11 要素）
• Text on Dark (#ffffff): 赤バッジ・青ドット上の文字（可視 14 要素）

3. Typography Rules

3.1 和文フォント

• 既定: TBUDゴシック R（モリサワ TypeBank の UD ゴシック）。TypeSquare 配信・loaded 済。実測 160 要素（下層）
• 太字: TBUDゴシック B。同じく TypeSquare 配信。R とは別ファミリーとして指定する
• フォールバック: 游ゴシック体 → ヒラギノ角ゴ Pro → メイリオ の順。実測 ヒラギノ角ゴ ProN が 9 要素だけ別スタックで出る

3.2 欧文フォント

• Sharoa Pro Regular（モリサワ TypeBank の欧文）。TypeSquare 配信・loaded 済。実測 5〜7 要素。English 切替、Otsuka-people creating new products... のような欧文見出しに使う
• 和文本文（TBUDゴシック R のスタック）側の欧文は TBUDゴシック R が持つ字形で出る

3.3 font-family 指定

css/* 和文本文（既定） */
font-family: "TBUDゴシック R", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic",
             "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
             Osaka, Arial, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* 和文の太字（R とは別ファミリー） */
font-family: "TBUDゴシック B", 游ゴシック体, YuGothic, /* 以下同じ */;

/* 欧文 */
font-family: "Sharoa Pro Regular", Arial, メイリオ, Meiryo,
             "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Osaka,
             游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic",
             "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

@font-face はすべて font-weight: bold で宣言されている（TBUDゴシック R / TBUDゴシック B / Sharoa Pro Regular の3本とも、document.fonts で loaded）。TypeSquare はウェイトごとに別ファミリーを配信する方式なので、font-weight の値は描画される太さを決めない。

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

• 実測のウェイト分布は 500 が 133 要素（トップ）/ 72 要素（下層）、400 が 10 要素、700 が 2 要素。 事実上 1 段しかない
• font-weight: 700 を当てても太くならない。 太字は font-family: "TBUDゴシック B" に差し替えて作る

3.5 行間・字間

• line-height は無単位の 2（body 16px に対して 32px。12px→24px、14px→28px とサイズに比例して再計算されることを実測で確認）
• 実測の行間比: 2.00 が 106 要素（トップ）/ 59 要素（下層）で最多。 次が 1.60（11 要素）、1.42（9 要素）、1.56、1.90
• モバイル（≤749px）では body の行間が 1.75 に下がる（body 12px / line-height 21px）
• letter-spacing は normal 一択。 トップ 143/143 要素、下層 74/74 要素。em でも px でも指定していない

行間を px で書かない。 無単位の 2 で継承させる設計なので、px に直すとサイズ違いの要素で破綻する。

3.6 禁則処理・改行ルール

• word-break: auto-phrase は使っていない
• 見出しの改行は HTML 側の <br> と文言調整で制御している

3.7 OpenType 機能

• font-feature-settings は 0 件。palt も halt も使っていない（トップ・下層とも）
• TBUDゴシック は UD 書体で字面が大きく、約物を詰めない前提の設計。palt を足すと意図と変わる

3.8 縦書き

• 縦組みは 0 要素。 writing-mode は全ページ horizontal-tb

4. Component Stylings

border-radius: 20px がこのサイトの基準（実測 46 要素で最多）。カードもボタンも 20px に揃う。

Buttons

Outline（キャンペーン一覧）

• Background: transparent
• Text / Border: 1px solid #426bba / #426bba
• Padding: 9px 32px 10px
• Border Radius: 20px
• Font: 14px / weight 500 / letter-spacing normal

Pill（事業セレクタ 医療関連事業）

• Background: #ffffff / Text: #000000
• Padding: 10px 40px
• Border Radius: 100px（完全な丸）
• Font: 20px / weight 500

Language Switch（English）

• Background: #f5f4f2 / Text: #000000
• Padding: 2px 0px 0px
• Border Radius: 15px
• Font: 12px / weight 500 / Sharoa Pro Regular

Badges

New Badge（角丸）

• Background: #b01c2e / Text: #ffffff
• Padding: 1px 10px 0px
• Border Radius: 10px
• Font: 14px / weight 500

New Badge（左端が角・右端が丸）

• Background: #b01c2e / Text: #ffffff
• Padding: 0px 23px 0px 17px
• Border Radius: 0px 100px 100px 0px（画像の左端から生やすリボン型）
• Font: 12px / weight 500

Carousel Dot

• 現在位置: Background #426bba / Border 1px solid #426bba / Radius 50%
• 非選択: Background #ffffff / Border 1px solid #426bba / Radius 50%

Cards

• Background: #ffffff
• Border: なし
• Border Radius: 20px（18px / 15px の変種あり）
• Shadow: 0 3px 4px rgba(0,0,0,0.1)
• 下層のリンクカードは 0 3px 3px rgba(0,0,0,0.1)（実測 12 要素）

Tabs

• カテゴリタブの面: #bac4e3（薄青）/ Text #000000
• 左端のタブだけ border-radius: 20px 0px 0px 20px

5. Layout Principles

Spacing Scale

Container

• Max Width: 1220px（実測 5 要素・下層 4 要素で最多）
• 全幅セクション: 1920px
• 本文カラム: 900px / 狭いカラム: 460px

Grid

• トップは全面ヒーロー（1440×777 の画像）＋ 角丸カードの 2〜3 カラム
• 下層は 1220px のコンテナに白カードを縦積み

6. Depth & Elevation

• 影はすべて rgba(0,0,0,0.1) の黒 10%。 色味は付けていない
• ぼかしは 3〜6px と浅い。 浮かせるのではなく「紙を一枚置いた」程度の段差

7. Do's and Don'ts

Do（推奨）

• 和文は "TBUDゴシック R" をスタック先頭に置く（TypeSquare 契約が無い環境では游ゴシック体に落ちる前提で書く）
• 太字は font-family: "TBUDゴシック B" に差し替えて作る
• line-height は無単位の 2 で body に 1 回だけ書いて継承させる
• letter-spacing は normal のままにする
• 角丸は 20px を基準にする
• 影は 0 3px 4px rgba(0,0,0,0.1) の 1 種類で足りる
• ページの地色は #f5f4f2、カードは #ffffff の二層で組む

Don't（禁止）

• font-weight: 700 で太字を作らない。 @font-face が全部 bold 宣言なので太さは変わらない
• font-feature-settings: "palt" を足さない（実測 0 件。UD 書体の字面設計と衝突する）
• letter-spacing を em で配らない（実測 143/143 要素が normal）
• line-height を px で書かない（無単位 2 が降る設計）
• 赤 #b01c2e を CTA の面色に使わない（New バッジ専用）
• ヒーローの青をページ背景色だと思わない（heroCovered: true。地色は #f5f4f2）
• CSS Custom Properties は実測 0 個。変数があるつもりで書かない

8. Responsive Behavior

Breakpoints

• メディアクエリに print が併記されている（print, screen and (min-width: 750px)）。印刷時は PC レイアウトで出る設計

フォントサイズの調整

• html は 6 幅すべてで 10px 固定（1440 / 1200 / 834 / 768 / 767 / 375px で実測）。流体ではない
• body だけが 750px を境に切り替わる:

モバイルでは本文が 12px まで落ち、ウェイトも 500 → 400 に下がる。 2.05 倍のような跳ね方はしないが、行間比まで 2.0 → 1.75 に変わるので、px に読み替えて実装しない。

タッチターゲット

• ピル型ボタン: 10px 40px のパディングで 20px の文字を包む（高さ 約 50px）
• アウトラインボタン: 9px 32px 10px + 14px（高さ 約 40px）

9. Agent Prompt Guide

クイックリファレンス

和文:        "TBUDゴシック R"（TypeSquare / モリサワ TypeBank UD）
和文太字:    "TBUDゴシック B" ← ファミリー名で切り替える
欧文:        "Sharoa Pro Regular"
背景:        #f5f4f2
カード面:    #ffffff
ブランド青:  #426bba（リンク・アウトライン）
差し色の赤:  #b01c2e（New バッジのみ）
文字:        #000000 / 補助 #5c5c5c
行間:        2（無単位）／ SP は 1.75
字間:        normal（全要素）
角丸:        20px
影:          0 3px 4px rgba(0,0,0,0.1)
コンテナ:    1220px
BP:          749.98px / 750px
palt:        使わない

プロンプト例

大塚製薬のデザインで作って。和文は "TBUDゴシック R" を先頭に置いた游ゴシック体フォールバックのスタック、太字が要るところは font-weight を上げずに "TBUDゴシック B" にファミリーごと差し替える（TypeSquare はウェイト別に別ファミリーを配信するので font-weight では太くならない）。地色は #f5f4f2、その上に border-radius: 20px / box-shadow: 0 3px 4px rgba(0,0,0,0.1) の白いカードを置く。line-height は無単位の 2 を body に 1 回だけ書いて継承させ、letter-spacing は全要素 normal、font-feature-settings は書かない。 リンクとアウトラインボタンは #426bba、New バッジだけ #b01c2e。コンテナ 1220px、749px 以下で body を 12px / line-height 1.75 / weight 400 に落とす。