Drawing the future from space,
adding new colors
to people and society.
CSS 変数に --red: #A7153C(丹)と --blue: #1C4C6F(青)が定義されている。会社案内には「「丹青」とは、赤(丹)・青の基本的な 2 色から…」という一文がある。色が先にあってブランドがあるのではなく、名前が先にあって色がある。実測では役割がはっきり分かれていて、赤は文字とアクセント、青は面に使う。
カテゴリバッジの 2 色(#376895 / #555879)はトークン化されていない。--red / --blue だけを見て「このサイトは 2 色」と書くと取りこぼす。バッジは 4 色の体系として扱うこと。また 下層ページの地色は白ではなく #F7F7F7。
和文は Noto Sans JP、欧文の見出しとラベルだけ Roboto に切り替える。@font-face は和文 400/500/700・欧文 400/500/600/700 がすべて loaded しているが、和文で実際に使われるのは 400 と 500 の 2 段だけ(実測の 600 / 700 はすべて Roboto の要素)。和文に 600 を当てると Noto Sans JP に 600 が無いため 700 に丸められる。
html は 10px 固定で、動くのは body 以下。768px で 15px、1200px で 16px を線形補間する。傾きは厳密に 1px / 432px(= 1200 − 768)。768px を下回ると流体が止まり、行間も 2.0 → 1.8 に落ちる。
| Viewport | html | body font-size | body line-height | 比率 |
|---|---|---|---|---|
| 1440px | 10px | 16px | 32px | 2.00 |
| 1200px | 10px | 16px | 32px | 2.00 |
| 1000px | 10px | 15.537px | 31.074px | 2.00 |
| 834px | 10px | 15.1528px | 30.306px | 2.00 |
| 768px | 10px | 15px | 27px | 1.80 |
| 375px | 10px | 15px | 27px | 1.80 |
CSS では clamp(1.2rem, .8444444444rem + .462962963vw, 1.4rem)(12px→14px)のように書かれている。.462962963vw × 432px = 2px で、すべての clamp が 768〜1200px の窓で設計されている。letter-spacing と line-height を px で書き写すと、この帯域で比率が崩れる。
font-feature-settings: "palt" は CSS に 7 回あるが、この 2 ページでは 1 要素も効いていない。セレクタがすべて .main--partner*(協力会社向けページ)に限定されていて、グローバルナビでは font-feature-settings: normal で明示的に打ち消してすらいる。コーポレート画面に palt を足さないこと。使う場合は実サイトと同じく letter-spacing: .08em とセットにする。
border-radius の実測は 100%(円)が 76 要素、100px(ピル)が 4 要素。4px や 8px の角丸は 1 要素も無い。遷移の既定はテキストリンク(padding: 0 0 1px)で、面のボタンは持たない。
影を使わないサイト。CSS 全文には box-shadow が 42 回、text-shadow が 6 回宣言されているが、実測した 2 ページの可視要素では 1 つも使われていない。filter: drop-shadow() は 0 回。奥行きは斜めに切った面・写真・#dddddd の罫線・#F7F7F7 と白の差で作る。
縦組みは使っていない。CSS 全文に writing-mode が 23 回あるが、実測した 2 ページの該当要素は 0 件。縦組みを実装しないこと。