Dashboard

Welcome back! Here’s an overview of your projects.

Total Revenue

$45,231.89

20.1%

from last month

Active Users

2,300

15.3%

from last month

Conversion Rate

4.24%

2.1%

from last month

No reports generated yet

Get started by creating a new report. All your generated documents will appear here.

モダンなSaaSアプリケーションや管理画面（Admin Dashboard）で最も一般的に使用される、左サイドバーと上部ヘッダーを組み合わせた基本レイアウトです。

ユースケースと特徴 (Use Cases & Features)

管理画面・SaaSプロダクト: ナビゲーション項目が多いアプリケーションに最適です。
レスポンシブ対応: デスクトップでは常に表示されるサイドバーが、モバイルやタブレット画面では非表示になるように設計されています（実際の運用ではハンバーガーメニュー等でドロワー表示させます）。
Flexboxレイアウト: flex-1 や min-w-0 などのユーティリティを組み合わせ、画面高さいっぱいに収まるよう計算された構造です。メインコンテンツ領域のみがスクロールし、ヘッダーとサイドバーは固定されます。

デザインとUXのポイント (Design & UX)

スクロール領域の分離: 左のナビゲーション（aside内のnav）と、右のメインコンテンツ（main）のスクロールが独立しているため、長いメニューでもメイン画面を妨げません。
カスタムスクロールバー: ::-webkit-scrollbar を使用して、デフォルトの太いスクロールバーを細く洗練されたデザインに変更し、UIのノイズを減らしています。
視認性の高い階層構造: 背景色（bg-slate-50 と bg-white）や境界線（border-slate-200）、軽いシャドウ（shadow-sm）を組み合わせることで、各セクションの境界を自然に表現しています。

カスタマイズ方法 (Customization Guide)

サイドバーの幅: aside に指定されている w-64 (16rem = 256px) を w-72 や w-56 に変更することで幅を調整できます。
ヘッダーの高さ: header およびサイドバー上部のロゴ領域の h-16 (4rem = 64px) を h-14 などに変更することで、全体の高さをコントロールできます。
テーマカラーの変更: 各アイコンやアクティブメニューに使用されている indigo-600 等を、ブランドカラー（例: blue-600 や violet-500）に一括置換してください。

実装コード (Implementation)

<div class="h-screen w-full overflow-hidden bg-slate-50 text-slate-900 font-sans flex">
<!-- サイドバー -->
<aside class="hidden md:flex flex-col w-64 bg-white border-r border-slate-200 shrink-0">
  <div class="h-16 flex items-center px-6 border-b border-slate-200 shrink-0">
    <a href="#" class="font-bold text-lg text-indigo-600">NexusApp</a>
  </div>
  
  <nav class="flex-1 overflow-y-auto py-4 px-3">
    <ul class="space-y-1">
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-indigo-50 text-indigo-600">
          Dashboard
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50">
          Team
        </a>
      </li>
    </ul>
  </nav>
</aside>

<!-- メインコンテナ -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
  <!-- ヘッダー -->
  <header class="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 bg-white border-b border-slate-200 shadow-sm shrink-0">
    <div class="flex items-center gap-4">
      <!-- モバイル用メニュートグル -->
      <button class="md:hidden p-2 text-slate-500 hover:text-slate-900 rounded-md">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
      </button>
    </div>
    
    <div class="flex items-center gap-4">
      <button class="p-2 text-slate-400 hover:text-slate-600 rounded-full">
        <!-- 通知アイコン等 -->
      </button>
      <div class="h-8 w-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-sm font-bold">
        JS
      </div>
    </div>
  </header>
  
  <!-- メインコンテンツ領域 -->
  <main class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
    <div class="max-w-7xl mx-auto">
      <!-- ここにページ固有のコンテンツを配置 -->
      <h1 class="text-2xl font-bold text-slate-900 mb-6">Dashboard</h1>
    </div>
  </main>
</div>
</div>

ブラウザ対応状況 (Browser Support)

モダンブラウザ（Chrome, Safari, Firefox, Edge）の最新バージョンで正しく動作します。
Flexbox（flex, flex-1, flex-col）を多用しているため、古いブラウザ（IE等）はサポート対象外となります。