DESIGN SYSTEM / v2
デザインシステム v2
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つのプラネットに分け、それぞれにルールを定義する。プラネットは3つのグループに分類される。
プラネットの3グループ
コーポレートカラー・コーポレートフォントへの姿勢で3つに分類される。
| グループ | 姿勢 | 含まれるプラネット |
|---|---|---|
| コーポレート群 | コーポレートカラー・フォント・レイアウトを厳密適用。 | 2-1 TOPページ2-4 会社情報2-6 その他 |
| セミ・コーポレート群 | コーポレート〇〇に基本準拠しつつ、必要に応じて柔軟に運用。 | 2-3 CMSページ2-5 お役立ち資料 |
| サービス群 | 独立した世界観を持つ。コーポレート〇〇に縛られず、各サービスが独自カラー・タイポ・レイアウトを設計可能。 | 2-2 サービスページ |
コーポレート群の共通ルール
2-1 / 2-4 / 2-6 が厳密に従うルール。2-3 / 2-5 は基本準拠しつつ柔軟運用。2-2 は適用外。
A. デザイン原則
ボーダーは 1px solid のみ — 装飾的な太線・破線・グラデボーダーは禁止。
パレット外の色を使わない — コーポレートカラー外の色は使用しない（コーポレート群限定）。
「。」改行は意味の切れ目で入れる — 横幅で自然に折り返せる場合は br を入れない。
並列項目の変更 — 同列の並列項目は必ず揃える。
B. コーポレートカラー
プライマリ（ブルー系）
ダーク（ネイビー・テキスト）
ライト（背景・線）
サブ（補助テキスト）
C. コーポレートグラデーション
テキスト3色グラデ（タイトル em用）
linear-gradient(120deg, #1E50FF 0%, #00C6FF 50%, #6E5BFF 100%)
Hero h1 の em 強調文字（blue → cyan → violet）
プライマリボタン
linear-gradient(120deg, #1E50FF 0%, #6E5BFF 100%)
メインCTAボタン背景（blue → violet）
強調ブロック背景
linear-gradient(135deg, #07153D 0%, #1E50FF 100%)
リサピーカード・SHIFT featured・FINAL CTA・セミナー（deep → blue）
巨大数字
linear-gradient(120deg, #FFFFFF 0%, #00C6FF 100%)
SHIFT 「89%」など、大型数字のテキストグラデ（white → cyan）
D. コーポレートフォント
各プラネットの参照ルール
全プラネットで参照するルールは上記「コーポレート群の共通ルール」に集約。各プラネットはそのグループに応じた強度で参照する。
対象パス：/
参照：コーポレート群 として共通ルールに従う（コーポレートカラー・フォント・レイアウトを厳密適用。）
対象パス：/info/
参照：コーポレート群 として共通ルールに従う（コーポレートカラー・フォント・レイアウトを厳密適用。）
対象パス：/ai-directory/, /privacy-policy/ など
参照：コーポレート群 として共通ルールに従う（コーポレートカラー・フォント・レイアウトを厳密適用。）
対象パス：/column/, /news/, /seminar/, /customer-voice/
参照：セミ・コーポレート群 として共通ルールに従う（コーポレート〇〇に基本準拠しつつ、必要に応じて柔軟に運用。）
対象パス：/download/
参照：セミ・コーポレート群 として共通ルールに従う（コーポレート〇〇に基本準拠しつつ、必要に応じて柔軟に運用。）
対象パス：/service/research-pr/, /service/idea-design/ ほか
参照：サービス群 として共通ルールに従う（独立した世界観を持つ。コーポレート〇〇に縛られず、各サービスが独自カラー・タイポ・レイアウトを設計可能。）
第3層：サテライトルール
個別ページ単体（サービスLPなど）専用のルール。プラネットルールに収まらない独自要件は、各ページの実装内で定義する。詳細は本デザインシステムには掲載しない。