アステラス製薬（Astellas Pharma） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 1 色のクリムゾンだけで全部を持たせる。 面・文字・リンク・ナビの選択状態・丸い矢印ボタン、すべてが #d91e49。角丸と余白と行間はひとつの流体スケールから取るため、画面幅が変わると全体が同じ比率でゆっくり縮む
• 密度: 低い。1364px のコンテナに大きな余白を取り、カードを帯の境界にまたがせて重ねる
• キーワード: クリムゾン単色、流体タイポグラフィ、カードオフセット、丸い矢印、淡いピンクの地

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

1. 文字サイズも余白も角丸も、同じ clamp() のスケールから出ている。 9 段の --step-*（文字）と 9 段 + 8 組の --space-*（余白）があり、どれも clamp(最小, 基準 + N vw, 最大) の形。ルートは 16px 固定のまま、各要素のサイズだけが連続的に動く（h1 は 1440px で 41.4992px → 375px で 37.8977px）。段差（ブレークポイントの崖）は無い
2. --step-* は 2 系統宣言されていて、効いているのは後に来た比率 1.21 のほう。 先に clamp(2.6438rem, 2.216rem + 1.8752vw, 3.8147rem)（比率 1.25／Utopia の既定）が並び、後から比率 1.21 の組が同じ名前で上書きする。実測はすべて後者（--step-5 = 2.5937rem = 41.4992px で、前者の 3.8147rem = 61.04px は 1 要素も出ない）
3. font-feature-settings が 1 要素も無い。 2 ページ・計 192 要素を走査して palt も halt も 0。字間も letter-spacing: normal が可視 82/85・104/107 要素。このサイトは和文を一切詰めない
4. --color-primary-* の色ランプは青で、ブランド色のクリムゾンはそこに入っていない。 --color-primary-500: #4454ff（青）、--color-secondary-500: #38d996（緑）、--color-tertiary-500: #ffd41e（黄）、--color-additional-600: #d46bcf（マゼンタ）と 48 個の原色が宣言されているのに、実際に使われる --primary-element-mid 等はすべて #D91E49 を直接指す。原色ランプは雛形のまま放置されている
5. html { font-size: 1pc } という珍しい書き方。1 パイカ = 16px なので結果は既定どおりだが、rem 換算の基準として読むときに迷いやすい。html の地色は #FEF8F9（淡いピンク）で、body が白を被せている

2. Color Palette & Roles

Primary（ブランドカラー）

Neutral（ニュートラル）

• Text Primary (#515170): 本文・リンク。可視 14 要素（トップ）／ 19 要素（下層）。純黒でも #333 でもなく、わずかに紫に寄ったグレー。--color-topnav-background と同じ値で、トップのユーティリティバーの地色にも使っている
• Text Secondary (#4d4d4f): 補足・キャプション（可視 10 要素／9 要素）
• Navy (#0e2753): ユーティリティバーの地、ナビのラベル（--primary-nav-label-resting）。可視面 3 要素
• Navy Outline (#0e4189): お問い合わせ の線ボタンの線と文字だけ（--tertiary-button-resting）。1 要素
• Text on Dark (#ffffff): 可視 48 要素／45 要素で最多
• Background（body） (#ffffff): pageBackground.resolved = rgb(255,255,255)（根拠 body）
• Background（html） (#fef8f9): --primary-element-pale。body の外側に出る淡いピンク
• Surface (#f4f4f4 / #f5f5f5): カード・タグの面

宣言されているが使われていない色（実装しない）

• 原色ランプ 48 個（--color-primary-* 青 / --color-secondary-* 緑 / --color-tertiary-* 黄 / --color-additional-* マゼンタ）は 2 ページとも可視 0
• --secondary-button-resting: #ecad36（アンバー）、--secondary-title-page-title: #611923（小豆色）も 可視 0
• --gradient-element-pattern: linear-gradient(135deg, #c5caff 0%, #eceeff 50.52%, #c1f3de 100%)（青→緑）も可視 0。グラデーションで使うのは --gradient-navigation-separator（#FCE8EC00 → #D12B43 50% → #FCE8EC00）だけ

外部ウィジェット由来（実装しない）

• #3860be（OneTrust の Filter Button / Clear）、#0072e4（同じくフォーカスリング）は Cookie 同意バナー（OneTrust）の色。サイトの設計色ではない

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP（Google Fonts・可変フォント 100 900）。document.fonts 上は loaded 34 サブセット / unloaded 90 サブセットで、これは Google の unicode-range 分割による正常な状態
• 明朝体: 使わない。セリフ系の和文は 2 ページとも可視 0 要素

3.2 欧文フォント

• 専用の欧文書体を持たない。欧文・数字も Noto Sans JP で組む（可視 73 要素／89 要素がすべて Noto Sans JP）
• Material Symbols Rounded（300・loaded）がアイコン専用で 12 要素／18 要素

3.3 font-family 指定

css/* 実サイトの宣言をそのまま */
font-family: "Noto Sans JP";

フォールバックが 1 つも書かれていない。 Noto Sans JP の配信が落ちるとブラウザ既定のセリフ体に落ちる可能性がある。正しくは:

css/* 正しい指定（受け皿を置く） */
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
             "Yu Gothic", Meiryo, sans-serif;

宣言だけで使われていない書体（実装しない）

document.fonts に Petrona / Plus Sans Jakarta / IBM Plex Sans / Roboto / Roboto Slab / Noto Serif / FontAwesome / slick / Material Icons が並ぶが、全部 unloaded で可視 0 要素。--font-petrona: "Petrona" と --font-jakarta: "Plus Sans Jakarta" も宣言されているのに、--font-title は最終的に "Noto Sans JP" に上書きされている。見出し用のセリフ体は存在しない。

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

サイズはすべて --step-*（clamp()）で、比率 1.21（= 1.1²）の等比。以下は 1440px のとき。

css/* 実サイトの宣言（効いているほう・比率 1.21） */
--step--2: clamp(0.5879rem, 0.5505rem + 0.1662vw, 0.683rem);
--step--1: clamp(0.7172rem, 0.6743rem + 0.1908vw, 0.8264rem);
--step-0:  clamp(0.875rem,  0.8259rem + 0.2183vw, 1rem);
--step-1:  clamp(1.0675rem, 1.0115rem + 0.2489vw, 1.21rem);
--step-2:  clamp(1.3024rem, 1.2388rem + 0.2825vw, 1.4641rem);
--step-3:  clamp(1.5889rem, 1.5171rem + 0.3191vw, 1.7716rem);
--step-4:  clamp(1.9384rem, 1.8578rem + 0.3584vw, 2.1436rem);
--step-5:  clamp(2.3649rem, 2.2749rem + 0.3998vw, 2.5937rem);

h1 { font-size: var(--step-5); font-weight: 400; }

• px だけで書かない。 上の表の px は 1440px のときの値で、834px では 1px 近く、375px では 3.6px 小さくなる
• ウェイトは 400 と 600 の 2 段だけ。 可視 66/93 要素が 400、18/13 要素が 600。700 は 2 ページとも 1 要素だけ（OneTrust の Apply）で、サイト本体には存在しない
• 見出しは太らない。 h1 / h2 / h3 はすべて font-weight: 400。太るのはボタンラベルとリンク（600）

3.5 行間・字間

css/* 実サイトの既定 */
line-height: 1.2;          /* 無単位。可視 58 要素（トップ）／60 要素（下層）で最多 */
letter-spacing: normal;    /* ★既定。可視 82/85・104/107 要素 */

• 行間は無単位の比率で書く。 使われているのは 1.2（見出し・UI）と 1.6（本文ブロック）の 2 つだけ（トップ 58 + 12、下層 60 + 26）。1.5 が 2 要素、1.0 がアイコン
• html { line-height: 1.15 }（normalize.css 由来）が残っていて、body の実効行送りは 18.4px になる。本文ブロックには必ず 1.6 を宣言する（しないと 1.15 が降りて和文が詰まる）
• 字間は normal のまま。 可視要素で normal 以外は 0.13008px が 3 要素だけで、これは OneTrust バナー（13.008px × 0.01em）。サイト本体は字間を一切いじらない
• CSS 全文には letter-spacing: .01em の宣言があるが、当たっているのは上記の外部ウィジェットのみ

3.6 禁則処理・改行ルール

cssbody { word-break: auto-phrase !important; }

• auto-phrase を body に当てている。 日本語の改行位置を文節単位に寄せる指定で、見出しの折り返しが自然になる。これはサイトの設計の一部なので外さない
• CSS 全文には break-word / break-all / keep-all も混在するが、body に効いているのは auto-phrase

3.7 OpenType 機能

使っていない。 2 ページ・計 192 要素を走査して font-feature-settings が normal 以外の要素は 0 件。

• palt を足さない。 このサイトの「ゆるさ」は約物が詰まっていないことで出ている
• 同じ理由で letter-spacing の負値も当てない

3.8 縦書き

使っていない（writing-mode: vertical-* は 2 ページとも 0 要素）。

4. Component Stylings

Buttons

塗りと線の 2 種類がペアで並ぶ（採用情報 / ニュース）。

css/* Primary（塗り） */
.btn-primary {
  background: #d91e49;
  border: 2px solid #d91e49;
  color: #ffffff;
  border-radius: var(--space-3xs);   /* 1440px で 6.08px */
  padding: var(--space-2xs) var(--space-s);  /* 11.04px 22.08px */
  font-size: var(--step-0);          /* 16px */
  font-weight: 600;
  box-shadow: none;
}
.btn-primary:hover  { background: #b4273b; border-color: #b4273b; }
.btn-primary:active  { background: #982334; border-color: #982334; }

/* Secondary（線） */
.btn-secondary {
  background: transparent;
  border: 2px solid #d91e49;
  color: #d91e49;
  border-radius: var(--space-3xs);
  padding: var(--space-2xs) var(--space-s);
  font-size: var(--step-0);
  font-weight: 600;
}

/* Tertiary（線・ネイビー）— ヘッダーの お問い合わせ だけ */
.btn-tertiary {
  background: transparent;
  border: 2px solid #0e4189;
  color: #0e4189;
  border-radius: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);  /* 6.08px 16.96px */
  font-size: var(--step--1);         /* 13.2224px */
  font-weight: 400;
}

• 線は 2px。 1px にしない（塗りと線を並べたときに高さが揃わなくなる）
• 影は付けない（box-shadow: none）

丸い矢印ボタン（このサイトの要）

css.arrow-circle {
  width: var(--space-l); height: var(--space-l);   /* 1440px で 44px */
  border-radius: 50%;
  background: #d91e49;
  color: #ffffff;
  display: grid; place-items: center;
  padding: var(--space-3xs);         /* 6.08px */
  font-family: "Material Symbols Rounded";
  font-size: var(--space-m);         /* 22.08px — アイコンのサイズも余白トークン */
}

• もっと詳しく のテキストリンクの右に必ずこの円が付く。面 8 要素／6 要素
• border-radius: 50% はこの円とアバターだけ（可視 8 要素／6 要素）

Cards

css.card {
  background: #ffffff;
  border-radius: var(--space-3xs);                    /* 6.08px */
  box-shadow: 0 11px 44px rgba(81, 81, 112, 0.2);     /* 影の色は本文色と同じ */
  padding: var(--space-s);                            /* 22.08px */
}
.card:hover {
  box-shadow: 0 9px 34px rgba(81, 81, 112, 0.2),
              0 9px 13px rgba(81, 81, 112, 0.35),
              0 4px 4px  rgba(81, 81, 112, 0.2);
}

• カードは帯の境界にまたがる。 クリムゾンの帯の上に白いカードを半分はみ出させる構成（.cmp-card-offset）が全ページで繰り返される
• 影は黒ではなく #515170 の 20%。本文色と同じ色で落とす

Tags / Chips

css.chip {
  border-radius: var(--space-m);     /* 1440px で 22.08px */
  border: 1px solid #d91e49;
  color: #d91e49;
  background: #fdf2f4;               /* 選択時 */
}

5. Layout Principles

Spacing Scale

余白は 9 段 + 8 組の clamp()。角丸・ギャップ・アイコンサイズも同じトークンから取る。

ペアのトークン（--space-s-l 等）は「小さいほうの最小値から大きいほうの最大値まで」を 1 本の clamp() でつなぐもの:

css--space-s-l: clamp(1.0625rem, 0.4459rem + 2.7027vw, 2.75rem);  /* 17px → 44px */

• 実測で出てくる角丸は 6.08 / 11.04 / 16.96 / 22.08px の 4 つで、これは --space-3xs 〜 --space-s そのもの（可視 40 + 15 + 8 + 6 / 44 + 18 + 15 + 6 要素）。角丸専用のトークンは無い
• 実測のギャップも 11.04 / 16.96 / 22.08 / 44px で同じスケール

Container

css.container {
  max-width: var(--grid-max-width);  /* 85.25rem = 1364px */
  margin-inline: auto;
}

• 1364px が 14 要素（トップ）／ 12 要素（下層）で最多。 1200px でも 1280px でもない
• 中のナローカラムは 396px / 440px / calc(60% + 88px)（88px = --space-2xl）

Grid

css--grid-columns: 12;
--grid-gutter: calc(var(--space-s-l) / 2);   /* 1440px で 22px */

12 カラム。--column-1 〜 --column-7 に 12.78% / 16.07% / 17.56% / 14.6% / 14.6% / auto / 6.45% という不均等なカラム幅が別途宣言されていて、パイプライン表（/jp/science）専用。

6. Depth & Elevation

影は 2 種類だけ。

• 影の色を黒に丸めない。 既定の影は rgba(81, 81, 112, 0.2) で、これは本文色 #515170 と同じ RGB
• 44px は --space-l と同値。ぼかし半径も余白スケールから取っている
• filter: drop-shadow() は使っていない（0 要素）

7. Do's and Don'ts

Do（推奨）

• 文字・余白・角丸・影のぼかしを、1 本の clamp() スケールから取る。 px を直接書かない
• --step-* は比率 1.21（= 1.1²）の等比で組む。1.25 ではない
• ブランド色は #d91e49 1 色で通す。ホバー #b4273b、押下 #982334
• 見出しは font-weight: 400。太らせるのはボタンとリンク（600）だけ
• 行間は 1.2（見出し・UI）と 1.6（本文）の 2 つを無単位で書く
• word-break: auto-phrase を body に当てる
• もっと詳しく には必ず丸いクリムゾンの矢印を添える
• 影は rgba(81, 81, 112, 0.2)（本文色の 20%）で落とす
• カードは帯の境界にまたがらせる

Don't（禁止）

• font-feature-settings: "palt" を書かない。 2 ページ・192 要素で 0 件。約物を詰めない設計
• letter-spacing を当てない。 既定は normal。実測で見える 0.13008px は OneTrust 由来
• font-weight: 700 を使わない。 サイト本体は 400 と 600 の 2 段
• --color-primary-*（青）・--color-secondary-*（緑）・--color-tertiary-*（黄）・--color-additional-*（マゼンタ）を実装しない。 48 個とも可視 0 の雛形
• Petrona / Plus Sans Jakarta / IBM Plex Sans / Noto Serif を読み込まない。 すべて unloaded・可視 0。見出し用セリフ体は存在しない
• font-family を "Noto Sans JP" 単独で書かない（実サイトはそうだが受け皿が無い）
• 角丸に px を直書きしない。 6.08px は --space-3xs の 1440px での値で、375px では 4px になる
• 影を黒にしない。rgba(0,0,0,.2) はモーダル専用
• #3860be / #0072e4 を実装しない（OneTrust の色）

8. Responsive Behavior

Breakpoints

css/* 実サイトの最頻（上位 5 件） */
@media only screen and (min-width: 320px) and (max-width: 1024px) { }  /* 339 箇所 */
@media (max-width: 1024px) { }                                        /* 166 箇所 */
@media only screen and (min-width: 320px) and (max-width: 767.98px) { } /* 145 箇所 */
@media only screen and (min-width: 768px) and (max-width: 1024px) { }  /* 120 箇所 */
@media only screen and (min-width: 1024.1px) { }                       /*  93 箇所 */

• 境界は 1024 / 768 の 2 本。 767.98px と 1024.1px という端数でデスクトップ側と重ならないようにしている
• ただしタイポグラフィはブレークポイントを使わない。 --step-* / --space-* が clamp() で連続に動くため、6 幅（1440 / 1200 / 834 / 768 / 767 / 375px）を測っても崖が 1 つも無い

タッチターゲット

• 丸い矢印ボタンは --space-l = 1440px で 44px、375px で 34.08px。モバイルでは 44px を下回るので、最小サイズを別途保証する

フォントサイズの調整

• ルートは全幅 16px 固定（html { font-size: 1pc }）。body も 16px・行送り 18.4px で固定
• 変わるのは各要素のサイズだけ。1440px → 375px で全体が約 8.7% 縮む（h1 41.4992px → 37.8977px）
• rem では追従しない。 再現には clamp() の式をそのまま書く

9. Agent Prompt Guide

クイックリファレンス

ブランド色: #d91e49（クリムゾン・唯一の彩度色）
ホバー/押下: #b4273b / #982334
本文色: #515170（紫寄りグレー）／補足 #4d4d4f
ネイビー: #0e2753（ユーティリティバー）／#0e4189（線ボタン）
地色: body #ffffff ／ html #fef8f9
書体: "Noto Sans JP"（Google Fonts 可変・受け皿を足すこと）
ウェイト: 400 と 600 の 2 段（700 は使わない）
文字サイズ: --step-* 比率 1.21 の clamp()（1440px で 41.4992 / 34.2976 / 28.3456 / 23.4256 / 19.36 / 16 / 13.2224 / 10.928px）
行間: 1.2（見出し・UI）/ 1.6（本文）無単位
字間: normal（一切いじらない）
palt: 使わない（0 要素）
word-break: auto-phrase
角丸: --space-3xs〜s（1440px で 6.08 / 11.04 / 16.96 / 22.08px）
影: 0 11px 44px rgba(81,81,112,.2)
コンテナ: 1364px（= 85.25rem）/ 12 カラム
ブレークポイント: 1024 / 768（タイポには使わない）

プロンプト例

アステラス製薬のデザインシステムで製品紹介ページを作って。 ブランド色は #d91e49 の 1 色だけ、本文は #515170。 書体は Noto Sans JP、ウェイトは 400 と 600 の 2 段で、見出しも 400 のまま。 文字サイズ・余白・角丸はすべて clamp() の流体スケールから取る（文字は比率 1.21。1440px で h1 = 41.4992px、本文 16px、リンク 13.2224px）。 palt と letter-spacing は書かない。 行間は見出し 1.2 / 本文 1.6 を無単位で。 body に word-break: auto-phrase。 カードは角丸 6.08px・影 0 11px 44px rgba(81,81,112,.2) で、クリムゾンの帯の境界にまたがらせる。 「もっと詳しく」のリンクには直径 44px の丸いクリムゾンの矢印を添える。 コンテナは 1364px。