WorkFlow Visualizer - 業務フロー・マニュアル自動図解メーカー

## 1. アプリの目的・ターゲットユーザー

「手順書をWordで書いたがわかりにくい」「業務フローを図にしたいがVisioやExcelは面倒」という中小企業の業務担当者・総務・パート社員教育担当者・フリーランスを対象に、テキスト入力だけでフローチャート／手順マニュアルを自動生成・印刷できるWebアプリ。外部API不要・登録不要で即使用可能。

---

## 2. 主要機能

- **ステップ入力→フロー自動生成**: 手順を1行1ステップで箇条書き入力すると、上から下に流れるフローチャート（矩形・菱形・矢印）をリアルタイムに描画。「IF:〜の場合」「END」などのキーワードで分岐・終端を自動判定
- **4種のテンプレート**: 業務手順書／クレーム対応フロー／新人研修チェックリスト／承認ワークフローの4種から選択してひな型を読み込み、カスタマイズ開始
- **図のカスタマイズ**: ステップ別に色・アイコン（担当者/PC/書類/電話など8種）・担当部署ラベルを設定。横レーン（スイムレーン）表示ON/OFFで誰がどの作業をするか視覚化
- **PDF・PNG出力 & 印刷**: Canvas描画内容をブラウザ標準のprint CSS + html2canvas（ローカル）でA4縦横対応PDF/PNGとして出力
- **LocalStorageへの保存・読み込み**: 最大10件のフロー図をブラウザ内に保存。タイトル・更新日時一覧から再編集可能
- **共有URL生成**: 図データをBase64でURLエンコードしてクエリパラメータに格納。そのURLを開くだけで同じ図を再現できる（サーバーDB不使用）

---

## 3. 画面構成

### ① ホーム画面
- ヒーローエリア：「テキストを貼るだけで業務フローが完成」のキャッチと「今すぐ作る」ボタン
- テンプレートカード4枚（アイコン＋タイトル＋説明）をグリッド表示
- 保存済みフロー一覧（LocalStorage）をカード表示、クリックで編集へ

### ② エディタ画面（メイン）
- **左ペイン（入力エリア）**
- タイトル入力フィールド
- テキストエリア（1行1ステップ）、「IF:」「ELSE:」「ENDIF」「END」の書き方ガイドをツールチップ表示
- ステップ一覧（ドラッグ&ドロップで並び替え）
- 担当部署ラベル・アイコン・色の設定パネル（選択中ステップに適用）
- スイムレーン表示トグル
- **右ペイン（プレビュー）**
- SVG/Canvasでリアルタイムフローチャート描画
- ズームイン/アウトボタン
- **ヘッダーツールバー**
- 保存・PDF出力・PNG出力・共有URLコピー・テンプレート選択ドロップダウン

### ③ 共有プレビュー画面
- URLパラメータから図データを復元してプレビュー表示のみ（編集ボタンを押すとエディタに遷移）

---

## 4. データ構造

DBは使用しない。全データはLocalStorageとURLパラメータで完結。

```
LocalStorage key: "workflowvisualizer_projects"
値 (JSON配列):
[
{
"id": "uuid-xxxx",
"title": "新人受付業務フロー",
"updatedAt": "2025-06-01T10:00:00Z",
"steps": [
{
"id": 1,
"type": "process" | "decision" | "end" | "start",
"text": "来客を出迎える",
"department": "受付",
"icon": "person" | "pc" | "doc" | "phone" | "mail" | "check" | "warning" | "gear",
"color": "#4A90D9",
"branch": { "yes": nextId, "no": nextId } // decisionのみ
}
],
"swimlane": true,
"orientation": "vertical"
}
]
```

共有URL例: `?data=BASE64ENCODED_JSON`（stepsとtitleのみ格納、4KB以内に収まるよう最大30ステップ制限）

---

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

- **カラー**: ビジネスカジュアルな清潔感。メインカラー＝コーポレートブルー (#2563EB)、アクセント＝アンバー (#F59E0B)、背景＝ライトグレー (#F8FAFC)
- **フォント**: システムフォント (sans-serif) 統一、日本語対応
- **フロー図の見た目**: 角丸矩形（プロセス）・菱形（分岐）・角丸楕円（開始・終了）・矢印はSVGパスで描画。影・グラデーションは控えめで印刷映えを優先
- **レイアウト**: PC＝左右2ペイン、スマホ＝タブ切り替え（入力タブ・プレビュータブ）
- **全体感**: Notionライクなシンプルさ。派手なアニメーションより「サクサク動く実用性」を最優先