# 標準管理画面をオープンソースに：admin-design が担う範囲

プラットフォームのフロントエンドから抽出した管理画面の基線。意味づけされた Token、レイアウトシェル、共通コンポーネント、標準ページとコンポーネント一覧。MIT ライセンス。

> Runlume はプラットフォーム機能、独立業務アプリ、専門サービスを必要に応じて組み合わせて提供します。機能、上限、納品範囲は選択したプランや合意条件に従います。業務アプリは個別に選べ、横断連携は接続設定と許可境界を守ります。

元のページ: https://runlume.app/ja/blog/admin-design-open-source

開発者ガイド · 標準管理画面 / オープンソース / フロントエンド基線

公開：2026-09-17 · 著者：Runlume チーム

管理画面のプロジェクトでは、ログイン、レイアウト、テーブル、ツリー、通知、設定、空状態、エラー状態を毎回作り直すことになります。しかも色や余白、操作の細部はそれぞれ異なり、画面が増えるほど保守の負担も増えていきます。

私たちはその共通部分を再利用できる一つの基線にまとめ、MIT ライセンスで公開しました。**admin-design** は Runlume プラットフォームのフロントエンドから抽出した標準的な管理画面の設計と実装です。

## 含まれるもの

- テーマと意味づけされた Token：色は意味を持つユーティリティクラス経由のみで指定し、六つのプリセット配色にベースカラーとテーマカラーを重ねられます。明暗モードは自動で切り替わります。
- 三つのレイアウトシェル：サイドバー、トップ + サイドバー、トップナビゲーション。サイドバー幅、角丸、ページ遷移、ヘッダー操作の順序を調整できます。
- 九種類のコンポーネントページ：基本コントロール、フォームと選択、データ表示、フィードバックとオーバーレイ、ナビゲーションとフロー、指標とグラフ、アイコン、テーマと設定、標準ページ。コンポーネント一覧は資料であり、同時に受け入れ面でもあります。
- 標準ページ：ダッシュボード、一覧、詳細、設定、通知センター、ログイン、新規登録、パスワード再設定。
- 中国語と英語の二か国語、キーボード操作とアクセシビリティ設定、ドキュメントサイトと同じコマンドパレット検索。

## 三つの入口

- 紹介ページとプロジェクト概要：[adesign.runlume.app](https://adesign.runlume.app)
- ドキュメント（コンポーネント解説と開発規約）：[adoc.runlume.app](https://adoc.runlume.app)
- オンラインデモ（権限の異なる二つのテストアカウント）：[ago.runlume.app](https://ago.runlume.app)
- ソースコードと Issue：[github.com/runlume/admin-design](https://github.com/runlume/admin-design)

## 向いているチームと境界

管理画面を自前で作る必要があり、画面をゼロから二度書きしたくないチームに向いています。リポジトリを複製し、`package.json` の名前を変え、メニューとブランド素材を差し替え、サンプルデータを自社の API に向けるところから始められます。

含まれるのは設計と操作の層だけです。業務 API、認証の実装、権限モデル、業務ルールは含みません。サンプルデータはメモリ上にあり、再読み込みで初期化されます。ID、アップロード、ツリーのドラッグ、遅延読み込みといった機能は props で注入するため、実サービスへの接続はコールバックの差し替えで完結します。

## 関連ページ

- [プラットフォーム](https://runlume.app/ja/platform)
- [業務アプリ](https://runlume.app/ja/apps)
- [開発者](https://runlume.app/ja/developers)
- [Runlume について](https://runlume.app/ja/about)