DESIGN SYSTEM / v3
デザインシステム v3
MOON → コーポレート → プラネット → サテライト の 4 階層ルール体系。上位ほど適用範囲が広く、下位ほど自由度が高い。
レイヤー構造
サイト全体のデザインルールは 4 つの層に分かれている。各層の適用範囲は明確に区別される。
| 層 | 名称 | 適用範囲 | 役割 |
|---|---|---|---|
| 第0層 | MOON | 最上位権限 | すべての層のルールを変更できる唯一の存在。 |
| 第1層 | コーポレートルール | すべてのページ | サイト全体に必ず適用されるインフラ。ヘッダー / フッター / パンくずリスト のみ。 |
| 第2層 | プラネットルール | プラネット単位 | ページ群（プラネット）ごとに適用されるルール。本文スタイル・レイアウト・運用方針などはここに含まれる。 |
| 第3層 | サテライトルール | 個別ページ単体 | 個別LP等、特定ページ専用のルール。 |
第0層：MOON
すべての層のルールを変更できる最上位権限。本デザインシステムを書き換えられる唯一の存在。
第1〜3層のルールはすべて MOON が承認した結果として存在する
ルール変更・逸脱・追加・削除は MOON の許可が必要
第1層：コーポレートルール
サイトの全ページに必ず適用されるインフラ層。ここに入るのは「どのプラネットのページでも必ず同じものが出る」要素のみ。
1-1. ヘッダー
コンポーネント：src/components/Header.astro
全ページに自動配置
1-2. フッター
コンポーネント：src/components/Footer.astro
全ページに自動配置
1-3. パンくずリスト
TOPページを除く全ページに設置
Schema.org BreadcrumbList を JSON-LD で同時出力
第2層：プラネットルール
サイトを 6 つのプラネットに分けて運用する。各プラネットは独立した役割を持ち、グループ単位でデザイン方針を共有する。
プラネット一覧
各プラネットの対象パスと所属グループを下記に整理する。具体的な本文スタイル等の詳細ルールは、各プラネットのページまたはサンプル（CMSなど）を参照。
対象パス：/
グループ：コーポレート群
📌 ページ内にバージョン管理（最終更新日）の表記あり
対象パス：/service/research-pr/, /service/idea-design/ ほか
グループ：サービス群
📌 ページ内にバージョン管理（最終更新日）の表記あり
対象パス：/column/, /news/, /seminar/, /customer-voice/
グループ：セミ・コーポレート群
対象パス：/info/
グループ：コーポレート群
対象パス：/download/
グループ：セミ・コーポレート群
対象パス：/ai-directory/, /privacy-policy/ など
グループ：セミ・コーポレート群
2-3 CMSページ プラネットルール
コラム / ニュース / セミナー / 導入事例 の4種類の CMS 詳細ページに統一適用される本文スタイル。 Notion DB から自動生成された記事を、すべて同じ見た目でレンダリングする。
📺 ライブプレビュー： /sample/cms-headings/ （実際の記事レイアウトを使ったサンプル。記事運用チーム向け共有用）
A. Notion 編集ルール（運用チーム向け）
記事タイトル → Notion DB の「タイトル列」を使用（本文中に書かない）
本文中で H1 は使わない — 記事タイトルが既に h1 として hero に出るため
章タイトル → H2 ／ 中見出し → H3 ／ 小見出し → H4
太字（Bold）／ イタリック ／ リンク ／ コード（インライン）／ 取り消し線 は自由に使ってOK
画像はキャプションを入れると alt として出力される
B. Notion → HTML マッピング
| Notion ブロック | サイト出力 | 用途 |
|---|---|---|
| タイトル列（DB） | <h1>（hero） | 記事タイトル |
| H1（本文中） | <h1> | 使用非推奨 |
| H2 | <h2> | 章タイトル（下に青ボーダー） |
| H3 | <h3> | 中見出し（左に青ボーダー） |
| H4（任意） | <h4> | 小見出し（青文字） |
C. 本文スタイル仕様
| 要素 | サイズ | weight | 装飾 |
|---|---|---|---|
| h1 | 28px | 800 | 下に青2pxボーダー |
| h2 | 22px | 800 | 下に青2pxボーダー |
| h3 | 18px | 800 | 左に青3pxボーダー |
| h4 | 17px | 800 | 文字色 #1E50FF（青） |
| 通常テキスト (p) | 16px | 400 | 濃紺 #0B1639 |
| 箇条書き (ul) | — | — | 「・」（青） |
| 番号付き (ol) | — | — | 「1. 2. 3.」（青） |
| 引用 (blockquote) | — | — | 角丸ボックス背景 #F2F6FC |
| テーブル | 14px | — | 全方向罫線・ヘッダ背景 #F2F6FC |
D. 重要ポリシー
明朝体は使わない — 全てゴシックで統一
背景は白固定 — ダークモードは廃止
見出し内の太字は親と同じ見え方 — 「太文字 / 通常文字」で見出しに差を作らない
引用ブロックの左青棒は廃止 — シンプルな角丸ボックスに統一
第3層：サテライトルール
個別ページ単体（サービスLPなど）専用のルール。プラネットルールに収まらない独自要件は、各ページの実装内で定義する。詳細は本デザインシステムには掲載しない。