AI に施工写真台帳を作らせてみた：写真管理のために作ったコンポーネントが、工事写真の台帳にほぼそのまま効いた（やってみた #175）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青を一度も見たことのない AI に、実際の画面で組ませていく連載。建設の2枚目です。お題は⁠現場監督が使う施工写真台帳（工事写真の記録・管理）画面⁠。撮影日・工種・撮影場所でひもづけた写真の一覧、絞り込み、拡大表示、検査の是正前後、報告書用の選択をまとめた画面です。

結果：4/5。写真管理のコンポーネント一式が、工事写真の台帳にそのまま効いた

予備知識ゼロの AI に、公開されている npm パッケージと gunjo.jp の docs だけを渡して組ませました。tsc は緑、モバイルとデスクトップの両対応です。

見どころは、⁠写真管理（デジタルアセット管理）のために群青へ加えたコンポーネントが、建設の工事写真台帳にほぼそのまま効いた⁠ことです。用途としては素材ライブラリの管理を想定していたものが、業種の違う施工写真の台帳で主役として機能しました。

• ⁠AssetGrid（写真グリッド）⁠：サムネイルを並べて複数選択でき、各写真の下に工種や工程のバッジを差し込む口（renderMeta）もあり、台帳のグリッドとして完成度高く嵌まりました。
• ⁠AssetInspectorPanel（詳細パネル）⁠：任意の項目・コメント・分類タグを受けられるので、黒板情報（工事名・工種・測点・撮影日）をデスクトップの横パネルにそのまま出せました。
• ⁠MediaPickerDialog（複数選択ダイアログ）⁠：「選んだ写真で台帳を作る」という報告書向けの導線にそのまま一致しました。
• ⁠FileUploader（アップロード）⁠：受け付ける種類・枚数・サイズ・進捗まで揃っていて、写真の取り込みに完全一致しました。

写真グリッド・絞り込み・アップロード・報告書選択は、既存のコンポーネントだけで組み切れています。

足りなかったもの：拡大表示の「黒板情報」と、是正の「前後比較」

埋まらなかったのは2か所で、どちらも中身がはっきりしています。

1. ⁠拡大表示に、写真の黒板情報を出せない。⁠ 1枚を拡大するライトボックス（MediaLightbox）は、拡大・前後移動・縦長対応まで揃っていて完成度は高いのですが、⁠横に出せる情報がファイルの属性（寸法・種類・サイズ・作成日・評価）に固定⁠されています。工事写真で見たいのは工種・測点・撮影場所・コメントといった業務の情報なので、その口がありません。今回は拡大表示だけ手で組みました。ライトボックス本体は良いので、詳細に業務の情報を渡せるようになれば、この穴は閉じます。
2. ⁠是正の前後を対で見せるコンポーネントが無い。⁠ 検査の指摘に対して、是正前と是正後の写真を並べて見せたかったのですが、そのためのコンポーネントはありません。近いものはあっても、同じ対象の前後を比べる用途ではありませんでした。ここも手で組みました。

手で組んだのはおよそ140行で、画面全体（およそ900行）から見れば一部です。大半は既存のコンポーネントの組み合わせで足りました。足りないコンポーネントは、3つの別々の画面で独立に必要になったら正式に作る、というルールで運用しています。今回の2点は、まだ1回目です。

名前と入口で迷ったところ

• ⁠Gallery という名前が紛らわしい。⁠ 名前だけ見ると写真の一覧（グリッド）に見えますが、中身は「大きな1枚とサムネイルの帯」の単体ビューアでした。台帳のグリッドは AssetGrid です。最初に Gallery をつかみかけて遠回りしました。
• ⁠「用途から探す」入口に、写真・画像・メディア管理の項目が無い。⁠ 台帳の主役だった写真管理系のコンポーネントは、用途の索引からは辿れず、型定義を読んで初めて見つかりました。写真の画面を作りたい人が用途から入ると、主役のコンポーネントに届きません。ここは案内を足す余地があります。

まとめ

建設の2枚目も、画面の骨格は別の用途のために作ったコンポーネントでそのまま組めました。写真管理のために用意したコンポーネントが、工事写真の台帳という業種違いの画面で主役として機能しています。埋まらなかったのは、拡大表示に業務情報を出すことと、是正の前後比較という、この画面に固有の2点だけです。共通で使える土台が広く、穴は業種固有のところに集まる、という見え方が今回も出ました。

---

この連載は、作者が AI（Claude）と協働で制作しています。実験・検証の設計、判断、公開前の事実確認は人間が行い、実作業と下書き執筆は AI が担っています。

GunjoUI by UIXHERO