---
title: "はじめに"
description: "Tanrei が提供するもの、その全体像、そしてお使いのプラットフォームでの始め方。"
url: "https://tanrei.chnotchy.com/ja/getting-started/"
last_updated: 2026-10-20T01:38:40.000Z
---

# はじめに

> Tanrei が提供するもの、その全体像、そしてお使いのプラットフォームでの始め方。

Tanrei は、各プラットフォームのネイティブなライブラリとして提供されるデザインシステムです。特別なランタイムやクロスプラットフォームのフレームワークを導入する必要はありません。いま開発に使っているプラットフォーム向けのパッケージを追加するだけで、ほかのすべてのプラットフォームと同じトークン、コンポーネント、アクセシビリティの振る舞いが手に入ります。

> [!WARNING]
> **プレリリース**
>
> `0.1.0-next.0` を npm の dist-tag `next` で公開しています。`0.1.0` までは、パッケージ名のあとに `@next` を付けてインストールしてください（`npm install @tanrei/web@next`）。0.x のプレリリースのあいだは後方互換を保ちません。どのプレリリースも、先に非推奨の期間を置くことなく何でも壊すことがあり、何を壊したかはその changeset に書いてあります。
>
> まだ公開していないもの：SwiftUI、Jetpack Compose、Flutter、React Native。プラットフォームは現在の仕様に追従してから公開し、それまで CI は止めてあります。そのあいだ、各ガイドはソースから加える方法を示しています。

## プラットフォームを選ぶ

- [Web](https://tanrei.chnotchy.com/ja/getting-started/web/): CSS カスタムプロパティと Web Components。どのフレームワークでも、フレームワークなしでも使えます。
- [React](https://tanrei.chnotchy.com/ja/getting-started/react/): Web Components から生成した、型付きの React コンポーネント。
- [SwiftUI](https://tanrei.chnotchy.com/ja/getting-started/swiftui/): iOS と macOS 向けの Swift パッケージ。
- [Jetpack Compose](https://tanrei.chnotchy.com/ja/getting-started/compose/): Compose Foundation の上に作った、Material に依存しない Android ライブラリ。
- [Flutter](https://tanrei.chnotchy.com/ja/getting-started/flutter/): MaterialApp があってもなくても動く、Dart だけで書かれたパッケージ。
- [React Native](https://tanrei.chnotchy.com/ja/getting-started/react-native/): ネイティブモジュールを含まない、TypeScript だけのコンポーネント。

## 同じボタンを、6 通りに

すべてのコンポーネントは、プラットフォームに依存しない仕様で一度だけ定義され、各プラットフォームの流儀で実装されます。選んだタブは、サイト内のほかのページでも保持されます。

**Web**

```html
<tanrei-button variant="tonal">下書きを保存</tanrei-button>
```

**React**

```tsx
<Button variant="tonal" onClick={saveDraft}>下書きを保存</Button>
```

**SwiftUI**

```swift
TanreiButton("下書きを保存", variant: .tonal) { saveDraft() }
```

**Compose**

```kotlin
TanreiButton(text = "下書きを保存", onClick = ::saveDraft, variant = TanreiButtonVariant.Tonal)
```

**Flutter**

```dart
TanreiButton(variant: TanreiButtonVariant.tonal, onPressed: saveDraft, child: const Text('下書きを保存'))
```

**React Native**

```tsx
<Button variant="tonal" onPress={saveDraft}>下書きを保存</Button>
```

## どのプラットフォームでも得られるもの

- **トークン。** カラーロール、タイプスケール、形状、エレベーション、モーション、状態、スペーシングの値。単一の DTCG ソースから、CSS カスタムプロパティと、Swift・Kotlin・Dart・TypeScript の定数として生成されます。
- **テーマ。** ライトとダーク、それぞれに標準・中・高の 3 段階のコントラスト。既定では OS の設定に従い、アプリ全体または一部のサブツリーに対して固定することもできます。
- **コンポーネント。** 共通仕様の実装です。バリアント、状態、キーボード操作はどこでも同じです。
- **アクセシビリティの既定値。** 最小ターゲット、見えるフォーカスリング、200% の文字拡大に耐えるテキスト、動きを減らす設定への対応。これらは画面ごとに任されるのではなく、最初から組み込まれています。

## このドキュメントの読み方

- [基礎](https://tanrei.chnotchy.com/ja/foundations/brand/)では、考え方と規則を説明します。
- [トークンリファレンス](https://tanrei.chnotchy.com/ja/tokens/color/)は、すべての値をトークンファイルから直接描画して一覧にしています。
- [コンポーネント](https://tanrei.chnotchy.com/ja/components/)のページは、概要・仕様・ガイドライン・アクセシビリティという共通の構成です。ページ内の表はコンポーネントの仕様から生成されるため、古くなることがありません。
- [ステータス](https://tanrei.chnotchy.com/ja/status/)は、リポジトリから生成されます。
- [AI エージェントと Tanrei を使う](https://tanrei.chnotchy.com/ja/getting-started/ai-agents/)では、MCP サーバーのつなぎ方と、コーディングエージェントが Tanrei で UI を書くための規則を示します。