東急不動産のサステナビリティ
ブランド色は 東急グリーン #0B8100 ひとつ(文字 47 / 面 21 要素)。写真の上に載せる面だけ明るい #2C9622 を使う。本文は純黒 #000000(可視 153 要素)で、#333333 に逃げていない。CSS Custom Properties による自社トークンは 0 個で、検出された 1 個は Swiper の既定値だった。
下層ページの帯は div::after.c-hero-sub の疑似要素。querySelectorAll("*") の走査には出てこないので、要素側だけ見て「帯に色が無い」と判断しないこと。
また トップは heroCover: true(1440×560px の写真が画面上部を覆う)。抽出の viewportTopByArea は先頭に #2C9622 を返すが、これはラベル面であってページの地色は白。
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 は「使っている」証拠にならない。
| Family | loaded weight | トップの可視要素 | 判定 |
|---|---|---|---|
| Noto Sans JP | 400 / 500 / 700 | 210 | ★和文の本体 |
| Inter | 400 / 500 / 600 | 44 | ★欧文ラベル・数値 |
| Noto Sans | 400 / 500 / 700 | 0 | 読み込んでいるが未使用 |
| Jost | 600 / 700 | 0 | 読み込んでいるが未使用 |
| Noto Serif JP | 400 / 600 | 0 | 読み込んでいるが未使用 |
| Train One | 400 | 0 | 読み込んでいるが未使用 |
| YuGothicM | (local のみ) | 0 | unloaded が正常(下記) |
游ゴシックの 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 フォントを使わない案件で流用する価値がある。
字間に設計が無い。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 の既定の字送りのまま組む。
CTA は「1px solid #0B8100 の枠」と「#0B8100 の面 + 白文字」の 2 種だけ。border-radius はサイト全体で 0px で、例外は円形要素(100%)3 要素。
数値は Inter 42px / weight 700 / line-height 0.90、単位は 16.8px、ラベルは Noto Sans JP 18px / lh 1.60。面は #EDF5E6。
影を使わないサイト。CSS 全文には box-shadow が 46 回、text-shadow が 10 回宣言されているが、実測した 2 ページの可視要素では 1 つも使われていない。filter: drop-shadow() は 0 回。
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 回出てくる。