面として使う紺は #00245c ひとつだけ。枠・文字・面を兼ねる。本文は #1a1a1a(可視 118 要素)で純黒ではない。階層は面の濃度(rgba(148,148,148,.1) → .2)だけで作り、影は 0 種類。
pageBackground.resolved は信用しない。トップは全画面の <canvas>(1440×900)に覆われ、html / body とも塗り指定が無い。コンテンツ領域の地色は UA 既定の白。
実サイトの誤り: ニュース詳細に rgb(0,0,255) の要素が 1 件ある。<a> 直下に文字を直接置いたため UA 既定のリンク青が出ている。新規実装では #00245c を明示すること。
* { font-feature-settings: "palt" }。CSS 全文の宣言はこの 1 行だけで、実測はトップ 697 要素、ニュース詳細 180 要素=ページ上の全要素。見出しだけでも本文だけでもなく、例外なく全部に当たっている。その上から em の字間を当て直す二段構え(letter-spacing 宣言は CSS 全文で 55 件)。
| em | 実測 px(root 14px) | 用途 |
|---|---|---|
| 0.02em | 0.28px @14px | 長文の本文 |
| 0.08em | 1.12px @14px / 0.952px @11.9px | 本文・キャプションの既定(合計 59 要素で最多) |
| 0.10em | 1.4px @14px / 1.54px @15.4px | 小見出し・タグ |
| 0.12em | 1.428px @11.9px / 2.352px @19.6px | ラベル・中見出し |
| 0.14em | 1.666px @11.9px | 強調ラベル |
| 0.15em | 1.95px @13px | ナビ |
| 0.18em | 2.772px @15.4px | 見出し |
| 0.20em | 2px @10px / 5.6px @28px | 大見出しと縦ラベル |
palt と em の字間は必ずセットで再現する。palt だけだと詰まりすぎ、em だけだと約物が空いたままになる。字間は px ではなく em で書くこと——ルートが 4 段で切り替わるので、px 固定にすると小さい画面で字間だけが相対的に広がる。
font-weight: 600 は実体が無い。Lato は 300 / 400 / 700 / 900 しか loaded しておらず、和文側の游ゴシックも Regular / Bold が基本。600 を指定しても 700 か Medium に丸められる。新規実装では 400 / 700 の 2 段に寄せてよい。
実サイトの writing-mode の宣言は 0 件。ヒーロー左右の ARTIFICIAL INTELLIGENCE / MEDICAL は、10px / letter-spacing: 0.20em / line-height: 7.2 の横組みを回転させている。
writing-mode: vertical-rl で組まない。欧文を縦に積むと字が横倒しになるか一文字ずつ立ってしまい、実サイトの見え方と変わる。左のサンプルは比較用に vertical-rl で置いたもので、実サイトとは別の組み方。line-height: 7.2 は実測 24 要素あり、行間ではなく縦位置を取るために使われている。角丸は 0 が既定。例外は事業カードの 6px(4 要素)と SNS ボタンの 3px だけ。box-shadow の実測は両ページとも空で、filter: drop-shadow() も使っていない。
#315096 / #55acee は SNS の公式色で、ブランドカラーではない。ここだけ radius: 3px が付く。
実測した 2 ページに入力欄が無い。border-radius: 0 + 1px solid #00245c に合わせる。
html, body の font-size が 14px → 13px → 12px → 11px の 4 段。rem で組まれた全サイズ・全余白がこれに追従するので、個別のサイズ調整を書かなくてよい。11.9px = 0.85rem、15.4px = 1.1rem のような端数はここから出ている。
ルートの切替(979 / 479 / 325px)とレイアウトの切替(760px)がずれている。max-width: 760px は CSS 全文で 74 宣言と最多だが、ここではカラム構成だけを変え、文字サイズは 13px のまま。
実測: 1440px → 14px / 1200px → 14px / 834px → 13px / 768px → 13px / 767px → 13px / 375px → 12px。
影は 0 種類。階層は面の濃度と紺の面でのみ表現する。