単色の鹿島レッド #e6002d は可視 1 要素だけ。ブランドの赤が面積を取るのは採用セクションのグラデーション(可視 71 要素)。本文は純黒ではなく暖かい墨色 #363434。
box-shadow: 0 0 0 1px で引く(21 要素)#4b81e8 は採用しないこと。クッキー同意バナー(外部 CMP)の「同意する」ボタン専用で、書体も Helvetica, Calibri, Arial とサイト本体(Noto Sans JP)と別系統になっている。
実測はすべて px で返るが、font-size で割ると 0.05em / 0.08em / 0.1em に綺麗に揃う。文字が大きいほど字間を広げる。palt は 1 要素も使わず、字送りは letter-spacing だけで作る。
body { line-height: normal }。日本語サイトとしては珍しく body で行間を決めない。見出しは一律 1.40(42 / 28 / 24 / 22 / 18px すべて)、本文ブロックは 1.50、ナビ・ラベル・日付は 1.00(実測 92 要素で最多)。長い本文を置くときだけ 1.5 を明示する。
font-feature-settings は実測 0 件。palt も kern も tnum も当てていない。約物を詰めたいときは letter-spacing を 0.02em 側へ動かすのがこのサイトの流儀(記事タイトル 31px の例)。
欧文は Roboto Condensed。英字のセクション見出し(NEWS PROJECTS TECHNOLOGY)だけコンデンス体に切り替え、和欧が混ざる見出しは "Roboto Condensed", "Noto Sans JP" の順で英字はコンデンス・和文は Noto の二層にする。Oswald は宣言のみで unloaded。使わない。
角丸は 4px が既定(実測 76 要素)で、塗りボタンだけ 0px。枠線は border ではなく box-shadow: 0 0 0 1px #9ea3a6 で描いている(ぼかし 0 =実質 1px の枠で、影ではない)。
暗面 #1e1e1e に 1px solid #595757 の枠、padding 32px、border-radius 4px。
ぼかしのある影はほぼ使わない。階層は枠線と地色(#f5f6f7 / #ffffff)で作る。現在地マーカーの rgba(0,0,0,0.2) 8px 4px 0 0 もぼかし 0 のズレ影で、浮かせるためのものではない。
| 項目 | 値 | 実測 |
|---|---|---|
| Container | 1440px | 12 要素(最多) |
| Wide | 1680px / 1730px / 1880px | ヒーロー・全幅セクション |
| Gap(カード) | 12px | 35 件(最多) |
| Gap(大カード) | 24px 32px | 7 件 |
| Gap(セクション) | 40px | 10 件 |
| Breakpoint(主) | min-width: 768px | 377 件(圧倒的最多)。モバイルファースト |
| Breakpoint(SP) | max-width: 767px | 50 件 |
| Breakpoint(Wide) | min-width: 1440px | 18 件 |
モバイルファースト。既定をモバイルで書き、min-width: 768px で PC を上書きする(min-width 系が max-width 系の 7 倍)。letter-spacing を em で書いてあるので、ブレークポイントでサイズが変われば字間も自動で追従する。