はじめに
現場作業の後、疲れた体でPCや紙に向かって日報を書く――。
建設・設備・保守などの現場で働く方々にとって、これは日常的な負担です。
「移動中や片付けの合間に、話すだけで日報が完成したらどうだろう？」
そんな発想から、音声入力とAI要約を組み合わせた「声で終わる爆速日報」のUIデモを作成しました。
🎯 この記事のポイント
- 音声認識（Web Speech API）で現場メモを取得
- ローカルでAI風の自動要約・構造化を実装
- 写真の自動カテゴリ推定（施工前/後、不具合）
- ワンタップの完了スタンプで誤送信を防止
📌 デモURL: こちら
背景：なぜこのアプリが必要なのか
現場の声
- 疲労した状態での文章作成: 肉体労働の後に報告書を書くのは精神的にも負担
- 移動中の隙間時間を活用できない: スマホで音声メモは取れても、後で整形が必要
- 写真整理の手間: 施工前/後、不具合など、どの写真がどれか分からなくなる
解決策
✅ 音声で話すだけ → 自動で日報テンプレートに整形
✅ 写真を選ぶだけ → ファイル名や順序から自動分類
✅ スタンプで完了報告 → 「異常なし」「完了」を1タップ
実装した機能
1. 音声入力 → AI要約
Web Speech APIを使い、ブラウザで音声認識を実装しました。
const startRecording = () => {
const SpeechRecognitionClass =
typeof window !== "undefined"
? (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition
: null;
if (!SpeechRecognitionClass) {
// 未対応環境ではデモ文を挿入
setTranscript(quickPhrases[0]);
setRecordingFeedback("端末の音声認識が利用できないため、デモ文を挿入しました。");
return;
}
const recognition = new SpeechRecognitionClass();
recognition.lang = "ja-JP";
recognition.continuous = false;
recognition.interimResults = false;
recognition.onresult = (event) => {
const transcriptResult = Array.from(event.results)
.map((result) => result[0].transcript)
.join("。");
setTranscript((prev) => ${prev ? ${prev}\n : ""}${transcriptResult}。);
};
recognition.start();
};ポイント:
- Chrome/Safari（webkit）の両方に対応
-
lang: "ja-JP"で日本語認識 - 音声認識が使えない環境ではデモ文を自動挿入し、フォールバック
2. ローカルAI風の構造化処理
取得した音声メモを、以下のように日報テンプレートへ自動整形します。
function buildStructuredReport(params: {
siteName: string;
workDate: string;
note: string;
stamp: string;
attachments: Attachment[];
}) {
const { siteName, workDate, note, stamp, attachments } = params;
// テキストを文に分割
const tasks = note
.split(/[\n。]/)
.map((s) => s.trim())
.filter(Boolean)
.slice(0, 4);
// キーワードで自動判定
const needsMaterial = note.includes("足り") || note.includes("不足");
const safety = note.includes("安全") || note.includes("異常なし");
return {
headline: ${siteName}｜${stamp},
workDate,
tasks: tasks.length ? tasks : ["音声メモ入力待ち"],
attachments,
safety: safety ? "安全確認済み・異常なし" : "安全確認を実施してください",
nextActions: [
needsMaterial ? "不足資材の手配を確認" : "次の現場に引き継ぎ",
attachments.length ? "写真キャプションを確認" : "完了写真を撮影",
],
};
}ポイント:
- 簡単なキーワードマッチで構造化（本番ならLLM API連携）
- 「足り」「不足」→ 資材手配フラグ
- 「安全」「異常なし」→ 安全確認済みフラグ
3. 写真の自動カテゴリ推定
ファイル名から施工前/後、不具合などを推定します。
function guessCategory(name: string) {
const lower = name.toLowerCase();
if (lower.includes("before") || lower.includes("pre")) return "施工前";
if (lower.includes("after") || lower.includes("done")) return "施工後";
if (lower.includes("issue") || lower.includes("ng")) return "不具合";
return "作業記録";
}
const handleFiles = (files: FileList | null) => {
if (!files) return;
const next = Array.from(files)
.slice(0, 4)
.map((file) => ({
id: createId(),
name: file.name,
preview: URL.createObjectURL(file),
category: guessCategory(file.name), // 自動分類
timestamp: new Date().toLocaleTimeString(),
}));
setAttachments((prev) => [...prev, ...next]);
};ポイント:
- ファイル名の「before」「after」「issue」で分類
- 本番では画像解析APIやEXIF情報（GPS/撮影時刻）で精度向上可能
4. ワンタップ完了スタンプ
「完了」「異常なし」「要確認」などをボタン化し、誤送信を防止します。
const stampOptions: StampOption[] = [
{ value: "完了", label: "完了", tone: "bg-emerald-500/10 text-emerald-300 border-emerald-500/30" },
{ value: "異常なし", label: "異常なし", tone: "bg-cyber-accent/10 text-cyber-accent border-cyber-accent/40" },
{ value: "要確認", label: "要確認", tone: "bg-amber-500/10 text-amber-300 border-amber-500/30" },
{ value: "追加手配", label: "追加手配", tone: "bg-blue-500/10 text-blue-300 border-blue-500/30" },
];UIでは選択したスタンプに応じてテーマカラーが変わり、視覚的にもわかりやすくしています。
技術スタック
| 項目 | 技術 |
|---|---|
| フレームワーク | Next.js 14 (App Router) |
| 言語 | TypeScript |
| スタイリング | Tailwind CSS + カスタムサイバーパンクテーマ |
| アニメーション | Framer Motion |
| 音声認識 | Web Speech API |
| アイコン | Lucide React |
UIの工夫
サイバーパンク風デザイン
- グリッドライン背景とネオンアクセントカラー
- グラデーションテキストとホバーエフェクト
- 現場作業者でも見やすい大きめのボタンとコントラスト
/* globals.css の抜粋 */
:root {
--cyber-dark: #0a0a0f;
--cyber-accent: #00ffaa;
--cyber-blue: #00d4ff;
}
.gradient-text {
background: linear-gradient(135deg, var(--cyber-accent), var(--cyber-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}### レスポンシブ対応
- モバイルファースト設計
- スマホ縦画面でも全機能にアクセス可能
- 大きめのタップ領域で片手操作を想定
今後の拡張案
実際のプロダクション環境で使えるようにするには、以下の拡張が必要です。
バックエンド連携
- 認証: Auth0やFirebase Authでユーザー管理
- API: 日報送信エンドポイント、画像アップロード（S3/GCS）
- データベース: PostgreSQL等で現場マスター・日報履歴を管理
AI機能の強化
- LLM API連携: OpenAI API, Claude API等で高度な要約・構造化
- 画像解析: Google Vision API等で施工前/後を自動判定
- 専門用語辞書: 業界特有の用語（配管、電気、土木等）をカスタム学習
オフライン対応
- Service Worker: PWA化してオフライン一時保存
- バックグラウンド同期: 電波復帰時に自動送信
セキュリティ
- 暗号化: 音声データ・写真の通信/保存を暗号化
- 権限管理: RBAC（作業員・職長・管理者）
- 操作ログ: 改ざん防止のための監査ログ
まとめ
「声で終わる爆速日報」は、現場作業者の負担を減らすことを目指したUIデモです。
✅ 音声入力で文章作成の手間を削減
✅ AI風要約で自動的に構造化
✅ 写真の自動分類で整理不要
✅ スタンプで誤送信を防止
**「5分かかっていた日報が30秒で終わる」**という体験を、実際に試していただけるデモとして実装しました。
今後はバックエンド連携やLLM統合を進め、実プロダクトとして展開できればと考えています。
ぜひデモを試してみてください！
👉 デモURL