デザインシステム v4

レイヤー構造

サイト全体のデザインルールは 4 つの層に分かれている。各層の適用範囲は明確に区別される。

第0層 MOON

適用範囲：最上位権限

すべての層のルールを変更できる唯一の存在。

第1層 コーポレートルール

適用範囲：すべてのページ

サイト全体に必ず適用されるインフラ。ヘッダー / フッター / パンくずリスト のみ。

第2層 プラネットルール

適用範囲：プラネット単位

ページ群（プラネット）ごとに適用されるルール。本文スタイル・レイアウト・運用方針などはここに含まれる。

第3層 サテライトルール

適用範囲：個別ページ単体

個別LP等、特定ページ専用のルール。

第0層：MOON

すべての層のルールを変更できる最上位権限。本デザインシステムを書き換えられる唯一の存在。

第1層：コーポレートルール

サイトの全ページに必ず適用されるインフラ層。ここに入るのは「どのプラネットのページでも必ず同じものが出る」要素のみ。

1-1. ヘッダー

1-2. フッター

1-3. パンくずリスト

第2層：プラネットルール

サイトを 6 つのプラネットに分けて運用する。各プラネットは独立した役割を持ち、グループ単位でデザイン方針を共有する。

プラネット一覧

各プラネットの対象パスと所属グループを下記に整理する。具体的な本文スタイル等の詳細ルールは、各プラネットのページまたはサンプル（CMSなど）を参照。

2-3 CMSページ プラネットルール

コラム / ニュース / セミナー / 導入事例 の4種類の CMS 詳細ページに統一適用される本文スタイル。 Notion DB から自動生成された記事を、すべて同じ見た目でレンダリングする。

ライブプレビュー： /sample/cms-headings/ （実際の記事レイアウトを使ったサンプル。記事運用チーム向け共有用）

A. Notion 編集ルール（運用チーム向け）

B. Notion → HTML マッピング

タイトル列（DB）

出力：<h1>（hero）

用途：記事タイトル

H1（本文中）

出力：<h1>

用途：使用非推奨

H2

出力：<h2>

用途：章タイトル（下に青ボーダー）

H3

出力：<h3>

用途：中見出し（左に青ボーダー）

H4（任意）

出力：<h4>

用途：小見出し（青文字）

C. 本文スタイル仕様

h1

28px / weight 800

下に青2pxボーダー

h2

22px / weight 800

下に青2pxボーダー

h3

18px / weight 800

左に青3pxボーダー

h4

17px / weight 800

文字色 #1E50FF（青）

通常テキスト (p)

16px / weight 400

濃紺 #0B1639

箇条書き (ul)

「・」（青）

番号付き (ol)

「1. 2. 3.」（青）

引用 (blockquote)

角丸ボックス背景 #F2F6FC

テーブル

14px

全方向罫線・ヘッダ背景 #F2F6FC

D. 重要ポリシー

第3層：サテライトルール

個別ページ単体（サービスLPなど）専用のルール。プラネットルールに収まらない独自要件は、各ページの実装内で定義する。詳細は本デザインシステムには掲載しない。

ルールの強さ

4階層は「どこに効くか」を決める。v4 はそこに「どれだけ強いか」を足す。締める強さではなく、締める対象を変える。

① 不変

対象：可読性の下限（本文サイズ・コントラスト・フォーム）

強さ：CI で落とす

逸脱：不可

趣味ではなく機能の要件。読めない文字はデザインの選択肢ではなく不具合。

② 語彙

対象：フォントサイズ・行間・角丸・カラー

強さ：レビューで見る

逸脱：理由を1行書けば可

「どの値が存在してよいか」を閉じる。逃げ道のないルールは黙って無視され、分裂する。

③ 自由

対象：どのトークンをどこに使うか / レイアウト / モーション / 構成

強さ：縛らない

逸脱：—

用法を縛ると表現が死ぬ。v2 で撤廃した「h1=48px」型のルールを復活させない。

ルールが厳しすぎたと判定する基準を置く。同じルールを破りたい実例が3回出たら、ルールのほうが間違っている。3回目でルールを直すか、語彙を拡張する。例外が3回出たのに直さないことが、統一感を失う本当の原因になる。

① 可読性の下限

ここだけは逸脱を認めない。テキストは読ませてこそ機能する。AI にとって読めても、人間が読めなければ意味がない。scripts/check-readability.mjs が CI で検査し、違反があればビルドを落とす。

本文は 16px 以上

適用範囲：PC・スマホ共通

スマホは画面が狭いのであって、文字を小さくする理由はない。距離が近く環境も悪いぶん、むしろ大きさが要る。

全用途 12px 未満は禁止

適用範囲：全要素

ラベル・キャプションでも 12px を下限とする。

コントラスト 4.5:1 以上

適用範囲：文字色 × 地の色

WCAG AA。薄い色は「上品」ではなく「読めない」。

フォーム入力は 16px 以上

適用範囲：input / textarea / select

これ未満だと iOS Safari が自動ズームし、レイアウトが壊れる。趣味ではなくバグ回避。

検査の対象は src/pages・src/components・src/layouts・public/assets/css。.astro のスコープ付きスタイルと素の .css の両方を見る。

2つの検査の役割

CI（version-check）

いつ：PR ごと

範囲：検査対象のページ

落とす条件：違反 1 件でも

ADIS（日次巡回）

いつ：毎日

範囲：サイト全体

落とす条件：基準より増えたページ

決めた値は、検査とセットで持つ。検査のない値は保たない。

このページと /ai/design-system.json と検査スクリプトは、同じ scripts/lib/design-tokens.mjs を読む。値を書き写さないので、ドキュメントだけが古くなることがない。

scripts/check-readability.mjs

見るもの：① 可読性の下限（本文16px・全用途12px・コントラスト4.5:1・フォーム16px）

強さ：CI。1件でも落とす

逃がし方：なし（① は逸脱不可）

scripts/adis/readability-check.mjs

見るもの：同上をサイト全体で

強さ：ADIS 日次。基準より増えたら

逃がし方：baseline を更新する

scripts/adis/vocab-check.mjs

見るもの：② 語彙（角丸・字間・段の幅・行間・カードの余白）

強さ：ADIS 日次。語彙外を報告

逃がし方：該当行に vocab-ok と理由

scripts/adis/type-scale-check.mjs

見るもの：役割 → サイズ（段から外れた font-size）

強さ：ADIS 日次。基準より増えたら

逃がし方：ブロックに vocab-ok / 数値は対象外

scripts/adis/inline-style-check.mjs

見るもの：インラインの style=""（カスタムプロパティ以外）

強さ：ADIS 日次。1件でも報告

逃がし方：なし。値は CSS 側に書く

scripts/adis/important-check.mjs

見るもの：!important の数

強さ：ADIS 日次。基準より増えたら

逃がし方：baseline を更新する

scripts/adis/token-scope-check.mjs

見るもの：そのページで解決できないトークンの参照

強さ：ADIS 日次。1件でも報告

逃がし方：なし。定義するか、値をそのまま書く

scripts/adis/service-catalog-check.mjs

見るもの：サービスページ・services.json・llms.txt の3者一致

強さ：ADIS 日次。1件でも報告

逃がし方：未公開なら url を書かない

scripts/adis/doc-sync-check.mjs

見るもの：検査の一覧と、実在する検査スクリプトの一致

強さ：ADIS 日次。1件でも報告

逃がし方：なし

scripts/adis/cover-check.mjs

見るもの：記事カバー画像の未設定

強さ：ADIS 日次

逃がし方：なし

scripts/adis/faq-check.mjs

見るもの：FAQ の画面表示と FAQPage スキーマの一致

強さ：ADIS 日次。1件でも報告

逃がし方：なし

scripts/adis/content-check.mjs

見るもの：コンテンツの slug 整合

強さ：ADIS 日次

逃がし方：なし

scripts/check-page-freshness.mjs

見るもの：変更したサービスページの LAST UPDATED

強さ：CI。更新漏れで落とす

逃がし方：コミットに [skip-freshness]

scripts/check-version-sync.mjs

見るもの：TOP の版数が semver か・日付が全ページ以上か

強さ：CI

逃がし方：なし

ADIS はラチェットとして働く。基準を置き、そこから増えたページだけを報告する。減ったときは鳴らさず、基準の更新を促す。

② 語彙

サイズ・行間・角丸・カラーは、定義された値からしか選ばない。少なく始めて、足りなければ足す。足す判断はできるが、減らす判断は誰もしないため。

フォントサイズ （6 段階 + display）

12 / 14 / 16 / 18 / 22 / 28px / display(clamp)　※ 割り当ては「役割 → サイズ」に従う。数値と疑似要素の記号は載せない

影 （3 段階）

--shadow-1 浮く / --shadow-2 離れる / --shadow-3 手前に出る

動き （2 段階）

--t-fast 150ms（色・枠・不透明度）/ --t-slow 250ms（位置・大きさ）＋ --ease

角丸 （6 段階 + ピル + 円）

0 / 4 / 8 / 12 / 16 / 24 / 999px / 50%　※ 999px はピル、50% は円。面が大きいほど大きく

字間 （7 段階）

-0.02 / -0.01 / 0 / 0.02 / 0.06 / 0.12 / 0.2em　※ -0.02 大見出し / -0.01 中見出し / 0.02 本文 / 0.06 小ラベル / 0.12 英字大文字 / 0.2 特に広い字送り

段の幅 （5 段階）

720 / 880 / 1080 / 1280 / 1440px　※ 720 読む幅 / 880 狭い段 / 1080 標準 / 1280 広い段 / 1440 最大。600px 未満は「段」ではなく部品の寸法なので縛らない

カラー （パレット＋プラネットのトークン）

パレットと完全一致する色は var() に。知覚差 ΔE ≤ 3 は寄せる。ΔE > 8 はページ固有色なのでプラネットのトークンとして宣言する。白と黒はリテラルのまま

カードの内側の余白 （8 段階）

4 / 8 / 12 / 16 / 24 / 32 / 40 / 48px　※ 適用範囲はカードの内側

行間 （5 段階）

1 / 1.2 / 1.4 / 1.65 / 1.85　※ 1 単行 / 1.2 大見出し / 1.4 見出し・識別子 / 1.65 走査・リード / 1.85 本文。読むほど広く、見るほど詰める

サービス群（INDEPENDENT）は語彙を拡張できるが、無視はできない。独自の値を使うなら、そのプラネットのトークンとして宣言する。「独自世界観だから何でもあり」を「独自だが定義されている」に変える。

逸脱の書き方

② は逸脱不可ではない。理由を1行書けば外れてよい。該当の宣言と同じ行に vocab-ok と理由を CSS コメントで添える。書かれていない逸脱だけを、ADIS が毎日報告する（scripts/adis/vocab-check.mjs）。CI では止めない。止めるのは ① だけ。

揃え

読ませる文章は左揃え。中央揃えは行頭が揃わないので、目が毎行さまよう。見出し・ボタン・短い注記のように一目で終わるものは中央でよい。

左揃えにするのは、本文サイズ（16px 以上）で、幅 560px 以上の段に置かれた文章。それ以外は中央でよい。

カラーの決め方

カラーは知覚差（ΔE）で扱いを分ける。サービス群（INDEPENDENT）には固有の色があるので、すべてをパレットへ寄せることはしない。

完全一致

パレットの色そのもの

扱い：var() に置き換える

ΔE ≤ 3

並べても人の目には区別できない

扱い：パレットへ寄せる

3 < ΔE ≤ 8

並べると違いが分かる

扱い：寄せない。1件ずつ見る

ΔE > 8

別の色

扱い：そのプラネットのトークンとして宣言する

白（#fff）と黒（#000）はリテラルのままでよい。曖昧さがなく、将来変えることもない。トークンにすると、かえって「どの白か」を考えさせる。

トークンの解決

レイアウトを使わないページは style.css を読み込まない。そこではグローバルのトークンを参照せず、ページ内で定義するか、値をそのまま書く。

カードの5型

面のつくりは5つ。名前を統一するのではなく、値を型に合わせる。

面（Surface）

枠：なし 影：なし 角丸：12px 内側の余白：24px

セクションの中の区画。地の色を変えて区切るだけのもの

カード（Card）

枠：1px 影：なし 角丸：16px 内側の余白：24px

並列に並ぶ情報。いちばん多い

パネル（Panel）

枠：1px 影：なし 角丸：16px 内側の余白：32px

中に見出しと本文が入る大きな面

押せるカード（Tile）

枠：1px 影：--shadow-1 角丸：16px 内側の余白：24px

クリックできるもの。ホバーで浮く。押せないものに影を付けない

チップ（Chip）

枠：なし 影：なし 角丸：999px 内側の余白：4px 12px

ラベル・タグ。文字は 12px

影は「押せる」の合図に限る。押せない面に影を付けると、押せるものと見分けがつかなくなる。クリックできない箱にホバーを付けないのと同じ理由。

役割 → サイズ

サイズは重要度の表現であって、装飾ではない。刻みすぎると重要度がぼやける。だからサイズは見た目で決めず、役割で決める。

読み手は「サイズが違う＝重要度が違う」と受け取る。同じ役割に別々のサイズを当てると、存在しない階層を読ませることになる。

読み方は3種類ある

本文（16px）と補足（12px）の中間に何を置くかは、読み方で決まる。

読む（read） 16px

文として通読する。文意を追う

走査する（scan） 14px

一覧から目的のものを探す。全部は読まない

確認する（check） 12px

存在を認識するだけ。「日付がある」「タグがある」

14px は「読ませるが、通読させないもの」。表の中身・一覧行・カード内の説明が該当する。ここを16pxにすると表が横に溢れ、12pxにすると探せなくなる。

対応表

clamp(36–56px) ディスプレイ

該当：ヒーロー見出し（1ページに1つ）

読み方：見る 行間：1.2

28px セクション見出し

該当：h2 / section-title

読み方：見る 行間：1.2

22px ブロック見出し

該当：title / name / h3

読み方：見る 行間：1.4

18px リード文・小見出し

該当：lede / lead / h4

読み方：読む（導入） 行間：1.65

16px 本文・操作

該当：text / desc / p / btn / link / more

読み方：読む・押す 行間：1.85（操作要素は 1）

14px 走査テキスト

該当：table / row / list / カード内の説明

読み方：走査する 行間：1.65

12px 識別子・注釈

該当：label / chip / tag / badge / note / date

読み方：確認する 行間：1.4

操作要素（ボタン・リンク）を 16px に置いたのは意図的。押させるものは読ませるものと同格以上でないと、指で狙えない。

行間はこの表から引く。

寄せ方

段から外れた値は1段ずつしか動かさない。役割が決めるのはどちらの隣へ寄せるかだけで、寄せ先はその役割の本来のサイズに近いほうを採る。役割が読めないものは大きいほうへ倒す。小さくして困るのは読む人だが、大きくして困るのは書く人だけだから。

clamp() は display だけのもの

clamp() を使ってよいのは display だけ。ヒーロー見出しは画面幅で見え方が大きく変わるので流動的でよいが、本文・ラベルは役割でサイズが決まるので固定する。上限が 28px 未満の clamp は、その上限（＝デスクトップでの設計意図）を役割の段へ寄せた。

疑似要素（::before / ::after）が出すのは記号・番号・飾りで、読ませる文字ではない。段の対象外とする。矢印グリフのように文字で作った図形も同じで、vocab-ok と理由を書いて外す。

飾りの点や記号は font-size で縮めず、図形として置く。

サイズ体系に載せないもの

数値（実績・スコア）

該当：num / metric-num / stat-num

サイズ体系から外し、ウェイトと色で階層を作る。数字は文字より視認性が高く、本文と同じサイズでも本文より強く見える。サイズで差をつけると過剰になる。

疑似要素が出す記号・番号

該当：::before / ::after の content

読ませる文字ではないので段に載せない。文字で作った図形（矢印グリフなど）も同じ。

運用の2原則

書体の役割

サイズと同じ考え方で、書体も見た目ではなく情報の種類で決める。

欧文 Roboto

役割：日本語に混ざる英数字。見出しも数値もここ

使う場所：ほぼ全ページ。数値は font-variant-numeric: tabular-nums で桁を揃える

和文 Noto Sans JP

役割：既定。説明する・売る文章

使う場所：ほぼ全ページ

明朝 Shippori Mincho / Cormorant Garamond

役割：述べる・遺す文章

使う場所：/info/genten/（原典 — 循環・自立・共助の書）のみ

システム等幅 ui-monospace ほか

役割：コード

使う場所：<code> のみ。読み込みなし

欧文は Roboto 1本

欧文は Roboto に統一する。コーポレートフォント規定の書体に合わせる。

数値の桁揃えは font-variant-numeric: tabular-nums で担保する。等幅書体を使う理由は「機械の値らしさ」だけでなく桁が揃うことにあり、Roboto は等幅数字を内蔵しているため、書体を1つ減らしても揃いは失われない。

⚠️ 欧文フォントは日本語グリフを持たない。等幅を日本語に当てるとシステムの等幅へ落ちて組版が崩れる。<code> の4箇所だけはシステム等幅で足りるため、書体は読み込まない。

読み込みは1ページ1リクエスト

現在は 643ページが Roboto + Noto Sans JP の1リクエストのみ。原典だけが明朝2書体を追加で読む。ページ側で書体を追加しない。

明朝は「原典」だけ

明朝は権威・格・遺すことを担う書体として残す。

使うのは /info/genten/ の1ページだけ。読み込みもそのページでのみ行う（serif プロパティ）。

英字ラベル（eyebrow）

セクション見出しの上に置く // LABEL 形式のラベルは使わない。構造を表していない装飾は、それ自体が既視感の原因になる。

判断基準

直後の見出しが短い名詞句（14字以下・句読点なし）

例：「よくあるご質問」「沿革」

ラベルは削除。見出し自体がラベルなので、英語で言い直しても情報が増えない

直後の見出しが文

例：「大手企業から成長企業まで。」

ラベルは残す。見出しが内容を語っているぶん、ラベルが「何の節か」を補える

ラベルが数値の単位・順序を示す

例：// AI CITATION RATE / // SERVICE 01

ラベルは残す。見出しにない情報を持つ

AI対策にはならない

ラベルを残す理由として LLMO/AEO は使えない。理由は3つ。

AI に効くのは llms-full.txt・各ページの .md 版・JSON-LD・見出し階層・FAQPage スキーマ。ラベルはそのどれにも入らない。

モバイル方針

スケールは1本。上の帯だけが可変。デスクトップ用とスマホ用のスケールを別に持つと、片方だけが更新される日が必ず来る。

見出し帯（22px〜）

扱い：clamp() で可変

ここは縮めてよい。@media が不要になり、ブレークポイントの乱立も消える。

本文帯（16〜18px）

扱い：固定。縮めない

スマホで本文を縮めるのが最大の害。

ラベル帯（12〜14px）

扱い：固定

本文には使わない。