マンガニュアル - 4コマ漫画で作る業務マニュアルメーカー

文字だけの退屈な業務マニュアルを、親しみやすい4コマ漫画形式に変換して作成・共有できる業務支援アプリ。ターゲットは飲食店・小売店・工場・オフィスの新人教育担当者やマネージャーで、新人の理解促進と定着率向上を狙う。

主要機能:
1. 手順入力フォーム(1コマ=1手順)でセリフとト書きを入力するだけでコマを自動生成
2. 先輩・後輩・上司・お客様の4キャラクター×複数表情、オフィス/工場/店舗/倉庫など6背景シーンから選んで組み合わせ
3. 4コマ/8コマ/自由長のレイアウトを自動配置し、ドラッグで並び替え可能
4. フルスクリーンのプレゼンモードでコマが自動送りされ、明るい/落ち着いた等トーン別のブラウザ内自動生成BGMが同時再生される演出体験
5. PDF/PNG一括書き出しと公開共有URL発行(閲覧専用+簡単なコメント)
6. カテゴリ別テンプレート10種(新人研修・接客・安全衛生・工程手順等)と作成済みマニュアルの一覧管理

画面構成:
- トップページ: テンプレート一覧、新規作成ボタン、人気マニュアルの公開ギャラリー
- エディタ画面: 左に手順リスト入力欄、右にコマプレビュー、上部にキャラクター/背景/吹き出しの選択パレット
- プレゼンモード: フルスクリーンで自動コマ送り、BGM再生・停止コントロール、手動送り切替
- 共有ページ: 閲覧者向けの縦スクロール漫画表示、印刷ボタン、簡易コメント欄

データ構造:
- manuals(id, title, category, description, share_token, bgm_type, created_at, updated_at)
- panels(id, manual_id, order_no, character_id, expression, background_id, dialogue_text, caption_text, layout_type)
- templates(id, name, category, panel_json)
- comments(id, manual_id, body, created_at)

デザインはパステルカラーを基調にした柔らかいフラット漫画/アニメ風イラスト、白背景に軽い影のコマ枠、丸みを帯びたボタンUIで統一。スマホでは縦スクロール、PCでは見開き風レイアウトに対応するレスポンシブ構成とする。

## ビジュアル品質要件
- 生成済み素材を仕様内の用途・表示場所で実際に使用し、未使用素材を残さない
- 画風・配色・キャラクター比率を全画面で統一し、文字はHTML/CSSで重ねる
- PC・スマホで画像の欠け、引き伸ばし、文字との重なりがないことを開発完了前に確認する