リファレンスドキュメント

このドキュメントは、VertiTab カスタムテーマシステムの完全なリファレンスを提供し、高級ユーザーと開発者がテーマ機能を深く理解し活用するのに役立ちます。

テーマシステムアーキテクチャ

Material-UI 基盤

VertiTab のテーマシステムは Material-UI（MUI）をベースにしており、以下の利点があります：

一貫性のあるデザインシステム：Google のマテリアルデザイン仕様に準拠
コンポーネント化アーキテクチャ：各 UI 要素が独立してカスタマイズ可能
テーマの継承システム：グローバル設定からローカル上書きまで
タイプセーフ：TypeScript サポートによる型安全性

テーマ構造階層

テーマオブジェクト
├── palette（カラーパレット）
│   ├── mode（ライト/ダークモード）
│   ├── primary（主色調）
│   ├── secondary（副色調）
│   ├── error（エラー色）
│   ├── warning（警告色）
│   ├── info（情報色）
│   ├── success（成功色）
│   └── background（背景色）
├── typography（タイポグラフィ）
│   ├── fontFamily（フォントファミリー）
│   ├── fontSize（基本フォントサイズ）
│   ├── h1-h6（見出しレベル）
│   ├── body1-body2（本文スタイル）
│   ├── button（ボタンテキスト）
│   └── caption（説明テキスト）
├── spacing（間隔システム）
├── breakpoints（ブレークポイント）
├── zIndex（重なり順序）
└── components（コンポーネント上書き）
    ├── MuiButton
    ├── MuiListItemButton
    ├── MuiIcon
    └── ...

カラーシステム詳細

パレット設定

主色調（Primary）

main：主要色調
light：明るいバリアント
dark：暗いバリアント
contrastText：コントラストテキスト色

副色調（Secondary）

主色調と調和する補助色
同様に main、light、dark、contrastText を含む

セマンティック色（Semantic Colors）

error：エラー状態（通常は赤系）
warning：警告状態（通常はオレンジ/黄系）
info：情報状態（通常は青系）
success：成功状態（通常は緑系）

背景色システム

default：デフォルト背景
paper：紙質感背景（カードやダイアログなど）

テキスト色階層

primary：主要テキスト（最も重要）
secondary：副次テキスト（説明など）
disabled：無効テキスト（グレーアウト）

カラー使用指南

主色調の選択

ブランド色：企業やブランドの主要色
心理的効果：青（信頼）、緑（安定）、赤（活力）など
アクセシビリティ：十分なコントラスト比を保証

色の調和

補色：色環上の対角色（高コントラスト）
類似色：隣接色（調和）
三色調：等間隔の 3 色（バランス）

ダークモード適応

背景色を暗く、テキスト色を明るく
色の彩度を適切に調整
目の疲労を軽減する配色

タイポグラフィシステム

フォント階層

見出しシステム（H1-H6）

H1：最重要見出し（2.5rem ～）
H2：主見出し（2rem ～）
H3：副見出し（1.75rem ～）
H4-H6：小見出し（1rem ～ 1.5rem）

本文システム

Body1：主要本文（1rem、16px）
Body2：副次本文（0.875rem、14px）

機能的テキスト

Button：ボタンテキスト（通常は大文字）
Caption：説明テキスト（小フォント）

フォント選択指南

可読性フォント

Sans-serif：Roboto、Arial、Helvetica
適用：インターフェーステキスト、ボタン

装飾フォント

Serif：Times、Georgia
適用：長文読書、正式文書

等幅フォント

Monospace：Courier、Monaco
適用：コード表示、データ列

コンポーネントカスタマイズ

コンポーネント上書きシステム

各コンポーネントは以下の方式でカスタマイズ可能：

defaultProps

コンポーネントのデフォルト属性設定
例：ボタンのデフォルトサイズ、バリアント

styleOverrides

CSS-in-JS によるスタイル上書き
ネストしたセレクタサポート
状態ベースのスタイル設定

重要なコンポーネント

ListItemButton

role：サイドパネルタブのメイン表示コンポーネント
重要属性：padding、margin、borderRadius、backgroundColor
状態：default、hover、selected、disabled

Avatar

role：ユーザー頭像とサイトアイコン表示
重要属性：width、height、fontSize、variant

Icon

role：全インターフェースアイコン表示
重要属性：fontSize、color

Button

role：各種操作ボタン
重要属性：size、variant、color

高級カスタマイズ技術

CSS-in-JS 文法

{
  // 基本スタイル
  backgroundColor: '#ffffff',
  color: '#000000',

  // 疑似クラス
  '&:hover': {
    backgroundColor: '#f5f5f5',
  },

  // 疑似要素
  '&::before': {
    content: '""',
    position: 'absolute',
  },

  // 子要素選択
  '& .MuiIcon-root': {
    fontSize: '20px',
  },

  // 条件スタイル
  '&.Mui-selected': {
    backgroundColor: '#1976d2',
  },
}

レスポンシブデザイン

{
  // モバイル
  [theme.breakpoints.down('sm')]: {
    fontSize: '14px',
    padding: '8px',
  },

  // タブレット
  [theme.breakpoints.between('sm', 'md')]: {
    fontSize: '16px',
    padding: '12px',
  },

  // デスクトップ
  [theme.breakpoints.up('md')]: {
    fontSize: '18px',
    padding: '16px',
  },
}

アニメーション設定

{
  transition: theme.transitions.create(['background-color', 'transform'], {
    duration: theme.transitions.duration.standard,
    easing: theme.transitions.easing.easeInOut,
  }),

  '&:hover': {
    transform: 'scale(1.05)',
  },
}

ベストプラクティス

デザイン原則

一貫性

同類要素は同じスタイルルールを使用
カラーパレットとタイポグラフィシステムを維持
間隔と寸法の統一システム

階層

視覚的重要度による要素階層
サイズ、色、間隔で階層を区別
ユーザーの注意力を適切に誘導

アクセシビリティ

WCAG 2.1 AA 標準に準拠
最低 4.5:1 のコントラスト比
キーボードナビゲーションサポート

パフォーマンス最適化

テーマサイズ制御

不要なスタイル上書きを避ける
複雑な CSS 計算を減らす
キャッシュフレンドリーな設定を使用

レンダリング最適化

CSS-in-JS の動的生成を減らす
静的スタイルの事前定義
不要な再レンダリングを避ける

デバッグと開発ツール

ブラウザ開発者ツール

要素検査

F12 で DevTools を開く
要素選択器で対象要素を選択
Styles パネルで現在の CSS 規則を確認
Computed パネルで最終計算値を確認

テーマデバッグ

Console でwindow.__MUI_THEME__を入力
現在のテーマオブジェクトを確認
特定のコンポーネントスタイルを検査

一般的な問題と解決策

スタイルが適用されない

CSS 特異性を確認
要素セレクタが正確か確認
テーマ上書きの順序をチェック

カラーが期待通りでない

カラーパレット設定を確認
ライト/ダークモードの対応をチェック
透明度と重なり効果を検査

フォントが正しく表示されない

フォントファミリーの可用性を確認
フォントサイズの単位と値をチェック
フォールバックフォントを設定

API リファレンス

テーマオブジェクト構造

interface VertiTabTheme {
  name: string;
  description?: string;
  palette: {
    mode: "light" | "dark";
    primary: PaletteColor;
    secondary: PaletteColor;
    error: PaletteColor;
    warning: PaletteColor;
    info: PaletteColor;
    success: PaletteColor;
    background: {
      default: string;
      paper: string;
    };
    text: {
      primary: string;
      secondary: string;
      disabled: string;
    };
  };
  typography: Typography;
  components: ComponentsOverrides;
}

よく使用される MUI コンポーネント

MuiCssBaseline：グローバル CSS 基線
MuiList：リストコンテナ
MuiListItem：リスト項目
MuiListItemButton：リストボタン項目
MuiListItemIcon：リスト項目アイコン
MuiListItemText：リスト項目テキスト
MuiAvatar：頭像コンポーネント
MuiIcon：アイコンコンポーネント
MuiIconButton：アイコンボタン
MuiButton：一般ボタン
MuiMenu：コンテキストメニュー
MuiMenuItem：メニュー項目
MuiDialog：ダイアログボックス

このリファレンスドキュメントは、VertiTab カスタムテーマシステムの完全な指南を提供します。より詳細な技術情報については、Material-UI 公式ドキュメントを参照してください。