React Spectrumを使ったら、デザインシステム構築の悩みから解放された話

はじめに

「アクセシブルなUIコンポーネントを一から自作するのは大変そうだけど、かといって既存のUIライブラリはデザインの自由度が低くて自社ブランドに馴染まない」——そんなジレンマを感じたことはないでしょうか。特にtoB向けの管理画面やダッシュボードでは、見た目の作り込みよりも「正しく動くこと」「誰でも使えること」が優先されがちですが、その品質を担保するためのコストは決して小さくありません。

React Spectrumは、このジレンマに対して「Adobeが実運用で磨き上げたデザインシステムを、そのままコンポーネントとして使う」という解決策を提示してくれるライブラリです。ゼロからスタイルを組み上げる必要がなく、アクセシビリティ対応済みの完成度の高いUIをすぐに導入できます。

React Spectrumとは

React Spectrumは、Adobeが開発・公開しているReact向けUIコンポーネントライブラリです。Adobeの公式デザインシステムである「Spectrum」をReactで実装したもので、Photoshop on the webやAdobe Expressなど、Adobe自身の製品群でも実際に使われています。

内部的にはアクセシビリティロジックを担うReact Aria、状態管理を担うReact Statelyという2つのライブラリの上に構築されており、これらにあらかじめSpectrumデザインのスタイルが適用された状態で提供されるのがReact Spectrumだとイメージすると分かりやすいです。

主な特徴

アクセシビリティ標準装備 - WAI-ARIA Authoring Practicesに準拠した実装で、スクリーンリーダーやキーボード操作への対応を意識せずとも自然に満たせます
すぐ使えるデザイン品質 - Adobe製品で実証済みのSpectrumデザインシステムをそのまま利用でき、配色やスペーシングを1から検討する手間が省けます
マウス・タッチ・キーボードへの適応 - 入力デバイスを問わず一貫した操作感を提供し、レスポンシブなレイアウトにも対応します
国際化対応済み - 30以上の言語、右から左に書く言語（RTL）、各種の日付・数値フォーマットを標準でサポートします
ダークモード対応 - テーマ機能を通じて、ライト/ダークの切り替えを簡単に組み込めます

インストール

すべてのコンポーネントがまとまった@adobe/react-spectrumパッケージをインストールします。

# npm
npm install @adobe/react-spectrum

# yarn
yarn add @adobe/react-spectrum

# pnpm
pnpm add @adobe/react-spectrum

基本的な使い方

React Spectrumのコンポーネントは、必ずProviderでラップして使用します。Providerはテーマ（配色モード）や国際化のロケール情報をアプリ全体に伝える役割を持ちます。

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

function App() {
  return (
    <Provider theme={defaultTheme} colorScheme="light">
      <Flex direction="column" gap="size-200" width="size-3000">
        <Button variant="accent" onPress={() => alert("送信しました")}>
          送信する
        </Button>
      </Flex>
    </Provider>
  );
}

export default App;

onClickではなくonPressを使う点に注目してください。これはReact Ariaの仕組みにより、マウスクリック・タッチ・キーボード（Enter/Space）のすべてを1つのイベントとして扱えるようにするためです。

フォーム入力もアクセシビリティ属性が自動で付与されます。

import { TextField, Form, Button } from "@adobe/react-spectrum";
import { useState } from "react";

function ProfileForm() {
  const [name, setName] = useState("");

  return (
    <Form maxWidth="size-3600">
      <TextField
        label="お名前"
        value={name}
        onChange={setName}
        description="表示名として使用されます"
        isRequired
      />
      <Button type="submit" variant="cta">
        保存する
      </Button>
    </Form>
  );
}

labelやdescriptionをpropsとして渡すだけで、対応する<label>要素の関連付けやスクリーンリーダー向けの説明文が自動的に組み込まれます。

実践的なユースケース

管理画面などでよく使う「データ一覧のテーブル表示」も、React Spectrumなら少ないコードで実装できます。

import {
  TableView,
  TableHeader,
  TableBody,
  Column,
  Row,
  Cell,
} from "@adobe/react-spectrum";

function UserTable() {
  const columns = [
    { name: "名前", key: "name" },
    { name: "メール", key: "email" },
    { name: "権限", key: "role" },
  ];

  const rows = [
    { id: 1, name: "田中太郎", email: "tanaka@example.com", role: "管理者" },
    { id: 2, name: "佐藤花子", email: "sato@example.com", role: "編集者" },
  ];

  return (
    <TableView aria-label="ユーザー一覧" selectionMode="multiple" height="size-3000">
      <TableHeader columns={columns}>
        {(column) => <Column key={column.key}>{column.name}</Column>}
      </TableHeader>
      <TableBody items={rows}>
        {(item) => (
          <Row key={item.id}>
            {(key) => <Cell>{item[key]}</Cell>}
          </Row>
        )}
      </TableBody>
    </TableView>
  );
}

このコードだけで、キーボードによる行選択・複数選択・矢印キーでのセル移動といった操作が自動的に有効になります。同様の機能をゼロから自作しようとすると、フォーカス管理やARIA属性の設計だけでかなりの工数がかかるため、その差は歴然です。

ほかにも、日付選択が必要な予約フォームではDatePickerやRangeCalendar、通知表示にはToastQueueなど、業務アプリケーションで頻出するUIパターンが一通り揃っています。デザインを都度検討する必要がないため、プロトタイプから本番運用まで一貫したスピード感で開発を進められます。

まとめ

React Spectrumは、Adobeが自社製品で培ったデザインシステムとアクセシビリティ実装をそのまま享受できる、完成度の高いReact UIライブラリです。Providerでラップするだけで国際化やテーマ管理が始まり、TextFieldやTableViewのようなコンポーネントを組み合わせるだけでアクセシブルなUIが自然と出来上がります。

「デザインの自由度は多少犠牲にしてでも、正しく動くUIを素早く用意したい」という場面、特に社内ツールや管理画面の開発では非常に強力な選択肢になるはずです。もしスタイルを完全に自前で作り込みたい場合は、同じ基盤を持つReact Ariaとの使い分けも検討してみてください。