ブランド色は #FF7500。グレーは --color-s0 〜 --color-s9 の9段で、文字は #6F7175(163 要素)、面は #3F4042(52 要素)が最多。
CSS 変数 83 個のうち 60 個は WordPress / Gutenberg 由来。--wp--preset--color--*(#cf2e2e #ff6900 等)を自社の色として採用しないこと。自社トークンは 23 個。
body の letter-spacing は normal なのに、実測の字間はすべて font-size の 4%。サイズに比例して px が変わる=継承ではなく各要素が em を持っている。
| font-size | letter-spacing | 件数(トップ) | 見え方 |
|---|---|---|---|
| 11px | 0.44px | 52 | ダイニー POSレジ |
| 12px | 0.48px | 112(最多) | 顧客インタビュー |
| 14px | 0.56px | 84 | サービスのご紹介 |
| 16px | 0.64px | 35 | 各店舗の状態が正しく把握できない |
| 18px | 0.72px | 60 | オペレーションの標準化 |
| 20px | 0.8px | 59 | コストを下げる |
| 24px | 0.96px | 30 | 導入事例 |
| 70px(ヒーロー) | 2.1px = 0.03em | 1 | ※ここだけ 0.03em |
body に letter-spacing: 0.04em を書き直してはいけない。em を body に書くと 16px × 0.04 = 0.64px が全サイズに固定継承され、12px の注記(実サイトは 0.48px)が相対的に空きすぎる。実サイトはサイズに比例させている。例外は数字(3,000 2,000)の normal(13 要素)。
font-weight: 800 / 900 を書かない。読み込んでいる Noto Sans JP / Noto Sans は可変フォントの wght@400..700で、レンジ外は 700 にクランプされる。実サイトのヒーロー見出し(900)とキャンペーン帯(900・9 要素の 800)がそれ。Poppins の 600 も unloaded なので使わない。
palt は 1 要素も無く、CSS 全文にも 0 回。字詰めは letter-spacing だけで作る。word-break の宣言も CSS 全文で 1 回だけで、改行位置は HTML 側の <br> で決めている。
実測の影はトップで 1 要素だけ、下層は 0 種。段差は #F7FAFC ↔ #FFFFFF ↔ #F2F7FF の地色と、#D0D4DB / #E9EDF5 の罫線で作る。
各店舗の状態が正しく把握できない
店舗は増やせても任せられる人が育たない
売上は伸びてもコストが見えず利益が残らない
数字だけ letter-spacing: normal。実測 13 要素。価格・店舗数には字間を足さない。
トップの 511 要素のうち影を持つのは 1 つ。下層の 414 要素は 0。影を足すと別物になる。
ブレークポイントは max-width の宣言が圧倒的(768px が 213 / 255 件、1024px が 90 / 110 件)。デスクトップ基準で下へ上書きする設計で、モバイルファーストではない。
html / body は 4 幅(1440 / 1200 / 834 / 375px)すべて 16px 固定。rem 換算は常に 16px 基準でよい。見出しだけメディアクエリで切り替わり、字間は 0.04em のまま追従する(32px → 1.28px、24px → 0.96px)。