React Spectrum入門：Adobeのアクセシブルなデザインシステムを使う

2026年6月11日

Adobeが公開する React 向けの本格的なデザインシステム「React Spectrum」。アクセシビリティと多言語対応を最初から備え、業務アプリのUIづくりに強い選択肢です。何ができて、どう使い始めるかを整理します。

React Spectrum とは

React Spectrum は、Adobe の公式デザイン言語「Spectrum」を React コンポーネントとして実装したオープンソースのライブラリです。すぐ使える完成度の高いUI部品が揃っており、「Build Once. Adapt Everywhere（一度作れば、どこでも適応する）」を掲げています。最新のデザイン言語 Spectrum 2 も安定版になりました。

特徴は、見た目だけでなくアクセシビリティ・操作性・国際化を最初から作り込んである点です。AI（ClaudeやCursorなど）でフロントエンドを組むときも、こうした堅牢なUI基盤の上に生成させると品質が安定します。

3つのレイヤー（用途で選べる）

このプロジェクトは、カスタマイズの自由度に応じて3階層に分かれています。やりたいことに合う層を選びます。

ライブラリ	役割	こんなときに
React Spectrum	Adobeの見た目を持つ完成済みコンポーネント	Adobeらしいデザインでそのまま作りたい
React Aria	見た目なし・挙動とアクセシビリティを提供するフック／コンポーネント	自社デザインを当てつつ、a11yは任せたい
React Stately	UIの状態管理ロジック（プラットフォーム非依存）	挙動の土台から自分で組みたい

主な特徴

アクセシビリティ標準装備：WAI-ARIA準拠、キーボード操作、スクリーンリーダー、ハイコントラスト、モーション軽減に対応。
適応的（adaptive）：マウス・タッチ・キーボードを自動で見分け、タッチ時は部品が大きくなる。
国際化（i18n）：30以上のロケール、右から左に読む言語（RTL）のレイアウト反転、日付・数値・通貨の自動整形。
ダークモード：追加のスタイルなしで対応。
テーマ／スタイルマクロ：Spectrumのトークン（色・タイポ・余白）でスタイリングし、最小限のCSSを生成。

使い方（最小構成）

まずパッケージを追加します。

npm install @adobe/react-spectrum（または yarn add @adobe/react-spectrum）

アプリは必ず Provider で包みます。Provider はテーマやロケールなどアプリ全体の設定を担います。

import {Button, defaultTheme, Provider} from '@adobe/react-spectrum';

function App() {
  return (
    <Provider theme={defaultTheme}>
      <Button
        variant="accent"
        onPress={() => alert('Hey there!')}
      >
        Hello React Spectrum!
      </Button>
    </Provider>
  );
}

あとは必要なコンポーネント（ボタン、フォーム、テーブル、ダイアログなど）を読み込んで組み立てるだけです。イベントは onClick ではなく onPress を使う点が、タッチ／マウス両対応のためのポイントです。

AIコーディングとの連携（MCP・スキル）

React Spectrum は「AIに使わせるための導線」も公式に用意しています。これは当サイトでも扱う Claude のスキル／MCP とそのまま地続きです。

公式MCPサーバー：Cursor・VS Code・Claude・Gemini などのAIコーディング環境に接続でき、AIが最新かつ正確なコンポーネント情報を参照して実装できる。
Agent Skills：AIコーディングツールが必要なときに読み込む「指示・スクリプト・リソースのまとまり」を提供。
LLM向けドキュメント：ドキュメントをMarkdown形式で取得でき、LLMが読み込みやすい。

つまり「AIに任せてUIを作る」前提で、誤ったAPIを書かせない仕組みが公式に整っているということ。ClaudeやCursorでフロントエンドを組む運用と相性が良い理由です。