メインコンテンツまでスキップ

デザインガイド - jamjam UI

jamjam のビジュアルデザイン方針。MixerPanel をトンマナのベースとする。

デザイン原則​

1. 機能優先（Function First）​

デザインは機能に従う。装飾より操作性。
  • 音楽制作ツール（DAW）のような専門的で機能的な美学
  • 視覚的なノイズを排除し、本質的な情報のみ表示
  • ユーザーが「操作できる」ことが即座にわかるUI

2. モノクロームベース（Monochrome Base）​

色は情報を伝える手段。装飾ではない。
  • 基本UIはモノクローム（黒/白/グレー）
  • 色は意味がある場合のみ使用:
    • 接続状態（緑/黄/赤）
    • エラー状態（赤）
    • フォーカス状態（アクセント色）
  • 「色がある = 注目すべき情報」という認知

3. 精密さ（Precision）​

1pxのズレも許容しない。
  • グリッドベースの厳密なレイアウト
  • 要素間のアライメント統一
  • 数値は等幅フォントで桁揃え

カラーパレット​

基本色（常時使用）​

用途トークン役割
主要テキスト--color-text-primaryメインのテキスト、アクティブな要素
副次テキスト--color-text-secondary補助情報、非アクティブな要素
背景--color-bg-primaryメイン背景
ボーダー--color-border区切り線、境界

状態色（意味がある場合のみ）​

状態トークン使用場面
接続成功--color-success接続インジケータ
警告/不安定--color-warning接続不安定、注意
エラー/ミュート--color-dangerエラー、切断
フォーカス--color-accentキーボードフォーカスリング

使用禁止​

  • 装飾目的のグラデーション
  • 背景色としてのアクセント色
  • 意味のない色分け

タイポグラフィ​

フォント使い分け​

種類フォント用途
UI テキスト--font-family-sansラベル、説明文
数値--font-family-monodB表示、時間、サンプルレート

サイズ​

サイズトークン用途
11px--font-size-smallメーター数値、品質表示
12px--font-size-caption補助ラベル
14px--font-size-body通常テキスト

数値表示の原則​

/* 数値は常に等幅フォント */
.numeric {
  font-family: var(--font-family-mono);
}

/* 右揃え or 中央揃えで桁を統一 */
.db-display {
  text-align: right;
  min-width: 4ch;  /* "-∞" から "+0.0" まで対応 */
}

ボーダーと形状​

ボーダー​

要素スタイル
コンポーネント境界1px solid var(--color-border)
セクション区切り1px solid var(--color-border)
インタラクティブ要素1px solid var(--color-border)

角丸​

/* 原則: 角丸なし */
border-radius: 0;

/* 例外: 円形ボタンのみ */
border-radius: var(--radius-full);

シャドウ​

/* 原則: シャドウなし */
box-shadow: none;

/* 例外: フォーカスリングのみ */
box-shadow: var(--shadow-focus);

インタラクション​

状態表現​

状態表現方法
デフォルトborder: 1px solid var(--color-border)
ホバーborder-color: var(--color-text-primary)
フォーカスbox-shadow: var(--shadow-focus)
アクティブ背景反転（text-primary ↔ bg-primary）
無効opacity: 0.5

ボタン​

/* 通常状態 */
.button {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

/* アクティブ/トグルON */
.button--active {
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
}

スライダー/フェーダー​

/* トラック */
.track {
  width: 1px;
  background: var(--color-text-primary);
}

/* サム（つまみ） */
.thumb {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-text-primary);
}

レイアウト​

スペーシング​

4px ベースのグリッドシステム。

--space-xs: 4px;   /* 最小間隔 */
--space-sm: 8px;   /* コンポーネント内部 */
--space-md: 16px;  /* コンポーネント間 */

アライメント​

┌─────────────────────────────────────┐
│  ラベル列  │  コンテンツ列         │
│  (右揃え)  │  (左揃え/中央揃え)    │
├───────────┼───────────────────────┤
│      音質 │  48kHz/2ch            │
│       PAN │  [====●====]          │
│      音量 │  ┃█████┃              │
│      名前 │  Alice                │
│    ミュート│  [🔊]                 │
└───────────┴───────────────────────┘

コンポーネント例​

MixerPanel（リファレンス）​

┌─────────────────────────────────────────────┐
│ ミキサー                                     │
├─────────────────────────────────────────────┤
│       │ 48kHz/2ch │ 48kHz/2ch │   48kHz/2ch │
│       │    C      │   L30     │             │
│       │ [══●══]   │ [●════]   │   -12db     │
│       │           │           │   -15db     │
│       │ +0.0 -14  │ -0.6 -13  │             │
│       │   ██      │   ██      │     ██      │
│       │   ██      │   ██      │     ██      │
│       │   ██      │   ██      │     ██      │
│       │   自分    │   Alice   │   マスター   │
│       │   [🎤]    │   [🔊]    │     [🔊]    │
└─────────────────────────────────────────────┘

特徴​

  1. ヘッダー: タブ形式、下線で区切り
  2. ラベル列: 右揃え、副次テキスト色
  3. コントロール: 1px ボーダー、角丸なし
  4. メーター: モノクローム、ミュート時はグレー
  5. ボタン: 反転で ON/OFF 表現

禁止事項​

やってはいけないこと​

  1. 装飾的なグラデーション

    /* NG */
    background: linear-gradient(to bottom, #7C5CFF, #5A3FD0);

  2. 意味のない角丸

    /* NG */
    border-radius: 8px;  /* 単なる装飾 */

  3. 過剰なシャドウ

    /* NG */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);

  4. 色でのグルーピング

    /* NG: 背景色で領域を分ける */
    .section-a { background: #2A2A3E; }
    .section-b { background: #363652; }

  5. アイコンの多用

    • テキストで表現できるものはテキストで
    • アイコンは「ミュート」「スピーカー」など普遍的なもののみ

実装チェックリスト​

新しいコンポーネントを作成する際のチェック項目:

  • カラーは --color-text-primary/secondary と --color-border のみ使用しているか
  • 状態色は意味がある場合のみ使用しているか
  • border-radius: 0 か（例外を除く）
  • box-shadow: none か（フォーカスリング以外）
  • 数値表示は --font-family-mono を使用しているか
  • スペーシングは 4px の倍数か
  • ホバー/フォーカス/アクティブ状態が定義されているか

参考​

  • MixerPanel コンポーネント: ui/src/components/MixerPanel/
  • デザイントークン: ui/src/styles/tokens.css