デザインガイドライン — 中央会員&SSOハブ
1. ドキュメントの目的
このドキュメントは、中央会員&SSOハブの開発におけるデザインガイドラインとユーザーエクスペリエンス (UX) ガイドラインを提供するものです。
2. デザインの原則
- モバイルファースト: デザインはモバイルデバイスに優先され、次にタブレットとデスクトップに適応されます。
- プレミアム&ミニマル: クリーンで過剰な要素がなく、各要素には目的があります。
- 一貫性: コンポーネント、スペーシング、カラー、フォントは全体的に一貫しています。
- アクセシビリティ: カラーコントラストはWCAG 2.1 AAの基準を満たします。
- ステートに応じたレスポンシブ: 各ステート (ローディング、エラー、成功、空) に応じた表示が必要です。
3. テーマ
システムは2つのテーマをサポートしています。
- ダークモード (デフォルト)
- ライトモード
ユーザーはプロフィールページまたは設定ページでテーマを切り替えることができます。テーマの設定はローカルに保存されます。
4. カラーパレット
4.1 ダークモード
| トークン | ヘックス | 使用 |
|---|---|---|
bg-base |
#0F0F13 |
ページの背景 |
bg-surface |
#1A1A24 |
カード、パネル、モーダル |
bg-elevated |
#22222F |
ドロップダウン、ツールチップ、ポップアップ |
border |
#2A2A38 |
セパレータ、入力フィールドのボーダー |
accent-start |
#7C3AED |
グラデーションの開始 (パープル) |
accent-end |
#A78BFA |
グラデーションの終了 (パープルライト) |
success |
#10B981 |
アクティブステート、確認 |
warning |
#F59E0B |
グレースペリオド、警告 |
danger |
#EF4444 |
エラー、凍結、削除 |
text-primary |
#F1F0FF |
メインテキスト |
text-secondary |
#A1A1B5 |
サブテキスト |
text-muted |
#6B7280 |
プレースホルダー、非アクティブラベル |
4.2 ライトモード
| トークン | ヘックス | 使用 |
|---|---|---|
bg-base |
#F8F8FC |
ページの背景 |
bg-surface |
#FFFFFF |
カード、パネル、モーダル |
bg-elevated |
#F1F0FF |
ドロップダウン、ツールチップ |
border |
#E2E2EE |
セパレータ、入力フィールドのボーダー |
accent-start |
#7C3AED |
グラデーションの開始 |
accent-end |
#A78BFA |
グラデーションの終了 |
success |
#059669 |
アクティブステート |
warning |
#D97706 |
警告 |
danger |
#DC2626 |
エラー |
text-primary |
#111118 |
メインテキスト |
text-secondary |
#4B4B63 |
サブテキスト |
text-muted |
#9CA3AF |
プレースホルダー |
4.3 グラデーション
ボタンの主な色とハイライト要素はグラデーションを使用します。
background: linear-gradient(135deg, #7C3AED, #A78BFA);
5. フォント
メインフォント: Inter (Google Fonts)
モノスペースフォント (ライセンスID): JetBrains Mono または Fira Code
5.1 フォントサイズ
| 名前 | サイズ | 重み | 使用 |
|---|---|---|---|
display |
28px / 1.75rem | 700 | ページのタイトル |
heading-1 |
22px / 1.375rem | 700 | セクションのタイトル |
heading-2 |
18px / 1.125rem | 600 | サブタイトル、製品名 |
body-lg |
16px / 1rem | 400 | メインテキスト |
body |
14px / 0.875rem | 400 | 通常のテキスト |
body-sm |
12px / 0.75rem | 400 | 説明、ラベル |
caption |
11px / 0.6875rem | 400 | メタデータ、タイムスタンプ |
code |
14px / 0.875rem | 500 | ライセンスID、技術コード |
6. スペーシング
4pxの倍数を使用します。
| トークン | 値 | 使用 |
|---|---|---|
space-1 |
4px | とても小さいスペーシング |
space-2 |
8px | 小さいスペーシング |
space-3 |
12px | ライン内スペーシング |
space-4 |
16px | カードのスペーシング、コンポーネント間のスペーシング |
space-5 |
20px | セクション間のスペーシング |
space-6 |
24px | モバイル用のページスペーシング |
space-8 |
32px | 大きいスペーシング |
space-10 |
40px | ヘッダーのスペーシング |
space-12 |
48px | セクション間のスペーシング |
モバイル用のページスペーシング: 24px 左右
7. ボーダーラジウス
| トークン | 値 | 使用 |
|---|---|---|
radius-sm |
8px | 小さいボーダーラジウス |
radius-md |
12px | 中くらいのボーダーラジウス |
radius-lg |
16px | 大きいボーダーラジウス |
radius-xl |
20px | モーダル、フッター |
radius-full |
9999px | ピルバッジ、アバター |
8. メインコンポーネント
8.1 ボタン
| バリエーション | 表示 | 使用 |
|---|---|---|
| プライマリ | グラデーション紫、白テキスト | メインアクション (ログイン、有効化、支払い) |
| セカンダリ | 紫のボーダー、紫のテキスト | セカンドアクション (キャンセル、戻る) |
| デンジャー | ピンクの背景、赤のテキスト | 削除、キャンセル |
| ゴースト | 透明、ミュートテキスト | アクションリンク |
- デフォルトサイズ:
height: 48px、border-radius: 12px、font-weight: 600 - モバイル用にフルウィドス
- ステート:
default、hover、active、disabled、loading
8.2 インプットフィールド
height: 52pxborder-radius: 12pxborder: 1px solid border- ラベルは常に上に配置されます (フローティングラベルはありません)
- ステート:
default、focus、error、disabled - エラーメッセージは入力下に表示され、赤色になります
8.3 ステータスバッジ
| ステータス | カラー | 例 |
|---|---|---|
| ア |