自治体向け台帳管理システム フロント見積
プロジェクト概要
- プロジェクト名: 自治体向け台帳管理システム （フロントエンド）
- 技術スタック: React 19, TypeScript, TanStack Router, Jotai, GraphQL, Tailwind CSS v4
見積もり金額
開発費用
- 開発作業: 1640時間 × 5,000円/時間 = 8,200,000円
- プロジェクト管理（10%）: 164時間 × 5,000円/時間 = 820,000円
- 小計: 1804時間 = 9,020,000円
その他費用
- ライセンス費用: 0円（OSSのみ使用）
- サーバー環境構築支援: 500,000円（オンプレミス環境構築サポート）
- 導入研修（2日間）: 400,000円（管理者・開発者向け）
- 小計: 900,000円
合計金額
- 開発費用: 9,020,000円
- その他費用: 900,000円
- 税抜合計: 9,920,000円
- 消費税（10%）: 992,000円
- 税込合計: 10,912,000円
作業内訳
1. 環境構築・初期設定（80時間）
1.1 リポジトリ・ビルドツール設定（32時間）
- Viteプロジェクトの初期設定とセキュリティヘッダー設定（16時間）
- TypeScript strict modeの設定（8時間）
- コードスプリッティング設定（react、tanstack、ui、form等に分割）（4時間）
- Bunパッケージマネージャーの導入と設定（4時間）
1.2 開発環境・ツール設定（32時間）
- Biomeによるリンティング・フォーマット設定（12時間）
- pre-commitフック設定（date check、lint等）（8時間）
- miseツールによる開発環境管理（.tool-versions → mise.toml）（8時間）
- エディタ設定（.vscode）（4時間）
1.3 CI/CD設定（16時間）
- GitHub Actions設定（5ワークフロー）
- checks.yml: PR時の品質チェック（4時間）
- update-schema.yml: GraphQLスキーマ自動更新（4時間）
- auto-merge.yml: 自動マージ設定（2時間）
- assign-author-to-pr.yml: PR作成者自動アサイン（2時間）
- labeler.yml: ラベル自動付与（4時間）
2. デザインシステム・UI基盤構築（160時間）
2.1 Tailwind CSS v4導入・設定（48時間）
- Viteプラグインとしての統合設定（12時間）
- デザイントークンシステムの構築（styles/ディレクトリ）（16時間）
- CSS変数による動的スタイル管理（12時間）
- レスポンシブデザイン設定（8時間）
2.2 基本UIコンポーネント開発（80時間）
- ui/ディレクトリ: 約30種類の基本コンポーネント
- Button、Input、Select、Dialog、Form関連（32時間）
- Icon、Badge、Alert、Toast（24時間）
- Card、Separator、Skeleton（16時間）
- Base UI統合とカスタマイズ（8時間）
2.3 複合コンポーネント開発（32時間）
- composite/ディレクトリ: 約20種類の複合コンポーネント
- Table（ソート・フィルター機能付き）（12時間）
- Chart（Recharts統合）（8時間）
- Calendar、Command、Pagination（8時間）
- EmptyState、DetailPlaceholder（4時間）
3. アプリケーション基盤構築（120時間）
3.1 ルーティングシステム（40時間）
- TanStack Routerによるファイルベースルーティング（73ファイル）（16時間）
- 認証ルート構造の設計（_authenticated配下）（8時間）
- ProtectedRouteによるアクセス制御（8時間）
- ルートベースのコード分割と遅延読み込み（8時間）
3.2 状態管理・データフェッチング（48時間）
- Jotaiによるグローバル状態管理（auth、theme、viewer）（16時間）
- TanStack Queryの設定とキャッシュ戦略（16時間）
- GraphQLクライアント設定（graphql-request）（8時間）
- クエリキーの定数管理システム（8時間）
3.3 GraphQL統合（32時間）
- GraphQL Code Generatorの設定（12時間）
- 型定義の自動生成システム（8時間）
- カスタムフック生成設定（8時間）
- スキーマ自動更新ワークフロー（4時間）
4. 認証・権限管理システム（160時間）
4.1 認証基盤（48時間）
- 認証フローの実装（auth feature）（20時間）
- セッション管理（12時間）
- 認証状態のグローバル管理（Jotai）（8時間）
- ProtectedRouteコンポーネント（8時間）
4.2 権限管理システム（80時間）
- 権限ベースのアクセス制御システム（32時間）
- 権限チェックフック群（use{Feature}Auth）（24時間）
- 全自治体管理者モード対応（16時間）
- ルートレベルでの権限チェック実装（8時間）
4.3 権限付きUIコンポーネント（32時間）
- CreateButton: 作成権限チェック付きボタン（8時間）
- EditButton: 編集権限チェック付きボタン（8時間）
- DeleteButton: 削除権限チェック付きボタン（8時間）
- CSVExportButton: エクスポート権限チェック付きボタン（8時間）
5. 機能モジュール開発（640時間）
5.1 職員管理機能（80時間）
- 43ファイルの実装
- 一覧・詳細・編集・新規作成画面（40時間）
- ロール情報表示セクション（20時間）
- 高度な検索・フィルター機能（20時間）
5.2 自治体管理機能（80時間）
- 40ファイルの実装
- 階層的な自治体選択UI（24時間）
- 全自治体管理者向け特別UI（32時間）
- CSV出力機能（24時間）
5.3 ログ管理機能（80時間）
- 38ファイルの実装
- 操作ログ、出力ログ、印刷ログ、画面ログ（32時間）
- 時系列表示とフィルタリング（24時間）
- ログ詳細表示機能（24時間）
5.4 ロール・権限管理機能（80時間）
- 38ファイルの実装
- ロール編集時の権限一括管理（32時間）
- 権限の読みやすい表示機能（24時間）
- ダイアログ形式の新規作成（24時間）
5.5 会場管理機能（80時間）
- 37ファイルの実装
- 地図連携機能の準備（32時間）
- 会場情報の詳細管理（24時間）
- 予約状況表示機能（24時間）
5.6 医療機関管理機能（80時間）
- 36ファイルの実装
- 左右分割レイアウト（20時間）
- 高度な検索機能（30時間）
- CSV出力機能（30時間）
5.7 住民管理機能（80時間）
- 36ファイルの実装
- 住民基本台帳との連携（32時間）
- ページネーション機能（24時間）
- 折りたたみ可能なフィルター（24時間）
5.8 部署管理機能（80時間）
- 35ファイルの実装
- 階層的な部署構造表示（32時間）
- 部署間の関係管理（24時間）
- 職員割り当て機能（24時間）
6. 共通機能・ユーティリティ（120時間）
6.1 共有コンポーネント開発（48時間）
- GovernmentSelect: 自治体選択コンポーネント（16時間）
- DivisionSelect: 部署選択コンポーネント（12時間）
- DateRangePicker: 期間選択コンポーネント（12時間）
- その他ビジネスロジック含む共有コンポーネント（8時間）
6.2 エラー処理・ユーティリティ（40時間）
- グローバルエラーハンドリング（12時間）
- エラー詳細表示ダイアログ（8時間）
- トースト通知システム（12時間）
- 日付処理ユーティリティ（8時間）
6.3 レイアウト・ナビゲーション（32時間）
- アプリケーションヘッダー（8時間）
- サイドバーナビゲーション（12時間）
- パンくずリスト（6時間）
- レスポンシブ対応（6時間）
7. Storybook・ドキュメント（80時間）
7.1 Storybook設定・開発（64時間）
- 49個のストーリーファイル作成（40時間）
- テーマ切り替え機能（8時間）
- インタラクションテスト設定（8時間）
- コンポーネントカタログ作成（8時間）
7.2 ドキュメント整備（16時間）
- CLAUDE.md（開発ガイドライン）（4時間）
- README.md（4時間）
- コンポーネント使用ガイド（4時間）
- アーキテクチャドキュメント（4時間）
8. 統合テスト・品質保証（120時間）
8.1 Playwright統合テスト（80時間）
- 権限チェックシステムのE2Eテスト（32時間）
- 全自治体管理者権限テスト（24時間）
- 一般ユーザー権限テスト（16時間）
- スクリーンショット機能付きテスト（8時間）
8.2 パフォーマンス最適化（40時間）
- バンドルサイズ最適化（16時間）
- ルートベースコード分割（12時間）
- 画像最適化（6時間）
- レンダリングパフォーマンス改善（6時間）
9. リファクタリング・保守作業（160時間）
9.1 コンポーネント構造整理（80時間）
- ui/composite/shared構造への再編成（32時間）
- 未使用コンポーネントの削除（16時間）
- 命名規則の統一（16時間）
- インポート文の整理（16時間）
9.2 コード品質改善（80時間）
- TypeScript型定義の強化（32時間）
- クエリキー管理の統一（16時間）
- エラー処理の標準化（16時間）
- コードの重複除去（16時間）
作業時間サマリー
- 1. 環境構築・初期設定: 80時間
- 2. デザインシステム・UI基盤構築: 160時間
- 3. アプリケーション基盤構築: 120時間
- 4. 認証・権限管理システム: 160時間
- 5. 機能モジュール開発: 640時間
- 6. 共通機能・ユーティリティ: 120時間
- 7. Storybook・ドキュメント: 80時間
- 8. 統合テスト・品質保証: 120時間
- 9. リファクタリング・保守作業: 160時間
- 合計: 1640時間
納期
契約締結から8ヶ月（約1640時間の開発作業）
保証・サポート
- 納品後3ヶ月間のバグ修正保証
- 技術的な問い合わせ対応（メール・チャット）
- 追加機能開発は別途見積もり
特記事項
- 最新技術スタックの採用: React 19、Tailwind CSS v4など最新バージョンを使用
- 型安全性の重視: TypeScript strict modeとGraphQL Code Generatorによる完全な型安全性
- 権限管理の徹底: すべての機能に権限ベースのアクセス制御を実装
- UI/UXの統一性: 全機能で統一されたデザインパターンとインタラクション
- 保守性の考慮: コンポーネントの再利用性とテスタビリティを重視した設計
お支払い条件
2025年度（2025年7月〜2026年3月）: 3,000,000円
実施予定作業（約600時間分）：
-
- 環境構築・初期設定（80時間）
-
- デザインシステム・UI基盤構築（160時間）
-
- アプリケーション基盤構築（120時間）
-
- 認証・権限管理システム（160時間）
-
- 共通機能・ユーティリティ（80時間）※一部
小計: 600時間 × 5,000円 = 3,000,000円（税込3,300,000円）
2026年度（2026年4月）: 7,612,000円
実施予定作業（約1,204時間分）：
- 5. 機能モジュール開発（640時間）
-
- 共通機能・ユーティリティ（40時間）※残り
-
- Storybook・ドキュメント（80時間）
-
- 統合テスト・品質保証（120時間）
-
- リファクタリング・保守作業（160時間）
- プロジェクト管理（164時間）
小計: 1,204時間 × 5,000円 = 6,020,000円（税込6,622,000円） その他費用: 900,000円（税込990,000円）
支払いスケジュール
2025年度（合計: 3,000,000円 / 税込3,300,000円）
- 2025年7月: 環境構築 - 400,000円（税抜）
- 2025年8月: デザインシステム - 200,000円（税抜）
- 2025年9月: デザインシステム - 200,000円（税抜）
- 2025年10月: デザインシステム - 400,000円（税抜）
- 2025年11月: アプリ基盤構築 - 300,000円（税抜）
- 2025年12月: アプリ基盤構築 - 300,000円（税抜）
- 2026年1月: 認証・権限管理 - 400,000円（税抜）
- 2026年2月: 認証・権限管理 - 400,000円（税抜）
- 2026年3月: 共通機能（一部） - 400,000円（税抜）
2026年度
- 2026年4月: 全機能完成・納品 - 6,920,000円（税抜）
合計: 9,920,000円（税込10,912,000円）
本見積もりの有効期限: 発行日から30日間