このデモについて
募集「【フルリモート】AI開発ツール活用の小規模システム開発」への応募資料です。進め方・成果物・スコープ・AI開発ツールの使い方をまとめています。
株式会社マークテック 様／ 御社は電気工事業・製造業向けの経営・人事・DX支援を手がけ、顧客向け業務ツールも開発されていると拝見しました。 本デモは「特定業界に限定しない顧客向け業務ツールの小規模開発」というご意向をふまえ、 御社が電気工事会社の顧客へ提供する場面を想定した試作です。1つの小規模プロジェクトを、 要件整理 → 試作 → テスト → 文書化まで、御社と確認しながら進めるイメージを形にしています。
募集要項との対応
| 募集要項の項目 | このデモで示していること | 本契約での成果物 |
|---|---|---|
| 要望・現状整理、要件・タスクのたたき台 | トップページの「課題」整理、各画面の目的定義、資格マスタの区分・根拠法令の整理 | ヒアリング議事録／要件定義書（機能・非機能・スコープ内外）／WBS を GitHub Issue 化 |
| AI開発ツールでの試作・小規模修正 | この動くデモ一式（HTML/CSS/バニラJS、依存ライブラリなし）を Claude Code で作成 | 機能ごとにブランチを切り、小さな PR で確認しながら実装。修正も PR 単位 |
| テスト、不具合調査、修正 | 期限判定・現場配置判定ロジックの動作確認（基準日を固定して再現可能に） | テスト項目書／主要ロジックの自動テスト／不具合は Issue で再現手順から追跡 |
| 仕様書・変更履歴・操作手順の作成 | 本ページに仕様・前提・データ構造を明記。README にセットアップ手順 | 仕様書／CHANGELOG（Keep a Changelog 形式）／画面つき操作マニュアル |
| GitHub（Issue/PR）での管理 | 下記「GitHub 運用イメージ」に、Issue・PR・ブランチ戦略の運用案を掲載 | Issue／PR テンプレート、かんばんボード、マイルストーンで進行管理 |
| 週1回程度の進捗共有（ココナラ上） | 下記「週次進捗共有サンプル」に報告フォーマットを掲載 | 毎週、実績・課題・次週予定・確認事項をココナラ上で共有 |
| 個人情報・認証・決済等の高リスク領域 | 含めていません。氏名・現場名等はすべて架空。ログイン機能なし | 単独では扱わず、御社確認のうえ対応範囲・体制を相談してから着手 |
| 本番公開は当社確認後 | — | ステージング環境で確認 → 御社レビュー → 承認後に本番反映、を徹底 |
スコープ（このデモの範囲）
含むもの
- ✓ 従業員台帳（所属・役職・保有資格）と検索・絞り込み
- ✓ 保有資格の追加・編集・削除（この端末に保持）
- ✓ 資格マスタ（区分・更新要否・有効期間・根拠法令）
- ✓ 期限アラート（期限切れ／30日以内／90日以内）＋対応状況の管理
- ✓ 現場配置チェック（工期終了日まで有効かで判定）
- ✓ 資格保有マトリクスと CSV エクスポート
含まないもの（本契約で相談）
- — ログイン・権限管理などの認証
- — サーバー側DB・複数端末でのデータ共有（今回は localStorage）
- — メール／LINE 等での自動通知（設計のみ想定）
- — 免許証画像などの個人情報の保管
- — 実データの移行、既存システム連携
- — 帳票（安全書類）の自動生成
進め方（約1か月・25〜30時間の想定）
| フェーズ | やること | 成果物 | 目安 |
|---|---|---|---|
| 1. 要件整理 | 共有いただくヒアリング内容・既存資料の読み込み、現状整理、要件・タスクのたたき台作成 | 議事録・要件定義書・WBS（Issue化） | 4〜5h |
| 2. 設計 | 画面設計、データ項目の定義、技術選定（静的ホスティング前提の軽量構成） | 画面設計メモ・データ定義・ADR | 3〜4h |
| 3. 試作・実装 | Claude Code で機能単位に試作。小さな PR で御社確認を挟みながら調整 | 動くアプリ・機能ごとの PR | 10〜13h |
| 4. テスト | テスト項目の作成、判定ロジックの確認、不具合調査・修正 | テスト項目書・自動テスト・修正 PR | 4〜5h |
| 5. 文書化 | 仕様書・変更履歴・操作手順の整備、引き継ぎ | 仕様書・CHANGELOG・操作マニュアル | 3〜4h |
AI開発ツール（Claude Code）の使い方
使い分け
- 設計・雛形：データ構造や画面の骨組みをまず生成し、こちらで方針に合わせて整える
- 反復実装：「一覧 → 詳細 → 追加フォーム」のような似た画面を素早く量産
- リファクタ：共通処理（日付計算・ステータス判定）の切り出しを提案させ、レビューして採用
- テスト補助：境界値（期限ちょうど、うるう年、未入力）のテスト観点を洗い出させる
- ドキュメント下書き：操作手順・変更履歴のたたき台を生成し、事実確認して確定
生成コードのレビュー観点
- ☑ 仕様どおりか（特に日付・期限の境界。「30日以内」に当日・期限切れを含むか）
- ☑ 入力の検証（空欄・不正な日付・想定外の値）と表示崩れ
- ☑ 不要な依存やライブラリを足していないか（静的ホスティング前提を維持）
- ☑ 文言・単位・端数処理が実務に合っているか
- ☑ 個人情報・外部送信を勝手に加えていないか
- ☑ 例外時に黙って落ちないか（localStorage 不可などの環境差）
AI が間違えやすかった例（このデモで実際に直した箇所）
- ・期限判定で「残り0日」を有効側に入れていた → 当日を「30日以内（要対応）」に含める仕様へ修正し、判定関数にコメントを追加。
- ・現場配置チェックが「今この瞬間に有効か」で判定していた → 「工期終了日まで有効か」に変更し、工期中に失効する人を別区分（黄色）で表示。
- ・CSV 出力が Excel で文字化け → UTF-8 BOM を付与。カンマ・改行を含むセルのクォート処理も追加。
GitHub 運用イメージ
Issue / PR の例
#12現場配置チェック：工期中に失効するメンバーを警告表示にする
#13feat: 失効予定を verdict=warn として分離（closes #12）
#18不具合：CSV が Excel で文字化けする
#19fix: CSV に UTF-8 BOM 付与＋セルのクォート処理（closes #18）
#22資格マスタに「石綿作業主任者」を追加したい（要望）
ブランチ戦略・進行管理
- main：常に動く状態。ステージングへ自動反映
- feat/*・fix/*：作業ブランチ。1 Issue = 1 ブランチ = 1 PR を基本
- PR には「目的／変更点／確認方法／スクリーンショット」を記載
- かんばん：Backlog → 今週 → レビュー待ち → 完了
- マイルストーン：要件定義／試作／テスト・文書化 の3つ
- 本番反映は御社の承認コメントを得てから
週次進捗共有サンプル
第1週（要件整理・設計）予定どおり
- 実績：ヒアリング内容を整理し要件定義書 v0.1／画面設計メモを作成。Issue を9件登録
- 課題：資格の「更新周期」は機関により幅がある → マスタで調整できる方針に
- 次週：ダッシュボード・従業員台帳・資格マスタの試作
- 確認いただきたい点：対象とする資格の初期リスト（14種）でよいか
第2週（試作）一部持ち越し
- 実績：ダッシュボード／従業員一覧・詳細／資格マスタを実装（PR #4〜#9）
- 課題：現場配置の判定基準（現時点 or 工期末）で仕様確認が必要 → Issue #12
- 次週：期限アラート、現場配置チェック、資格保有マトリクス
第3週（試作完了・テスト着手）予定どおり
- 実績：残り3画面を実装。判定ロジックの不具合を2件修正（#13, #19）
- 次週：テスト項目書に沿った通し確認、操作マニュアル・CHANGELOG 整備
技術・前提
- 構成
- HTML / CSS / バニラ JavaScript（フレームワーク・ビルド不要）
- データ
- 初期デモデータ＋ブラウザの localStorage（追加・編集はこの端末に保持）
- グラフ
- 外部ライブラリなしの自作 SVG
- 画像
- すべて自作の SVG イラスト／アイコン（電気工事テーマ）
- 基準日
- 2026/08/29 に固定（期限判定を再現可能にするため）
- ホスティング
- フォルダをそのまま Cloudflare Pages 等にアップロードで動作
- 対応ブラウザ
- 最新の Chrome / Edge / Safari / Firefox
本デモに登場する氏名・社員番号・現場名・元請名はすべて架空のサンプルです。 個人情報・認証・決済等の高リスク領域は含んでいません。実運用時の資格・更新周期・法令の扱いは、御社および実施機関の基準に合わせて調整します。