ページ背景が #ffffff ではなく #e4e4e4(body 直指定・実測 289 要素)。カードだけが白く抜ける。影を一切使わず、面の区別は明度差だけでつけている。
水色が3つある。#11ade6(リンク・バッジ)、#0098d5(ヘッダーのボタンの面)、#0faee8(インジケータ)。#11ade6 を基準にしてよいが、既存ページと並べるときは3つあることを前提にする。
font-feature-settings の宣言は CSS 全文で 0 件(palt を使わない)。約物サブセットフォントも入れていない。代わりに letter-spacing を .1em と .2em の2段階でほぼ全要素に当てる(CSS 全文で .1em が 95 回、.2em が 50 回)。
letter-spacing: normal の要素はトップで 6 / 96、下層で 4 / 174 しかなく、その中身は Previous / Next / Launguage / English といった英語ラベルだけ。「日本語は必ず空ける、英語は触らない」という明確なルール。
約物は詰まらない。 palt も約物サブセットも無いので、「、。「」()・」の前後には全角分の空きがそのまま残る。この状態の上に .2em を重ねるのが、このサイトの字面の作り方。palt を足すと約物が詰まり、字空けと喧嘩する。
最も多いウェイトは 300(Light)(トップ 44 要素 / 下層 40 要素)。次いで 700(31 / 54)、400(20 / 79)。500 は 1 要素だけ。300 と 700 の対比で組む。
@font-face は Noto Sans JP の 300 / 400 / 500 / 700 の4本で、すべて loaded。ただし CTA の1つに font-weight: 900 が当たっている(ヘッダーの「法人様向けページ」)。900 の @font-face は無いので、ブラウザの合成太字で出る。
Noto Serif JP を 400/500/600/700 の4本読み込んでいるが、document.fonts で全部 unloaded・可視 0 要素。1文字も使われていないので、新規実装では @font-face を削ってよい。
カードとチップは 8px、アウトラインのバッジは 10px、ヘッダーのボタンだけ 0px。box-shadow は実測 0 種 / 0 要素。
ボタンの padding は左右非対称(15px 10px 17px 43px)。アイコンの分を左に確保する書き方。
コンテナは 1200px。ルート(html)は全幅 10px で固定だが、body の font-size と line-height が 896px で切り替わる。見出しやナビはサイズだけでなくウェイトも変わる。
| 画面幅 | html | body | グローバルナビ | h2 |
|---|---|---|---|---|
| 1440px | 10px | 16px / lh 24px | 12px / 400 / ls 1.2px | 29px / 700 / ls 2.9px |
| 1200px | 10px | 16px / lh 24px | 12px / 400 / ls 1.2px | 29px / 700 / ls 2.9px |
| 834px | 10px | 10px / lh 15px | 10px / 300 / ls 1px | 15px / 700 / ls 1.5px |
| 375px | 10px | 10px / lh 15px | 10px / 300 / ls 1px | 15px / 700 / ls 1.5px |
字間は em 宣言なので比率で追従する(ナビの 1.2px → 1px はどちらも .1em)。字間を px に読み替えて固定するとモバイルで崩れる。 ナビのウェイトは 400 → 300 に落ち、モバイルでより細くなる。
| Name | Query | CSS 出現 |
|---|---|---|
| Mobile / Tablet | (max-width: 896px) | 57〜58 回 |
| Desktop | (min-width: 897px) and (max-width: 1280px) | 4〜5 回 |
| 補助 | (max-width: 374px) | 3 回 |
| モーション | (prefers-reduced-motion: reduce) | 2 回 |