AppShell・ページレイアウト
アプリケーション全体の骨格（AppShell）と、ページ内のコンテンツ配置（Page Layout）を比較します。 UIライブラリ3種のAppShellに加え、CSS Grid / Flexbox だけで構成する基本レイアウトパターンも紹介します。
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 | Shadcn/ui | Ant Design | CSS Grid/Flex |
|---|---|---|---|---|
| AppShell専用 | ✅ あり | ❌ 組み合わせ | ⚠️ Layout組み合わせ | ❌ 自前実装 |
| Provider | MantineProvider | 不要 | ConfigProvider | 不要 |
| レスポンシブ | ✅ breakpoint指定 | ✅ Tailwind | ✅ Grid + breakpoint | ✅ メディアクエリ |
| レイアウトパターン | Header+Sidebar+Main | 自由構成 | Header+Sider+Content+Footer | Holy Grail / Grid / Stacked 等 |
| サイドバー開閉 | ✅ collapsed prop | ✅ 自前実装 | ✅ collapsible prop | ✅ 自前実装 |
| スタイリング | CSS Modules / style | Tailwind CSS | CSS-in-JS / token | CSS Grid / Flexbox |
| バンドルサイズ | 中（Tree-shaking可） | 小（コピペ方式） | 大（多機能） | 0（追加なし） |
| Next.js layout.tsx 統合 | ⚠️ Provider設計が必要 | ✅ 自然に統合 | ⚠️ Provider設計が必要 | ✅ 直接利用可 |
選択のポイント
- Mantine — AppShell専用コンポーネントがあり、宣言的にレイアウトを構成できる。レスポンシブ対応も組み込み済みで、最も手早くAppShellを実装できる。
- Shadcn/ui — Providerが不要でTailwind CSSとの親和性が高い。既存プロジェクトへの導入やデザインのカスタマイズが容易。AppShellの実装は自前だが、自由度が最も高い。
- Ant Design — Layout + Menu の統合が強力で、管理画面・エンタープライズ向けに最適。テーマカスタマイズのtoken設計や多数の組み込みコンポーネントが魅力。
- CSS Grid / Flexbox — 追加の依存なしでページレイアウトを構築できる。Next.js の layout.tsx とそのまま組み合わせられるため、軽量なプロジェクトやライブラリに縛られたくない場合に最適。Holy Grail や Dashboard Grid など定番パターンも CSS だけで実現可能。