自社トークンは 58 個。基本色が --sun --water --night --cloud --leaf という自然物の名前で、そこに 6 系統のスケール(--gr-* --pu-* --av-* --ly-* --pa-* --sa-*)が 50〜600 で付く。面の青(#447fe0)と文字の青(#3f6ecc)は別の値なので混ぜない。
ヒーローの地色はスライドごとに変わる。#f6efdc / #ffda1b / #edf6ff の 3 枚が swiper-slide として同時に DOM 上にあるため、pageBackground.resolved は #edf6ff を返す。ページの地色は白。
--leaf: #2f7417 は変数にあるだけで実装に現れない。実際の緑は --av-400: #30a143 と --av-500: #197f38。変数の宣言値をそのまま実装値として書かないこと。
font-feature-settings: "palt" が 1111 要素(下層 531 要素)。さらに font-family の先頭に約物だけのサブセットフォント YakuHanJP を置く。body の letter-spacing は normal で、字間は要素ごとに当てる(継承型ではない)。
ウェイトは 700 が既定。実測は 700 (172) / 400 (138) / 500 (17) / 900 (6) / 800 (1)。見出しもナビも 700 で、中間の 500 はほとんど使わない。Noto Sans JP の 500 は unloaded なので、500 を当てても Noto Sans JP では描かれない。
本文に letter-spacing を当てない。既定は normal(242 要素)。開くのはセクション見出し(1px)と大型 CTA(2.4px = 0.1em)だけ。日本語の大きな文字は放っておくと詰まって見えるため、サイズが上がったときだけ広げる。
変数 --noto は定義されているが、Noto Sans JP で描かれるのは 24 要素だけ。残り 296 要素は YakuHanJP + 游ゴシック体 のローカルスタック。Windows の游ゴシック問題は「Yu Gothic M という別名の @font-face + スタックに 游ゴシック Medium を並べる」合わせ技で解いている。
CTA は radius 12px・3 重の影。バッジは 32px、チップは 14px、ヘッダーの小ボタンだけ 4px。強調は下線でも面色でもなく、文字の下 30% を黄色く塗るマーカー引きで作る。
影は 3 重が主力。0 2px 2px rgba(0,0,0,.14), 0 6px 10px -2px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.2) が 35 要素。選択中のチップだけ 0 2px 8px rgba(0,0,0,.25)。
変数 --elevation-1-box / --elevation-2-box(rgba(32,34,38,…))は定義されているのに実装では 1 要素しか使っていない。
マーカー引きの実装: background-image: linear-gradient(rgba(0,0,0,0) 70%, #ffda1b 30%)。ヒーローだけ下 40%(60% / 0%)。下線でも面色でもないので、`text-decoration` で代用しないこと。
| 項目 | 値 | 実測 |
|---|---|---|
| Container | 1280px | 30 要素で最多。読み物は 962px / 800px / 760px |
| Wide | 1440px / 1760px | 画像を含む帯 |
| Gap | 0 10px | 11 要素で最多。カードは 16 / 20 / 30 / 40px |
| Breakpoint | max-width: 768px | 138 件。これ1本で PC / SP を切り替える |
| Breakpoint(補助) | max-width: 1024px | 2 件 |
| Radius | 12 / 14 / 32 / 20 / 4px | カード 50 要素・チップ 15・バッジ 10 |
CSS 変数は 105 個検出されるが、自社トークンは 58 個。残り 47 個は --wp--preset--*(WordPress / Gutenberg の既定値)で設計トークンではない。件数だけで「トークンが充実している」と判断しないこと。