---
title: "プリセット"
description: "同梱のプリセットでプロダクトを描きます。スタイルシート 1 本と属性 1 つ、プリセットが求めるフォント、使えるコンポーネント。プリセットのコンポーネントを 1 つだけ、自分のシステムに取り込むこともできます。"
url: "https://tanrei.chnotchy.com/ja/getting-started/presets/"
last_updated: 2026-10-18T09:04:58.000Z
---

# プリセット

> 同梱のプリセットでプロダクトを描きます。スタイルシート 1 本と属性 1 つ、プリセットが求めるフォント、使えるコンポーネント。プリセットのコンポーネントを 1 つだけ、自分のシステムに取り込むこともできます。

Tanrei は既定のシステム `tanrei` と、3 つのプリセット `m3-like`、`m3-expressive-like`、`cupertino` を同梱しています。プリセットは、自分で書くものと同じ[デザインシステムのレイヤー](https://tanrei.chnotchy.com/ja/foundations/design-systems/#%E5%90%8C%E6%A2%B1%E3%81%95%E3%82%8C%E3%82%8B%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0)です。Tanrei のコンポーネントに別のデザインシステムの値を与え、どのコンポーネントと、どの `variant` の値を持つかを決めます。そのまま使うことも、[自分のデザインシステム](https://tanrei.chnotchy.com/ja/getting-started/your-design-system/)の出発点にすることもできます。

## Web でプリセットを使う

1. トークンを読み込み、次にプリセットのスタイルシートを読み込みます。プリセットのトークンは、その属性を付けた範囲に効きます。

   ```js
   import '@tanrei/web/tokens.css';
   import '@tanrei/web/systems/m3-like.css';
   ```

2. 属性を `<html>` か、ページの任意の部分に付けます。1 つのページに複数のシステムを置けます。

   ```html
   <html data-tanrei-system="m3-like">
   ```

3. `@tanrei/web` の代わりに、プリセットのエントリーでコンポーネントを登録します。エントリーが登録するのは、そのプリセットが持つコンポーネントだけです。

   ```js
   import '@tanrei/web/m3-like';
   ```

4. プリセットのフォントを、トークンが使うファミリー名のまま読み込みます（下に一覧があります）。Tanrei はフォントファイルを同梱しません。[フォント](https://tanrei.chnotchy.com/ja/getting-started/web/#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88)を参照してください。

プリセットが持つものは、そのコンポーネントマニフェスト `@tanrei/web/systems/<id>.components.json` に載っており、エディターやコーディングエージェントはこれを読みます。このサイトでは、[コンポーネントの一覧](https://tanrei.chnotchy.com/ja/components/)の横か、サイドバーの上端でデザインシステムを選ぶと、一覧はそのシステムが持つものだけを表示します。

## プリセット

各プリセットの以下の情報は、そのレイヤー、解決済みのトークン、コンポーネントマニフェストから読み込んでいます。

### m3-like

- **スタイルシート**: `@tanrei/web/systems/m3-like.css`
- **属性**: `data-tanrei-system="m3-like"`
- **コンポーネント**: 96 個。`@tanrei/web/m3-like` が登録します
- **本文**: `Roboto, system-ui, sans-serif` — Roboto (`@fontsource-variable/roboto`) を読み込みます
- **コード**: `Roboto Mono, ui-monospace, monospace` — Roboto Mono (`@fontsource-variable/roboto-mono`) を読み込みます
- **アイコン**: `Material Symbols Outlined` — Material Symbols Outlined (`@fontsource-variable/material-symbols-outlined`) を読み込みます
- **既定のシステムにないもの**: [FAB menu](https://tanrei.chnotchy.com/ja/components/fab-menu/), [Segmented button](https://tanrei.chnotchy.com/ja/components/segmented-button/)
- **このシステムにないもの**: なし
- **既定のシステムにないバリアント**: `filled, outlined`: [Chip field](https://tanrei.chnotchy.com/ja/components/chip-field/), [Color field](https://tanrei.chnotchy.com/ja/components/color-field/), [Color input](https://tanrei.chnotchy.com/ja/components/color-input/), [Combobox](https://tanrei.chnotchy.com/ja/components/combobox/), [Combobox field](https://tanrei.chnotchy.com/ja/components/combobox-field/), [Number field](https://tanrei.chnotchy.com/ja/components/number-field/), [Number input](https://tanrei.chnotchy.com/ja/components/number-input/), [Select](https://tanrei.chnotchy.com/ja/components/select/), [Select field](https://tanrei.chnotchy.com/ja/components/select-field/), [Text field](https://tanrei.chnotchy.com/ja/components/text-field/), [Text input](https://tanrei.chnotchy.com/ja/components/text-input/)
- **外しているバリアント**: `filled`: [Navigation bar](https://tanrei.chnotchy.com/ja/components/navigation-bar/) · `tonal`: [Tabs](https://tanrei.chnotchy.com/ja/components/tabs/)

生成元 `tokens/systems/m3-like.system.json`, `tokens/generated/m3-like/components.json`

### m3-expressive-like

- **スタイルシート**: `@tanrei/web/systems/m3-expressive-like.css`
- **属性**: `data-tanrei-system="m3-expressive-like"`
- **コンポーネント**: 96 個。`@tanrei/web/m3-expressive-like` が登録します
- **本文**: `Roboto, system-ui, sans-serif` — Roboto (`@fontsource-variable/roboto`) を読み込みます
- **コード**: `Roboto Mono, ui-monospace, monospace` — Roboto Mono (`@fontsource-variable/roboto-mono`) を読み込みます
- **アイコン**: `Material Symbols Outlined` — Material Symbols Outlined (`@fontsource-variable/material-symbols-outlined`) を読み込みます
- **既定のシステムにないもの**: [FAB menu](https://tanrei.chnotchy.com/ja/components/fab-menu/), [Segmented button](https://tanrei.chnotchy.com/ja/components/segmented-button/)
- **このシステムにないもの**: なし
- **既定のシステムにないバリアント**: `filled, outlined`: [Chip field](https://tanrei.chnotchy.com/ja/components/chip-field/), [Color field](https://tanrei.chnotchy.com/ja/components/color-field/), [Color input](https://tanrei.chnotchy.com/ja/components/color-input/), [Combobox](https://tanrei.chnotchy.com/ja/components/combobox/), [Combobox field](https://tanrei.chnotchy.com/ja/components/combobox-field/), [Number field](https://tanrei.chnotchy.com/ja/components/number-field/), [Number input](https://tanrei.chnotchy.com/ja/components/number-input/), [Select](https://tanrei.chnotchy.com/ja/components/select/), [Select field](https://tanrei.chnotchy.com/ja/components/select-field/), [Text field](https://tanrei.chnotchy.com/ja/components/text-field/), [Text input](https://tanrei.chnotchy.com/ja/components/text-input/)
- **外しているバリアント**: `filled`: [Navigation bar](https://tanrei.chnotchy.com/ja/components/navigation-bar/) · `tonal`: [Tabs](https://tanrei.chnotchy.com/ja/components/tabs/)

生成元 `tokens/systems/m3-expressive-like.system.json`, `tokens/generated/m3-expressive-like/components.json`

### cupertino

- **スタイルシート**: `@tanrei/web/systems/cupertino.css`
- **属性**: `data-tanrei-system="cupertino"`
- **コンポーネント**: 95 個。`@tanrei/web/cupertino` が登録します
- **本文**: `-apple-system, BlinkMacSystemFont, system-ui, Inter, sans-serif` — Inter (`@fontsource-variable/inter`) を読み込みます
- **コード**: `ui-monospace, SF Mono, Menlo, monospace` — プラットフォームのフォントを使います
- **アイコン**: `Material Symbols Rounded` — Material Symbols Rounded (`@fontsource-variable/material-symbols-rounded`) を読み込みます
- **既定のシステムにないもの**: [Segmented button](https://tanrei.chnotchy.com/ja/components/segmented-button/)
- **このシステムにないもの**: [FAB menu](https://tanrei.chnotchy.com/ja/components/fab-menu/)（代わりに [Main action button](https://tanrei.chnotchy.com/ja/components/main-action-button/), [Bottom sheet](https://tanrei.chnotchy.com/ja/components/bottom-sheet/)）
- **既定のシステムにないバリアント**: `filled, outlined`: [Chip field](https://tanrei.chnotchy.com/ja/components/chip-field/), [Color field](https://tanrei.chnotchy.com/ja/components/color-field/), [Color input](https://tanrei.chnotchy.com/ja/components/color-input/), [Combobox](https://tanrei.chnotchy.com/ja/components/combobox/), [Combobox field](https://tanrei.chnotchy.com/ja/components/combobox-field/), [Number field](https://tanrei.chnotchy.com/ja/components/number-field/), [Number input](https://tanrei.chnotchy.com/ja/components/number-input/), [Select](https://tanrei.chnotchy.com/ja/components/select/), [Select field](https://tanrei.chnotchy.com/ja/components/select-field/), [Text field](https://tanrei.chnotchy.com/ja/components/text-field/), [Text input](https://tanrei.chnotchy.com/ja/components/text-input/)
- **外しているバリアント**: `filled`: [Navigation bar](https://tanrei.chnotchy.com/ja/components/navigation-bar/)

生成元 `tokens/systems/cupertino.system.json`, `tokens/generated/cupertino/components.json`

## プリセットのコンポーネントを 1 つ、自分のシステムに取り込む

プリセットにあって既定のシステムにないコンポーネント（`m3-like` の FAB メニューや、セグメントボタン）も、既定のシステムの上に作るプロダクトから使えます。`tanrei` を継ぐレイヤーを書き、そこにコンポーネントを取り込み、コンポーネント自身のモジュールを読み込みます。するとそのコンポーネントは、自分のシステムのトークンで描かれます。トークンが自分のシステムのトークンを参照するので、こうして取り込んだ FAB メニューはプロダクトのほかの部分と同じ見た目になり、プリセットの値は何も持ち込まれません。

1. コンポーネントを自分のレイヤー（`design/acme.system.json`。[自分のデザインシステムを作る](https://tanrei.chnotchy.com/ja/getting-started/your-design-system/)を参照）に取り込みます。プリセットのレイヤーにあるコンポーネントは、そのレイヤーを `from` で指定します。既定のシステムが外しているコンポーネントは、名前だけを書きます。

   ```json
   {
     "id": "acme",
     "extends": "tanrei",
     "components": {
       "include": [{ "name": "fab-menu", "from": "m3-like" }, "segmented-button"]
     }
   }
   ```

2. ビルドします。`npx tanrei build` が、取り込んだコンポーネントのトークンを自分の値で解決したシステムのスタイルシートと、それらを載せたコンポーネントマニフェストを書き出します。

3. 自分のスタイルシートを読み込み、自分の属性を付け、既定のシステムのコンポーネントと取り込んだコンポーネントを登録します。

   ```js
   import '@tanrei/web/tokens.css';
   import './styles/acme.css';
   import '@tanrei/web';
   import '@tanrei/web/components/fab-menu';
   import '@tanrei/web/components/segmented-button';
   ```

   ```html
   <html data-tanrei-system="acme">
   ```

コンポーネントを、それを持たないシステムの下で使っても描かれますが、開発ビルドのコンソールにそのことが表示されます。各コンポーネントのページには、どのシステムがそれを持ち、ほかのシステムが代わりに何を使うかが書いてあります。