東急不動産（TOKYU LAND） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 緑 1 色と純黒の 2 色主義。 角丸ゼロ、影ゼロ、面は白か淡緑。ヒーローは 1440×560px の写真を全幅で敷き、その上に緑の面を置いて見出しを載せる
• 密度: 中。13px のリンクを詰めたナビと、16px / 行間 1.70 の本文が同居する
• キーワード: 東急グリーン #0B8100、純黒の本文、角丸ゼロ、6 書体を読んで 2 書体しか使わない

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

1. Web フォントを 6 ファミリー読み込んでいるのに、描画に使われているのは 2 つだけ。 document.fonts で loaded なのは Noto Sans JP（400/500/700）・Noto Sans（400/500/700）・Inter（400/500/600）・Jost（600/700）・Noto Serif JP（400/600）・Train One（400） の 6 種。実測でトップに出るのは Noto Sans JP 210 要素と Inter 44 要素の 2 つだけで、Jost / Noto Sans / Noto Serif JP / Train One は可視 0 要素。loaded は「使っている」証拠にならない

2. 本文が純黒 #000000。 実測 153 要素。#333333 に逃げていない。日付だけ #6E6E6E

3. 游ゴシックの Windows 対策を local() だけの @font-face で書いている。

   css@font-face { font-family: YuGothicM; src: local("Yu Gothic Medium") }

   ただしスタックの先頭が Noto Sans JP で、それが実際に loaded している以上、この游ゴシックのチェーンは 1 度も出番が無い（宣言だけが残っている）

4. 字間に設計が無い。 letter-spacing: normal が実測 254 要素中 201 要素。残りは CSS 全文で 36 種類のバラバラな値（4px 3px .5px 1px 2.6px 2px 1.2px 1.5px .8px .7px 1.4px 1.1px -.3px に加えて .02em .007em .002em .05em -.06em .7em .025em …）。段になっていないので、真似るなら normal だけを引き継ぐ

font-feature-settings / palt / writing-mode / <ruby> はいずれも 0 件。 CSS Custom Properties は自社トークン 0 個（検出された 1 個は Swiper の --swiper-theme-color）。

2. Color Palette & Roles

Primary（ブランドカラー）

緑は 2 段。 #0B8100 が基準、#2C9622 は写真の上に置く面専用。新規実装では #0B8100 を既定にし、写真の上でコントラストが要るときだけ #2C9622 を使う。

Gradient（面のグラデーション）

実測された 4 種。すべて淡く、面の境目をぼかす用途。

css/* トップ・セクション面 */
linear-gradient(120deg, rgba(243, 244, 241, 0.4), rgb(244, 245, 242));
linear-gradient(243.5deg, rgb(244, 245, 242), rgba(243, 244, 241, 0.5));
linear-gradient(315deg, rgb(237, 245, 230), rgba(237, 245, 229, 0.5));

/* 会社情報のサブヒーロー（div::after の疑似要素） */
linear-gradient(90deg, rgb(72, 166, 63) 36%, rgb(169, 203, 3));

下層ページの帯は div::after.c-hero-sub の疑似要素に塗られている。 querySelectorAll("*") の走査には出てこないので、要素側だけ見て「帯に色が無い」と判断しないこと。#48A63F → #A9CB03 の緑〜黄緑のグラデーション。

Neutral（ニュートラル）

• Text Primary (#000000): 本文・ナビ・見出し。トップ 153 要素 / 会社情報 91 要素。このサイトは本文に純黒を使う
• Text on Dark (#ffffff): 緑面・写真の上（トップ 37 要素 / 会社情報 10 要素）
• Text Muted (#6E6E6E): 日付（2026.09.29 等、9 要素）
• Text Muted Light (#7F7F7F): ヒーローの非選択タブ（01 CM 03 URBAN DEVELOPMENT、8 要素）
• Surface Green Pale (#EDF5E6): 実績数値ブロックの面（3 要素）
• Surface Warm (#F4F5F2): セクションの面（2 要素）
• Surface Gray (#F2F2F2): 会社情報のナビ面
• Surface Gray Light (#EDEDED): 会社情報トップのタブ
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255)）

トップは heroCover: true（img.c-hero__image 1440×560px が画面上部を覆う）。 抽出の viewportTopByArea は先頭に #2C9622 を返すが、これはヒーローのラベル面であってページの地色ではない。html / body ともに塗り指定が無く、コンテンツの地色は UA 既定の白。会社情報ページの実測でも白だった。

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一の和文）: Noto Sans JP（Google Fonts 配信）。loaded は 400 / 500 / 700 の 3 本
• Noto Serif JP（400 / 600）も loaded しているが、トップと会社情報では可視 0 要素。 別ページ用
• フォールバックは 游ゴシック → YuGothicM → メイリオ。ただし Noto Sans JP が実際に読み込まれるため出番が無い

3.2 欧文フォント

• Inter（400 / 500 / 600）。ヒーローのラベル（01 CM 02 SUSTAINABILITY）とセクションの英字見出し（74px）に使う。実測トップ 44 要素 / 会社情報 4 要素
• Jost（600 / 700）・Noto Sans（400 / 500 / 700）・Train One（400）も loaded だが、実測した 2 ページでは可視 0 要素

「読み込んでいる書体」と「描画されている書体」を混同しないこと。 このサイトは 6 ファミリーを配信しながら 2 つしか使っていない。新規実装では Noto Sans JP と Inter の 2 本だけで足りる（残り 4 本は転送量の無駄でもある）。

3.3 font-family 指定

css/* 和文・既定 */
font-family: "Noto Sans JP", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif;

/* 欧文ラベル・英字見出し */
font-family: Inter, sans-serif;

/* Windows の游ゴシック Medium を別名で拾う宣言 */
@font-face {
  font-family: YuGothicM;
  src: local("Yu Gothic Medium");
}

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

• 游ゴシックの Windows 問題は「別名方式」で対処している（SmartHR / 白鶴と同じ型）。素の YuGothic は macOS で 游ゴシック体 Regular に当たり、Windows では家族名が Yu Gothic（スペース入り）なので当たらない。そこで YuGothicM という別名を local("Yu Gothic Medium") で定義し、YuGothic の直後に置く
• src が local() だけなのでファイルのダウンロードは発生しない。 そのため document.fonts 上では永久に unloaded のまま。これは失敗ではなく local() の正常な挙動。unloaded を理由に「使われていない」と書かないこと
• ただしこのサイトでは、その工夫が効く場面が無い。 スタック先頭の Noto Sans JP が loaded するので游ゴシックまで降りてこない。別名方式そのものは正しいので、Web フォントを使わない案件で流用する価値がある
• 和文と欧文でファミリーを切り替える方式（1 つのスタックに混ぜていない）

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

html { font-size: 10px }。 rem は 10 倍で読む（2.88rem = 28.8px）。28.8px / 16.8px という半端な値はそこから来ている（2.88rem / 1.68rem）。流体（vw）ではない — 4 幅の実測で body は 16px から動かなかった。

3.5 行間・字間

行間は 3 段が主役。

字間はほぼ触らない。値は段になっていない。

• normal が既定: トップ 254 要素中 201 要素、会社情報 108 要素中 94 要素
• CSS 全文の宣言は 36 種類で、px（4px 2.6px 1.2px 1.1px .5px -.3px …）と em（.02em .05em .007em .002em -.06em .7em …）と rem（.02rem）が混在している
• 0.084px（パンくず）や 0.002em のような、目視では判別不能な値まである

ガイドライン:

• letter-spacing: normal だけを引き継ぐ。 例外値に設計上の意味が見出せない
• どうしても足すなら英字ラベル（Inter）にだけ。 実測で意味のある字間は 01 CM の 1.2px / 1.4px と 74px 見出しの 4px、緑の 28px 見出しの 2.6px の 3 箇所
• 0.002em / 0.084px のような値を新規実装に持ち込まない

3.6 禁則処理・改行ルール

• body の word-break は normal（1440 / 1200 / 834 / 375px の 4 幅すべてで実測）
• CSS 全文には break-all と break-word が宣言されているが、局所的な上書きにとどまる
• word-break: auto-phrase は使っていない
• ブラウザ既定の和文折り返しに任せるのが、このサイトの既定

3.7 OpenType 機能

このサイトは font-feature-settings を一切使っていない（実測 0 要素 / CSS 全文でも 0 回）。

• palt を足さないこと。 Noto Sans JP の既定の字送りのまま組む
• フォントスタックに YakuHanJP の類も入っていない。約物は詰まらないまま出るのが正しい状態
• 統計数値（173件 218施設）は Inter の 700 で組むが、tnum などの指定は無い

3.8 縦書き

使っていない（実測 0 件。CSS 全文でも writing-mode は 0 回）。

• 縦組みを実装しないこと

4. Component Stylings

border-radius はサイト全体で 0px。 実測で 0 以外だったのは円形要素（100%）がトップ 3 要素 / 会社情報 1 要素だけ。

Buttons

Outline（緑枠）

• Background: transparent
• Text: #000000（タグ状のものは #ffffff）
• Border: 1px solid #0B8100
• Padding: 2px 5px（タグ）／0px（テキスト＋枠）
• Border Radius: 0px
• 例: ニュースリリース 長期ビジョン 中期経営計画

Solid（緑面）

• Background: #0B8100
• Text: #ffffff
• Border: なし
• Padding: 5px 13px（小）／5px 20px（大）
• Border Radius: 0px
• 例: 会社案内 グループ紹介 東急不動産の主要関連会社 採用情報を詳しく見る

Contact（ヘッダー）

• Text: #000000
• Padding: 10px 18px 10px 15px（左右非対称。右にアイコン分のアキ）
• Border Radius: 0px

Hero Tab

• Background: transparent（選択中はラベル面 #2C9622）
• Text: 選択 #0B8100 / 非選択 #7F7F7F
• Padding: 0px 22px 0px 0px
• Font: Inter 14px / weight 500 / letter-spacing 1.2–1.4px
• 匿名のドットではなく 01 CM 02 SUSTAINABILITY と名前で並べる

Cards

• Background: #ffffff または #F4F5F2 / #EDF5E6（淡いグラデーション面）
• Border: なし
• Border Radius: 0px
• Shadow: なし
• 中身: 写真 → 見出し 20px / lh 1.40 → 説明 15px / lh 1.80 → 日付 13px / #6E6E6E

Stat Block（実績数値）

• Background: #EDF5E6
• 数値: Inter 42px / weight 700 / line-height 0.90
• 単位: Inter 16.8px / weight 700
• ラベル: Noto Sans JP 18px / weight 400 / lh 1.60
• Border Radius: 0px

5. Layout Principles

Spacing Scale

実測 gap: 40px（2）/ 10px（2）/ 55px 27px / 30px / 33px / 0px 40px / 0px 1px

Container

• Max Width: 1200px（実測 12 要素で最多）
• calc(100% - 120px)（4 要素）: 左右 60px の余白を確保する全幅ブロック
• 1300px / 1400px: ヒーローなどの広いブロック
• 会社情報の本文カラム: 1020px / 1100px

Grid

• トップ: ヒーロー（1440×560px の写真＋緑の面＋名前付きタブ 5 枚）→ お知らせ枠 → 事業紹介 → 統計（#EDF5E6）→ ニュース → グループ情報
• 会社情報: 緑グラデーションの帯（::after）→ カード 2 カラム

6. Depth & Elevation

影を使わないサイト。 CSS 全文には box-shadow が 46 回、text-shadow が 10 回宣言されているが、実測した 2 ページの可視要素では 1 つも使われていない。filter: drop-shadow() は CSS 全文で 0 回。

ヒーローの白文字（価値を創造する環境先進企業へ）にも影は付けていない。 代わりに #2C9622 の緑の面を写真の上に敷いて、その上に白文字を置く。これがこのサイトの「写真の上に文字を載せる」作法。text-shadow で済ませないこと。

階層は (a) 緑の面、(b) 淡いグラデーション面（#F4F5F2 / #EDF5E6）、(c) 1px solid #0B8100 の枠で作る。

7. Do's and Don'ts

Do（推奨）

• #0B8100 を唯一のブランド色として使う。 写真の上に載せる面だけ #2C9622
• 本文色は純黒 #000000。 日付だけ #6E6E6E
• 和文は Noto Sans JP、欧文ラベルと数値は Inter の 2 本だけで組む
• border-radius: 0 を貫く（円形要素のみ例外）
• letter-spacing: normal を既定にする（79%）
• 行間は 1.40（UI）/ 1.70（body 既定）/ 1.60（説明文）の 3 段
• 写真の上の文字は、影ではなく面（#2C9622）を敷いて載せる
• カルーセルのタブは匿名のドットではなく 01 CM のように名前と番号で並べる
• 統計数値は Inter 42px / weight 700 / line-height 0.90
• 游ゴシックを使う案件では別名方式を流用する: @font-face { font-family: YuGothicM; src: local("Yu Gothic Medium") } を定義し、YuGothic の直後に置く

Don't（禁止）

• Jost / Noto Serif JP / Train One / Noto Sans を読み込まない。 実サイトは配信しているがこの 2 ページでは 1 要素も描画していない。真似る必要はない
• document.fonts の loaded を「使っている」証拠にしない。 可視要素の数で確かめる
• YuGothicM が unloaded なのを「壊れている」と読み違えない。 src: local() だけの宣言はダウンロードが発生しないので unloaded が正常
• font-feature-settings: "palt" を足さない（実測 0 要素）
• 縦組み（writing-mode）を実装しない（実測 0 件、CSS にも 0 回）
• box-shadow / text-shadow を足さない（可視 0 件）。写真の上の白文字にも付けない
• border-radius を 4px や 8px にしない
• 本文色を #333333 にしない（実サイトは純黒 #000000）
• 字間の例外値（0.002em 0.084px -.3px など）を引き継がない。 36 種類の値は段になっておらず、設計ではない
• CSS Custom Properties でトークン設計されていると思わないこと（自社トークン 0 個）

8. Responsive Behavior

Breakpoints

• 767/768px が主分岐。 1059/1060px と 1200px で細かく調整する
• CSS には @custom-media 由来の (--sm-gt) and (--lg-lte) が 19 回出てくる（カスタムメディアクエリで名前付けしている）

フォントサイズの調整

body は動かない。

• 4 幅すべてで 16px / 1.70 のまま。 流体（vw / clamp）も、SP での縮小も無い
• html は 10px 固定（line-height: 11.5px）。rem は 10 倍で読む
• 縮小はコンポーネント単位で行っている（28.8px の見出しなどは SP でメディアクエリにより別値になる）

タッチターゲット

• 緑の面ボタン（5px 20px ＋ 16px の文字）で約 42px 高。44px をわずかに下回る
• タグ（2px 5px）は約 22px 高、13px のフッターリンクは行高 18px で大きく下回る
• モバイルでは padding を増やして 44px を確保すること

9. Agent Prompt Guide

クイックリファレンス

Brand Green:   #0B8100
Hero Green:    #2C9622   /* 写真の上に敷く面 */
Text Color:    #000000   /* 純黒 */
Muted:         #6E6E6E   /* 日付 */
Muted Light:   #7F7F7F   /* 非選択タブ */
Surface Green: #EDF5E6
Surface Warm:  #F4F5F2
Surface Gray:  #F2F2F2
Background:    #ffffff
Font (JP): "Noto Sans JP", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif
Font (EN): Inter, sans-serif
@font-face { font-family: YuGothicM; src: local("Yu Gothic Medium") }
html font-size: 10px
Body Size:     16px（全幅で固定）
Line Height:   1.70（body 既定） / 1.40（UI 13px） / 1.60（説明文）
Letter Spacing: normal
Border Radius: 0px
Box Shadow:    none
Container:     1200px / calc(100% - 120px)
Breakpoints:   767/768px（主） / 1059/1060px / 1200px

プロンプト例

東急不動産のデザインシステムに従って、事業紹介ページを作成してください。
- ブランド色は #0B8100 の 1 色。写真の上に置く面だけ #2C9622
- 本文色は純黒 #000000（#333333 にしない）。日付は #6E6E6E
- 和文は "Noto Sans JP", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif
- @font-face { font-family: YuGothicM; src: local("Yu Gothic Medium") } を定義して
  YuGothic の直後に置く（Windows の游ゴシック Medium 対策）
- 英字ラベルと統計数値だけ Inter に切り替える
- 読み込む Web フォントは Noto Sans JP と Inter の 2 つだけにする
- html は font-size: 10px、body は 16px / line-height 1.7 でブレークポイントをまたいで固定
- UI リンクは 13px / line-height 1.4、説明文は line-height 1.6
- セクション見出しは 28px / weight 700 / letter-spacing 2.6px / color #0B8100
- 英字の大見出しは Inter 74px / weight 600 / letter-spacing 4px
- 統計数値は Inter 42px / weight 700 / line-height 0.9、面は #EDF5E6
- letter-spacing は normal を既定にする（例外値を作らない）
- CTA は「1px solid #0B8100 の枠」か「#0B8100 の面 + 白文字 / padding 5px 20px」の 2 種
- border-radius はすべて 0px（円形要素のみ 100%）
- box-shadow と text-shadow は使わない
  写真の上に文字を載せるときは #2C9622 の面を敷いて白文字を置く
- font-feature-settings: "palt" と writing-mode は使わない
- コンテナは 1200px、ブレークポイントは 768px を主分岐にする