地図・GIS2026年
現場写真の地図連携アルバムシステム
自社開発（デモ）
工事・建設現場で撮影した写真を、撮影位置と結び付けて地図上に表示し、現場ごとのアルバムで整理・共有するWebシステムのデモです。現場担当者が写真の位置関係や撮影者・日時をひと目で確認できるようにし、写真整理の手間を減らすことを狙っています。
実績情報
OVERVIEW- クライアント
- 自社開発（デモ）建設・工事分野の現場写真管理のニーズに向けて、提案用に自社で開発したデモシステム。
- 業界
- 建設・工事 / IT
- 対応時期
- 2026年
- 担当範囲
- 企画/提案/制作
- 対応環境
- Web
課題・解決・効果
CASE STUDY課題
CHALLENGE- 現場写真がフォルダや端末に散在し、どの場所で撮ったものか後から分かりにくかった
- 複数の現場の写真をまとめて整理する仕組みがなく、探すのに時間がかかっていた
- 誰がいつ撮影した写真なのかをチーム内で共有しにくかった
解決
SOLUTION- Next.jsとLeafletで、写真を撮影位置のピンとして地図上に表示する画面を開発
- 現場ごとのアルバムで写真を分類し、検索・グリッド表示・拡大表示できるようにした
- 地図上をタップして位置を指定し、写真・タイトル・メモを登録できるフォームを用意
効果
RESULT- 写真と現場の位置関係を地図上でひと目で確認できるようになった
- 現場名やエリア名で検索して目的の写真へ素早くたどり着けるようになった
- 撮影者・撮影日時・座標を写真ごとに確認でき、共有がしやすくなった
主な機能
FEATURES- 写真とアルバムを地図上にマーカー表示するマップ画面
- 写真サムネイルのマーカーからプレビューを表示
- 地図をタップして位置を指定する写真の新規登録
- 現場数・写真数・メンバー数のサマリーと検索付きアルバム一覧
- アルバム内写真のグリッド表示とライトボックス拡大
- 撮影者・撮影日時・GPS座標の表示
技術スタック
TECHNOLOGY- 対応環境
- Web
- 開発言語
- TypeScript
- フロントエンド
- Next.js 16
- React 19
- Tailwind CSS 4
- インフラ・実行環境
- Cloudflare Workers (OpenNext)
- 主なライブラリ
- Leaflet
- React Leaflet
技術的なポイント
ENGINEERINGシステム構成Next.js（App Router）で構築したフロントエンドのみのデモで、データはモックを使用。OpenNext経由でCloudflare Workers上に配信する構成。
- 1Leafletのカスタムアイコンで写真サムネイルを地図マーカー化し、生成済みアイコンをキャッシュして描画負荷を抑えた
- 2Next.jsのApp Routerでマップ・一覧・詳細・操作説明の各画面を構成し、画面幅に応じて2〜4列に可変するグリッドを実装
- 3OpenNextを使ってNext.jsアプリをCloudflare Workersへデプロイできる構成にした
同様のシステム開発をご検討の方へ
要件が固まっていない段階でも構いません。課題やご予算に合わせて最適な進め方をご提案します。
お問い合わせ・ご相談関連する実績
RELATED WORKS
地図・GIS2026年
インフラ点検・防災のGIS管理システム
自社開発（デモ）
道路・河川などのインフラ管理者や防災担当者を想定し、点検ポイント・パトロールルート・災害報告を地図上で登録・確認できるGIS管理システムのデモ。地図と一覧を連動させ、現場の状況をひと目で把握できるようにしています。
- TypeScript
- Next.js
- React
- Cloudflare
- Leaflet
地図・GIS2026年
点検・防災情報を統合するGIS管理パッケージ
自社パッケージ
GISで作成した点検ポイント・パトロールルート・災害エリアなどのデータをWeb地図で閲覧・共有し、現場からの速報登録も行える地理情報管理パッケージです。正式データはGISで整備し、Webは閲覧と簡易登録を担う役割分担を想定しています。
- TypeScript
- Next.js
- React
- Cloudflare
- Leaflet
地図・GIS2025〜2026年
鉄道路線図エディタと点検値の可視化ツール
鉄道系建設コンサルタント
鉄道の軌道データ（GeoJSON）から路線図を自動生成してブラウザ上で編集し、点検結果の値を区間ごとに重ねて可視化するツール。結果はExcelやQGIS用データとして出力できる。
- TypeScript
- Next.js
- React