Viteのシステム開発の発注/外注/依頼/委託方法について

Viteのシステム開発は、業務を整理して委託する範囲を決め、要件定義、開発・検証、移行・運用の順に進めると、業務に合うシステムにつながります。

Viteは画面の開発とビルドに使うツールで、業務ルールやAPI、データベース、権限は別に設計します。

▼全体ガイドの記事
・Viteのシステム開発の完全ガイド

Viteのシステムを発注する前に知っておきたい全体像

Viteの画面開発・ビルドと、業務システムを構成する技術要素を4層で示した図。
画面の開発から業務ルールまで、担当範囲を分けて整理できます。

販売管理や顧客管理のシステムは、ReactまたはVue、TypeScript、API、データベース、クラウド環境などを組み合わせて作られ、Viteはそのうち画面の開発とビルドを受け持ちます。

Viteが担当する範囲と担当しない範囲

Viteが受け持つ範囲は、主に次の機能です。

  • 開発・ビルド:HMRで変更をすぐ画面に反映し、静的アセットの最適化まで担います。
  • 公式機能:React・Vue、JSX・TSX、Web Worker、SSR、分割、CSP nonce、依存ライセンス出力。

一方で、ログイン認証や権限、業務ルールは、別途に設計と実装が必要です。APIやDB、監査ログ、バックアップも、Viteとは別の工程で扱います。

提案書に「Vite対応」とだけ書かれている場合は、APIやDB、クラウド設定、本番リリースをどの会社が担当するかを、発注側から確かめておきます。特に、在庫の引当、受注状態、担当者ごとの閲覧範囲は、決まっていないと画面だけでは業務に使えません。

Viteを採用しやすい業務システム

Viteを採用しやすいのは、次のような特徴を持つ業務システムです。

  • 日常的な画面操作:管理・受発注・在庫・顧客・予約・勤怠・社内ポータル・ダッシュボードのように、毎日の画面操作が中心の業務。
  • 短い改善サイクル:開発サーバーの速さが、画面を見ながら直す作業を助けます。

TypeScriptを組み合わせると、画面項目やAPIの変更にも追従しやすくなります。

一般公開ページでSEOや初期表示速度が最も大事なら、SPAに決め打ちせず、SSR・SSG対応のフレームワークも比べます。

既存のReact・Vueの資産や、Node.js・Java・Pythonなどの社内標準を先に整理します。

ブラウザや帳票、大量データの要件も、その段階で明確にします。

発注時の基本は、要件をViteに合わせて曲げないことです。

2026年時点で確認したいViteの更新動向

Vite公式は2026年3月の「Vite 8.0 is out!」で、Rolldownを単一の統合バンドラーとして採用したと発表しました。また、この発表では、ビルドの高速化とプラグインエコシステムの拡大も案内されています。

新しいバージョンでも費用が必ず下がるとは限りません。そのため、Node.js、プラグイン、CI/CD、既存コードとの互換性を確認します。

Viteのシステム開発で選べる発注形態

発注形態は、SaaS・パッケージ中心、受託への一括委託、内製と外部人材の併用に分かれます。選ぶ際は、独自業務の多さや社内に残したい知識を基準にします。納期や運用体制も、あわせて見ておきます。

SaaS・パッケージを使い不足部分だけ開発する方法

業務に合うSaaS・パッケージの標準機能を使い、足りない画面や連携だけをViteで作って追加します。

フルスクラッチに比べると初期費用や納期を抑えやすい一方で、業務のほうを標準機能に合わせる必要があります。

契約や運用の面では、次の点も確かめます。

  • API・データ:API公開範囲とデータの持ち出し。
  • 料金・終了時:利用料の改定と、サービス終了時の移行条件。

受託開発会社へ要件定義から一括で委託する方法

独自業務が多く、連携や移行、権限・監査ログが複雑な場合は、要件定義から保守まで担える会社を選びます。窓口を一本化しやすい一方で、APIやインフラは別会社が担当することもあります。そのため、提案の時点で担当範囲と再委託の有無を明記してもらいます。

内製・ラボ型で社内に知識を残す方法

ラボ型は、外部チームに一定期間伴走してもらい、スプリント単位で開発を進める選択肢です。

  • 利用条件:社内にプロダクト責任者やエンジニアがいる場合は、ラボ型を選べます。
  • ラボ型の利点:要件変更に応じやすく、コードや判断理由を社内に残せる点が特徴です。

ラボ型では、発注者側にも、優先順位を決める担当者、レビューの時間、受入テストの体制が必要です。

初めてのシステム化で業務が未整理なら、開発を始める前に、業務の整理と試作を先に依頼します。

2025年3月に公開されたJUST.DBの受発注管理事例では、ノーコードの導入期間や開発コストが比較材料として紹介されています。この事例はVite採用の事例ではありません。ただし、Vite、SaaS、パッケージ、ノーコードを同じ課題で比べる材料になります。

ポイント

業務がほぼ標準機能で足りるならSaaSやパッケージを中心にし、独自業務や連携、移行が多い場合は受託への一括委託を検討します。

発注前にRFPと要件を整理する方法

RFPに整理する業務フロー、画面やデータ、非機能要件、受入条件と納品物を4枚のカードで示した図。
業務の現状から受け入れ条件まで、見積もりの前提をそろえます。

見積もりの精度は、Viteの知識より業務と前提の整理で変わります。完璧な仕様書でなくても構いません。現状の問題と実現したい状態を文章や図で共有し、対象範囲と優先順位も書き添えます。

現行業務と解決したい課題の洗い出し

現行業務を洗い出すときは、業務の流れと現在の作業を分けて見ると整理しやすくなります。

  • 業務フロー:入力者と時点、承認者、帳票や通知の流れを記録します。
  • 現行作業:Excel・紙・メール・FAX・既存システムの二重入力、手作業の補正、例外処理。

月末にだけ増える作業も、洗い出しに含めます。また、「業務を効率化したい」だけでは見積もれないため、誰が、どの状態で、どんな条件のときに、何が起きるのかを具体的に書き出します。たとえば、担当者が受注を登録し、上長が承認し、在庫引当後に出荷担当へ通知する流れです。

初回リリースの必須業務と将来の候補を分けておくと、過剰なカスタマイズを防げます。

RFPに記載する画面・連携・データ・非機能要件

RFPは、目的・画面と、機能・データの二つに分けて書くと進めやすいです。

  • 目的・画面:目的とKPI、ユーザーと権限、画面一覧、業務状態の遷移を書きます。
  • 機能・データ:業務の機能(入力・検索・承認・通知・帳票)と、API連携・マスタ・移行データを示します。

利用するブラウザと想定ユーザー数も書いておきます。

ViteとReact・Vueを必須とする場合は、その理由と代替案を添えます。

非機能要件には、表示速度や同時利用者数、稼働時間を含めます。加えて、バックアップと復旧目標、ログの保存期間も書きます。

アクセス制御や二要素認証、脆弱性診断、監視の方法も決めておきます。また、ソースコードや設計書の納品についても取り決めます。

要件が抜けたままだと、負荷試験や監査ログ、移行、運用設計の追加費用が後から発生します。

発注前に決める受入条件と納品物

受入条件と納品物は、発注の前に決めておきます。

  • 受入条件:画面や権限、帳票ごとに、連携や性能、障害時の挙動を定めます。
  • テスト準備:業務シナリオと期待結果、担当者と期限、修正後の再テストの扱い。

納品物には、ソースコードや設計書、API仕様、DB定義が含まれます。加えて、テスト仕様書と結果、インフラ構成も含まれます。CI/CDの設定や環境変数の管理方法、操作マニュアル、障害対応手順、依存パッケージ一覧も、あわせて確認します。

保守会社を変えられるよう、リポジトリやライセンス、生成物、アカウント、クラウド契約の名義は、発注者側に置いておきます。

ポイント

完璧な仕様書がなくても、見積もりの前提がそろっていれば進められます。前提が抜けたまま発注すると、後から追加費用が発生しやすくなります。

Viteのシステム開発を発注してから公開するまでの進め方

発注から公開までは、要件定義から保守まで、七つの工程を順番に進めていきます。

  1. 要件定義
  2. 設計
  3. 実装
  4. テスト
  5. 移行
  6. リリース
  7. 保守

アジャイル開発の場合も、目的や業務ルールが決まらないまま作り始めることは避け、小さな業務単位と判断基準を先に合意しておきます。

要件定義と画面設計での業務担当者の確認

要件定義では、業務フローとデータ項目を確定させます。そのうえで、権限や状態の遷移、外部連携も決めます。

画面設計では、ワイヤーフレームや試作品を利用者に確認してもらいます。業務担当者がレビューしないと、開発会社が仕様を補い、完成後に大幅な修正が起こります。

スプリントごとの実装・テスト・レビュー

開発は、2〜4週間程度ごとに区切ります。

  • 開発単位:画面だけでなく、API・DB・権限まで通した機能を確かめます。
  • テスト:単体、結合、E2Eを分け、業務シナリオは早い段階で自動テストに組み込みます。

本番では、開発サーバーではなくビルドした成果物を配信します。

配信先にはCDNやNginx、S3とCloudFrontなどがあり、いずれもAPI・DB・認証基盤と安全につなぎます。

提案書には、開発環境と本番環境、リリース手順、ロールバック方法が書かれているかを確かめます。

データ移行と段階リリースの計画

データ移行と段階リリースの計画では、移行のルールと移行リハーサルを押さえます。

  • 移行ルール:Excelや旧システムの対象項目、変換、重複、表記揺れの扱いを決めます。
  • 移行リハーサル:切り戻しの条件も決めておきます。マスタ整備を丸投げすると、費用と期間が増えます。

業務上の正解は発注者が決め、変換や投入といった技術作業は委託先が担う分け方が現実的です。

全社展開の前に、まず1部門・1業務・少数データで試します。利用状況とエラーを見ながら、対象を広げていきます。

問い合わせ窓口や障害時の連絡先、初期運用の支援、追加改修の扱いも、事前に合意しておきます。

ポイント

要件定義と画面設計に業務担当者が加わっているかで、完成後に大きな修正が出るかどうかが変わります。スプリントごとに機能を確かめられる体制かどうかも、進め方を選ぶ目安になります。

Viteのシステム開発を外注する費用相場

Viteは、MITライセンスのオープンソースです。そのため、利用料は開発費の中心にはなりません。

費用は、画面数と業務ルールに加えて、API連携や認証、移行の範囲で変わります。性能・可用性、セキュリティ、運用体制によっても差が出ます。

この金額は、2026年時点の業務系Webシステムの相場をもとにした推定レンジで、Vite固有の統計ではありません。

規模別の初期費用と開発期間の目安

規模ごとの推定レンジは、含む機能の範囲によって変わります。

  • 小規模:数画面とログイン、簡易的な登録・検索、既存APIの利用に絞る場合は、100万〜300万円で、期間は1〜3か月程度です。
  • 標準規模:権限・帳票・DB・複数の業務画面・テストまで含む場合は、300万〜800万円で、期間は3〜6か月程度です。

受発注・在庫・CRMを部門をまたいで扱い、複数のAPIや移行、監査ログを含む場合は、800万〜3,000万円、6〜12か月程度が目安です。

ERP・WMS連携や大量データ、高可用性・段階移行・24時間運用まで求めると、3,000万円〜数億円、1年以上になることがあります。費用と期間が増えるのは、画面数よりも、業務ルールと既存データが複雑になるためです。

2026年版の費用解説では、人月単価と工数を掛け合わせて説明しています(出典:デジタル庁「標準ガイドライン実践ガイドブック」)。作業内訳の確認も勧められています(出典:イー・ジーシステム「システム開発の費用相場と見積書の読み方」)。SIA「受託開発の費用相場」にも、同様の説明があります。

業務系の人月単価は、公開されている相場の一例で60万〜200万円程度です。単価だけでなく、役割ごとの人月も見ておきます。

初期費用以外に発生するコスト

初期費用以外のコストは、見積項目と年間保守の二つで確かめられます。

  • 見積項目:要件定義・UI・管理・テスト・移行・クラウド・監視・診断・マニュアル・教育・リリース支援が、見積に入っているかを確かめます。
  • 年間保守:公開相場の例では、初期開発費の10〜20%程度とされています。

クラウドやメール、帳票は、別請求になる場合があります。ほかにも、監視、バックアップ、ライセンス、ドメイン、診断が別料金になることがあります。そのため、3〜5年の総保有コストで比べます。

月額利用料や保守の最低料金、追加改修の単価も確かめます。

年間保守費は、問い合わせ時間や障害対応、定期更新、追加開発を含むかどうかで変わります。

費用を抑えるための機能削減の順番

費用を抑える場合は、機能を削る順番をあらかじめ決めておきます。

  • 優先範囲:セキュリティ・バックアップ・テスト・移行は一律に削らず、初回業務と優先順位を絞ります。
  • 段階導入:受注登録と承認を先に進め、複雑な分析画面や細かな帳票は第2段階に回せます。

標準機能で済む部分を無理にカスタマイズしないことも、追加工数を抑えることにつながります。たとえば、リサーチノートには、過剰なカスタマイズによって2,000万円のシステムが4,200万円に膨らみ、期間も1年半に延びた事例が載っています。

金額だけでなく、標準化できる業務と後回しにする機能、外せない統制を分けて考えます。

契約形態と見積書の確認ポイント

請負契約と準委任を、適する工程の違いで左右に比較した図。
工程ごとの仕様の固まり具合が、契約を分ける手掛かりになります。

契約は、成果物と仕様がどこまで固まっているか、開発中に変更が見込まれるかで選びます。契約名だけで決めず、納品・検収・責任・変更管理・知的財産・保守の条件を一つずつ確かめます。

仕様と成果物が明確な場合の請負契約

請負契約は、合意した成果物を完成させ、検収を受けることを中心にした契約です。

請負は、画面一覧や機能、テスト条件、納品物、納期が明確な工程に向きます。設計や実装にも使えます。ただし、大きな仕様変更には、変更契約や追加費用が必要になります。

変更が多い開発での準委任・ラボ型

準委任と請負では、求められる成果責任の範囲が異なります。

  • 契約の性質:準委任は、専門家が一定の業務を遂行する契約です。
  • 適する開発:要件を確かめながら、スプリント単位で改善する開発と相性が良いです。

画面の優先順位や業務ルールが変わりやすい新規事業では、作業時間と体制、成果の確認方法、意思決定の期限を決めておきます。

完成責任を請負と同じ感覚で期待すると、認識の違いが起こりやすくなるため、注意が必要です。

要件定義と開発を工程で分ける契約

要件定義と開発を工程で分けるときは、契約の分け方と工程間の条件を押さえます。

  • 契約の分け方:要件定義や試作は準委任、仕様と受入条件が確定した後は請負にできます。
  • 工程間の条件:成果物・次工程の判定・未確定事項・見積もりの前提・変更単価を明記します。

工程を分ければ、未確定な段階で固定額を無理に約束するリスクを抑えられます。

個人データを扱う場合は、安全管理措置や再委託の事前報告・承認、監査を契約に含めます。さらに、取扱状況の把握と事故時の連絡も入れておきます。

個人情報保護委員会のガイドラインでも、委託先の選定や契約、取扱状況の把握が確認事項とされています(出典:個人情報保護委員会「個人情報の保護に関する法律についてのガイドライン(通則編)」)。

ポイント

契約は、仕様と成果物がどこまで固まっているかで選びます。未確定な段階で固定額を約束すると、リスクが生じやすくなります。

Viteのシステム委託先を選び見積もりを比較するポイント

委託先は、技術名より運用まで担える体制があるかで見ます。3社程度に同じRFPを渡し、質問票と評価軸をそろえると、価格差や提案の抜けが見えてきます。

本番実績と技術の担当範囲の確認

本番実績と技術の担当範囲は、稼働中の実績と役割分担の二点から確かめます。

  • 本番実績:稼働中の業務システムで、Vite版やReact・Vue、TypeScriptを使った例があるかを見ます。
  • 担当範囲:API・DB・認証・クラウド・CI/CDのうち、どこを誰が受け持つかを質問します。

営業担当だけでなく、設計・開発・運用の責任者と話し、技術を選んだ理由と更新の手順を聞きます。

Vite 8では、Node.jsやプラグインへの対応、既存ライブラリの移行リスク、セキュリティパッチの適用責任を確かめます。また、代替案を説明できる会社は、事業要件に合わせて提案している可能性があります。

工数・単価・前提条件を並べた見積もりの比較

見積もりを比べるときは、工数・単価・前提条件を横並びにします。

  • 一式表記:「開発一式」などと書かれた見積では、妥当かどうかを判断できません。
  • 内訳:要件定義・画面・API・DB・権限・連携・テスト・移行・PM・インフラ・マニュアルごとに分けて示します。

人月または人日の工数、単価、役割、期間を示してもらいます。デジタル庁の実践ガイドブックでも、工数と単価の掛け算や、作業ごとの内訳の精査が勧められています。

安い見積もりでは、非機能要件やデータ整備、受入支援、リリース、保守の抜けがないかを確かめます。一方で、高い見積もりでは、必須と任意の混在や、過剰な独自開発、不要な高可用性要件がないかを見ます。

発注側は、含むもの、含まないもの、追加条件を、各社に同じ形式で回答してもらいます。

体制・納品・保守の比較

体制、納品、保守は、役割分担と継続性の面から比べます。

  • 役割分担:責任者・業務要件・フロント・バック・インフラ・テスト・セキュリティ・保守の担当を確かめます。
  • 継続体制:専任か兼任か、担当交代時の引き継ぎ、再委託の有無。

ソースコードやクラウドの所有権、設計書の更新、障害対応の時間を比べます。脆弱性の修正期限や、Node.js・Vite・npm依存の更新責任、追加改修の単価も見ておきます。

保守費が安くても、更新を続けない体制では、将来の安全性と運用コストが課題になります。

ポイント

委託先は、Viteを使えるかより、本番の運用まで任せられるかで選びます。見積もりは、内訳と前提の食い違いを洗い出したうえで比べると判断しやすくなります。

発注時に確認したいVite固有のセキュリティと運用

Viteの安全性は、単純に判断せず、開発環境・本番配信・API・認証・データ・依存パッケージに分けて管理します。発注時に要件として書いておかないと、画面が動くことだけが納品条件になる場合があります。

開発サーバーを本番や外部ネットワークに公開しない構成

開発サーバーの扱いは、環境の違いと脆弱性の条件から押さえておきます。

  • 開発環境:Viteの開発サーバーは開発のためのもので、本番の公開には使いません。
  • 脆弱性条件:開発サーバーをネットワークに明示的に公開した場合です。

2025年4月には、server.fs.denyを回避して任意のファイルが返される可能性が示されました。修正版も案内されています(出典:GitHub、vitejs/viteのGHSA-356w-63v5-8wf4)。そのうえで、本番ではビルド済みのファイルを配信し、開発サーバーを外部から到達できない構成にします。

Vite、Node.js、npm依存、プラグインについて、脆弱性の確認と更新の担当者、時期を決めます。

更新後のテスト・ロックファイル・変更履歴・検証環境・ロールバック手順も、納品物に含めます。

業務要件に含める認証・認可・CSP・ログ

認可とデータ保護は、業務の使い方に合わせて要件に含めます。

  • 認可:営業は自分の顧客、管理者は全体、委託先は指定案件のみを、API側で制御します。
  • データ保護:個人情報等をブラウザに埋め込まず、暗号化やセッション、二要素認証、操作ログを設計に含めます。

バックアップと復旧の手順も用意しておきます。また、IPAのWebセキュリティ資料では、利用者ごとに操作を制御する認可の重要性が示されています。

CSPでは、Vite公式のnonce設定を使うだけでなく、リクエストごとに一意の値を生成します。生成した値は、サーバー側のヘッダーとHTMLへ正しく渡します。プレースホルダーを毎回固有の値にしないと、ポリシーを回避される可能性があります(出典:Vite公式「Features」)。

よくある質問

技術を採用するかどうかだけでなく、業務範囲、契約、費用、運用も確かめておくと、認識の違いを減らせます。

Viteはフレームワークですか?

Viteは、開発サーバーとビルドを担うツールで、フレームワークではありません。

ReactやVueなどのUIライブラリ・フレームワークに加え、API・DB・認証・クラウドとも組み合わせて使うため、他の担当範囲も確かめます。

Viteを使えばシステム開発費は安くなりますか?

Viteはオープンソースのため、ライセンス料を抑えやすい要素です。一方で、業務ルールやAPI、DBは別に必要です。移行、権限、テスト、保守も別に必要で、Viteだけで総額が安くなるとは限りません。

発注側が小さく始めて標準機能を使い、不要なカスタマイズを避けるほうが、費用の抑制につながります。

請負と準委任はどちらを選べばよいですか?

仕様や成果物、検収条件が固まった工程なら請負を、変更が多く専門家と進める工程なら準委任を選びます。また、要件定義は準委任、仕様が確定した後の開発は請負にするなど、工程で分ける方法もあります。

完成責任や変更の手続き、検収、知的財産、保守の範囲は、契約書で確かめます。

委託先には何を質問すればよいですか?

本番での実績や担当範囲を質問します。API・DB・認証・クラウドのうち、どこを誰が受け持つかも確かめます。移行支援、テスト、セキュリティ更新についても聞きます。

納品物や保守体制、再委託の有無も確かめます。見積もりは、機能・工程・工数・単価・前提条件まで明細にしてもらいます。

同じRFPを使って、複数社を比べます。

まとめ

Viteの発注では、業務フローから運用までを一つのシステムとして整理します。API・DB・権限・移行・テストも、その中に含めます。

Viteは画面開発とビルドの基盤です。ただし、業務の価値と安全性は、要件定義や全体設計、運用体制で決まります。

発注前に決める事項

発注前には、SaaS・パッケージ・受託・ラボ型を業務に合わせて比べます。そのうえでRFPに、目的や範囲、画面、連携を記載し、さらにデータ、非機能要件、受入条件、納品物も書き込みます。

規模別の推定費用は、100万〜300万円、300万〜800万円、800万〜3,000万円、3,000万円〜数億円です。実際の金額は、工数や単価、前提条件を精査して判断します。

委託先の比較で確認する事項

委託先は、提案の内容と契約の条件の両面から比べます。

  • 提案比較:同じRFPで、本番実績・担当範囲・見積・移行・セキュリティ・納品・保守・再委託を比べます。
  • 契約・運用:請負か準委任か、開発サーバーの非公開、依存更新の責任を契約に定めます。

発注時の確認を積み重ねると、Vite採用後も安全に改善を続けやすくなります。

▼全体ガイドの記事
・Viteのシステム開発の完全ガイド

会社紹介

株式会社riplaでは、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを、構想策定・要件定義から開発・改善まで一気通貫で支援。事業会社でIT・DXを経験したプロフェッショナルによる高い要件定義力・システム設計力を活かし、事業成果の最大化に伴走します。

また、当社独自の開発テンプレート「Boxシリーズ」による標準機能の高速開発と、AI駆動開発の独自フレームワーク「GoDD」による独自機能のAI実装を組み合わせることで、低コスト・短期間で開発を実現いたします。

もし、システム開発やプロダクト開発に関するご要望がございましたら、お気軽にお問い合わせください。

・サービス概要資料のURLはこちら >>>
・お問合せページのURLはこちら >>>
・お役立ち資料のURLはこちら >>>

執筆者プロフィール
張田谷凌央
張田谷凌央

株式会社ripla 代表取締役CEOとして、システムパッケージ活用、システム開発、データ分析、生成AI活用、SaaS開発、アプリ開発、EC構築など、幅広い領域で企業のDX推進と事業成長を支援している。事業会社でIT・DXを経験したプロフェッショナルが集う株式会社riplaにおいて、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを構想策定・要件定義から開発・改善まで一気通貫で支援し、単なるシステム納品にとどまらず、クライアントと同じ目線で事業成果の最大化に向けた伴走支援を行う。早稲田大学卒業後、ラクスル株式会社、LINEヤフー株式会社にて事業開発やDX推進などに従事した後、株式会社riplaを創業。