Apple・Google・Metaのデザインシステムについて、それぞれの原則、具体的な数値や仕組み、3社の違い、WEB制作への活かし方、などについてまとめました。
デザインシステムとは？
デザインシステムは、UIの設計ルールや部品を1か所にまとめ、複数の画面やアプリで一貫した見た目・操作を保つための仕組みです。
色・余白・文字サイズなどの基準値（デザイントークン）を決め、ボタンやカードなどの部品（コンポーネント）を共通化します。使い方や考え方は、ドキュメントとして残します。
Apple・Google・Metaのデザインシステム比較
Apple・Google・Metaのデザインシステムの主な特徴は、以下の通りです。
| 比較 | Apple | Meta | |
|---|---|---|---|
| 名称 | Human Interface Guidelines（HIG） | Material Design（現在はMaterial 3） | Astryx |
| 登場 | Apple各OSと共に長年更新 | 2014年に登場 | 社内で8年使用、2026年6月にベータ公開 |
| 内容 | 指針 | 指針＋実装 | 実装できる部品一式 |
| 形態 | ドキュメント | ドキュメント＋各種ツール | npmパッケージ（オープンソース） |
| ライセンス | Apple独自 | オープンソース | MIT |
| AIエージェント対応 | ー | ー | CLI／MCPで正式対応 |
| 標準フォント | San Francisco | Roboto | Figtree |
| タップ領域の目安 | 44×44ポイント | 48×48dp | ー |
| 余白の基準 | ー | 8dp／4dpグリッド | 4pxスケール |
数値の違いはあっても、押しやすい大きさを確保する・文字を読みやすくする・階層を視覚的に示す、という狙いは共通しています。
Appleの「Human Interface Guidelines」
Human Interface Guidelines（ヒューマンインターフェースガイドライン、HIG）は、Apple製ネイティブアプリのためのデザイン指針です。
コンテンツを主役にし、迷わず操作できることを重視しています。
HIGの数値や仕組み
- タップする部品は最低でも44×44ポイントを目安
- 標準フォントはSan Francisco
- 本文は17ポイントが標準、最小でも11ポイントを目安
- 文字と背景のコントラストは4.5:1以上を目安
- 文字サイズを変えられる「Dynamic Type」に対応し、拡大しても崩れない
- ノッチ・ホームインジケータ・Dynamic Islandを避けた「セーフエリア」に主要な要素を置く
- 「視差効果を減らす」「透明度を下げる」などのOS設定を検知し、動きや半透明を控える
Googleの「Material Design」
Material Design（マテリアルデザイン）は、Googleが公開しているデザインシステムです。現在は、2014年登場の「Material 3（Material You）」という世代です。画面上の面を光や影を持つ現実の紙のように扱うのが特徴です。
Material Designの数値や仕組み
- 余白や部品の大きさは、端末の解像度が違っても同じ大きさに見える「dp（密度非依存ピクセル）」を使う。文字は文字サイズ設定に追従する「sp」を使う
- 余白や部品の大きさを8dpの倍数（8・16・24…）でそろえ、アイコンや文字の位置は4dpのグリッドに合わせる
- タップする部品は最低でも48×48dpを目安
- 標準フォントはRoboto
- 文字の役割ごとに大きさが決まっている
- 本文のコントラスト比は4.5:1以上、大きめの文字や太字の見出しは3:1以上
- 各面を背景から浮いた紙のように積み重ね、その高さをElevation（面の高さ、単位はdp）とし、高い面ほど影が大きくぼやけ、手前に見える
- Material 3では、端末ごとに色が変わる「ダイナミックカラー」が中心になった
Metaの「Astryx」
Astryx（アストリックス）は、Metaが社内で使ってきたデザインシステムをオープンソースとして公開したものです。社内で8年間使われ、Facebook・Instagram・Threadsなど13,000以上のアプリで導入されています。
AstryxはAIエージェントの利用を前提にしており、API・ドキュメント・CLIを、人とAIアシスタントが同じ方法で扱えるように設計されています。
Astryxの数値や仕組み
- React 19以上とStyleX（Meta製のCSS in JSライブラリ）の環境で作られている
- 1つのパッケージに、150以上のコンポーネント、7つのテーマ、CLI（コマンドライン操作ツール）を内包
- MITライセンスで、2026年6月にベータ版として公開
- 余白は4px（ピクセル）を基準単位とし、0px〜48pxを15段階に分ける
- 標準フォントはFigtree、コードはSF Mono
- フォントの基準サイズ0.875rem（14px）を軸に、比率1.2の幾何スケールで12段階を作る
デザインシステムによって見た目も操作もルール化することで、ユーザーも制作側も迷わなくなりメリットが大きいです。一定の規模のあるサイトではデザインシステムを作るべきだなと思いました。
よくある質問（FAQ）
Q. デザインシステムとデザインガイドラインは何が違いますか？
デザインガイドラインは考え方やルールを示す文書です。デザインシステムは、そのルールに加えて、実際に使えるデザイントークンやコンポーネント、ドキュメントまでを一式にしたものです。Apple HIGは指針が中心、Material DesignやAstryxは実装まで含む、という違いがあります。
Q. タップしやすいボタンの大きさは3社でどう違いますか？
Apple HIGは44×44ポイント、Material Designは48×48dpを目安にしています。ポイントもdpも、端末の解像度が違っても同じ大きさに見えるようにした単位です。数値は違いますが、指の腹で正確に押せる下限を確保し、隣のボタンと十分に離す、という狙いは同じです。