レイアウト
ページ構造やコンテンツ配置など、レイアウトに関するUIコンポーネントやライブラリの比較
このページでわかること
- アコーディオン・タブ・サイドバー・アプリシェル・ヒーロー・リサイザブルパネルなど、画面構造を組み立てるレイアウトUIの違いと使い分け
- Mantine・Ant Design・shadcn/ui・Chakra UI・MUI・CSS Grid/Flexboxでの実装比較
- コンテンツ量・階層の深さ・モバイル対応など、シーン別の選定基準
- 複数レイアウトの組み合わせパターンと、実装時のハマりどころ
レイアウトUIとは
レイアウトUIは、画面上の情報を整理し、階層と優先度を視覚的に伝える構造要素。コンテンツとナビゲーションの関係、要素間の余白、ブレークポイントごとの並びを規定し、ユーザーが情報を見つけやすい状態を作る。
Webアプリケーションでよく使われるのは「アプリシェル」（ヘッダー＋サイドバー＋メイン）と、その内部で使う「タブ」「アコーディオン」「リサイザブルパネル」の組み合わせ。コンテンツの量や種類によって最適な構造が変わる。
本ページでは、React で使われる代表的なレイアウトUIを取り上げ、ライブラリごとの実装と特性を比較する。
目的別の選び方
◎ 推奨 / ◯ 適合 / △ 条件付き / − 該当なし
| UI種類 | 多量コンテンツ | 階層が深い | モバイル | 主な用途 |
|---|---|---|---|---|
| アプリシェル | ◎ | ◎ | △（要レスポンシブ） | 管理画面・ダッシュボード全体構造 |
| タブ | ◎ | △ | ◎ | 平行な複数ビュー切替 |
| アコーディオン | ◎ | ◎ | ◎ | FAQ・設定・縦長コンテンツ |
| サイドバー | ◎ | ◎ | △（折りたたみ必要） | ナビ・ツール群 |
| ヒーロー | △ | − | ◯ | LP・トップページ印象付け |
| リサイザブルパネル | ◎ | ◎ | △ | エディタ・3カラム表示 |
AppShell・ページレイアウト
詳細を見る →AppShellとCSS Grid/Flexboxによるページレイアウトパターンの比較
サイドバー・ドロワー（Sidebar / Drawer）
詳細を見る →折りたたみ・アイコン表示・オーバーレイ型ドロワー対応のナビゲーション用サイドバーの実装比較
タブ（Tabs）
詳細を見る →コンテンツを切り替えて表示するタブUIの実装比較。variant・type・配置などの違いをインタラクティブに確認
アコーディオン（Accordion）
詳細を見る →クリックで開閉するアコーディオンUIの実装比較。variant・複数展開・アニメーションの違いをインタラクティブに確認
リサイズ可能なパネル（Resizable Panels）
詳細を見る →ドラッグで幅・高さを自在に変更できる分割パネルUIの実装比較。折りたたみ・スナップ・ネスト分割などの違いをインタラクティブに確認
ヒーローセクション（Hero Section）
詳細を見る →ページ最上部の大型ビジュアルエリア。キャッチコピー・サブテキスト・CTAボタンを組み合わせた実装パターンの比較
組み合わせパターン
- 管理画面: アプリシェル + サイドバー + タブ（メイン内）
- エディタアプリ: リサイザブルパネル + サイドバー
- マーケティングサイト: ヒーロー + タブ（機能紹介）+ アコーディオン（FAQ）
- モバイルアプリ: タブバー + アコーディオン（メニュー）
よくある質問
タブとアコーディオンはどう使い分ける？
タブは「同じ階層の選択肢を切り替える」とき、アコーディオンは「縦に詰めたい情報を折りたたむ」ときに使う。タブは一度に1つだけ表示するのに対し、アコーディオンは複数開けることが多い。モバイルではタブよりアコーディオンの方が縦スクロールで読みやすい場合が多い。
アプリシェルとレイアウトコンポーネントの違いは？
アプリシェルは「ヘッダー・サイドバー・メイン・フッター」のような画面全体の枠組みを指す。Mantine AppShell や shadcn/ui の Layout コンポーネントが該当する。一方、「レイアウトコンポーネント」は Stack・Group・Grid・Flex のような部分配置用ヘルパーを指すことが多い。
リサイザブルパネルが必要なのはどんな時？
VS Code のようなエディタアプリや、3カラム以上の情報を密に表示するダッシュボードで便利。ユーザーが見たい領域を広げられる柔軟さが価値になる。一般的なWebサイトでは過剰なケースが多い。
モバイルでサイドバーを表示する最適解は？
ハンバーガーメニューと組み合わせてオーバーレイ表示するのが定番。Mantine AppShell.Navbar の breakpoint 指定や、shadcn/ui の Sheet を使うと、デスクトップでは固定、モバイルでは開閉という挙動が手軽に作れる。
Zenn