ブランド色は #d61d00 ひとつ。本文は純黒ではなく #222222、地色は白ではなく #F0F0F0。ヘッダーに「反転表示」があるため、高コントラスト用の赤 #AD133F が CSS 変数として対で用意されている。
pageBackground.resolved は白(根拠 body)だが、見えている地色は #F0F0F0。 main.lo-globalContainer が 1,094,400px² を占めて白を覆っている。コンテンツの地色は #F0F0F0 として組むこと。
和文はモリサワの TBUD ゴシック 3 ウェイトと UD タイポスの計 4 本。すべて CSS 変数で名指しされ、書体名とウェイトが 1 対 1 で対になっている。字間は触らず、詰めは palt に一任する。
letter-spacing は normal 一択(実測 355/355 要素・371/374 要素)。詰めは書体と font-feature-settings: "palt"(実測 1948 要素)に任せる。CSS で字間を足すと二重にかかるので書かない。
太さは font-weight ではなく書体名で切り替える。--font-sans-jp-b: "MFW-TBUDGoStd-Bold" と --font-sans-jp-b-weight: 600 が必ず対で使われる。@font-face 側が font-weight: 1 1000 を受けるため、600 / 800 を指定してもブラウザの合成太字にはならない。Regular の書体名のまま 700 を当てないこと。
Google Fonts が 10 ファミリー @font-face 宣言されているが、実測した全ページで全件 unloaded(Barlow 9 本 / M PLUS Rounded 1c / Noto Sans JP / Noto Serif JP / Shippori Mincho B1 / Yusei Magic / Zen Maru Gothic 5 本)。宣言はあるが描画には一切使われていない。このプレビューでは TBUD ゴシックの代替として同じモリサワ製の BIZ UDPGothic を使っている(実サイトの 600 / 800 はどちらも 700 で代用)。
展示 TOP で 12 要素が writing-mode: vertical-rl。外部ウィジェット由来ではなく、サイト本体の展示名見出しで、UD タイポスを使う。
letter-spacing を書く唯一の場所が縦組み見出し。横組みでは全要素 normal を守る。
CTA の面色は赤・墨・グレー・白+2px 枠の 4 種。角丸は 4px(ボタン)/ 10〜15px(カード)/ 1440px(pill)/ 0px(バッジ)を用途で使い分ける。影は 1 要素も使わない。
box-shadow は実測 0 件。階層は (a) 地色 #F0F0F0 と面 #ffffff の差、(b) 1px solid #F0F0F0 の枠、(c) 角丸の大きさで表す。カードを浮かせないこと。
| 項目 | 値 | 実測 |
|---|---|---|
| html font-size | 10px | rem は ×10 で px に直る(1.7rem = 17px) |
| Container | 1440px | 7 要素(最大幅) |
| Panel | 560px | 6 要素(カード・パネル) |
| Article | 920px / 1160px | 4 要素 / 2 要素 |
| Gap | 18px / 20px | 27 件 / 27 件(展示 TOP は 20px が 44 件) |
| Breakpoint(主) | max-width: 1023px | 979 件(最多)。min-width: 1024px が 124 件 |
| Breakpoint(SP) | max-width: 767px | 40 件 |
1024px が主分岐。それ未満は「モバイル用の別レイアウト」として 979 件のルールが当たる。
ヘッダーに「文字サイズ 大 / 小」のトグルがあるため、rem ベースで組んで拡大に追従できるようにする。