デザイン仕様
SkillIndex モックアップの共通デザインシステム。すべての画面は mocks/assets/mock-style.css を参照し、このページのコンポーネントを組み合わせて構成される。
1. カラーパレット
プライマリ
--primary
#4F46E5
--primary-dark
#3730A3
--primary-light
#EEF2FF
--accent
#06B6D4
テキスト
--text
#0F172A
--text-sub
#475569
--text-mute
#94A3B8
背景・サーフェス
--bg
#F8FAFC
--surface
#FFFFFF
--border
#E2E8F0
--border-strong
#CBD5E1
セマンティック
--success
#10B981
--warn
#F59E0B
--danger
#EF4444
--info
#3B82F6
セマンティック背景
--success-bg
#ECFDF5
--warn-bg
#FFFBEB
--danger-bg
#FEF2F2
--info-bg
#EFF6FF
2. タイポグラフィ
フォントファミリー
-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif
サイズスペック
ページタイトル — 20px / Bold
font-size: 20px · font-weight: 700 · .page-title
カードタイトル — 14px / Bold
font-size: 14px · font-weight: 700 · .card-title
本文テキスト — 13px / Regular。日本語の読みやすさを重視し、行間は 1.6 で設定。
font-size: 13px · line-height: 1.6 · body default
テーブルテキスト — 12.5px / Regular。データテーブル内のセル値に使用。
font-size: 12.5px · .data-table tbody td
LABEL TEXT — 11px / SemiBold / UPPERCASE
font-size: 11px · font-weight: 600 · .ds-label / .nav-section-title
BADGE 10px
font-size: 10px · font-weight: 700 · .yr-badge / .page-id-chip
3. ボタン
バリアント（標準サイズ）
サイズバリアント
ボタングループ
4. カード
標準カード（.card）
カードタイトル
カードの本文テキストが入ります。カードは shadow と border で区切られます。
5. KPIカード
4カラム KPI ロウ（.kpi-row / .kpi）
登録エンジニア
142名
↑ 先月比 +8名
稼働中
89名
↑ 先月比 +3名
スキルシート
387件
— 前月同水準
進行中案件
28件
↓ 先月比 -2件
6. ステータスピル
稼働ステータス（.status-pill）
稼働中
待機中
調整中
プライバシーノート
個人情報保護モード（イニシャル表示）
7. スキルタグ
デフォルト / Primary / AI バリアント
Java
Python
Go
Docker
AWS
React
GPT-4
LangChain
フィルターチップ（.filter-chip）
AWS ×
Java ×
8. スキルマーク（◎○△-）
習熟度マーク（.skill-mark）
◎
.mark-double
エキスパート
エキスパート
○
.mark-single
実務可
実務可
△
.mark-tri
経験あり
経験あり
-
.mark-none
経験なし
経験なし
年数バッジ（.yr-badge）& ページIDチップ（.page-id-chip）
5yr
2yr
C-01
D-02
9. イニシャルバッジ
標準サイズ 34px（.initial-badge）
T.Y
K.N
S.M
ラージサイズ 44px（.initial-badge + inline style）
T.Y
K.N
S.M
ロゴマーク（.logo-mark）& アバター（.avatar）
Si
.logo-mark
M.H
.avatar
11. フィルターバー
フィルターバー（.filter-bar）
12. データテーブル
データテーブル（.data-table）
13. フォームコントロール
フォーム入力要素（.form-input / .form-textarea / .check-pill）
ローマ字イニシャルで入力してください（例：T.Y）
複数選択可能です
14. タブ
タブバー（.tabs / .tab）
スキル12
経歴5
評価3
資格・学歴
タブコンテンツエリア — 選択中のタブに応じて内容が切り替わります。
15. ステッパー（ウィザード）
4ステップウィザード（.stepper / .step）— D-02 AIスキルシート生成
1
エンジニア選択
2
案件情報
3
強調軸設定
4
生成・確認
16. AIサイドカード
AIアシストカード（.ai-side-card）
✨ AI マッチングアシスト
案件要件と登録スキルデータをもとに、最適なエンジニアを自動でスコアリングします。
17. シャドウ・ボーダー
シャドウトークン（--shadow / --shadow-md）
--shadow
標準カード
0 1px 3px + 0 1px 2px
0 1px 3px + 0 1px 2px
--shadow-md
ホバー・強調
0 4px 6px + 0 2px 4px
0 4px 6px + 0 2px 4px
--border
標準ボーダー
#E2E8F0
#E2E8F0
--border-strong
強調ボーダー
#CBD5E1
#CBD5E1