AndroidエンジニアがWebに入って混乱した「Material Design と MUI の違い」
以前、AndroidエンジニアがWeb開発で勘違いしていたポイントという記事を書きました。今回はその続編として、Webフロントのコードを読み始めたときに感じた「Material Design と MUI って同じじゃないの？」という混乱を整理します。
Android を触っていると、Material Design は日常的に出てくる概念です。そのため、Web の開発に参画した際に「Material UI（MUI）」という言葉を初めて聞いたときも、「MUI？ Material UIの略か。Material Design の Web 版みたいなものかな」と、あまり深く考えずに流していましたが、改めて調査してみました。
1. Material Design とは
Material Design は Google が2014年に発表したデザインガイドラインです。
ボタンの形や角丸・影の付き方・色の使い方・アニメーションの速度など、見た目と動きに関するルールを体系的にまとめたものです。
重要なのは、Material Design はコードではなく仕様（ガイド）だということです。
例えば以下のような内容が定義されています。
- ボタンのコーナーは何dpの角丸にするか
- タイポグラフィはどの階層でどのサイズを使うか
- エレベーション（影の深さ）はどう使い分けるか
- コンポーネント間の余白や配置ルール
つまり Material Design は UIパーツそのものでも UIライブラリでもなく、「デザインのルールブック」のような存在です。現在は Material Design 3（Material You）が最新となっています。
💡 Material Design = Google が定義したデザインのルール（コードではない）
2. Android における Material Design の実装
Androidエンジニアが普段使っている Button（Material3）や TopAppBar といった UI コンポーネントは、Material Design を Android 向けに実装したライブラリによって提供されています。
Android には実装が2種類あります。
- 従来の View ベース → MDC-Android（Material Components for Android）
- 現在主流の Compose → Material3（Jetpack Compose）
「Material Design を使っている」という場合、正確にはこれらのライブラリを通じて Material Design を実装しているという関係になります。
💡 Androidでいう MDC-Android / Material3 が「Material Design の実装」にあたる
3. MUI とは
MUI は React の UI コンポーネントライブラリです。ボタン・テキストフィールド・ダイアログといった UI パーツを React コンポーネントとして提供しており、Web アプリ開発で広く使われています。
元々は「Material-UI」という名前でしたが、2021年の v5 リリースのタイミングで「MUI」にリブランドされました。
ここで大事な点があります。MUI は Google が作ったものではありません。 MUI はオープンソースのライブラリであり、Google とは独立したプロジェクトです。
「Material-UI という名前なのに、Google 製じゃないの？」というのが最初の違和感でした。MUI は Material Design をベースにした React 向けの実装（ライブラリ）です。
💡 MUI = React向けUIライブラリ（Material Design の実装の一つ）
4. 2つの関係を整理する
| Material Design | MUI | |
|---|---|---|
| 作成元 | オープンソース（Google とは別） | |
| 種類 | デザイン仕様・ガイドライン | React コンポーネント UI ライブラリ |
| コードか否か | コードではない | コード |
| プラットフォーム | 特定しない | React（Web） |
関係性をひとことで言うと「Material Design はルールブックで、MUI と MDC-Android はそれぞれの環境向けの実装」です。
同じ Spec を参照して作られているので見た目が似ているのは当然で、「ウェブ版の Material Design」という理解は完全な間違いではないのですが、正確には「Material Design を実装した Web 向けライブラリ」です。
💡 MDC-Android と MUI は、同じ親（Material Design）を持つ兄弟のような存在
まとめ
混同しやすい3つを整理すると以下の通りです。
- Material Design → デザイン仕様（ルール）
- Android（MDC / Compose）→ Android での実装
- MUI → Web（React）での実装
名前が似ているため混乱しやすいですが、「仕様」と「実装」を分けて考えると理解しやすくなります。