Webシステム2026年
現場写真をAIで解析するWebアプリ
自社開発（デモ）
橋梁などの構造物点検で撮影した写真から、劣化・損傷を判定して危険度を示すことを想定したデモアプリです。現場での撮影・判定用の画面と、判定結果をフォルダ形式で振り返るWeb画面で構成しています。
実績情報
OVERVIEW- クライアント
- 自社開発（デモ）インフラ点検分野向けの提案用に、四葉システムが自社で制作したデモアプリケーション。
- 業界
- 建設・工事 / コンサルティング・調査
- 対応時期
- 2026年
- 担当範囲
- 企画/制作
- 対応環境
- Web / スマートフォン（ブラウザ）
課題・解決・効果
CASE STUDY課題
CHALLENGE- 点検写真から劣化・損傷の程度を判断する作業が、担当者の経験に左右されていた
- 同じ箇所の過去の状態と比べて、劣化の進行を確認するのに手間がかかっていた
- 点検結果を報告書としてまとめる作業が、現場作業後の負担になっていた
解決
SOLUTION- 写真をアップロードすると損傷と危険度を表示する判定画面のデモをNext.jsで制作
- 場所・構造物・箇所でフォルダ分けし、同一箇所の判定結果を時系列で比較できる画面を用意
- 現場用のアプリ画面と事務所用のWeb画面を分け、判定結果をレポート形式で表示
効果
RESULT- AIによる画像判定を点検業務に取り入れた際の流れを、顧客と具体的に共有できた
- 経年変化の比較やレポート化など、判定結果の活用方法を事前に検討できるようになった
- マルチモーダルLLMを用いた製品版の要件整理に役立った
主な機能
FEATURES- 場所・構造物・箇所を指定した写真の登録
- 写真からの損傷検出と危険度判定の表示（デモ）
- 判定結果のレポート表示
- 箇所別フォルダでの判定履歴の閲覧
- 同一箇所の経年変化の比較
- 最新の危険度サマリーと同期状態の表示
技術スタック
TECHNOLOGY- 対応環境
- Web
- スマートフォン（ブラウザ）
- 開発言語
- TypeScript
- フロントエンド
- Next.js 16
- React 19
- Tailwind CSS 4
- インフラ・実行環境
- Cloudflare Workers (OpenNext)
技術的なポイント
ENGINEERINGシステム構成Next.js（App Router）のフロントエンドをOpenNextでCloudflare Workersに配置。画像判定はモックで、製品版ではマルチモーダルLLMによる解析を想定している。
- 1現場向けのアプリ画面（/app）と管理向けのWeb画面（/web）をルートで分け、利用シーンごとに最適化したUIを用意。
- 2判定結果を場所・構造物・箇所の階層で管理するデータモデルとし、同一箇所の時系列比較を可能にしている。
- 3判定部分はモックデータとし、製品版でマルチモーダルLLMの画像解析に差し替えられる構成を想定している。
同様のシステム開発をご検討の方へ
要件が固まっていない段階でも構いません。課題やご予算に合わせて最適な進め方をご提案します。
お問い合わせ・ご相談関連する実績
RELATED WORKS
Webシステム2026年
運送会社向けAI安全運転支援の管理基盤
車載機器メーカー
運送会社の運行管理者が、ドライバーの危険運転や安全運転スコア、ヒヤリハット報告を確認するための管理ダッシュボードと、車載アプリからのデータを受け取るAPIです。会社ごとにデータを分離したマルチテナント構成で、ランキングや月次レポートにより安全運転指導を支援します。
- TypeScript
- Next.js
- React
- Cloudflare
Webシステム2026年
IT案件の発注者と開発会社をつなぐマッチング
IT案件仲介サービスの企画会社
IT案件を依頼したい発注企業と開発会社をつなぐマッチングサービスのWebプロトタイプ。発注者・開発会社・運営者の3つの立場ごとに画面を分け、案件登録から見積比較、打ち合わせ日程調整、モック確認までの流れを再現する。
- TypeScript
- Next.js
- React
- Cloudflare
Webシステム2026年
勤怠・工数・業務管理Webシステム
中堅システム開発会社
受託開発を行うIT企業の社員・管理者向けに、勤怠打刻、作業報告、日報、各種申請、業務ごとの工数・売上集計を一つにまとめたWebシステム。会社単位でデータを分けるマルチテナント構成で、日々の記録から集計までを支えます。
- TypeScript
- C#
- Next.js
- React
- Hono
- +3