# 意味づけされた Token と依存なしのグラフ：管理画面の視覚基線の作り方

色は意味づけされた Token 経由のみ。六つのプリセット配色にベースカラーとテーマカラーを重ね、折れ線からレーダーまでグラフはすべて SVG で描画します。

> Runlume はプラットフォーム機能、独立業務アプリ、専門サービスを必要に応じて組み合わせて提供します。機能、上限、納品範囲は選択したプランや合意条件に従います。業務アプリは個別に選べ、横断連携は接続設定と許可境界を守ります。

元のページ: https://runlume.app/ja/blog/admin-design-tokens-and-charts

開発者ガイド · テーマと配色 / コンポーネント / アクセシビリティ

公開：2026-09-17 · 著者：Runlume チーム

管理画面の見た目のばらつきは、一度の大きな変更ではなく、散在する色値・余白・その場限りのコンポーネントから生まれます。同じ「成功」が三つのページで三種類の緑になり、テーマを変えるには何十ものファイルを触ることになります。

admin-design は Token とシェルを先に決め、そのうえでページを考えます。

## 色は用途を書き、色値は書かない

色は意味を持つユーティリティクラス経由のみで指定します：`bg-card`、`text-muted-foreground`、`text-success`、`border-destructive`。テーマを変えるときは Token を変え、業務コードは触りません。

配色は二層です。六つのプリセット（teal、blue、forest、violet、amber、graphite、カスタム）が全体の印象を決め、ベースカラー（neutral、stone、zinc など）とテーマカラー（十八色相）で微調整します。明暗モードは別々に保存されます。

アクセシビリティは後付けではありません。文字サイズ、太さ、高コントラスト、色覚サポート、動きの抑制、リンク下線を設定に置き、設定はブラウザに保存して業務データには入れません。

## グラフはすべて自前の SVG

折れ線、棒、ドーナツ、ミニ棒、横棒、ヒートマップ、レーダー、ファネル、ガント。外部のグラフライブラリは使いません。同じ意味の色を使い、明暗モードに追随し、装飾的な図には `role="img"` と `aria-label` を付けて「この図が何を語っているか」を伝えます。

依存を持たない代わりに座標と比率は自前で保ちます。その見返りは、バンドルサイズ、監査、テーマの一貫性を自分で制御できることです。グラフ用にもう一つの配色体系を維持する必要はありません。

## コンポーネント一覧が受け入れ面

九種類のコンポーネントを九つのページに分け、どのコントロールにも実際の配置先があります。コンポーネントを変えるときは、まず一覧の例を更新します。新しい機能は「一覧の例 + 実際の配置 + テスト」の三点セットで提出します。資料と実装が乖離せず、レビューの比較先も一つに定まります。

## 関連ページ

- [プラットフォーム](https://runlume.app/ja/platform)
- [業務アプリ](https://runlume.app/ja/apps)
- [開発者](https://runlume.app/ja/developers)
- [Runlume について](https://runlume.app/ja/about)