---
title: "Theme Studio"
description: "いくつかのコントロールを動かし、本物のコンポーネントが追従するのを確かめ、全プラットフォーム向けにビルドできる有効なデザインシステムのレイヤを書き出します。"
url: "https://tanrei.chnotchy.com/ja/foundations/theme-studio/"
last_updated: 2026-10-26T22:31:37.000Z
---

# Theme Studio

> いくつかのコントロールを動かし、本物のコンポーネントが追従するのを確かめ、全プラットフォーム向けにビルドできる有効なデザインシステムのレイヤを書き出します。

デザインシステムは、既定のままで自然に見え、1 つ変えれば全体が追従するべきものです。Studio はその考え方を、手で触れる形にしたものです。ベースを選び、ダイヤルを回し、色を決め、トークンを 1 つ変え、必要なら自分のトークンを足す。すると、変更した内容だけを記した小さな[レイヤファイル](https://tanrei.chnotchy.com/ja/foundations/design-systems/#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%AF%E3%83%AC%E3%82%A4%E3%83%A4)を書き出せます。

- [Theme Studio を開く](https://tanrei.chnotchy.com/ja/studio/): Studio を専用のページで開きます。ウィンドウ全体をプレビューに使えます。

ここにあるものはモックアップではありません。プレビューは本物のシステムスコープと本物のコンポーネントで構成され、`tanrei build` がこのレイヤに対して書き出すスタイルシートそのものを適用します。ビルドと同じエンジン、同じエミッター、同じアクセシビリティ検査を、このブラウザー内で実行しています。リポジトリのテストが、Studio のレイヤを CLI のパイプラインでビルドし、スタイルシート全体、6 つのスキームすべてのトークン値、そしてすべての警告が一致することを確認しています。

テーマは、それらのコンポーネントで組んだ 5 つの画面で確かめられます。あらゆる種類のコンポーネントを並べた概要、ダッシュボード、設定フォーム、一覧と詳細、そしてドキュメントのページです。ライト、ダーク、両方を並べた表示を切り替えられ、3 段階のコントラストのそれぞれで見られます。どの画面をどう見るかはテーマの一部ではないので、ファイルには何も保存されません。

作っているレイヤは、このブラウザーとページのアドレスに保たれます。Studio へのリンクを開くと、同じレイヤから始まります。リンクを開いても、このブラウザーに保たれているレイヤは上書きされません。Studio の上に帯が出て、リンクに入っていたのがどのレイヤで、何をベースにしているかを知らせます。リンクのレイヤを編集するか使うことにするまでは元のレイヤを保ち、元のレイヤに戻ることもできます。

Studio のバーの最初は、**レイヤの開始点**です。既定のシステムである Tanrei か、テーマギャラリーの例（m3-like、cupertino、m3-expressive-like）から選べます。テーマギャラリーの例は、レイヤでどこまで模倣できるかを見せる作例で、元のシステムの公式デザインではありません。Tanrei のルートレイヤである Core も並んでいますが、まだ選べません。既定のシステムの値がまだ入っていて、その値が中立になると白紙の開始点になります。同じメニューから、作っているレイヤの代わりにレイヤのファイルを読み込めます。スキーマが受け付けないファイルは読み込まず、その理由をパネルに表示します。受け付けたファイルは読み込み、トークンエンジンが見つけた問題をパネルに並べます。レイヤに変更があるときは、置き換える前に確認します。**元に戻す**で変更は戻ります。

Studio のバーの**エクスポート**を押すと、ファイルとその使い方をまとめたサイドシートが開きます。最初の行は、スキーマ、トークンエンジン、ビルドの検査がそのファイルを受け付けるかどうかです。テーマギャラリーの作例から始めたレイヤは、既定ではその作例に頼ります。ファイルは小さく、作例が改善されればそれに付いていきます。すべての値を書き出すこともでき、そうすると作例が変わってもファイルは変わりません。ただし作例にあるコンポーネントは、引き続き作例から取り込みます。その下に、コピーやダウンロードができるファイルそのもの、`tanrei build` が Web 向けに書くスタイルシートのうちベースのシステムと違う宣言（スタイルシート全体もダウンロードできます）、そして次の手順が並びます。手順のコマンドはどれも CLI がそのまま受け付けるもので、レイヤを共有するリンクもあります。

左のレールには、見た目を決める 9 つの項目（ブランドカラー、グレー、書体、サイズ、角丸、角のスムージング、アイコン、押したときの表現、フォーカスの表示）が、今の値と小さな見本とともに並び、その下にレイヤが持つほかの項目が続きます。行を押すと、右のパネルにその項目のコントロールが出ます。気に入った行をロックして**シャッフル**を押すと、ほかの行がそれぞれ別の値になり、1 回の元に戻すで戻せます。**インスペクト**は、すべてのトークンとレイヤのファイルそのものをパネルの上に開きます。どの変更も、Studio のバーのボタンか ⌘Z と ⇧⌘Z（Ctrl+Z と Ctrl+Shift+Z）で元に戻したり、やり直したりできます。

## コントロールが書き込む内容

| 操作 | レイヤに書かれるもの |
| --- | --- |
| ベースシステムを選ぶ | `"extends"` |
| ダイヤルを動かす | `dial.*` への `"$value"` と `reason` |
| シードまたは色相＋彩度を選ぶ、パレットを宣言・削除する | `"palettes"` のエントリ。`null` は継承したパレットの削除 |
| パレットの特定のトーンを厳密な色に固定する | そのパレットの `source.tones` — `{ "40": "#e60012" }`。新しい行は生成された色から始まります |
| **ブランド**・**プレーン**・**等幅**のファミリーを並べる、総称フォールバックを選ぶ、プラットフォーム標準のフォントを最優先にする | `ref.typeface.*` への `{ "$value": ["IBM Plex Sans", "system-ui", "sans-serif"], "reason": "…" }` |
| アイコンセット（バリアブル 1 ファミリー、または選択状態ごとのファミリー）と、その太さ・塗りを選ぶ | `ref.typeface.icon` または `sys.icon.family.*`、`sys.icon.weight`、`sys.icon.fill.*` への `$value` の固定 |
| 角のスムージングのスライダーを動かす | `sys.shape.corner-smoothing` への `{ "$value": 0.6, "reason": "…" }`。Figma と同じ意味の 0〜1 の量です（[形状](https://tanrei.chnotchy.com/ja/foundations/shape/#%E8%A7%92%E3%81%AE%E3%82%B9%E3%83%A0%E3%83%BC%E3%82%B8%E3%83%B3%E3%82%B0)） |
| 押下への応答、フォーカスの見せ方を選ぶ | `sys.behavior.*` への `{ "$value": 1, "reason": "…" }`。選ぶのは**名前**（`ripple`、`glow`）で、ファイルにはその位置が保存されます |
| トークンをスケールする | `{ "scale": n }` — 継承した値に対する比率。ダイヤルには引き続き追従します |
| トークンの参照先を差し替える | `{ "$value": "{another.token}" }` |
| トークンを固定する | `{ "$value": …, "reason": "…" }` — どのダイヤルの影響も受けません。理由が入力されるまで書き込まれません |
| ルールを置き換える | `{ "derive": … }` — ダイヤルへの係数、カラーロールのトーン表、状態トークンの `mix` / `alpha` |
| パターンルールを編集する | `"rules"` — hovered・focused・pressed・disabled の見え方を、全コンポーネントまとめて |
| 追加する：サイズやバリアント、系列のステップ、独自トークン | `"vocabulary"` の宣言。`rationale`（根拠）が必須です |

書体・アイコン・形状・ふるまいは値を固定するため、理由が必要です。4 つのグループはそれぞれ理由を 1 回だけ、あらかじめ入力された状態（“Brand typeface.”）で尋ね、そのグループが書き込む固定値すべてにあなたの文言が入ります。「インスペクト」のトークンのツリーでは、種類の選択は数値ではなく名前で選び、フォントスタックは「書体」の行と同じ並べ替えリストで編集します。プレビューのボタンは本物なので、`ripple`、`dim`、なだらかにつながる角、フォーカスのグローは、`<tanrei-button>` がこのブラウザーでそれらのトークンから実際に描くものです。タイプランプには各書体の見出し、本文、ラベル、コード、そしてレイヤが追加したすべてのテキストスタイルが並び、プレビューバーの**強調**トグルを入れると、それぞれをロールの太さに系統の `sys.typescale.emphasis.*` ステップを足した太さで、スタイルシートからその場で描き直します。選んだ値では何も描かれない場合 — 既定のシステムのように押下時の不透明度がすべて 1 のまま `dim` を選んだときなど — は、ビルド自身の警告をそのままの文言でコントロールの下に表示し、警告が挙げるトークンはそのエディターへのリンクになります。

ベースと同じ値のままのコントロールは何も書き込みません。何も触っていない Studio が書き出すのは `{ "id", "extends" }` だけで、ビルド結果はベースシステムと完全に一致します。有効なレイヤに含められるものは、すべてここで編集できます。インポートしたレイヤの一部が別枠で保持されることはありません。

## 自分のファイルに対して使う

`tanrei studio` は、この Studio をローカルで配信し、プロダクトのレイヤファイルに接続します。編集はその都度ファイルに保存され、**ビルド**は `tanrei build` を実行します。エディターや `git checkout` によってファイルが変更されたときは、再読み込みするか、開いている内容を残すかを選べます。黙って上書きすることはありません。保存が書き込まれるのは、スキーマ、レイヤの連なりに関する規則、そしてトークンエンジンのすべてがそのレイヤを受け入れたときだけです。サーバーはエンジンそのものに問い合わせ、エンジンのメッセージをそのまま返します。そのため、どのプログラムが送ったものであっても、ディスク上のファイルは常に `tanrei build` でビルドできます。また、このアプリは Tanrei に同梱されたシステムが名前を挙げる書体とアイコンフォント（Inter、Noto Sans JP、Roboto Mono、Roboto、Material Symbols の Rounded と Outlined）を自分自身のアドレスから配信するので、プリセットはそのプリセット本来の書体で描かれます。

プロダクトは自分のレイヤを重ねられます（隣にある `acme.system.json` を継承する `acme-app.system.json` のように）。`tanrei studio` はファイルの隣にあるレイヤを読み取り専用で Studio に渡し、Studio は同梱システムの場合とまったく同じように、継承の連なり全体をブラウザー内で解決します。親がディスク上で変更されると、すべてを計算し直します。

## できないこと

サイトの Studio の背後にはファイルがないため、自分の別のレイヤを継承するレイヤはここにはインポートできません。隣のファイルを知っている `tanrei studio` で開いてください。Studio は、自身を配信しているサイト以外からフォントを取得することはありません。そのサイトが提供しておらず、ブラウザーにもインストールされていないファミリーは名前を挙げて知らせ、プレビューには正直にフォールバックを表示します。「プレビュー＝ビルド」のテストが比較するのは Web のスタイルシート、トークンバンドル、警告です。ネイティブ向けの出力は、同じモデルから `tanrei build` が生成します。

コマンドラインツールは、コマンドでレイヤを受け取りません。`tanrei init` で始めたレイヤのファイルを、エクスポートからダウンロードしたファイルで置き換えてください。