AppShell・ページレイアウト

アプリケーション全体の骨格（AppShell）と、ページ内のコンテンツ配置（Page Layout）を比較します。 UIライブラリ4種（Mantine・Ant Design・shadcn/ui・MUI）のAppShellに加え、CSS Grid / Flexbox だけで構成する基本レイアウトパターンも紹介します。

@mantine/corev9.1.1 antdv6.3.7 @mui/materialv9.0.0

Mantine AppShell

Mantine が提供する専用の AppShell コンポーネント。Header・Navbar・Main を宣言的に構成でき、レスポンシブ対応やブレークポイント制御が組み込み済み。

専用コンポーネントレスポンシブ対応Provider必須

読み込み中...

tsx

'use client';
import { MantineProvider, Burger, NavLink } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import '@mantine/core/styles.css';

export function MantineAppShellDemo() {
  const [opened, { toggle }] = useDisclosure(true);
  return (
    <MantineProvider>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
        <header style={{ height: 50, background: '#1e293b', display: 'flex', alignItems: 'center', padding: '0 16px', gap: 12 }}>
          <Burger opened={opened} onClick={toggle} size="sm" color="white" />
          <span style={{ color: 'white', fontWeight: 700 }}>MyApp</span>
        </header>
        <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
          <nav style={{ width: opened ? 220 : 0, overflow: 'hidden', transition: 'width 200ms', background: '#f8fafc', borderRight: '1px solid #e2e8f0' }}>
            <div style={{ padding: 16, width: 220 }}>
              <NavLink label="ダッシュボード" leftSection="📊" />
              <NavLink label="設定" leftSection="⚙️" />
            </div>
          </nav>
          <main style={{ flex: 1, padding: 16 }}>メインコンテンツ</main>
        </div>
      </div>
    </MantineProvider>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Mantineを使ったAppShell（アプリシェルレイアウト）を実装してください。
- 使用ライブラリ: @mantine/core の AppShell / AppShell.Header / AppShell.Navbar / AppShell.Main、MantineProvider必須
- AppShell の navbar.width / navbar.breakpoint props でサイドバー幅とレスポンシブブレークポイントを設定する
- collapsed prop でサイドバーの折りたたみ（アイコンのみ表示）を制御する
- ヘッダーにロゴ・タイトル・ユーザーアイコンを配置する
- モバイルではサイドバーをドロワー（オーバーレイ）として開閉できるようにする
- Next.js の layout.tsx パターンに対応した構造にする

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

ライブラリ比較

項目	Mantine	Ant Design	Shadcn/ui	MUI	CSS Grid/Flex
AppShell専用	✅ あり	⚠️ Layout組み合わせ	❌ 組み合わせ	⚠️ AppBar+Drawer組み合わせ	❌ 自前実装
Provider	MantineProvider	ConfigProvider	不要	不要	不要
レスポンシブ	✅ breakpoint指定	✅ Grid + breakpoint	✅ Tailwind	✅ useMediaQuery で分岐	✅ メディアクエリ
レイアウトパターン	Header+Sidebar+Main	Header+Sider+Content+Footer	自由構成	AppBar+Drawer+Main	Holy Grail / Grid / Stacked 等
サイドバー開閉	✅ collapsed prop	✅ collapsible prop	✅ 自前実装	✅ sx transition で実装	✅ 自前実装
スタイリング	CSS Modules / style	CSS-in-JS / token	Tailwind CSS	Emotion（sx prop）	CSS Grid / Flexbox
バンドルサイズ	中（Tree-shaking可）	大（多機能）	小（コピペ方式）	⚠️ 中（Emotion込み）	0（追加なし）
Next.js layout.tsx 統合	⚠️ Provider設計が必要	⚠️ Provider設計が必要	✅ 自然に統合	⚠️ Provider設計が必要	✅ 直接利用可

選択のポイント

Mantine — AppShell専用コンポーネントがあり、宣言的にレイアウトを構成できる。レスポンシブ対応も組み込み済みで、最も手早くAppShellを実装できる。
Shadcn/ui — Providerが不要でTailwind CSSとの親和性が高い。既存プロジェクトへの導入やデザインのカスタマイズが容易。AppShellの実装は自前だが、自由度が最も高い。
Ant Design — Layout + Menu の統合が強力で、管理画面・エンタープライズ向けに最適。テーマカスタマイズのtoken設計や多数の組み込みコンポーネントが魅力。
MUI — 週670万DLと圧倒的なシェアを誇るMaterial Design準拠のライブラリ。エンタープライズ〜スタートアップまで幅広く採用され、ドキュメントや事例が豊富。Emotion（CSS-in-JS）を使用するため、Tailwind CSS v4との併用時はスタイルをMUI側のpropsで制御することを推奨。
CSS Grid / Flexbox — 追加の依存なしでページレイアウトを構築できる。Next.js の layout.tsx とそのまま組み合わせられるため、軽量なプロジェクトやライブラリに縛られたくない場合に最適。Holy Grail や Dashboard Grid など定番パターンも CSS だけで実現可能。

アプリシェルは、ヘッダー・サイドバー・メインコンテンツ・フッターなどの領域を固定レイアウトで配置したアプリケーションの外枠UI。

管理画面・ダッシュボード・SaaSアプリなど、複数ページにわたって共通のナビゲーションを持つWebアプリで使われる。

主なバリエーション