東宝（TOHO） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: サイト全体に font-feature-settings: "halt" をかけ、全角約物を一律に半角幅へ詰める。 色はほぼ黒の紺 #03021F と青 #3036E6、そして暗部から光へ抜ける radial-gradient。映画館の暗がりを地にして、作品のビジュアルを並べる
• 密度: 高い。14px / 15px の文字でグリッドを詰め、行間 1.5 で組む。本文ブロックだけ 1.7
• キーワード: halt、ほぼ黒の紺、ラジアルグラデーション、角丸 4px、Google Fonts 1 本

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

1. font-feature-settings: "halt" が 1017 要素にかかっている。 横組み専用（"halt" @ horizontal-tb 1017 要素、縦組みは 0）。下層ページでも 669 要素。palt ではなく halt で、文字ごとに詰め幅を変えるのではなく全角約物を一律に半角幅へ揃える。実測で 40px の 「東京」、（映画）。・ が normal 360px → "halt" 300px（16.7% 詰まる）
2. ヒーローの Moments for Life は画像。 <h1> の中が <img src="common/img/top/heading.webp" alt="Moments for Life" class="heading-img">（350×30px）＋ 和文テキスト「その時間が、人生の力になる。」という構造。Times 風のセリフに見えるのはこの WebP
3. .font-junge { font-family: Junge, serif } は定義されているが機能していない。 Junge は document.fonts で unloaded、フォントファイルの要求 0 件（gstatic への 37 件はすべて Noto 系）、document.fonts.check('16px Junge') が false、そして適用要素 0。Noto Serif JP 500 も宣言のみで可視 0
4. 実際に描画される書体は 1 本だけ。 "Noto Sans JP", Noto-Sans-Fallback, sans-serif が可視 163 要素。ほかは素の sans-serif 7 要素と "Noto Sans", sans-serif 1 要素

CSS Custom Properties は 23 個すべて自社トークン（プラットフォーム由来 0）。命名が --Bg_white / --Toho_Blue / --Primary_black の PascalCase ＋ アンダースコアに --Owned-media-bg-gray のケバブが混ざる。

2. Color Palette & Roles

Primary（ブランドカラー）

社名のついた --Toho_Blue: #003692 は実装されていない。 画面に出る青は --Primary_blue: #3036E6 の方。--Toho_Blue を使わない。

Secondary（宣言のみ・単色としては未使用）

Secondary の 4 色は単色の面としては一度も出てこない。 画面に現れるのは下のラジアルグラデーションの中だけで、しかも停止色は #D6FFB6 / #C191FF / #3548E5 / #09011A とトークンの値と一致しない。色の語彙は宣言されているが、実装はグラデーション 1 本に集約されている。

Gradient（実装の主役）

css/* CTA と CMP の OK ボタン。可視 2 要素 */
background: radial-gradient(70% 220% at 100% 0%,
  rgb(214, 255, 182) 0%,     /* #D6FFB6 */
  rgb(193, 145, 255) 20%,    /* #C191FF */
  rgb(53, 72, 229) 55%,      /* #3548E5 */
  rgb(9, 1, 26) 100%);       /* #09011A */

/* セクションの地 */
background: linear-gradient(rgb(224, 224, 227) 27.4%, rgb(255, 255, 255) 100%);

70% 220% at 100% 0% と 0% / 20% / 55% / 100% の停止位置を丸めない。 右上の 1 点から黄緑→藤色→青→ほぼ黒へ抜ける、このサイト唯一の「色」。

Neutral（ニュートラル）

• Text White (#ffffff): --Text_white / --Bg_white。可視 53 要素。暗い地の上の文字
• Text Black (#2E313B): --Text_black。可視 22 要素
• Text Sub Black (#64687A): --Text_sub_black。可視 10 要素 / 面 6 要素。補助情報・タグ
• Text Sub White (#E0E0E3): --Text_sub_white。可視 18 要素 / 面 8 要素
• Divider Gray (#D1D3DE): --Devider_gray（綴りは実サイトのまま）。罫線 46 要素でこのサイト最多の区切り線
• Card Dark (#1a1a1a): 作品カードの地（可視 34 要素）。トークン化されていない直書き
• Bg Gray (#F5F5F5): --Bg_gray。お知らせの帯（可視 4 要素）
• Bg Sub Gray (#EBEBEB): --Bg_sub_gray。面 7 要素
• Secondary Gray (#A6A5AD): --Secondary_gray。文字 3 要素
• Owned Media Bg (#272930): --Owned-media-bg-gray。可視 0 要素
• Focus (#8ab4f8): --focus-color
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255, 255, 255) / 根拠 viewportTopBySample）

トップの heroCover は heroCovered: true（div が 1440×660 を rgb(0,0,0) で塗る）だが、html / body ともに塗り指定が無い。 コンテンツ領域の地色は UA 既定の白で、下層ページでは 12/12 サンプルが白。ヒーローの黒をページ背景と取り違えない。

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: Noto Sans JP（Google Fonts）。400 / 500 / 600 / 700 が loaded
• 明朝体: 使わない。Noto Serif JP 500 が @font-face にあるが unloaded かつ可視 0 要素
• Noto-Sans-Fallback の @font-face は status: error（読み込みに失敗している）。スタック 2 番目に置かれているが機能していない

3.2 欧文フォント

• サンセリフ: Noto Sans（loaded）。ただし可視 1 要素のみ。欧文の大半は Noto Sans JP のラテングリフで組まれる
• セリフ: 使えていない。 .font-junge { font-family: Junge, serif } が CSS にあるが、Junge は読み込まれない（フォント要求 0 件・unloaded・check() が false）。適用要素も 0
• ヒーローのセリフ体は書体ではなく画像（heading.webp 350×30px）

実サイトはこうだが、正しくはこう。 .font-junge を使うなら Google Fonts の <link>（family=Junge）を足す必要がある。現状はクラスだけが存在して書体が来ないので、もし適用されれば generic の serif ＝ 閲覧環境の既定セリフ（macOS は Times、Windows は Times New Roman）で出る。環境ごとに別の書体になる。

3.3 font-family 指定

css/* 本文・UI（実際に描画されるのはこれ 1 本・可視 163 要素） */
font-family: "Noto Sans JP", Noto-Sans-Fallback, sans-serif;

/* 欧文（可視 1 要素） */
font-family: "Noto Sans", sans-serif;

/* CSS に定義はあるが適用 0 要素・Junge は読み込まれない */
.font-junge { font-family: Junge, serif; }
.font-junge.size-400 { font-weight: 400; }

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

• 和文を先頭に置き、欧文も同じ書体で受ける単一書体構成
• 2 番目の Noto-Sans-Fallback は @font-face が error なので実質スキップされ、3 番目の sans-serif が受け皿になる
• スタックが 3 語しかない。 長いチェーンを持たない割り切り

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

html { font-size: 10px } 固定（7 幅で確認）なので 1rem = 10px。

• ウェイトは 400（133 要素）と 500（26）の 2 段で大半。 700 は 8 要素（CMP ボタンと visually-hidden の見出し）、600 は 1 要素
• Google Fonts で 400 / 500 / 600 / 700 を読んでいるが、実際に使っているのは 400 と 500

3.5 行間・字間

• 本文の行間: 1.70（body は line-height: 27.2px = 16 × 1.7）
• UI・カードの行間: 1.50（可視 78 要素で最多）
• リストの行間: 1.25（11 要素）／ ゆったりした段落は 1.94（8 要素）・2.27（4 要素）
• 字間: 可視 79 要素が normal。残りは各要素が em を持つ型

body から継承しているのではなく、要素ごとに em を当てている。 サイズが違うと px 値も比例して変わる（15px→0.6px、14px→0.7px はいずれも 0.04〜0.05em）。px に読み替えて配らないこと。

ガイドライン:

• 本文 1.7、UI 1.5 の二層
• 字間は既定 normal。ラベル類にだけ 0.04em 〜 0.05em を足す
• 0.15em はナビの 2 要素専用。一般化しない

3.6 禁則処理・改行ルール

css/* body（トップ） */
word-break: normal;

• word-break / line-break / auto-phrase の特別な指定は無い。約物の処理は halt に任せている
• 行頭禁止: ）」』】〕〉》、。，．・：；？！ ／ 行末禁止: （「『【〔〈《（ブラウザ既定）

3.7 OpenType 機能

css/* サイト全体（横組み）に適用。実測 1017 要素 */
font-feature-settings: "halt";

• halt は全角約物を一律に半角幅へ揃える機能。 文字ごとに詰め幅を変える palt とは別物
• palt は 1 要素も使っていない。 両方を同時に書かない
• 実測で効いている: 40px の 「東京」、（映画）。・ が normal 360px → "halt" 300px
• 横組み専用。 クロス集計で "halt" @ horizontal-tb 1017 要素、縦組みでの適用は 0。縦組みに halt を当てると軸が違うので黙って無視される
• tnum（等幅数字）は未使用

3.8 縦書き

css/* 該当なし */

• writing-mode: vertical-rl は 2 ページとも 0 要素
• もし縦組みを足すなら、その要素の font-feature-settings は "halt" ではなく "vhal" / "vpal" に差し替える（横方向の halt は縦組みでは効かない）

4. Component Stylings

Buttons

Primary（グラデーション）

• Background: radial-gradient(70% 220% at 100% 0%, #D6FFB6 0%, #C191FF 20%, #3548E5 55%, #09011A 100%)
• Text: #ffffff
• Padding: 16px 16px 16px 24px
• Border Radius: 9999px
• Font Size: 16px / Weight 400

Secondary（枠線・小）

• Background: #ffffff
• Text: #2E313B
• Border: 1px solid #D1D3DE
• Padding: 8px
• Border Radius: 18px
• Font Size: 12px / Weight 700

Tag（作品種別）

• Background: #64687A
• Text: #ffffff
• Padding: 0 12px
• Border Radius: 4px
• Font Size: 14px / Weight 400

Inputs

• 検索バー: 幅いっぱい / 16px / weight 400
• Focus: rgb(0, 66, 188) 0px 0px 0px 2px（青の 2px リング。可視 1 要素）。--focus-color: #8ab4f8 も宣言されている

Cards

• Background: #1a1a1a（作品カード・可視 34 要素）／ #ffffff（情報カード）
• Border: 1px solid #D1D3DE（罫線 46 要素）
• Border Radius: 4px（可視 29 要素でこのサイト最多）／ 18px（6）／ 50%（20）
• Shadow: none

Navigation

• グローバルナビ: 14px / 15px / weight 400 / 文字色 #03021F
• 選択状態・リンク: #3036E6
• スキップリンク（a.skip-link）は UA 既定の青 rgb(0, 0, 238) のまま。画面外に逃がしてあるため実害は無いが、色を指定していない

5. Layout Principles

Spacing Scale

html { font-size: 10px } なので rem がそのまま 10 倍の px になる。gap の実測値は 4 の倍数で組まれる。

Container

• Max Width: 1600px（可視 12 要素。このサイトのコンテナ幅）
• 記事カラム: 888px
• Header Height: --header-height: 127px

Grid

• 作品カードは 2 列 / 4 列のタイル。gap 32px 24px
• Gutter: 24px

Transition

トークンで 3 段に固定されている。

6. Depth & Elevation

影で階層を作らないサイト。 区別は 1px solid #D1D3DE の罫線（46 要素）と、#ffffff / #F5F5F5 / #EBEBEB / #1a1a1a の面色で行う。唯一の box-shadow はフォーカスリング。

7. Do's and Don'ts

Do（推奨）

• font-feature-settings: "halt" をサイト全体（横組み）に当てる。これがこのサイトの組版の核
• font-family は "Noto Sans JP", Noto-Sans-Fallback, sans-serif の 1 本で通す
• ウェイトは 400 と 500 の 2 段で考える
• html { font-size: 10px } を前提に rem を使う（1.6rem = 16px）
• 本文の行間は 1.70、UI は 1.50
• 字間は既定 normal。ラベル類にだけ 0.04em 〜 0.05em を em で当てる（px で配らない）
• 「黒」は純黒ではなく #03021F（青みのある紺）
• 青は #3036E6
• 角丸は 4px（カード・タグ）／ 18px（小ボタン）／ 9999px（Pill）
• 罫線は #D1D3DE
• コンテナ幅 1600px
• トランジションは .15s / .3s / .5s の 3 段から選ぶ
• 装飾的な色はラジアルグラデーション 1 本に集約する

Don't（禁止）

• palt を使わない。 このサイトは halt で統一されている（併記すると別物になる）
• 縦組みに halt を当てない。 軸が違うので黙って無視される。縦組みなら "vhal" / "vpal"
• Junge を前提に組まない。 CSS にクラスはあるが書体が 1 バイトも読み込まれず、適用要素も 0。セリフが要るならヒーローと同じく画像にするか、<link> を足して読み込む
• Noto Serif JP を前提に組まない（@font-face はあるが unloaded・可視 0）
• --Toho_Blue: #003692 を使わない。 社名のトークンだが 2 ページとも可視 0。実装は #3036E6
• Secondary の 4 色（#70E1B6 / #D6FFB6 / #CD82FF / #8752FA）を単色の面に使わない（すべて可視 0。出番はグラデーションの中だけ）
• --Owned-media-bg-gray: #272930 を使わない（可視 0）
• box-shadow を足さない（フォーカスリング以外 0 件）
• 本文色を #000000 にしない（実サイトは #03021F / #2E313B）
• ヒーローの大見出しを Web フォントで実装しない（実サイトは 350×30px の WebP 画像）
• 0.15em の字間を一般化しない（ナビの 2 要素専用）
• 角丸を 8px や 12px にしない（語彙は 4px / 18px / 50% / 9999px）

8. Responsive Behavior

Breakpoints

7 幅（1440 / 1200 / 1024 / 834 / 768 / 767 / 375px）で実測した結果、ルートは完全固定。

• rem はルートが固定なので幅に追従しない。 サイズ変更はメディアクエリで明示的に行う
• 字間（em 指定）はフォントサイズに比例するので、サイズを変えれば字間も自動で追従する

タッチターゲット

• Primary ボタン: padding 16px 16px 16px 24px + 16px → 高さ約 56px（満たす）
• Secondary ボタン: padding 8px + 12px → 高さ約 31px。44px を下回るのでモバイルでは高さを確保すること
• タグ: padding 0 12px + 14px → 高さ約 21px。不足
• ナビリンク: 14〜15px / padding 0 0 3px → 高さ約 24px。モバイルでは縦の当たり判定を確保すること

フォントサイズの調整

• 12 / 13 / 14 / 15 / 16px の本文系はブレークポイントをまたいで固定
• モバイルで縮めるなら見出し（28px / 32px）側で行う

9. Agent Prompt Guide

クイックリファレンス

Primary Blue:  #3036E6
Primary Black: #03021F   （純黒ではなく青みのある紺）
Text Black:    #2E313B
Text Sub:      #64687A
Text Light Bl: #97E8FF
Divider:       #D1D3DE
Bg Gray:       #F5F5F5 / #EBEBEB
Card Dark:     #1a1a1a
Background:    #ffffff
Gradient: radial-gradient(70% 220% at 100% 0%, #D6FFB6 0%, #C191FF 20%, #3548E5 55%, #09011A 100%)

Font: "Noto Sans JP", Noto-Sans-Fallback, sans-serif
  （Junge / Noto Serif JP は宣言のみで描画されない）
font-feature-settings: "halt"   ← サイト全体・横組みのみ。palt は使わない
Root: html 10px 固定 / body 16px（7 幅とも不変）
Body Size: 16px / line-height 1.70
UI: 14px / 15px / line-height 1.50
Weight: 400 と 500 の 2 段
Letter Spacing: normal 既定。ラベルに 0.04em〜0.05em を em で
Border Radius: 4px（カード・タグ） / 18px（小ボタン） / 9999px（Pill） / 50%
Box Shadow: none（フォーカスリングのみ）
Container: 1600px / Header 127px
Transition: .15s / .3s / .5s

プロンプト例

東宝のデザインシステムに従って、作品一覧ページを作成してください。
- html { font-size: 10px } を前提に rem で書く（1.6rem = 16px）
- font-family は "Noto Sans JP", Noto-Sans-Fallback, sans-serif の 1 本だけ
- body に font-feature-settings: "halt" を当てて全角約物を半角幅に揃える（palt は使わない）
- 本文 16px / line-height 1.7、UI は 14〜15px / line-height 1.5
- ウェイトは 400 と 500 の 2 段だけ
- letter-spacing は既定 normal。カードのラベルにだけ 0.04em、UI に 0.05em を em で当てる
- 「黒」は #03021F、本文の黒は #2E313B、補助は #64687A
- 作品カードは #1a1a1a の地 / border-radius 4px、情報カードは白 + 1px solid #D1D3DE
- タグは #64687A 塗り / 白文字 / radius 4px / 14px / padding 0 12px
- 主要 CTA は radial-gradient(70% 220% at 100% 0%, #D6FFB6 0%, #C191FF 20%, #3548E5 55%, #09011A 100%)
  / 白文字 / border-radius 9999px / padding 16px 16px 16px 24px
- box-shadow は使わない（フォーカスは #0042BC の 2px リング）
- コンテナ幅 1600px、カードグリッドの gap は 32px 24px
- ヒーローの欧文見出しは Web フォントではなく画像で置く