01 / Colors

太陽・水・夜・雲で名付ける

自社トークンは 58 個。基本色が --sun --water --night --cloud --leaf という自然物の名前で、そこに 6 系統のスケール(--gr-* --pu-* --av-* --ly-* --pa-* --sa-*)が 50〜600 で付く。面の青(#447fe0)と文字の青(#3f6ecc)は別の値なので混ぜない。

--sun
#ffda1b
★マーカー引き・強調ラベル・ヒーロー1枚目の地色(可視 11 要素)
--water
#447fe0
★CTA の面色(可視 10 要素)。文字色には使わない
--pu-400
#3f6ecc
★リンク・タブの文字色(可視 107 要素)
--night
#202226
★本文色(可視 146 要素)
--av-500
#197f38
機能バッジの面(可視 9 要素)
--pa-400
#ee7100
「人数」バッジの面
--gr-100
#f0f1f5
★チップの面(可視 64 要素で最多)
--sa-50
#fbf8ee
グローバルナビのドロワー・タブの面
--pu-50
100
200
300
400
500
600

ヒーローの地色はスライドごとに変わる。#f6efdc / #ffda1b / #edf6ff の 3 枚が swiper-slide として同時に DOM 上にあるため、pageBackground.resolved は #edf6ff を返す。ページの地色は白。

--leaf: #2f7417 は変数にあるだけで実装に現れない。実際の緑は --av-400: #30a143 と --av-500: #197f38。変数の宣言値をそのまま実装値として書かないこと。

YakuHanJP と palt で二重に詰める

font-feature-settings: "palt" が 1111 要素(下層 531 要素)。さらに font-family の先頭に約物だけのサブセットフォント YakuHanJP を置く。body の letter-spacing は normal で、字間は要素ごとに当てる(継承型ではない)。

101214 161820 2432 48
Hero HeadlineNoto Sans JP / 44px / 700
lh 70.4px (1.60) / ls 2.46297px
人事から現場まで根付く
Section Heading ★Noto Sans JP / 48px / 700
lh 67.2px (1.40) / ls 1px
タレントマネジメントシステム
NumberInter / 48px / 900
数字だけ欧文に切り替える
4,500
CTA Label ★游ゴシック / 24px / 700
lh 33.6px (1.40) / ls 2.4px(0.1em)
見積もりしてみる
Card Heading游ゴシック / 22px / 700
カオナビとは
Badge游ゴシック / 18px / 700 / ls 1px
従業員データベース
Body ★游ゴシック / 16px / 400
lh 28.8px (1.80) / ls normal
人材配置や育成など、組織の未来を左右する判断を誤らないために、人事データを一元化して可視化します。
UI / Nav ★游ゴシック / 14px / 700
lh 28.8px (2.06)・可視 145 要素で最多
活用シーン 一覧を見る
Chip游ゴシック / 12px / 400 / ls 0.6564px
小規模向け 中規模向け 大規模向け
Note游ゴシック / 10px / 400
※:タレントマネジメントシステム シェアNo.1

ウェイトは 700 が既定。実測は 700 (172) / 400 (138) / 500 (17) / 900 (6) / 800 (1)。見出しもナビも 700 で、中間の 500 はほとんど使わない。Noto Sans JP の 500 は unloaded なので、500 を当てても Noto Sans JP では描かれない。

本文に letter-spacing を当てない。既定は normal(242 要素)。開くのはセクション見出し(1px)と大型 CTA(2.4px = 0.1em)だけ。日本語の大きな文字は放っておくと詰まって見えるため、サイズが上がったときだけ広げる。

変数 --noto は定義されているが、Noto Sans JP で描かれるのは 24 要素だけ。残り 296 要素は YakuHanJP + 游ゴシック体 のローカルスタック。Windows の游ゴシック問題は「Yu Gothic M という別名の @font-face + スタックに 游ゴシック Medium を並べる」合わせ技で解いている。

03 / Components

影で浮かせる大きな CTA

CTA は radius 12px・3 重の影。バッジは 32px、チップは 14px、ヘッダーの小ボタンだけ 4px。強調は下線でも面色でもなく、文字の下 30% を黄色く塗るマーカー引きで作る。

機能 人数 新機能が登場 だから、カオナビは 1000〜4999名 製造・メーカー
人材情報の一元化
紙とExcelに散らばった情報を1か所にまとめ、異動検討の工数を削減します。
人事評価
いまお使いの評価シートをそのまま再現。運用を変えずに電子化できます。
4,500
社以上のユーザーが集うコミュニティ(※2026年6月時点)

影は 3 重が主力。0 2px 2px rgba(0,0,0,.14), 0 6px 10px -2px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.2) が 35 要素。選択中のチップだけ 0 2px 8px rgba(0,0,0,.25)。
変数 --elevation-1-box / --elevation-2-box(rgba(32,34,38,…))は定義されているのに実装では 1 要素しか使っていない。

マーカー引きの実装: background-image: linear-gradient(rgba(0,0,0,0) 70%, #ffda1b 30%)。ヒーローだけ下 40%(60% / 0%)。下線でも面色でもないので、`text-decoration` で代用しないこと。

1280px と 768px の一本道

項目値実測
Container1280px30 要素で最多。読み物は 962px / 800px / 760px
Wide1440px / 1760px画像を含む帯
Gap0 10px11 要素で最多。カードは 16 / 20 / 30 / 40px
Breakpointmax-width: 768px138 件。これ1本で PC / SP を切り替える
Breakpoint(補助)max-width: 1024px2 件
Radius12 / 14 / 32 / 20 / 4pxカード 50 要素・チップ 15・バッジ 10

CSS 変数は 105 個検出されるが、自社トークンは 58 個。残り 47 個は --wp--preset--*(WordPress / Gutenberg の既定値)で設計トークンではない。件数だけで「トークンが充実している」と判断しないこと。