エンタープライズ向け UI プラットフォーム

TCM デザインシステム

エンタープライズ製品、複雑なフォーム、リッチメディアのワークフロー、データ量の多いアプリケーション向けの、包括的でアクセシブルなトークンドリブン・デザインシステム。

トークンを確認プレイグラウンドを開く

15仕様領域

120+コンポーネントとパターン

AAWCAG 目標

デフォルトでアクセシブル

キーボード優先のコントロール、視認性の高いフォーカス、ARIA ステート、ライブリージョン、モーション削減サポート、高コントラストモード。

コンポーザブルなアーキテクチャ

トークン、コンポーネント、フォーム状態、振る舞いを分離しているため、React、Vue、Angular、Web Components などと統合可能。

エンタープライズ規模

パターンは高密度なデータグリッド、アダプティブフォーム、ファイルマネージャー、メディアプレビュー、開発者向けツールをカバー。

カバレッジマップ

仕様実装マトリクス

基盤

デザイントークンとテーマ設定

すべてのビジュアルに関する決定は、ページを再読み込みすることなく実行時に切り替え可能な CSS 変数によって制御されます。

実行時テーマスイッチャー

システム、ライト、ダーク、カスタムブランド、またはハイコントラストを選択できます。環境によっては、設定は Miniapps Storage API によって永続化されます。

プライマリカラー角丸スケール密度

トークンのライブプレビュー

Primary Secondary Healthy Warning

:root {
  --tcm-color-primary: ...;
  --tcm-radius-md: ...;
}

トークンのカテゴリ

色、タイポグラフィ、余白、エレベーション、不透明度、グラデーション、z-index、モーション、ブレークポイント。

コントロール

コア入力コントロール

エンタープライズ向けフォームビルダーのための、バリデーション付き、マスク処理、メディア対応、エディタスタイルの入力コンポーネント。

標準、数値、マスク付きフィールド

テキストボックス Email パスワード電話番号通貨パーセンテージテキストエリア

リッチテキスト、Markdown、コードエディタ

Bold List Code

<tcm-input required validation="email" />

ファイルと画像のアップロード

ここにファイルをドロップ画像、PDF、音声、動画を最大 50MB まで

カラーピッカー

スポイトを使用

署名パッド

クリア署名を保存

日付、時刻、ローカライズ

DateTimeDateTime

レンジ、不透明度、スライダー

Size Opacity

Preview

タグ、チップ、マルチセレクト

選択パターン

選択コントロール

単一、複数、階層、地理、ビジュアル、ウィザード形式の選択コントロール。

Checkbox, radio, toggles

Include audit logs Require approval Enterprise BusinessFeature flag

Selectors

CountryLanguageTime zone

Icon, font, shape, pattern

InterSerifMono

Tree view

▾ Design Tokens
- Colors
- Typography
- Motion
▾ Components
- Inputs
- Data Grid
- Overlays

Stepper

Account
Permissions
Review

Tabs and accordion

UsageAPIA11Y

Advanced options

Expandable panels support keyboard access and nested content.

構造

ナビゲーションと構造

レスポンシブなサイドバー、トップバー、ドロワー、メニュー、パンくずリスト、ページネーション、ボトムシート、固定リージョン。

Breadcrumbs and pagination

Previous123Next

Menus and context actions

Open context menu

RenameDuplicateDelete

Sticky header/footer and bottom sheet

Sticky product header

Scrollable container content with persistent actions.

Panels and drawers adapt to viewport size.

Open bottom sheet

アーキテクチャ

フォームアーキテクチャ

グループ、配列、入れ子コントロール、依存関係、非同期バリデーション、アダプティブレイアウトを備えたリアクティブかつ動的なフォーム。

Dynamic form builder

Add fieldValidate

Smart wizard

Profile
Rules
Review

BackNext

Validation and state model

インタラクション

ボタンとアクション

標準アクション、送信／リセット、アイコンボタン、ハイパーリンク、ローディング、無効状態、押下状態、アクショングループ、そして FAB スピードダイヤル。

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API

ResetPreviewPublish

New docUploadGenerate

ステータス

フィードバックとインジケーター

プログレス、スピナー、スケルトン、トースト、スナックバー、アラート、通知、バッジ、モーダル、ポップオーバー、ツールチップ。

Alerts and notifications

Scheduled maintenance Sunday 02:00 UTC.

Storage quota is above 95%.

Database connection failed. Retrying.

Trigger toast

Progress and loading

Open accessible modal

エンタープライズデータ

表示とデータコントロール

テーブル、グリッド、インライン編集、ソート、フィルタリング、遅延読み込み、カード、リスト、ページネーション、カルーセル、ギャラリー、メディアプレーヤー。

Export CSV

	Service	Status	Region	Latency	Actions

Previous12Next

Cards and lists

BillingUpdated 2m ago
IdentityHealthy
SearchIndexing

Carousel

‹

Analytics dashboard

›

Media player

アセット

高度なメディア／ファイル機能

ファイルマネージャー、フォルダーナビゲーション、ドラッグ＆ドロップでの並び替え、画像/音声/動画/PDFプレビュー、圧縮および変換ワークフロー。

File manager tree

Media previewer

Select an asset

Conversion pipeline

Validate
Compress
Convert
Publish

構成

レイアウトとコンテナ

Flex、グリッド、折りたたみパネル、カルーセル、レスポンシブカラム、オートレイアウト、固定要素、オーバーフロー制御。

Responsive auto-layout playground

Flex area

Grid area

Sticky area

Overflow area

Collapsible panel

Panels use semantic disclosure patterns and retain keyboard accessibility.

Overflow controls

Wide content inside a contained scroll region with clear affordances.

設定

ユーティリティと設定

位置情報、地図、QR／バーコードスキャナー、天気ウィジェット、テーマスイッチャー、フォント／背景／ボーダー／シャドウのコントロール、およびアダプティブカラーモード。

Geolocation and weather

Get location

Location output appears here.

QR and barcode

Scanner-ready surface for camera integrations.

Visual settings

FontShadow

ランタイムモデル

フォーム — イベントと状態管理

ライフサイクルフック、バリデーションイベント、依存関係、非同期データバインディング、元に戻す／やり直し、自動保存、リカバリー、状態トラッキング、アニメーション。

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

A11Y

アクセシビリティとユーザビリティ

キーボード操作、スクリーンリーダー、コントラスト、フォーカスインジケーター、動きの軽減、デバイス間のユーザビリティに関する WCAG 2.1 AA 実践ガイド。

Checklist

Live region

Announce status

Contrast AA7.8:1

アダプティブ

レスポンシブ & アダプティブデザイン

モバイルファーストのレイアウト、アダプティブなブレークポイント、タッチターゲット、スワイプ可能なタブ、キーボードフレンドリーなオーバーレイ、レスポンシブな密度。

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

開発者エクスペリエンス

TypeScript 対応、フレームワーク連携、Storybook プレイグラウンド、トークンエクスポート、テーマ API、モジュラーインポート、CLI スキャフォールディング、命名規則。

TypeScript component API

import { Button, ThemeProvider } from '@tcm/design-system';

<ThemeProvider mode="system" tokens={customTokens}>
  <Button variant="primary" loading={saving}>Save</Button>
</ThemeProvider>

CLI and token export

npx tcm-ui generate component data-grid
npx tcm-ui tokens export --format figma
npx tcm-ui storybook start