製造現場ヒヤリハット報告＆危険予知トレーニング HazardBase

## 1. アプリの目的・ターゲットユーザー
製造現場で発生するヒヤリハット（重大事故に至らなかった危険事象）を手軽にWeb報告・蓄積し、過去事例を活用した危険予知（KY）トレーニングをその場で実施できる安全管理支援アプリ。工場の安全担当者・班長・作業員を主要ターゲットとし、紙の報告書やExcel管理からの脱却を支援する。スマホからも即時報告できる設計で、現場での「気づいたらすぐ入力」を促進する。

---

## 2. 主要機能

- **ヒヤリハット報告フォーム**：発生日時・場所（工程名）・作業種別・危険の種類（転倒/挟まれ/落下/感電/化学物質/その他）・状況テキスト・再発防止策テキストをフォーム入力。画像ファイル添付（JPG/PNG、サーバー保存）に対応。報告者名は任意（匿名可）。
- **報告一覧＆検索ダッシュボード**：登録済みのヒヤリハット事例をカード型で一覧表示。工程・危険種別・期間でフィルタリング、フリーワード検索対応。月別件数の棒グラフ・危険種別の円グラフを上部に表示し、現場の傾向をひと目で把握できる。
- **危険予知（KY）トレーニングモード**：蓄積された報告事例からランダムに「状況説明テキスト」のみを表示し、「この状況に潜む危険は何か？」をユーザーが自由記述で回答。送信後に登録された「再発防止策・想定危険」の模範回答を表示して振り返りを促す。10問連続チャレンジモードも用意。
- **ヒヤリハット件数ランキング（工程別）**：工程ごとの累計報告件数をランキング表示し、危険度が高いエリアを視覚化。安全巡視の優先順位付けに活用できる。
- **CSVエクスポート**：管理者向けに全報告データをCSV形式でダウンロード。安全委員会への報告資料作成に活用。

---

## 3. 画面構成

### トップページ（index.php）
- ヘッダー：アプリロゴ「HazardBase」＋ナビゲーション（報告する／一覧／KYトレーニング）
- サマリーカード3枚：「今月の報告件数」「累計件数」「未対策件数（再発防止策が空欄）」
- 月別棒グラフ（直近6ヶ月、Canvas.jsまたは純JS描画）
- 危険種別ドーナツグラフ
- 最新報告5件のプレビューリスト

### 報告フォームページ（report.php）
- 1ページ完結のフォーム：日時（input datetime-local）、工程名（テキスト or プリセット選択）、作業種別（設備操作/運搬/点検/清掃/その他）、危険種別（チェックボックス）、状況説明（textarea）、再発防止策（textarea）、報告者名（任意）、画像添付（file input）
- 送信ボタン押下でPHPがMySQLに保存、完了メッセージ表示後トップへリダイレクト

### 一覧・検索ページ（list.php）
- フィルターバー：工程名プルダウン、危険種別チェックボックス、期間カレンダー、フリーワード検索
- カード型一覧（日時・工程・危険種別バッジ・状況テキスト冒頭50字）
- 各カードクリックで詳細モーダル表示（全文・添付画像・再発防止策）
- 管理者向けCSVダウンロードボタン（パスワード不要のシンプル実装、またはGETパラメータでdownload=1）

### KYトレーニングページ（training.php）
- 「トレーニング開始」ボタン → 1件ずつランダムにヒヤリハット状況を表示
- 回答入力テキストエリア → 「回答を見る」ボタン → 模範回答（再発防止策）を表示
- 「次の問題へ」ボタンで次へ進む
- 10問終了時に「お疲れ様でした！ XX件回答しました」のサマリー表示
- 登録件数が10件未満の場合は「事例がまだ少ないです。報告を増やしましょう！」のメッセージ表示

---

## 4. データ構造（MySQLテーブル）

```sql
CREATE TABLE hazard_reports (
id INT AUTO_INCREMENT PRIMARY KEY,
reported_at DATETIME NOT NULL,
process_name VARCHAR(100) NOT NULL, -- 工程名
work_type VARCHAR(50) NOT NULL, -- 作業種別
hazard_type VARCHAR(200) NOT NULL, -- 危険種別（カンマ区切り複数）
description TEXT NOT NULL, -- 状況説明
countermeasure TEXT, -- 再発防止策
reporter_name VARCHAR(100), -- 報告者名（任意）
image_path VARCHAR(300), -- 添付画像パス
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
```

---

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

- **カラーパレット**：安全・警戒を連想させる配色。ベース白（#FFFFFF）、アクセントに工場イエロー（#FFC107）、危険種別バッジに赤（#E53935）・オレンジ（#FF7043）・ブルー（#1565C0）を使い分け。
- **フォント**：読みやすいNoto Sans JP（CDN）。数値は太字で視認性を高める。
- **レイアウト**：スマホ優先の縦スクロール1カラム構成。PC時は最大1200px横並び2カラム。報告フォームはタブレット・手袋操作でも押しやすいよう、ボタンや入力欄を大きめ（min-height:48px）に設計。
- **雰囲気**：工場現場のプロ向けツールとして「ゲーミフィケーションなし・無駄な装飾なし」のシンプルで信頼感のあるUIを目指す。KYトレーニングモードのみ、学習意欲を促す配色（ダークネイビー背景＋黄テキスト）でメリハリをつける。
- **実装規模**：PHP4ファイル（index/report/list/training）＋style.css＋1テーブルのMySQLで完結。外部ライブラリ不使用（グラフはCanvas純JS描画）。