DESIGN SYSTEM / v1
デザインシステム v1
バイブコーディング初期段階のデザインシステム。凍結アーカイブとして保存しています。最新版は v2 を参照してください。
グランドカラー
サイト全体で使用できる色はこのリストのみ。このリスト以外の色は使用禁止。
アクセント
ダーク
ライト
ユーティリティ
カラールール
ダーク背景（kuro1〜4）→ テキストは shiro1（メイン）・shiro2（サブ）
ライト背景（shiro1〜3）→ テキストは kuro1（メイン）・kuro4（サブ）
アクセントカラーが背景 → テキストは kuro1 のみ
注意テキスト → focus（#2c84db）
エラーテキスト → error（#bf4d43）
グランドフォント
フォントの種類とサイズはこの定義のみに従う。カラーはグランドカラーで別途管理。
| 要素 | フォント | サイズ | 行間 | ウェイト | 用途 |
|---|---|---|---|---|---|
| h1 | グランドフォント明朝 | 48px | 1.4 | 700 | ページタイトル |
| h2 | グランドフォント明朝 | 32px | 1.4 | 700 | セクション見出し |
| h3 | グランドフォント明朝 | 20px | 1.4 | 700 | サブ見出し |
| h4〜h6 | グランドフォントゴシック | 18px | 1.6 | 600 | カード見出し等 |
| p | グランドフォントゴシック | 16px | 1.8 | 400 | 本文 |
| small | グランドフォントゴシック | 13px | 1.6 | 400 | 補足・注釈 |
| nav・button | グランドフォントゴシック | 14px | 1 | 500 | UI要素 |
| ラベル・数値 | Roboto | 任意 | 1.0 | 700 | 英字・実績数値 |
グランドレイアウト
サイト全体のレイアウト・構造・ボタンの一元管理ルール。変更が必要な場合はデザインチームの許可が必要。
ページヒーロー（共通）
TOPページ・サービスページ・原典ページを除く全ページで共通の PageHero コンポーネントを使用。
構造：label（英字ラベル） + title（日本語タイトル） + desc（説明文・省略可）
背景：kuro1
ラベル：daidai / font-heading / 0.7rem / 700 / letter-spacing 0.3em
タイトル：shiro1 / font-mincho / 48px / 700
説明文：shiro3 / 18px / font-weight 600 / max-width 640px
padding：上下 64px 左右 80px
ページ構造
ヘッダー・フッターはサイト全体で統一（共通コンポーネントを使用）
パンくずリストはTOPページを除くすべてのページに設置
サービスページのレイアウトはリサピーページに統一
カラーモード切り分け：
・サービス関連（/service/, /customer-voice/, /download/, /contact/） → ライトモード（shiro1背景）
・会社・コーポレート関連（TOP, /info/, /column/, /news/, /seminar/, /press/） → ダークモード（kuro1背景）
・判断基準：自社の世界観を見せる場面はダーク、サービス導入を検討するユーザーへの提供価値はライト
余白・間隔
| 項目 | 値 |
|---|---|
| セクション間の縦余白 | 80px |
| コンテンツエリアの最大幅 | 1200px |
| 左右パディング | 80px |
レスポンシブ（ブレークポイント）
| 区分 | 幅 |
|---|---|
| PC | 1200px以上 |
| タブレット | 768px〜1199px |
| スマホ | 767px以下 |
フォントサイズはグランドフォントで規定
ボタン定義
サイト全体で使用するボタンは以下の7typeのみ。追加する場合はデザインチームの許可が必要。カラーはグランドカラーに従う。ホバー効果はtype単位で統一。
フォーム定義
フォーム要素はすべてライト背景（shiro1/shiro2）上に配置。クラス名は form- プレフィックスで統一。
背景：shiro1 / ボーダー：kuro4 / 角丸：8px
テキスト：kuro1 / プレースホルダー：kuro4
フォーカス時ボーダー：daidai
エラー時ボーダー：color-error / .form-field に .has-error 付与
必須バッジ：daidai 太文字 / 任意バッジ：kuro4
FAQ レイアウトルール
サービスページのFAQセクションで使用。sv-faq-* クラスで構成。
初期状態：すべての項目を open（展開済み）で表示
質問（summary）背景：shiro3 — open/close 問わず常に同じ
回答（answer）背景：shiro1
「Q」アイコン：なし
ホバー効果：なし
パディング：質問・回答ともに 24px
項目間の gap：24px
シェブロン（矢印）：open時に -180deg 回転
セクション背景：shiro2 / ボーダー：shiro3 / 角丸：8px
デザイン原則
フラットデザイン徹底。グラデーション・テクスチャ・装飾目的のshadowは使用しない
ボーダーは 1px solid のみ
ホバー効果はボタン・リンクのみに限定。ボックス全体のホバー変化は禁止
グランドカラー・グランドフォント・グランドレイアウト外の定義を使う場合はデザインチームの許可が必要