FloorMap Pro - 工場・倉庫レイアウト図＆動線改善シミュレーター

## 1. アプリの目的・ターゲットユーザー
工場・倉庫・作業現場の担当者やレイアウト改善担当が、設備配置図（フロアマップ）をブラウザ上で作成・編集し、作業動線の距離・交差・混雑度を可視化することで、現場改善（5S・レイアウト変更）の意思決定を支援する無料Webアプリ。

対象ユーザー：中小製造業の生産技術担当・現場管理者・品質改善担当・物流倉庫の庫内管理者。図面ソフト（AutoCAD等）を使えない非専門家でも直感的に操作できることを重視する。

---

## 2. 主要機能

- **グリッドキャンバス式レイアウト作成**
10cm単位のグリッド上に、設備パーツ（機械・棚・作業台・出入口・通路・トイレ・事務所など40種）をドラッグ＆ドロップで配置・回転・リサイズ。設備には名称・担当者・備考を付記できる。

- **動線（矢印ルート）登録と距離自動計算**
作業工程の流れを矢印で結ぶだけで、各動線の移動距離（グリッドスケール換算）を自動算出。動線が多い通路を太さ・色で強調し、クロス（交差）箇所を赤くハイライト。動線合計距離をスコアとして表示し、改善前後の比較が可能。

- **Before / After 比較モード**
現行レイアウトを「現状版」として保存し、「改善案」を別スナップショットで作成。2画面横並びで差分を比較し、動線合計距離の削減率・交差数の変化をサマリーカードで表示。

- **課題ピン機能**
任意の場所に「課題ピン」を立て、種別（危険・狭い・動線交差・5S問題・その他）と内容を入力。ピン一覧表として表示・印刷できる改善提案リストを自動生成する。

- **A4印刷・PNG出力**
レイアウト図を凡例・動線サマリー付きでA4横向きにレンダリングし、ブラウザ印刷またはPNG保存。会議資料や現場掲示に即使用できる。

- **フロアマップの保存・読込（PHP + MySQL）**
作成したマップをサーバーに保存し、発行されたURLで再編集・閲覧・共有が可能。複数フロアを1施設として束ねて管理できる。

---

## 3. 画面構成

### 3-1. トップページ（/）
- ヒーロー：「工場レイアウトを、ブラウザで設計しよう」
- 「新規マップを作成」ボタン → フロア設定モーダル（施設名・フロア名・実寸幅m×奥行きm・グリッドサイズ選択）
- 「保存済みマップを開く」→ URL入力またはマップID検索
- 使い方3ステップ紹介（作る→動線を引く→印刷する）

### 3-2. エディタ画面（/editor?map_id=xxx）
- **左パネル（パーツパレット）**
カテゴリタブ（設備／棚・ラック／搬送設備／エリア区画／記号）ごとにSVGアイコンを一覧表示。クリックで選択→キャンバスにドロップ配置。
- **中央：グリッドキャンバス（Canvas + SVGオーバーレイ）**
配置済みパーツをドラッグ移動・右クリックで回転・プロパティ編集。動線モードに切り替えると始点→終点を結ぶ矢印を描画。ズームイン/アウト・スクロール対応。
- **右パネル（プロパティ／動線リスト）**
選択パーツの名称・サイズ・担当者入力フォーム。動線一覧（工程名・距離・交差有無）。課題ピン一覧。動線合計距離スコア表示。
- **ツールバー（上部）**
選択ツール／動線ツール／課題ピンツール／消しゴム。保存・スナップショット追加・比較モード切替・PNG出力・印刷。グリッド表示ON/OFF・スケール表示。

### 3-3. 比較モード（/editor?map_id=xxx&compare=yyy）
- 左：現状スナップショット、右：改善案スナップショットを横並び表示
- 上部に改善効果サマリーカード（動線距離削減率・交差数削減数・課題ピン数）

### 3-4. 印刷プレビュー（/print?map_id=xxx&snap=yyy）
- A4横でフロア図・凡例・動線リスト・課題ピン一覧を1枚にレンダリング

---

## 4. データ構造（MySQL）

```sql
maps
id INT PK AUTO_INCREMENT
uuid VARCHAR(36) UNIQUE -- 共有URL用
facility_name VARCHAR(100)
floor_name VARCHAR(100)
width_m DECIMAL(6,2) -- 実寸幅(m)
depth_m DECIMAL(6,2) -- 実寸奥行(m)
grid_cm INT -- グリッド単位(cm) 例:50
created_at DATETIME
updated_at DATETIME

snapshots
id INT PK AUTO_INCREMENT
map_id INT FK → maps.id
label VARCHAR(100) -- "現状" "改善案A" 等
canvas_json LONGTEXT -- パーツ・動線・ピンの全データをJSON保存
total_distance_m DECIMAL(8,2) -- 動線合計距離(自動集計)
cross_count INT -- 動線交差数
created_at DATETIME

parts_master
id INT PK AUTO_INCREMENT
category VARCHAR(50) -- 設備/棚・ラック/搬送設備/エリア区画/記号
name VARCHAR(100)
svg_key VARCHAR(100) -- 内蔵SVGの識別子
default_w INT -- デフォルト幅(グリッド数)
default_h INT -- デフォルト高さ(グリッド数)
```

canvas_json の構造（例）:
```json
{
"parts": [
{"id":"p1","part_key":"machine_lathe","x":5,"y":3,"w":4,"h":2,"rotate":0,"label":"旋盤#1","note":"担当:田中"}
],
"routes": [
{"id":"r1","label":"加工→組立","points":[{"x":9,"y":4},{"x":15,"y":4},{"x":15,"y":8}],"color":"#2563eb"}
],
"pins": [
{"id":"pin1","x":12,"y":5,"type":"cross","note":"フォークリフトと歩行者が交差する"}
]
}
```

---

## 5. デザインの方向性

- **カラー**：ライトグレーの工業系トーン（背景 #F4F6F8、キャンバス白 #FFFFFF、アクセント #2563EB 青）。動線は青、交差危険箇所は赤 #EF4444、課題ピンはオレンジ #F59E0B。
- **フォント**：システムフォント（Noto Sans JP）でシンプル清潔感。
- **キャンバス内パーツ**：モノクロ線画のSVGアイコン（機械・棚・フォークリフト・人・ドアなど）を内蔵。
- **UIトーン**：製造業の現場でも使いやすい大きめのボタン・タップ操作に対応（スマホ縦向きはパレット折りたたみ表示）。
- **規模感**：エディタ1画面 + 印刷プレビュー1画面の2画面構成。DBは maps / snapshots / parts_master の3テーブルで1回の実装で完成する現実的なスコープ。