Astryx（アストリックス）は、Metaがオープンソースで公開しているデザインシステムです。この記事では、WEBデザイナーが知っておきたいAstryxの基本をまとめました。
Astryxとは？
Astryxは、Metaが社内で使ってきたデザインシステムをオープンソースとして公開したものです。
- 社内で8年間使われ、Facebook・Instagram・Threadsなど13,000以上のアプリで導入されている
- React 19以上とStyleX（Meta製のCSS in JSライブラリ）の環境で作られている
- 150以上のコンポーネント、7つのテーマ、CLI（コマンドライン操作ツール）を1つのパッケージにまとめて提供
- MITライセンスで、2026年6月にベータ版として公開された
※この記事はMetaの公開資料をもとにしています。Astryxは現在ベータ版のため、内容や名称は今後変更される可能性があります。
Astryxが掲げる4つの原則
Astryxは、人とAIエージェントが同じ仕組みでUIを作ることを前提にしています。
1. ガイダンスは強制しない（Guidance over enforcement）
- コンポーネントに推奨されていない値を渡した場合も、コンポーネント側でエラーを出さず、渡された値をそのまま使う
- 使い方はドキュメントや使用例で説明し、コードのレベルの厳密なルールにはしない
2. 一貫した規約に従う（Strong, documented conventions）
- すべてのコンポーネントは、同じ命名・プロパティ・組み立て方のルールに従う
- 一部のコンポーネントの使い方を覚えれば、他のコンポーネントも予測できる
3. 人とAIで同じ仕組みを使う（One system for humans and AI）
- API・ドキュメント・CLIを、人とAIアシスタントが同じ方法で扱えるように設計している
- AIにとって扱いやすい変更は、人にとっても扱いやすいという考え方に基づく
4. 測定によって検証する（Earned by measurement）
- 規約として決めつけで固定せず、実際にテストして効果を確かめる
- 状況が変われば規約を見直す前提を持つ
具体的な数値や仕組み
余白（スペーシング）
- 4px（ピクセル）を基準単位にしたスケールを使う
- 0px〜48pxの範囲を、小さい段階は2px刻み、大きい段階は4px刻みで15段階に分ける（例：2px・4px・8px・16px・24px・32px・48px）
文字（タイポグラフィ）
- 標準フォントは本文・見出しともにFigtree、コードはSF Mono
- 基準サイズ0.875rem（14px）を軸に、比率1.2の幾何スケール（掛け算）で12段階を作る
- 太さは400（本文・コード）・500（ラベル）・600（見出し）・700（強調）の4段階
役割ごとのサイズは、次のように分かれています。
| トークン | rem | px目安 |
|---|---|---|
| font-size-2xs | 0.5rem | 8px |
| font-size-sm | 0.75rem | 12px |
| font-size-base | 0.875rem | 14px |
| font-size-lg | 1.0625rem | 17px |
| font-size-xl | 1.25rem | 20px |
| font-size-2xl | 1.5rem | 24px |
| font-size-3xl | 1.8125rem | 29px |
| font-size-5xl | 2.625rem | 42px |
色（カラートークン）
- 色は見た目でなく役割で名づける（
--color-text-primaryのようなトークン名を使い、HEX値を直接指定しない） - 1つのトークンにライト・ダークモード両方の値を持たせ、CSSの
light-dark()関数で自動的に切り替える - 画面の面を「body（本体）→surface（表面）→card（カード）→popover（ポップオーバー）」の順に重ね、階層を表す
- success・error・warningなどのステータスカラーは、その意味の用途だけに使う設計にしている
AIエージェントに対応する
Astryxは、AIエージェントが使うことを前提に設計されています。
独自CLI（コマンドライン操作ツール）
npmパッケージとして、Metaが自作した専用CLIが配布されており、コマンドで以下のことが実行できます。
- プロジェクトへ導入するときに、AIアシスタント向けの
AGENTS.mdなどのファイルもまとめて生成できる - 使いたいコンポーネントの一覧やドキュメントを、その場で確認できる
- ページやブロックの雛形を、プロジェクトへそのまま挿入できる
- テーマを生成できる
- バージョンアップに伴うコードの書き換えを、自動で適用できる
- コンポーネントのソースコードをまるごと自分のプロジェクトへコピーできる
MCPサーバー
Astryxは、MCP（Model Context Protocol：AIツールが外部のデータやツールへ安全に接続するための共通規格）のサーバーを提供しています。
- Claude Desktop・Cursor・Windsurf・Clineなど、MCPに対応したツールから直接接続できる
- 接続すると、自然文でコンポーネントを検索する
searchと、props（親コンポーネントから子コンポーネントへデータを渡すための仕組み）や使用例を含むドキュメント一式を取得するgetの2つの機能が使える - CLIの出力を人が手作業でAIに貼り付ける手間がなくなる
7つのテーマとカスタマイズ
Astryxは、neutral・butter・chocolate・matcha・stone・gothic・y2kという7つの完成したテーマを最初から用意しています。
- テーマの実体は、色・書体・角丸・モーションなどを上書きするCSSカスタムプロパティの集まり
- コンポーネントを作り直さなくても、見た目を変えられる
- 内部の実装は、Meta製のStyleXというCSS in JS（JavaScriptの中にCSSを書く仕組み）で書かれているが、利用者はそれを意識せず、普段使っているTailwindやCSS Modulesなどを上書きできる
その他
Astryxは、公式サイトで「150以上のアクセシブルなコンポーネント」とうたっています。ウェブアクセシビリティの確保を前提とした上で、さらにその先の品質を目指すためのシステムです。アクセシビリティについては、ウェブアクセシビリティの記事にもまとめています。
よくある質問（FAQ）
Q. Astryxは何を重視していますか？
人とAIエージェントが同じ仕組みでUIを作れることを重視しています。Metaは、ガイダンスは強制しない（Guidance over enforcement）・一貫した規約に従う（Strong, documented conventions）・人とAIで同じ仕組みを使う（One system for humans and AI）・測定によって検証する（Earned by measurement）の4つを原則として挙げています。AIにとって扱いやすい設計は、人にとっても扱いやすいという考え方が土台になっています。
Q. Astryxはどんな環境で使えますか？
React 19以上とStyleXを前提にしたプロジェクトで使えます。MITライセンスで公開されており、npm install @astryxdesign/coreのようにパッケージをインストールして導入します。Next.js・Vite・CRA（Create React App）などのほか、ビルドツールなしでCDN（UMDバンドル）から読み込む方法にも対応しています。