GitHubで話題のAstryxとは？Metaが公開したデザインシステムを実際に入れて、日本語のフォームと管理画面を作ってみた

Meta が社内で 8 年間使ってきたデザインシステム「Astryx（アストリクス）」が、オープンソースとして公開されました。GitHub のスターは 2.4 万を超えています。

この連載ではこれまで、話題のツールと同じ考え方のものを当社で小さく作って紹介してきました。今回は少し変えて、本物を実際にインストールして、日本語の画面を作ってみました。この記事のアイキャッチと 3 枚の図版も、Astryx で組んだ画面をそのまま撮影したものです。

Astryxとは

meta/astryx（スター約 2.4 万・MIT ライセンス。2026年11月12日の時点。公式サイトは astryx.atmeta.com）

デザインシステムとは、ボタンや入力欄、表、ダイアログといった画面の部品と、その色・文字・余白のルールを 1 つにまとめたものです。部品を組み合わせるだけで、見た目と使い勝手のそろった画面を作れます。

README によると、Astryx は Meta の社内で 1 万 3,000 以上のアプリに使われてきたデザインシステムです。特徴は次のとおりです。

• React 19 用の部品が 150 以上（今回入れたバージョン 0.7.13 では、CLI の一覧で 174 個）
• 7 種類のテーマと、色や角の丸みを上書きして作る自作テーマ、ダークモード
• 部品の CSS はビルド済みで配られるので、特別な設定なしに読み込める
• 人と AI が同じ道具で画面を作れるように、部品の説明・画面のひな形・テーマの操作を CLI（コマンド）にまとめている

まだベータ版で、更新は毎日のように続いています。

実際に入れてみた

当社の Web サイトとは別の、試し用のフォルダーに入れました。必要なのは次の 1 行です（Vite と React 19 の環境）。

npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex

入れる前に、インストールのときに自動で動く処理（postinstall）の中身を読みました。「astryx init を実行してください」という案内を表示するだけで、外部への通信やファイルの書き換えはありませんでした。インストールは 8 秒ほどで終わります。

画面の部品は、CSS を 3 つ読み込み、テーマで囲むだけで使えます。

import '@astryxdesign/core/reset.css';
import '@astryxdesign/core/astryx.css';
import '@astryxdesign/theme-neutral/theme.css';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {TextInput} from '@astryxdesign/core/TextInput';
import {Button} from '@astryxdesign/core/Button';
import {useState} from 'react';

export function App() {
  const [name, setName] = useState('');
  return (
    <Theme theme={neutralTheme}>
      <TextInput label="お名前" value={name} onChange={setName} />
      <Button variant="primary" label="送信" />
    </Theme>
  );
}

便利だったのが CLI です。astryx component Button で部品の使い方、astryx template --list で画面のひな形（ダッシュボード、表、ログイン、問い合わせフォームなど）の一覧、astryx search で部品や説明の検索ができます。今回のフォームも、CLI が出力した問い合わせフォームのひな形をもとに日本語にしました。

astryx init を実行すると、部品の一覧を AI 向けの説明ファイル（AGENTS.md・CLAUDE.md）に書き込みます。AI のコーディングエージェントが、部品を推測せずに正しく使えるようにする仕組みです。

日本語で使ってみた

海外製の部品を日本語のサイトで使うときに気になるのが、ボタンの読み上げや「必須」などの決まった文言、日付の書き方、日本語入力です。Astryx は、ここがよく考えられていました。

• 日本語の文言が用意されている: 31 の言語の文言が入っていて、日本語（ja-JP）を指定すると「必須」「カレンダーを開く」「前のページへ」などが日本語になります。画面に見える文字だけでなく、読み上げ用のラベルも日本語です
• 日付は日本の書き方で、和暦にも対応: 日付の入力欄は「2027年3月1日」と表示されます。calendar="japanese" を付けると「令和9年3月1日」になり、カレンダーの見出しも「令和9年3月」になりました。和暦の年を手で計算する必要はありません
• 日本語入力（IME）に配慮している: 日本語を入力するとき、変換を決めるために Enter を押します。部品によっては、この Enter で送信されたりダイアログが閉じたりする問題が起きがちです。Astryx のソースコードを確認すると、入力候補の一覧・ダイアログ・チャットの入力欄などで、変換中の Enter と Esc を無視する処理が入っていました

テーマを切り替えてみた

同じ部品でも、テーマを変えると印象が大きく変わります。上の図は、入力欄・ボタン・バッジ・スイッチを 7 つの既製テーマと、当社で作ったテーマ（左上）で表示したものです。

自作テーマは、色や角の丸みを決める値（トークン）を上書きするだけで作れます。当社のロゴの黒と黄色を使ったテーマは、次の 6 行でできました。ライトとダークで別の色を指定できます。

const esolabTheme = defineTheme({
  name: 'esolab',
  tokens: {
    '--color-accent': ['#111111', '#FCEE21'],        // [ライト, ダーク]
    '--color-on-accent': ['#FFFFFF', '#111111'],     // 強調色の上の文字
    '--color-background-body': ['#F6F6F6', '#0E0E0E'],
    '--color-background-surface': ['#FFFFFF', '#1A1A1A'],
    '--color-text-primary': ['#111111', '#F5F5F5'],
    '--radius-container': '6px',
  },
});

アイキャッチは、このテーマのダークモードで作った画面です。

ライトとダーク、管理画面の表

表・状態のバッジ・ページ送りも既製の部品です。mode="dark" を指定するだけでダークモードになり、文字と背景の色の組み合わせも自動で切り替わります。

記事の中で触れるデモ

テーマ・ライトとダーク・和暦の切り替えを、下のデモで試せます。入力欄やカレンダーも実際に動きます（送信はされません）。

使ってみて分かったこと

1. 必須の値を渡し忘れると、画面がおかしくなる: 手順の表示（Stepper）で、各手順の番号を渡し忘れたところ「NaN」と表示されました。今回は型チェックのない JavaScript で書いたためです。部品の型が細かく定義されているので、TypeScript で書けば作る途中で気づけます
2. ファイルは小さくない: ボタンと入力欄だけの画面でも、JavaScript が約 160KB、CSS が約 46KB（いずれも圧縮後。React を含む）でした。CSS は全部品の分が 1 つのファイルになっているので、使う部品が少なくても大きさは変わりません
3. 自作テーマは、本番では CSS に書き出す: 自作テーマをライトとダークで同じページに並べたところ、片方の色が崩れました。既製テーマでは起きません。公式の案内どおり、本番で使うテーマは astryx theme build で CSS に書き出しておくのが安全です
4. ベータ版なので、バージョンを固定する: 更新が速く、使い方が変わることもあります。仕事で使うなら、バージョンを固定して計画的に上げる運用が必要です

どんなところで使えそうか

当社の Web サイトは、表示を速くするために JavaScript をほとんど使わない作りにしています（「移行と表示速度の改善の記録」）。こうした会社の紹介サイトやお店のホームページに使うには、Astryx は大きすぎます。

一方で、次のような画面には向いていると感じました。

• 業務システムや管理画面: 表・絞り込み・入力フォーム・ダイアログが多い画面を、見た目のそろった形で早く作れる
• 社内ツールや試作（プロトタイプ）: ひな形から始めて、まず動く画面を見てもらう
• AI と一緒に画面を作る開発: 部品の説明を AI が読める形で持っているので、AI が作る画面の品質がそろいやすい

当社では、業務システムや管理画面の開発で、こうした部品の使い方を検討していきます。「Excel の管理をシステムにしたい」「社内の管理画面を作り直したい」といったご相談があれば、お気軽にどうぞ。

※ 説明は2026年11月12日時点のリポジトリのREADMEと、バージョン 0.7.13 を実際に使った結果にもとづいています。