MUI（Material-UI）の使い方がわからない？3ステップで理解する導入ガイド

January 13, 2026March 29, 2026

「Reactでアプリを作っているけど、CSSを自分で書くのが面倒…」「デザインに統一感がなくて、なんだか素人っぽい見た目になる…」そんな悩みを抱えていませんか？

Reactの開発では、機能実装だけでも大変なのに、それに加えてデザインまで考えるのは本当に時間がかかります。ボタンの色、余白の調整、レスポンシブ対応…気づけばCSSファイルが膨大になり、メンテナンスが困難に。

そんな悩みを解決するのがMUI（Material-UI）です。GoogleのMaterial Designに基づいた豊富なコンポーネントをすぐに使えるため、デザインに時間をかけずに、それなりに見栄えの良いUIを実装できます。この記事では、MUIを初めて触る方でも理解できるよう、導入から基本的な使い方まで3ステップで解説します。

MUIとは？React開発を効率化するUIライブラリ

MUI（旧Material-UI）は、Reactアプリケーション向けのUIコンポーネントライブラリです。公式サイトでは「世界で最も人気のあるReact UIフレームワーク」と謳っており、GitHubスター数は90,000以上を誇ります。

公式サイト: https://mui.com/
GitHub: https://github.com/mui/material-ui

GoogleのMaterial Designに基づいた統一感あるデザイン

MUIの最大の特徴は、Google Material Designという明確なデザイン指針に基づいて作られていることです。これにより、以下のメリットがあります:

統一感のある見た目: ボタン、フォーム、カードなどすべてのコンポーネントが統一されたデザイン言語で作られている
使い慣れたUI: GoogleのプロダクトやAndroidアプリでお馴染みのデザインなので、ユーザーにとって直感的
アクセシビリティ対応: WAI-ARIA標準に準拠しており、スクリーンリーダーなどの支援技術にも対応

なぜMUIが人気なのか？3つの理由

Reactエコシステムには多くのUIライブラリが存在しますが、MUIが特に人気な理由は以下の3点です:

豊富なコンポーネント: Button、TextField、Select、Dialogなど、Webアプリ開発で必要なコンポーネントがほぼすべて揃っている
TypeScript完全対応: 型定義が充実しており、VSCodeの自動補完が強力に効く
カスタマイズ性の高さ: デフォルトのデザインから自社ブランドに合わせたカスタマイズまで柔軟に対応可能

MUIを使うメリット・デメリット

MUIを導入する前に、メリットとデメリットを理解しておきましょう。どんなツールにも得意・不得意があるため、自分のプロジェクトに適しているか判断する材料になります。

メリット:開発スピードとデザイン品質の向上

CSSを書く時間が激減: ボタン一つ作るのに、色、サイズ、ホバーエフェクト、レスポンシブ対応…を考える必要がなくなります。<Button variant="contained">送信</Button>と書くだけで、デザインの整ったボタンが完成します。
レスポンシブ対応が簡単: Gridシステムやsx propを使えば、ブレークポイントごとのスタイル調整が直感的に書けます。
TypeScript対応で開発体験が向上: propsの型チェックが効くため、「このコンポーネントはどんなpropsを受け取れるんだっけ？」と迷うことが減ります。
ドキュメントが充実: 公式ドキュメントに大量のコード例があり、コピペしてすぐに試せます。

デメリット:バンドルサイズと学習コスト

バンドルサイズが大きい: MUI全体をインポートすると、JavaScriptバンドルサイズが増加します。ただし、Tree Shakingを活用すれば、使用しているコンポーネントのみをバンドルできるため、この問題は軽減可能です。
学習コストがある: MUI独自のスタイリングシステム（sx prop、Theme、styled API）に慣れるまで時間がかかります。特に既存のCSSスキルを持つ人ほど、「なぜこんな書き方を？」と感じることがあります。
デザインがMaterial Designに縛られる: Material Designの枠組みから大きく外れたデザインを実現するのは難しい場合があります。完全オリジナルのデザインが必要なら、TailwindCSSなどの別アプローチも検討すべきです。

MUIが向いているプロジェクト

MUIは以下のようなプロジェクトに最適です:

管理画面・ダッシュボード: 表、フォーム、ダイアログなど、MUIの得意分野が多い
MVPやプロトタイプ: デザインに時間をかけず、機能検証を優先したい場合
Material Designが好きなチーム: Googleのデザイン言語を採用したい場合
TypeScript採用プロジェクト: 型安全性を重視する開発チーム

逆に、完全オリジナルのブランドデザインが必要なマーケティングサイトや、極限までバンドルサイズを削りたいパフォーマンス重視のアプリでは、別の選択肢も検討すべきです。

【ステップ1】MUIのインストールと初期設定

それでは、実際にMUIをインストールしてみましょう。このステップでは、新規Reactプロジェクトを作成し、MUIを導入するまでを解説します。

必要な環境

MUIを使用するには、以下の環境が必要です:

Node.js: v14以上（推奨はv18以上）
React: v17以上（v18推奨）
パッケージマネージャー: npm、yarn、またはpnpm

Reactプロジェクトがまだない場合は、ViteまたはNext.jsでプロジェクトを作成しましょう。ここではViteを使った例を紹介します:

# Viteで新規Reactプロジェクト作成
npm create vite@latest my-mui-app -- --template react-ts
cd my-mui-app
npm install

MUIのインストール

MUIを使用するには、以下の2つのパッケージをインストールします:

# MUIのコアパッケージとアイコンをインストール
npm install @mui/material @emotion/react @emotion/styled
アイコンも使いたい場合（オプション）
npm install @mui/icons-material

@emotion/reactと@emotion/styledは、MUIのスタイリングシステムに必要な依存パッケージです。

基本的なセットアップ（ThemeProvider）

MUIを使い始める前に、アプリ全体にThemeProviderでテーマを適用します。src/main.tsx（またはsrc/index.tsx）を以下のように編集しましょう:

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { ThemeProvider, createTheme } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'
// デフォルトテーマを作成
const theme = createTheme()
ReactDOM.createRoot(document.getElementById('root')!).render(


{/* CssBaselineでブラウザのデフォルトCSSをリセット */}



,
)

重要なポイント:

ThemeProvider: アプリ全体にMUIのテーマを適用するコンポーネント
CssBaseline: ブラウザ間のCSSの違いを吸収し、統一された見た目を提供
createTheme(): テーマオブジェクトを作成（後でカスタマイズ可能）

これで基本的なセットアップは完了です！次のステップでは、実際にMUIのコンポーネントを使ってみましょう。

【ステップ2】基本的なコンポーネントを使ってみる

MUIのセットアップが完了したので、実際にコンポーネントを使ってみましょう。ここでは、最もよく使う基本的なコンポーネントを紹介します。

Button: ボタンコンポーネント

まずは最も基本的なButtonコンポーネントから始めましょう。src/App.tsxを以下のように編集してください:

// src/App.tsx
import { Button, Stack } from '@mui/material'
function App() {
return (

MUI基本コンポーネント
  {/* 3種類のボタンバリエーション */}
  <Button variant="contained">Contained（塗りつぶし）</Button>
  <Button variant="outlined">Outlined（枠線のみ）</Button>
  <Button variant="text">Text（テキストのみ）</Button>
  
  {/* カラーバリエーション */}
  <Button variant="contained" color="primary">Primary</Button>
  <Button variant="contained" color="secondary">Secondary</Button>
  <Button variant="contained" color="error">Error</Button>
  <Button variant="contained" color="success">Success</Button>
</Stack>
)
}
export default App

開発サーバーを起動して確認してみましょう:

npm run dev

ブラウザでhttp://localhost:5173を開くと、Material Designスタイルのボタンが表示されます。CSSを一切書かずに、統一感のあるデザインが実現できていることに注目してください。

TextField: 入力フォーム

次に、フォーム入力でよく使うTextFieldを追加してみましょう:

// src/App.tsx に追加
import { Button, Stack, TextField } from '@mui/material'
function App() {
return (

MUI基本コンポーネント
  {/* テキスト入力フィールド */}
  <TextField 
    label="名前" 
    variant="outlined" 
    placeholder="山田太郎"
  />
  
  <TextField 
    label="メールアドレス" 
    type="email"
    variant="outlined"
    helperText="例: example@email.com"
  />
  
  <TextField 
    label="パスワード" 
    type="password"
    variant="outlined"
    required
  />
  
  <Button variant="contained">送信</Button>
</Stack>
)
}

TextFieldの便利な機能:

label: フローティングラベルが自動的に表示される
helperText: 入力欄の下に補足説明を表示
required: 必須項目のマーク（*）が自動的に追加される
error: エラー状態を表示（赤色のボーダーとテキスト）

Card: カードコンポーネント

情報をグループ化して表示するCardコンポーネントも非常によく使います:

// src/App.tsx
import { 
  Button, 
  Stack, 
  Card, 
  CardContent, 
  CardActions, 
  Typography 
} from '@mui/material'
function App() {
return (

MUI基本コンポーネント
  <Card sx={{ maxWidth: 400 }}>
    <CardContent>
      <Typography variant="h5" component="h2" gutterBottom>
        カードタイトル
      </Typography>
      <Typography variant="body2" color="text.secondary">
        これはMUIのCardコンポーネントの例です。
        情報をまとめて表示する際に便利です。
      </Typography>
    </CardContent>
    <CardActions>
      <Button size="small">詳細</Button>
      <Button size="small">共有</Button>
    </CardActions>
  </Card>
</Stack>
)
}

スタイリングの基本: sx prop

MUIでは、sx propを使ってインラインでスタイルを指定できます。これはCSSと似ていますが、テーマの値を参照できる点が強力です:

// sx propの基本的な使い方
<Button 
  variant="contained"
  sx={{
    backgroundColor: 'primary.main',  // テーマの色を参照
    padding: 2,  // テーマのspacing値を参照（8pxの倍数）
    borderRadius: 2,
    '&:hover': {  // hover時のスタイル
      backgroundColor: 'primary.dark',
    }
  }}
>
  カスタムボタン
</Button>

sx propは、従来のCSSクラスやStyled Componentsと比べて、以下の利点があります:

テーマの値を簡単に参照: theme.spacing(2)やtheme.palette.primary.mainを直接書ける
レスポンシブ対応が簡単: { xs: 12, md: 6 }のようにブレークポイントごとの値を指定可能
型安全: TypeScriptの補完が効くため、プロパティ名のタイポを防げる

【ステップ3】テーマをカスタマイズする

MUIの基本的な使い方を理解したら、次は自分のプロジェクトに合わせてテーマをカスタマイズしましょう。デフォルトのMaterial Designカラーから、自社ブランドのカラーに変更する方法を紹介します。

カラーパレットの変更

src/main.tsxで作成したcreateTheme()をカスタマイズします:

// src/main.tsx
import { ThemeProvider, createTheme } from '@mui/material/styles'
// カスタムテーマを作成
const theme = createTheme({
palette: {
primary: {
main: '#1976d2',  // メインカラー（青）
light: '#42a5f5',
dark: '#1565c0',
},
secondary: {
main: '#dc004e',  // セカンダリカラー（赤）
light: '#f73378',
dark: '#9a0036',
},
background: {
default: '#f5f5f5',  // 背景色
paper: '#ffffff',    // Cardなどの背景色
},
},
})
// ThemeProviderに渡す

{/* ... */}

この設定により、アプリ全体のボタンやリンクの色が変更されます。primary.mainを変更すれば、<Button variant="contained">の色も自動的に変わります。

タイポグラフィの設定

フォントファミリーやサイズもカスタマイズできます:

const theme = createTheme({
  typography: {
    fontFamily: [
      'Noto Sans JP',  // 日本語フォント
      'Roboto',
      'Arial',
      'sans-serif',
    ].join(','),
    h1: {
      fontSize: '2.5rem',
      fontWeight: 700,
    },
    body1: {
      fontSize: '1rem',
      lineHeight: 1.6,
    },
  },
})

日本語フォントを使う場合は、Google Fontsなどから読み込む必要があります。index.htmlの<head>に追加しましょう:

<!-- index.html -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

ダークモード対応

MUIはダークモードに対応しており、簡単に切り替えができます:

const theme = createTheme({
  palette: {
    mode: 'dark',  // 'light' または 'dark'
    primary: {
      main: '#90caf9',  // ダークモード用のカラー
    },
  },
})

実際のアプリでは、ユーザーがライト/ダークモードを切り替えられるようにするのが一般的です。以下は簡単な実装例です:

// src/App.tsx
import { useState, useMemo } from 'react'
import { ThemeProvider, createTheme } from '@mui/material/styles'
import { Button, CssBaseline } from '@mui/material'
function App() {
const [mode, setMode] = useState<'light' | 'dark'>('light')
const theme = useMemo(
() =>
createTheme({
palette: {
mode,
},
}),
[mode],
)
return (



{/* 他のコンポーネント */}

)
}

MUIを使う上でよくあるトラブルと解決法

MUIを使い始めると、いくつかのトラブルに遭遇することがあります。ここでは、よくある問題とその解決法を紹介します。

トラブル1: スタイルが反映されない

症状: sx propやテーマ設定が反映されず、デフォルトのスタイルのまま表示される。

原因: ThemeProviderが正しく設定されていないか、CssBaselineが欠けている可能性があります。

解決法:

main.tsxでThemeProviderとCssBaselineが正しく配置されているか確認
ブラウザの開発者ツールでElementsタブを開き、適用されているスタイルを確認
開発サーバーを再起動してみる

トラブル2: TypeScriptでエラーが出る

症状: Property 'sx' does not exist on typeのようなTypeScriptエラーが表示される。

原因: MUIの型定義が正しく読み込まれていない。

解決法:

# 型定義を再インストール
npm install --save-dev @types/react @types/react-dom
node_modulesをクリーンアップ
rm -rf node_modules package-lock.json
npm install

トラブル3: バンドルサイズが大きすぎる

症状: ビルド後のJavaScriptファイルが数MBになってしまう。

原因: MUI全体をインポートしている、またはTree Shakingが効いていない。

解決法:

// ❌ 悪い例: 全体インポート
import * as MUI from '@mui/material'
// ✅ 良い例: 必要なコンポーネントのみインポート
import { Button, TextField } from '@mui/material'

また、vite.config.tsでビルド最適化の設定を追加することも有効です:

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'mui': ['@mui/material', '@mui/icons-material'],
        },
      },
    },
  },
})

次のステップ: MUIをさらに活用する

基本的なMUIの使い方をマスターしたら、次のステップに進みましょう。

公式ドキュメントの活用法

MUIの公式ドキュメントは非常に充実しており、すべてのコンポーネントに対して以下が用意されています:

APIリファレンス: すべてのpropsとその型定義
インタラクティブなデモ: ブラウザ上でコードを編集して動作確認可能
CSS API: 各コンポーネントのクラス名とカスタマイズ方法

困ったときは、まず公式ドキュメントを見る習慣をつけましょう。Stack Overflowよりも最新で正確な情報が得られます。

MUI X: 高度なコンポーネント

MUIには、有料版のMUI Xも存在します。以下のような高度なコンポーネントが利用可能です:

DataGrid: ソート、フィルタリング、ページネーション対応の高機能テーブル
DatePicker: カレンダー表示付きの日付選択UI
TreeView: 階層構造のデータを表示

無料プランでも基本機能は使えるため、必要に応じて導入を検討しましょう。

実践的なプロジェクト例

MUIを学んだら、以下のようなプロジェクトに挑戦してみましょう:

Todoアプリ: TextField、Button、List、Checkboxを組み合わせた基本的なアプリ
ダッシュボード: Grid、Card、Chartを使った管理画面
フォーム: TextField、Select、Radioなどを使ったユーザー登録フォーム

React開発をさらに効率化する関連記事

MUIでReactのUI開発をマスターしたら、他の開発ツールやフレームワークも学んで、さらに効率的な開発環境を構築しましょう:

まとめ: MUIで快適なReact UI開発を始めよう

この記事では、MUIを初めて使う方でも理解できるよう、導入から基本的な使い方、カスタマイズ方法まで3ステップで解説しました。

MUIの主なメリット:

CSSを書く時間が激減し、デザインに統一感が生まれる
Material Designに基づいた使いやすいUIコンポーネント
TypeScript完全対応で開発体験が向上
テーマのカスタマイズで自社ブランドに合わせたデザインが可能

MUIを使うことで、「CSSの書き方がわからなくて手が止まる…」「デザインがバラバラで統一感がない…」といった悩みから解放されます。特に管理画面やダッシュボードのような業務アプリケーションでは、MUIの威力が発揮されます。

今日からMUIを使って、より効率的で快適なReact開発を始めてみませんか？

公式ドキュメント: https://mui.com/material-ui/getting-started/

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

MUI（Material-UI）の使い方がわからない？3ステップで理解する導入ガイド

MUIとは？React開発を効率化するUIライブラリ

GoogleのMaterial Designに基づいた統一感あるデザイン

なぜMUIが人気なのか？3つの理由

MUIを使うメリット・デメリット

メリット:開発スピードとデザイン品質の向上

デメリット:バンドルサイズと学習コスト

MUIが向いているプロジェクト

【ステップ1】MUIのインストールと初期設定

必要な環境

MUIのインストール

基本的なセットアップ（ThemeProvider）

【ステップ2】基本的なコンポーネントを使ってみる

Button: ボタンコンポーネント

MUI基本コンポーネント

TextField: 入力フォーム

MUI基本コンポーネント

Card: カードコンポーネント

MUI基本コンポーネント

スタイリングの基本: sx prop

【ステップ3】テーマをカスタマイズする

カラーパレットの変更

タイポグラフィの設定

ダークモード対応

MUIを使う上でよくあるトラブルと解決法

トラブル1: スタイルが反映されない

トラブル2: TypeScriptでエラーが出る

トラブル3: バンドルサイズが大きすぎる

次のステップ: MUIをさらに活用する

公式ドキュメントの活用法

MUI X: 高度なコンポーネント

実践的なプロジェクト例

React開発をさらに効率化する関連記事

React開発環境・フレームワーク

UI/UXデザイン効率化ツール

開発効率化ツール

まとめ: MUIで快適なReact UI開発を始めよう

関連記事