---
title: "ひとつの体系を、 5 つのプラットフォームへ。"
description: "Tanrei はオープンソースのデザインシステムです。同じトークン、同じコンポーネント、同じアクセシビリティの約束を、Web・iOS・Android・Flutter・React Native それぞれの流儀で届けます。"
url: "https://tanrei.chnotchy.com/ja/"
last_updated: 2026-10-17T15:47:59.000Z
---

# ひとつの体系を、 5 つのプラットフォームへ。

> Tanrei はオープンソースのデザインシステムです。同じトークン、同じコンポーネント、同じアクセシビリティの約束を、Web・iOS・Android・Flutter・React Native それぞれの流儀で届けます。

- Web
- SwiftUI
- Jetpack Compose
- Flutter
- React Native

- **プラットフォーム**: 5
- **コンポーネント（計画）**: 96
- **仕様作成済み**: 96
- **テーマ × コントラスト**: 6

## ずれない仕組みを、最初から

### 信頼できる情報源は 2 つだけ

人が書く契約は、デザイントークンとコンポーネント仕様の 2 つだけです。各プラットフォームのコード、このドキュメント、ステータス表はすべてそこから導かれ、食い違いが生じれば CI が失敗します。

### 同一ではなく、パリティ

どのプラットフォームでも、トークン・状態・アクセシビリティの意味は同じです。一方で API の形は各プラットフォームの慣習に従います。Compose なら `enabled`、Flutter なら `onPressed` に null、SwiftUI なら `.disabled(_:)` です。

### 実績のある構造

リファレンス・システム・コンポーネントの 3 層トークン、カラーロール、タイプスケール、テーマとコントラストごとに生成するトーナルパレット。見た目は抑制が効いていて、ほぼモノクロームです。

### 構造で守るアクセシビリティ

コントラストの組み合わせは、すべてのテーマとコントラストレベルについてビルド時に検証されます。見た目の大きさがヒット領域を決めることはなく、フォーカスリングはすべての操作可能なコンポーネントの仕様に含まれます。

## 次に読む

- [はじめに](https://tanrei.chnotchy.com/ja/getting-started/): お使いのプラットフォームでの導入と使い方。
- [基礎](https://tanrei.chnotchy.com/ja/foundations/brand/): ブランド、トークン、カラー、タイポグラフィ、形状、エレベーション、モーション、アクセシビリティ。
- [ステータス](https://tanrei.chnotchy.com/ja/status/): 各プラットフォームに今あるもの。リポジトリから自動生成しています。
- [Tanrei の作り方](https://tanrei.chnotchy.com/ja/project/how-tanrei-is-built/): 5 つのプラットフォームを正直に保つ、仕様起点のワークフロー。