DELOGs
[管理画面フォーマット制作編 #9] Shadcn/ui で作る管理画面フォーマット ─ デモ公開とカスタマイズ方法

管理画面フォーマット制作編 #9
Shadcn/ui で作る管理画面フォーマット ─ デモ公開とカスタマイズ方法

これまで進めてきたログイン画面、ユーザー管理、ロール管理、サイドバー管理などをまとめ、「UIのみ版」デモを公開

初回公開日

最終更新日

0. はじめに

これまでの記事シリーズでは、ログイン画面からユーザー管理、プロフィール編集、ロール管理、サイドバー管理など、管理画面を構成する要素を一つずつ整備してきました。
今回は、それらをまとめた 「UIのみ版」デモサイト を公開しました。本記事では、デモの概要と、mock データを編集してカスタマイズする方法を紹介します。

1. デモ公開の概要

今回公開したデモは、Next.js + Shadcn/ui を利用して構築した 管理画面フォーマット の UI です。
デモURL：https://delogs.jp/demo/dashboard-format-ui/
  • ログイン画面からスタートし、ダッシュボードやユーザー管理の画面を順に確認できます。
  • ログイン画面はデフォルトでバリデーションを通過する値が入っています。そのまま「ログイン」ボタンをクリックして遷移してください。
  • デモでは 認証や DB 連携は行っていません。そのため、フォームはバリデーションのみで、これを通過すれば送信後は「成功 UI」を返すだけの仕組みです。
▼ログイン画面
ログイン画面
▼ユーザ一覧（ログイン後ページ）
ユーザ一覧

2. 実装済みの UI 一覧

本デモで確認できる UI は以下の通りです。
  • ログイン画面（Zod バリデーションあり）
  • 共通レイアウト（Sidebar・ダークモード切替）
  • ユーザー管理：詳細・新規・編集フォーム
  • プロフィール：情報確認・編集・パスワード変更
  • ロール管理（UI のみ）
  • サイドバー：アクティブ同期・3層構造
  • メニュー管理：並び順・権限による可視制御
  • 404 ページとパスワード忘れ導線
これにより、典型的な管理画面の主要なパーツが揃った状態になっています。それぞれはデモページの 「ダッシュボード」-「概要」 に記載したとおり、各記事にて制作過程を紹介しています。

補足

今回デモ公開するにあたって、 管理画面フォーマット制作編 #8 ログイン後404ページ + ログイン前のパスワード忘れ導線UI までのソースコードを少し修正しています。
◯ログイン画面とパスワード忘れ画面のロゴ
tsx
1// 修正前 2 {/* light用ロゴ（＝ダークモード時に非表示） */} 3 <Image 4 src="/logo.svg" 5 alt="サイトロゴ" 6 priority 7 width={160} 8 height={40} 9 className="h-[40px] w-[160px] dark:hidden" 10 /> 11 12 {/* dark用ロゴ（＝ダークモード時に表示） */} 13 <Image 14 src="/logo-d.svg" 15 alt="サイトロゴ（ダーク）" 16 priority 17 width={160} 18 height={40} 19 className="hidden h-[40px] w-[160px] dark:block" 20 /> 21 22// 修正後 23 {/* light用ロゴ（＝ダークモード時に非表示） */} 24 <Image 25 src="/logo.svg" 26 alt="サイトロゴ" 27 width={160} 28 height={40} 29 className="h-[40px] w-[160px] dark:hidden" 30 /> 31 32 {/* dark用ロゴ（＝ダークモード時に表示） */} 33 <Image 34 src="/logo-d.svg" 35 alt="サイトロゴ（ダーク）" 36 width={160} 37 height={40} 38 className="hidden h-[40px] w-[160px] dark:block" 39 /> 40
上記のようにpriorityを入れていましたが、ダークモード切り替え時にCSSで画像を入れ替えるため、priorityがあるとブラウザで警告が出るので外しました。
◯各page.tsxのtitle
tsx
1// src/app/layout.tsx 2 3export const metadata: Metadata = { 4 title: { 5 default: "管理画面フォーマットUIのみ版【DELOGs】", 6 template: "%s | 管理画面フォーマットUIのみ版【DELOGs】", 7 }, 8 description: 9 "Next.js、Shadcn/uiを使用した管理画面フォーマットです。UIのみを制作しました。今後、DB連携を行う予定です。", 10}; 11 12// src/app/(protected)/masters/roles/page.tsx 13 14export const metadata: Metadata = { 15 title: "ロール一覧", 16 description: 17 "ロール一覧（色・種別・権限）をshadcn/ui+@tanstack/react-tableで表示", 18};
上記のようにlayout.tsxでテンプレート化するようにして、各ページはタイトルをシンプルに挿入するようにしました。

3. カスタマイズ方法

デモは「UI のみ版」ですが、mock データを編集することで挙動を簡単に変えられるように設計しています。
対象ファイルは以下の通りです。
  • @/lib/users/mock.ts
  • @/lib/roles/mock.ts
  • @/lib/sidebar/menu.mock.ts
たとえば、ユーザー配列に要素を追加すれば、即座に一覧画面へ反映されます。
ts
1// lib/users/mock.ts 2export const mockUsers: MockUser[] = [ 3 { 4 displayId: "U00000001", 5 accountCode: "testAccount0123", 6 name: "山田 太郎", 7 email: "admin@example.com", 8 roleCode: "ADMIN", 9 isActive: true, 10 }, 11 { 12 displayId: "U00000002", 13 accountCode: "testAccount0123", 14 name: "佐藤 花子", 15 email: "editor@example.com", 16 roleCode: "EDITOR", 17 isActive: true, 18 }, 19];
上記の配列に新しいユーザーオブジェクトを追加すれば、一覧 UI に即座に表示されます。DB 連携を待たずに、レイアウトやバリデーションの確認を進められる仕組みです。
ts
1// lib/roles/mock.ts 2export const mockRoles: Role[] = [ 3 { 4 displayId: "R00000001", 5 code: "ADMIN", 6 displayName: "管理者", 7 priority: 100, 8 badgeColor: "#D32F2F", // 赤 9 isActive: true, 10 isSystem: true, 11 canDownloadData: true, 12 canEditData: true, 13 }, 14 { 15 displayId: "R00000002", 16 code: "EDITOR", 17 displayName: "編集者", 18 priority: 50, 19 badgeColor: "#1976D2", // 青 20 isActive: true, 21 isSystem: true, 22 canDownloadData: true, 23 canEditData: true, 24 }, 25];
priority の値は「大きいほど強い権限」として扱います。
数値を変更することで、画面上の並び順や権限レベルの判定が変化します。
デモページの 「ドキュメント」-「チュートリアル」 にも記載しています。

4. ソースコード公開リポジトリ

ソースコードは GitHub 上で公開しています。
読者の方は clone してローカル環境で動作を確認できます。
起動手順は以下の通りです。
bash
1git clone https://github.com/delogs-jp/dashboard-format-ui.git 2cd dashboard-format-ui 3npm install 4npm run dev
上記コマンドで http://localhost:3000 にデモが起動します。記事で紹介している UI をローカル環境で確認・編集することができます。 基本はShadcn/uiのテンプレートなので、自責での改変はもちろん自由です。
ご意見・ご感想など、いただければありがたいです。

5. 今後の展望

今回のデモは「UI のみ版」として公開しました。
今後は以下の方向で拡張していく予定です。
  • DB との連携
  • JWT 認証や RBAC（ロールベースアクセス制御）の実装
  • API 経由での登録・更新・削除処理の追加
これにより、単なる UI デモから実用的な管理画面フレームワークへと進化させていきます。完成すれば、それも別途公開する予定です。

6. まとめ

  • 管理画面の主要 UI をまとめた「UI のみ版」をデモ公開しました。
  • mock データを編集するだけでカスタマイズできるため、学習や試作に最適です。
  • 今後は DB 連携や RBAC 実装を進め、より実践的な構成へ移行していきます。
ぜひデモサイトや GitHub リポジトリを触ってみて、UI の流れやカスタマイズ性を体感してください。

参考文献

この記事の執筆・編集担当
DE

松本 孝太郎

DELOGs編集部/中年新米プログラマー

ここ数年はReact&MUIのフロントエンドエンジニアって感じでしたが、Next.jsを学んで少しずつできることが広がりつつあります。その実践記録をできるだけ共有していければと思っています。

▼ 関連記事
[管理画面フォーマット制作編 #8] ログイン後404ページ + ログイン前のパスワード忘れ導線UI

管理画面に「ログイン後の404ページ」と、ログイン前にユーザが管理者へ依頼できる「パスワード忘れ導線UI」を追加

2025/9/2公開

[管理画面フォーマット制作編 #8] ログイン後404ページ + ログイン前のパスワード忘れ導線UIのイメージ
[管理画面フォーマット制作編 #7] サイドバーメニュー管理UI ─ 3層・並び順・priority可視制御まで

サイドバーに表示するメニューをUIから登録・編集・削除できる管理画面を作成

2025/8/29公開

[管理画面フォーマット制作編 #7] サイドバーメニュー管理UI ─ 3層・並び順・priority可視制御までのイメージ
[管理画面フォーマット制作編 #6] マスタ管理-ロール管理（UIのみ）

ロールテーブルを管理画面から操作するためのUIを、Next.js 15 + shadcn/ui + React Hook Form + Zodで実装

2025/8/26公開

[管理画面フォーマット制作編 #6] マスタ管理-ロール管理（UIのみ）のイメージ
[管理画面フォーマット制作編 #5] ユーザープロフィールUI ─ 情報確認・編集・パスワード変更

管理画面に「プロフィール」ページを追加し、ユーザ自身が情報やパスワードを更新できるUIを作成

2025/8/22公開

[管理画面フォーマット制作編 #5] ユーザープロフィールUI ─ 情報確認・編集・パスワード変更のイメージ
[管理画面フォーマット制作編 #4] サイドバーのメニューと参照中ページの同期

Next.js App Router + shadcn/ui のサイドバーで「いま見ているページ」を正しくハイライト

2025/8/19公開

[管理画面フォーマット制作編 #4] サイドバーのメニューと参照中ページの同期のイメージ
もっと見る