ニュースリリース Webマガジン 採用情報 サステナビリティ English
02  SUSTAINABILITY

価値を創造する
環境先進企業へ

東急不動産のサステナビリティ

01  CM 02  SUSTAINABILITY 03  URBAN DEVELOPMENT 04  WEB MAGAZINE 05  MIXED DEVELOPMENT
01 / Colors
COLOR

緑 1 色と純黒

ブランド色は 東急グリーン #0B8100 ひとつ(文字 47 / 面 21 要素)。写真の上に載せる面だけ明るい #2C9622 を使う。本文は純黒 #000000(可視 153 要素)で、#333333 に逃げていない。CSS Custom Properties による自社トークンは 0 個で、検出された 1 個は Swiper の既定値だった。

東急グリーン
#0B8100
★文字 47 / 面 21 要素。リンク・見出し・CTA
Hero Green
#2C9622
写真の上に敷くラベル面 10 要素
Text Primary
#000000
★本文。可視 153 要素。純黒を使う
Muted
#6E6E6E
日付(9 要素)
Muted Light
#7F7F7F
ヒーローの非選択タブ(8 要素)
Surface Green
#EDF5E6
統計数値ブロックの面(3 要素)
Surface Warm
#F4F5F2
セクションの面(2 要素)
Sub Hero Gradient
#48A63F → #A9CB03
div::after の疑似要素に塗られている
東急不動産について

下層ページの帯は div::after.c-hero-sub の疑似要素。querySelectorAll("*") の走査には出てこないので、要素側だけ見て「帯に色が無い」と判断しないこと。
また トップは heroCover: true(1440×560px の写真が画面上部を覆う)。抽出の viewportTopByArea は先頭に #2C9622 を返すが、これはラベル面であってページの地色は白。

TYPE

6 書体を読んで、2 書体しか使わない

document.fonts で loaded なのは Noto Sans JP・Noto Sans・Inter・Jost・Noto Serif JP・Train One の 6 ファミリー。ところが実測でトップに出るのは Noto Sans JP 210 要素と Inter 44 要素の 2 つだけで、残り 4 つは可視 0 要素だった。loaded は「使っている」証拠にならない。

Familyloaded weightトップの可視要素判定
Noto Sans JP400 / 500 / 700210★和文の本体
Inter400 / 500 / 60044★欧文ラベル・数値
Noto Sans400 / 500 / 7000読み込んでいるが未使用
Jost600 / 7000読み込んでいるが未使用
Noto Serif JP400 / 6000読み込んでいるが未使用
Train One4000読み込んでいるが未使用
YuGothicM(local のみ)0unloaded が正常(下記)

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

@font-face { font-family: YuGothicM; src: local("Yu Gothic Medium") } を定義し、スタックの YuGothic の直後に置く(別名方式)。素の YuGothic は macOS で游ゴシック体 Regular に当たり、Windows では家族名が Yu Gothic(スペース入り)なので当たらない。そこで Windows だけが YuGothicM → Medium を拾う。
src が local() だけなのでダウンロードは発生せず、document.fonts 上では永久に unloaded のまま。これは失敗ではなく正常な挙動で、「使われていない」と読み違えないこと。
ただしこのサイトでは効く場面が無い — スタック先頭の Noto Sans JP が loaded するので游ゴシックまで降りてこない。別名方式そのものは正しいので、Web フォントを使わない案件で流用する価値がある。

121314 151618 202228 28.83842
Section Heading (EN)Inter / 74px / 600
lh 1.20 / ls 4px
NEWS
Stat Number ★Inter / 42px / 700
lh 0.90
173件
Hero HeadingNoto Sans JP / 28.8px / 500
lh 1.47 / ls 1.1px
価値を創造する環境先進企業へ
Section Heading (JP)Noto Sans JP / 28px / 700
lh 1.70 / ls 2.6px / #0B8100
特徴的な取り組み
Sub HeadingNoto Sans JP / 22px / 500
lh 1.60
広域渋谷圏での取り組み
Card HeadingNoto Sans JP / 20px / 500
lh 1.40 / ls 1px
東急不動産Webマガジン
Body ★Noto Sans JP / 16px / 400
lh 1.70(body の既定)
渋谷駅を中心とした広域渋谷圏では、長期持続的にエリアの価値を高める取り組みを進めています。
Card TextNoto Sans JP / 15px / 400
lh 1.80
海の森を再生し地域を繋ぐ「勝浦ブルーカーボン推進プロジェクト」
Hero TabInter / 14px / 500
lh 1.20 / ls 1.2–1.4px
01  CM 02  SUSTAINABILITY
UI Link ★Noto Sans JP / 13px / 400
lh 1.40(最多 64 要素)
ニュースリリース / Webマガジン / 採用情報 / サステナビリティ

字間に設計が無い。letter-spacing: normal が 254 要素中 201 要素。残りは CSS 全文で 36 種類のバラバラな値で、px(4px 2.6px 1.2px -.3px)と em(.02em .007em .002em -.06em)と rem(.02rem)が混在し、0.084px のような目視では判別不能な値まである。段になっていないので、真似るなら normal だけを引き継ぐこと。

font-feature-settings / palt / writing-mode / <ruby> はいずれも 0 件。Noto Sans JP の既定の字送りのまま組む。

03 / Components
PARTS

緑の枠か、緑の面か

CTA は「1px solid #0B8100 の枠」と「#0B8100 の面 + 白文字」の 2 種だけ。border-radius はサイト全体で 0px で、例外は円形要素(100%)3 要素。

長期ビジョン 中期経営計画 採用情報を詳しく見る 会社案内 ✉ 各種お問い合わせ

統計ブロック

国内発電総事業数
173件
切替完了施設数
218施設
RE100 達成年
2022年

数値は Inter 42px / weight 700 / line-height 0.90、単位は 16.8px、ラベルは Noto Sans JP 18px / lh 1.60。面は #EDF5E6。

記事カード

広域渋谷圏での取り組み
遊んで、涼んで、夏を楽しむ。広域渋谷圏で広がる CLEAN な夏。
2026.09.29
竹芝エリアでの取り組み
海の森を再生し地域を繋ぐ「勝浦ブルーカーボン推進プロジェクト」
2026.09.28
再生可能エネルギー事業
国内事業会社初 RE100 の目標達成について
2026.09.25

写真の上に文字を載せる作法

価値を創造する
環境先進企業へ
DO — #2C9622 の面を敷いて白文字を置く(実サイトの作法)
価値を創造する
環境先進企業へ
DON'T — text-shadow で済ませる(実サイトは可視 0 件)

入力欄

既定の状態
フォーカス(outline に東急グリーン)
市外局番から入力してください
GRID

1200px のコンテナ、影ゼロ

Full bleed — ヒーロー 1440×560px
Wide 1400px
Container 1200px ★最多(12 要素)
Column 1020px — 会社情報の本文
calc(100% - 120px) — 左右 60px を残す全幅ブロック(4 要素)
0px ★全体
100% 円(3 要素)

Depth & Elevation

Level 0(唯一)
box-shadow: none
階層は淡い面で
#EDF5E6 / #F4F5F2
階層は緑の枠で
1px solid #0B8100

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

Responsive

body は動かない。1440 / 1200 / 834 / 375px の 4 幅すべてで 16px / line-height 1.70 / letter-spacing normal のまま。流体(vw / clamp)も SP での縮小も無い。html は 10px 固定なので rem は 10 倍で読む(2.88rem = 28.8px)。

ブレークポイントは (max-width: 767px) が CSS 全文で 1513 回と圧倒的に多く、767/768px が主分岐。ほかに 991 / 1059 / 1060 / 1200px で細かく調整する。@custom-media 由来の (--sm-gt) and (--lg-lte) も 19 回出てくる。