第一三共（Daiichi Sankyo） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: モリサワ「新ゴ」を TypeSquare で配信し、太さを書体名で切り替える。 字間は一切触らず（letter-spacing: normal が 121 / 114 要素）、行間 1.8 だけで息を作る。色はコーポレートの4色グラデーションと、記事カテゴリごとの色分けで持たせている
• 密度: 低〜中。1ページあたりの可視テキストは 137 / 133 要素と少なく、白地に大きめの要素をゆったり置く
• キーワード: 新ゴ R / 新ゴ DB、TypeSquare、4色グラデーション、字間ノータッチ、ピル型 CTA

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

1. 和文は「新ゴ R」と「新ゴ DB」の2書体で、font-weight は効かない。 TypeSquare（モリサワ）が JS で @font-face を注入し、4 本すべてを font-weight: bold で宣言している（新ゴ DB / Shin Go DeBold / 新ゴ R / Shin Go Regular、いずれも status: loaded）。太さはファミリー名で切り替える設計で、新ゴ R に 700 を当てても太くならない（合成太字も起きない）
2. 字間を設計に入れていない。 letter-spacing: normal が可視 137 要素中 121 要素（下層 133 中 114）。例外はフッターリンクの 1px、グローバルナビの 0.288px（16px × 0.018em）など少数
3. font-feature-settings は 1 要素も無い（palt 0 件）。約物は詰めない
4. CSS Custom Properties が 0 個。 DNN（DotNetNuke）基盤（Portals/ Skins/DAS/ Containers/DAS/）の上に素の CSS を書いており、デザイントークンという層が存在しない。色は hex 直書き

2. Color Palette & Roles

Primary（ブランドカラー）

青が4つある。 #005baa（ブランド）/ #116dc9（CTA）/ #0075c0 / #0070c0。 新規実装では #005baa（文字・ブランド）と #116dc9（ボタン面）の2つに寄せる。 #0075c0 と #0070c0 は 5 の差しかなく、実装上のゆらぎ。

Corporate Gradient（このサイトの署名）

css/* 下層のページタイトル帯。実測 header.PagetitlePane / 154,080 px² */
background: linear-gradient(to right,
  #005baa   0%,     /* コーポレートブルー */
  #00acea  42%,     /* シアン */
  #89ba17  86%,     /* グリーン */
  #cfd300 100%);    /* イエローグリーン */

4 ストップ・左から右。 ロゴ下の帯と下層ページの見出し帯に使う。途中の 42% / 86% という偏った位置が特徴で、等間隔にすると別物になる。

Category Colors（ニュースのカテゴリ色）

角 1 つだけ丸めた塗りタブ（border-radius: 20px 0 0）。文字は白・12〜16.875px / weight 700。

Topic Pills（ESG トピックのタグ）

淡い面＋濃い文字の対。border-radius: 96px / 12px / weight 400 / padding 3px 12px。

Neutral（ニュートラル）

• Text Primary (#000000): 見出し（可視 49 / 48 要素）。このサイトは見出しに純黒を使う
• Text Body (#4d4f53): 本文・リスト（可視 39 要素）。やや青みのあるグレー
• Text Stat (#232526): 数値（可視 9 要素）
• Border (#dddddd / #bbbbbb): カードの枠・入力枠
• Surface (#f6f6f6 / #ececea): 面
• Overlay (rgba(0,0,0,.1)): 画像の上にかぶせる膜（26 要素）
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 body）

3. Typography Rules

3.1 和文フォント

モリサワ「新ゴ」の 2 ウェイトを TypeSquare で配信している。

• 新ゴ R（Regular） — 本文・リスト・キャプション。可視 84 / 77 要素
• 新ゴ DB（DeBold） — 見出し・ナビ・ボタンラベル。可視 49 / 54 要素

3.2 欧文フォント

• HelveticaNeueeTextPro-Roman（Regular 側）/ HelveticaNeueeTextPro-Md（DeBold 側）を先に置き、Helvetica Neue で受ける
• どちらも Web フォント配信されていない（フォント要求は TypeSquare の 5 件のみ）。実機に無ければ Helvetica Neue 以降にフォールバックする
• カルーセルの Prev / Next だけ Arial（2 要素）

3.3 font-family 指定

css/* 本文・通常テキスト（実測 84 要素） */
font-family: "新ゴ R", "Shin Go Regular", HelveticaNeueeTextPro-Roman,
             "Helvetica Neue", YuGothic, "Hiragino Kaku Gothic ProN",
             Meiryo, sans-serif;

/* 見出し・ナビ・ボタン（実測 49 要素） */
font-family: "新ゴ DB", "Shin Go DeBold", HelveticaNeueeTextPro-Md,
             YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

TypeSquare が注入する @font-face は 4 本すべて font-weight: bold。

css/* 実サイト（JS が動的に注入） */
@font-face { font-family: "新ゴ R";  font-weight: bold; src: url("//wf.typesquare.com/3/tsst/dist/ja/ts?…"); }
@font-face { font-family: "新ゴ DB"; font-weight: bold; src: url("//wf.typesquare.com/3/tsst/dist/ja/ts?…"); }
/* 英字別名の "Shin Go Regular" / "Shin Go DeBold" も同じく bold 宣言 */

• ファミリーに実体が 1 本しか無いので、CSS が font-weight: 400 でも 700 でも同じファイルが返る
• 目印は フォント要求の typesquare.com / wf.typesquare.com、および typesquare.js の読み込み
• document.fonts は 4 件とも loaded、unicodeRange は U+0-10FFFF（分割配信なし）

太さを変えたいときは font-weight ではなくファミリー名を差し替える。 font-family を "新ゴ R" から "新ゴ DB" に変える、が正しい操作。

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

html は 4 幅すべて 10px 固定（62.5% 相当）。body だけが 2 段階で流体になる（§8 参照）。下表は デスクトップ（1000px 以上・body 15px） の値。

ウェイトは 400 と 700 の 2 段だけ。 ただし前述のとおり 700 は「新ゴ DB を当てている」という意味であって、ブラウザが太らせているわけではない。

3.5 行間・字間

• 本文の行間: 1.80（body { line-height: 27px } ＝ 15×1.8）。実測でも 1.80 が最多（52 / 45 要素）
• 見出しの行間: 1.30（6 / 21 要素）。小見出しとナビは 1.20
• UI の行間: 1.00（19 / 31 要素）。1 行で収めるラベル
• 字間: normal（121 / 114 要素）。このサイトは字間を触らない
  • 例外: フッターリンク 1px（8 要素）、グローバルナビ 0.288px（6 要素）、下層の一部 0.72px / 0.48px

css/* 実装の型 */
body { font-size: 15px; line-height: 1.8; }   /* letter-spacing は書かない */
.heading { font-family: "新ゴ DB", …; font-size: 38px; line-height: 1.3; }
.footer a { font-size: 12px; letter-spacing: 1px; }   /* ★ここだけ例外 */

letter-spacing を本文に足さない。 字間を開けるのはフッターとナビだけ、という割り切りが このサイトの設計。0.05em のような一律指定を入れると別物になる。

3.6 禁則処理・改行ルール

• word-break / line-break / overflow-wrap の明示指定は無い。ブラウザ既定の禁則処理に任せている
• word-break: auto-phrase は使っていない
• 見出しの改行は <br> で手で入れている（私たちは、／「イノベーションに情熱を。／ひとに思いやりを。」 など）

3.7 OpenType 機能

font-feature-settings は 1 要素も無い（実測 0 件）。 palt も halt も使わない。 約物を詰めないのがこのサイトの組み方。

3.8 縦書き

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

4. Component Stylings

Buttons

Primary（ピル） — 実測 4 要素・詳しく見る

• Background: #116dc9
• Text: #ffffff
• Padding: 13px 68px 14px 44px（左 44px / 右 68px の大きな非対称。右に矢印が入る）
• Border Radius: 50px
• Font Size: 14px / Weight: 400 / Letter Spacing: normal
• Border: なし

Circle（カルーセル操作・ページトップ）

• Background: #ffffff / Icon: #005baa
• Border: 1px solid #dddddd / Border Radius: 50%
• Font Size: 15px

ボタンの文字は太らせない（400）。 CTA は #116dc9、ブランド青 #005baa は文字とアイコンに使う。

Category Tabs

• Background: カテゴリ色（§2）/ Text: #ffffff
• Border Radius: 20px 0 0（左上だけ丸める）／対になる要素は 0 20px 0 0
• Padding: 20px 30px
• Font Size: 16.875px / Weight: 700（＝新ゴ DB）

Topic Pills

• Background / Text: §2 の対で指定
• Border Radius: 96px / Padding: 3px 12px
• Font Size: 12px / Weight: 400

Inputs

• Background: #ffffff / Border: 1px solid #bbbbbb
• Border Radius: 0px（角丸なし）
• Padding: 0 15px / Font Size: 15px

Cards

• Background: #ffffff / Border Radius: 0px
• 画像の上に rgba(0,0,0,.1) の膜（26 要素）
• Shadow: §6 参照

5. Layout Principles

Container

Grid / Gap

gap の宣言は 60px の 1 件のみ。グリッドではなく float / margin 主体の旧来のレイアウト。

6. Depth & Elevation

影は実質 1 種類しかない。 しかも blur: 60px / alpha: 0.07 と極端に広く薄い、輪郭の見えない影。 （もう 1 件測れる rgba(0,0,0,.2) 0 0 18px は OneTrust の Cookie バナーで、サイトの設計ではない。）

7. Do's and Don'ts

Do（推奨）

• 和文は 「新ゴ R」と「新ゴ DB」の 2 ファミリーで組む。太さはファミリー名で切り替える
• 本文 line-height: 1.8、見出し 1.3、ナビ・小見出し 1.2、1 行 UI 1.0
• letter-spacing は書かない。 開けるのはフッターリンク（1px）とグローバルナビ（0.018em）だけ
• CTA は #116dc9 の border-radius: 50px ピル、padding: 13px 68px 14px 44px
• ブランド青 #005baa は文字・アイコン・リンクに使う
• コーポレートグラデーションは 4 ストップ・42% / 86% の位置をそのまま使う
• カテゴリは 1 つの角だけ丸める（20px 0 0）

Don't（禁止）

• font-weight で太さを変えようとしない。 TypeSquare の @font-face は 4 本とも bold 宣言で、 新ゴ R に 700 を当てても太くならない（合成太字も起きない）
• font-feature-settings: "palt" を足さない。 このサイトは約物を詰めない
• 本文に letter-spacing を足さない（121 / 137 要素が normal）
• CSS 変数でトークン化された設計だと思わない（Custom Properties は 0 個）
• 影を増やさない。使うなら rgba(0,0,0,.07) 0 3px 60px の 1 種類だけ
• ボタンのラベルを太字にしない（400）
• #0075c0 / #0070c0 を新規に増やさない。#005baa に統一する

実サイトの注意点（そのまま真似しない）

• タブレット幅で本文が 11.52px まで縮む。 768px で body { font-size: 1.5vw } が効き、 日本語本文として小さすぎる（§8）。新規実装では下限を 14px 程度で止める
• 和文スタックの受け皿が YuGothic, "Hiragino Kaku Gothic ProN", Meiryo の順。 Windows 向けの "游ゴシック Medium" / "Yu Gothic Medium" が入っていないので、 TypeSquare が落ちたとき Windows では游ゴシック Light の細い字になる

8. Responsive Behavior

Breakpoints

print, screen and (…) の形で印刷にも同じレイアウトを当てている。

body のフォントサイズ（★2段の流体）

html は 4 幅すべて 10px 固定。動くのは body の方。

768px → 767px で本文が 11.52px から 26.59px へ 2.3 倍に跳ぶ。 スマートフォン側は「750px 幅で 26px」を基準に設計されており（width=device-width なので 375pt の端末では 13px になる）、タブレット側は 1.5vw で素直に縮む。 1 幅だけ測って「このサイトの本文は 15px」と書かない。 rem は html 固定（10px）なので素直に 10 倍でよいが、body 基準の相対指定は幅で変わる。

タッチターゲット

最小 44px × 44px を確保する。詳しく見る ボタンは実高 約 44px（13+14+17）。

9. Agent Prompt Guide

クイックリファレンス

Brand Blue:  #005baa（文字・アイコン・リンク）
CTA Blue:    #116dc9（ボタンの面）
Gradient:    linear-gradient(to right,#005baa 0%,#00acea 42%,#89ba17 86%,#cfd300 100%)
Heading:     #000000
Body Text:   #4d4f53
Background:  #ffffff
Font (body):    "新ゴ R", "Shin Go Regular", HelveticaNeueeTextPro-Roman,
                "Helvetica Neue", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
Font (heading): "新ゴ DB", "Shin Go DeBold", HelveticaNeueeTextPro-Md,
                YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
Body Size:      15px（デスクトップ）
Line Height:    1.8（本文）/ 1.3（見出し）/ 1.2（ナビ）/ 1.0（1行UI）
Letter Spacing: normal（本文は触らない）
Feature:        なし（palt を使わない）
Radius:         50px（CTA）/ 20px 0 0（カテゴリ）/ 96px（トピック）/ 0（入力・カード）
Shadow:         rgba(0,0,0,.07) 0 3px 60px（1種類のみ）
Container:      1000px（本文）/ 1240px（セクション）

プロンプト例

第一三共のデザインシステムに従って、ニュース一覧セクションを作成してください。
- 本文は font-family: "新ゴ R", … / 見出しは "新ゴ DB", … で指定する。
  太さは font-weight ではなくファミリー名で切り替える
- letter-spacing は書かない（本文は normal。フッターリンクだけ 1px）
- font-feature-settings は使わない
- 記事タイトルは 19px / line-height 1.38 / color #005baa
- 日付は 12px / line-height 1.38 / color #4d4f53
- カテゴリタブは背景 #1d8922（サステナビリティ）/ #bf4c00（製品情報）、
  文字 #ffffff / 16.875px / 新ゴ DB、border-radius: 20px 0 0、padding 20px 30px
- 「詳しく見る」は背景 #116dc9 / 文字 #ffffff / 14px / weight 400 /
  border-radius 50px / padding 13px 68px 14px 44px
- セクション見出しの下に 4 ストップのコーポレートグラデーション帯を敷く
- コンテナ幅 1000px、本文の line-height は 1.8