統一スケジューリングシステム

Laravel移植用HTMLテンプレート集

MOEホールディングス - 介護法人グループ向け管理画面

📋 このテンプレート集について

ReactベースのFigma Makeプロジェクトから抽出したHTMLテンプレートです。 LaravelのBladeテンプレートとして使用することを想定しています。

詳細な移植手順は README.md をご確認ください。

🔐 認証画面

ログイン画面

メールアドレスとパスワードでログイン

二段階認証画面

two-factor.html

6桁のコード入力による二段階認証

🎨 共通レイアウト

★

メインレイアウト（サイドバー + コンテンツエリア）

layout-main.html

左サイドバーとメインコンテンツエリアを含む共通レイアウト

11項目のナビゲーションユーザー情報表示 Lucide Icons使用

📊 管理画面

METs値管理 - 一覧

mets-list.html

120件のモックデータ、ページネーション機能付き

テーブル表示ページネーション削除機能

施設管理 - 詳細

facility-detail.html

施設情報と利用者一覧を表示

2カラムレイアウト利用者一覧テーブル

📝 その他のページ（Reactコンポーネント）

以下のページはReactコンポーネントとして実装されています：

アカウント管理:

アカウント一覧
アカウント詳細
アカウント編集

施設管理:

施設一覧
施設ステータス
施設編集

プログラム管理:

プログラム一覧
プログラム詳細
プログラム編集
プログラムデータ管理
プログラムカテゴリ管理

スケジュール・実績:

スケジュール管理
実績管理
実績分析
カレンダー表示

連絡事項:

連絡事項管理（施設）
連絡事項管理（本部宛）

その他:

全体ステータス
METs詳細・編集

これらのページも同様の手法でHTMLテンプレート化できます。
Reactコンポーネントのソースコードは /src/app/components/ に格納されています。

⚙️ 技術情報

使用技術

✅ Tailwind CSS v4
✅ Noto Sans JPフォント
✅ Lucide Icons
✅ レスポンシブデザイン

デザイン原則

🎯 1画面1判断
🎯 情報は重要度順に縦配置
🎯 説明不要で直感的
🎯 入力項目を最小限に

UI仕様

📏 文字サイズ: +2px拡大済み
📏 文字色: 黒/濃いグレー
📏 左サイドバー: 11項目
📏 背景色: グレー（bg-gray-50）

🚀 Laravel移植の開始

クイックスタート

1
README.mdを読む
詳細な移植手順が記載されています
2
Tailwind CSSをセットアップ
Laravel Breezeまたは手動でインストール
3
Lucide Iconsを導入
NPMパッケージまたはCDNで使用
4
レイアウトファイルを作成
layout-main.htmlを参考にBladeテンプレートを作成
5
ルーティングとコントローラーを実装
README.mdのサンプルコードを参考に

Laravel移植用HTMLテンプレート集 - Generated from Figma Make