東北新社（TFC / Tohokushinsha Film Corporation） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 白地にシアン系の寒色だけで情報を組む。CM・映像制作の会社だが、サイト自体は彩度を1系統に絞った IR 寄りの硬い設計
• 密度: 中。本文 18〜20px と大きめで、行間 1.5、字間 0.08em を全要素に等しく当てる
• キーワード: Noto Sans JP セルフホスト、palt、字間 0.08em 一律、シアン、角丸 4px

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

1. 和文は Noto Sans JP ひとつだけで、Google Fonts ではなく自社サーバから配信している。 @font-face は 7 件、src は assets/fonts/NotoSansJP-*.woff2。フォント要求は 5 件すべて www.tfc.co.jp（fonts.gstatic.com へのアクセスは 0 件）
2. palt を body に1回だけ書いて全体に継承させる。 実測 714 要素（トップ）/ 274 要素（下層）。CSS 全文の font-feature-settings 宣言は 5 件で、実体は body { font-feature-settings: "palt" } の1行
3. palt で詰めた上から letter-spacing: 0.08em を足し直す。 --ls-m: 0.08em を各要素に当てており、サイズが変わっても比率は一定（20px→1.6px / 18px→1.44px / 16px→1.28px / 14px→1.12px / 12px→0.96px / 9px→0.72px / 36px→2.88px）。「詰めてから空け直す」の二段構え
4. ウェイトのトークンは 700 を持つが、700 の書体ファイルは存在しない。 --fw-b: 700 と宣言しているのに @font-face は 400 / 500 / 600 / 900 の4本で、700 は1要素も描画されていない（実測 500×183・400×46・900×8）。太字は **900（Black）**が担う（→ 3.4 節）

CSS Custom Properties は 45 個すべて自社トークン（own: 45 / プラットフォーム由来 0）。サイズ 13 段・ウェイト 3 段・行間 5 段・字間 2 段が :root に揃っている。

2. Color Palette & Roles

Primary（ブランドカラー）

Semantic（意味的な色）

Gradient（グラデーション）

• ヒーロー: linear-gradient(150deg, #ffffff 10%, #cbf0f5 40%, #b1e6ee 67%, #7ad1de)（面。角度・停止位置をそのまま写す）
• CTA 帯: linear-gradient(130deg, #cbf0f5, #7ad1de)

Neutral（ニュートラル）

• Background (#ffffff): ページ背景。pageBackground.resolved の根拠は viewportTopBySample (3/7)（下層）
• Text Primary (#313131): 本文・見出し。可視 169 要素（トップ）/ 91 要素（下層）。body に宣言。純黒を使わない
• Text Muted (#686868 26 要素 / #747474 17 要素 / #4d4d4d 16 要素): 補足・日付・無効テキスト
• Text on Dark (#ffffff): ナビ・検索ボタン・PDF バッジの上

3. Typography Rules

3.1 和文フォント

• Noto Sans JP のみ。自社サーバ配信（assets/fonts/NotoSansJP-*.woff2 / .woff）
• 読み込んでいるウェイト: 400（Regular・loaded）、500（Medium・loaded）、900（Black・loaded）、600（unloaded）
• @font-face の weight と中身がずれている: font-weight: 600 に割り当てられているファイルは NotoSansJP-Bold.woff2。つまり Bold は 600 として登録されている

3.2 欧文フォント

• Noto Sans: 400（unloaded）/ 500（loaded）。自社サーバ配信
• Marcellus（ラテン系セリフ）: 宣言はあるが unloaded・可視 0 要素。使われていない

3.3 font-family 指定

cssbody {
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";   /* ここ1行で全体に効く */
  color: #313131;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""),                                   /* 空の local() で必ずダウンロードさせる */
       url(assets/fonts/NotoSansJP-Regular.woff2) format("woff2"),
       url(assets/fonts/NotoSansJP-Regular.woff) format("woff");
}

src: local("") は空文字なので必ず外れ、次の url() が使われる。東急不動産型（local() で OS 同梱書体に別名を付ける）とは逆の意図で、ローカルの Noto Sans JP を使わせないための書き方。

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

ルートは html: 16px / body: 16px。6 幅（1440 / 1200 / 834 / 768 / 767 / 375px）すべて固定で、流体ではない（CSS 全文の font-size: *vw は 1 箇所のみ、clamp() は 0 件）。

:root のサイズトークン（rem 宣言・root 16px なので ×16 で px）:

実際に多いのは 18px（60 要素）・20px（44 要素）・14px・15px・16px。 本文が 18〜20px と大きい。

--fw-b: 700 を使わないこと。 @font-face は 400 / 500 / 600 / 900 の4本しか無く、CSS フォントマッチングで 700 を要求すると上方向の最も近い 900 が選ばれる。実サイトも 700 を1要素も使っていない。太字が要るなら 900 を直接書く（ナビと同じ）。600 を使いたい場合は font-weight: 600 と書けば NotoSansJP-Bold.woff2 が当たる。

3.5 行間・字間

• line-height は無単位の比率。body は 24px / 16px = 1.5。各要素が自分のサイズで再計算する（実測比 1.50×176・1.60×49・1.75×10・2.00×2）
• :root の行間トークン: --lh-xl: 2 / --lh-l: 1.8 / --lh-m: 1.6 / --lh-s: 1.5 / --lh-xs: 1.0
• letter-spacing は em で各要素が持つ（body は normal）。トークンは2段:

palt と 0.08em はセットで使う。 片方だけ再現すると別物になる（palt だけ＝詰まりすぎ、0.08em だけ＝約物が空く）。 グローバルナビだけ letter-spacing: normal（24px / weight 900）。字間を入れない唯一の箇所。

3.6 禁則処理・改行ルール

• word-break / word-wrap の特別な宣言は無し。ブラウザ既定
• 見出しは文節で <br> せず、コンテナ幅で折り返す

3.7 OpenType 機能

• font-feature-settings: "palt" を body に1行。実測 714 要素（トップ）/ 274 要素（下層）
• "palt" 以外は使っていない（tnum / halt の宣言は 0 件）
• 下層に font-feature-settings: normal で打ち消している要素が 1 つある（c-button の一部）。意図的なものではなさそうなので再現しない

3.8 縦書き

• 縦組みは使っていない（writing-mode: vertical-* は 0 要素）

4. Component Stylings

Buttons

css.c-button {
  background: #ffffff;
  color: #313131;
  border: 1px solid #b6d0d4;
  border-radius: 4px;
  padding: 16px 24px;
  font-size: 1.25rem;              /* --txt-m */
  font-weight: var(--fw-m);        /* 500 */
  letter-spacing: var(--ls-m);     /* 0.08em */
  line-height: var(--lh-m);        /* 1.6 */
}

面色の CTA は実質 2 種（#00b3cd の検索と #ee3d23 の PDF バッジ）だけ。 主要な導線は白地＋細い枠線で表す。シアンを主ボタンの面に使わない。

Inputs

• テーブルの th: #e2f6f9 の面＋1px solid #b6d0d4、18px / 500 / 1.44px、padding: 12px、radius 0

5. Layout Principles

• 角丸は 4px と 2px の2段だけ（実測 4px×47・2px×33）。ボタンは 4px、バッジ・検索は 2px
• コンテンツ左右の余白はトークン: --px-content が 5.33%（モバイル）→ 6.25rem（＝100px・デスクトップ）で切り替わる
• ヒーローはグラデーション面の上に見出し＋説明文を左、IR カードを右に置く2カラム

6. Depth & Elevation

影は 1 種類しか無い。 それ以外の浮き上がりは面色と枠線で作る。影の色は黒ではなく rgba(0,42,49,α)（ブランドのティールを混ぜた黒）。

7. Do's and Don'ts

Do（推奨）

• body に font-feature-settings: "palt" を1行書いて継承させる
• letter-spacing: 0.08em を各要素に em で当てる（palt とセット）
• 既定ウェイトは 500。400 は補足、900 はナビだけ
• 本文は 18〜20px と大きめに取る
• 文字色は #313131（純黒を使わない）
• ボタンは白地＋1px solid #b6d0d4＋border-radius: 4px
• 影は rgba(0,42,49,0.1) 0 -5px 14px 3px の1種類だけ

Don't（禁止）

• font-weight: 700 を書かない。 書体ファイルが無く、900（Black）で出る。太字が要るなら 900 を直接書く
• シアン #00b3cd を主ボタンの面色にしない（検索ボタンとアイコンだけ）
• 赤 #ee3d23 を CTA に使わない（PDF バッジ専用）
• Marcellus を欧文に足さない（宣言はあるが unloaded・可視 0 要素）
• Google Fonts から Noto Sans JP を読まない（このサイトは自社サーバ配信。フォント要求 5 件すべて自ドメイン）
• ルートを流体にしない（html: 16px 固定）
• グローバルナビに字間を入れない（唯一 letter-spacing: normal の箇所）
• 角丸を 4px / 2px 以外にしない

8. Responsive Behavior

Breakpoints

6 幅すべて完全固定。 ルートもボディも動かない。

フォントサイズの調整

• サイズは --txt-* トークンをメディアクエリで差し替える方式（ルートは動かさない）
• 左右余白だけ --px-content: 5.33% ↔ 6.25rem で切り替わる

9. Agent Prompt Guide

クイックリファレンス

地色: #ffffff
アクセント: #00b3cd（検索・アイコン）
ナビ面: #002327
淡い面: #e2f6f9 / 枠線: #b6d0d4
警告色: #ee3d23（PDF バッジのみ）
文字: #313131 / 補足 #686868・#747474・#4d4d4d
グラデ: linear-gradient(150deg, #ffffff 10%, #cbf0f5 40%, #b1e6ee 67%, #7ad1de)
和文/欧文: Noto Sans JP（400/500/900）/ Noto Sans（500）
ルート: html 16px 固定
行間: 1.5（既定）/ 1.6 / 1.8 / 2.0
字間: 0.08em（既定）/ 0.01em（小さいラベル）/ normal（グローバルナビ）
ウェイト: 500（既定）・400・900（700 は使わない）
角丸: 4px（ボタン）/ 2px（バッジ）
影: rgba(0,42,49,0.1) 0 -5px 14px 3px の1種類だけ
OpenType: body に "palt" 1行

プロンプト例

東北新社のトーンで映像制作会社のコーポレートサイトを作って。地色は白、文字は #313131。body に font-family: "Noto Sans JP", sans-serif と font-feature-settings: "palt" を書いて全体に継承させ、その上から letter-spacing: 0.08em を各要素に当てる。既定ウェイトは 500、本文は 18〜20px、行間 1.5。ボタンは白地＋1px solid #b6d0d4＋border-radius: 4px＋padding: 16px 24px。シアン #00b3cd は検索ボタンと矢印アイコンだけに使う。グローバルナビは #002327 の面に 24px / weight 900 の白文字を置き、ここだけ letter-spacing: normal にする。font-weight: 700 は使わない（太字は 900）。影は使わず、面色と枠線で段差を作る。