Litのシステム開発の見積相場や費用/コスト/値段について

Litの業務システムの開発費は、業務規模、既存連携、要件の複雑さで変わります。PoCの100万〜300万円から、基幹連携の数億円まで幅があります。

費用は、ライブラリ自体と、業務システムを使える状態にするための開発費に分けて考えます。

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

Litのシステム開発費用の全体像

PoC、社内画面、部門横断、基幹連携の4区分について、Litを使う業務システムの初期費用をカードで示した図。
カードを順に見ると、PoCから基幹連携までの費用幅を見比べられます。

Litはオープンソースで、公式ドキュメントでは圧縮後およそ5KBの軽量性が示されています。ただし、軽量なライブラリを使っても、認証や権限、データ連携は自動では用意されず、帳票や監査ログ、運用設計も別途設計する必要があります。

Litと業務システムの違い

Litは、Custom Elements、Shadow DOM、HTMLテンプレートなどのWeb標準で、再利用できる画面部品を作るライブラリです。

  • 共通部品:顧客一覧、案件検索、在庫テーブルを、複数の画面で使える部品として設計できます。
  • 画面部品:承認ダイアログ、通知、入力フォームを、画面をまたいで共通化できます。
  • 業務機能:販売管理やCRMの機能は、製品のように最初から含まれていません。

Litを使えば安くなると考えていると、API、権限、移行の費用が後から加わりがちです。テストと保守の費用も別に見込み、見積もりは画面層、バックエンド、インフラ、導入支援などの作業単位で確認します。

規模別の費用相場の目安

発注側と開発会社は、規模と連携の範囲をもとに、Litを画面層に使う業務システムの初期費用を見積もります。

  • PoC:既存APIにつなぐ場合は100万〜300万円です。
  • 社内画面:小規模な業務画面は300万〜800万円程度です。
  • 部門横断:顧客・案件・在庫を扱う場合は500万〜1,000万円です。
  • 基幹連携:複数基幹や大量データを扱うスクラッチ開発は1,000万円〜数億円です。

PoCと小規模画面の金額は、Lit専用の公開価格ではなく、類似Webシステムからの推定です。その前提は既存APIと画面数、利用者数です。認証方式やブラウザ対応、テスト範囲も前提に含まれます。

また、2026年の一般的な相場は、小規模100万〜300万円、中規模500万〜1,000万円、大規模1,000万円〜数千万円以上です(出典:SIA株式会社「システム開発の費用・相場【2026年版】」、2026年)。

ポイント

Litは軽量でも、業務システムとしての費用は画面の数だけで決まりません。迷ったときは、既存連携や認証、運用まで含めた範囲が見積もりに入っているかを確かめます。

Litのシステム開発費用の内訳

Lit業務システムの費用を、人件費、API・データ・インフラ、運用保守・脆弱性対応の3層に分けた図。
稼働後に続く費用も、初期開発の費用と並ぶ構成要素です。

見積書の金額は、担当者の人数だけでなく、業務を仕様にする工程も含めて積み上がります。総額は、画面やAPIの開発、品質確認、稼働後も使い続けるための工程を合わせたものです。また、Litでは共通部品の設計と接続検証も、見積もりの項目として明示します。

要件定義から開発・テストまでの人件費

人件費は、職種ごとの工数で決まります。一般には「人月単価×稼働月数」で計算します。

  • 担当者:エンジニア、PM、デザイナー、業務コンサルタント、テスト担当者などが関わります。
  • 公開相場:2026年の人月単価は60万〜200万円程度です(出典:SIA株式会社「システム開発の費用・相場【2026年版】」、2026年)。
  • 工数配分:要件定義10〜15%、基本設計15〜20%、詳細設計10〜15%です。
  • 開発以降:開発・単体テスト30〜40%、結合・総合テスト15〜20%、移行・導入5〜10%です。

同じ画面数でも、業務ルールや開発者の経験、発注先の体制によって、金額は変わります。

Lit案件では、設計書に属性・プロパティ・イベントとデザイントークンを含めます。さらに、Shadow DOMの境界やアクセシビリティ要件も設計に入るため、必要な工数は最初から確保しておきます。

API・データ・インフラにかかる費用

Litは主に画面側のライブラリのため、データベースや業務API、認証基盤は別に用意する必要があります。

  • 基幹連携:データ変換、二重登録防止、失敗時の再送を設計します。
  • 連携テスト:接続先の数に応じて、仕様調整と結合テストの量が変わります。
  • クラウド:実行環境、DB、ストレージ、CDN、バックアップ、監視、ログに月額費用がかかります。

連携先が増えると、開発費用と期間の増加につながります。

利用者数やデータ量が決まっていなければ、クラウド料金は断定できません。そのため、月額の想定レンジ、アクセス増加時の従量課金、障害時の復旧体制を確認します。

運用保守・脆弱性対応のランニングコスト

稼働後の保守費は、初期開発費とは分けて予算に含めます。

  • 費用率:初期開発費の10〜20%、契約により15〜20%程度が目安です。
  • 試算例:初期費3,000万円なら年間450万〜600万円程度です。
  • 保守内容:監視、障害・脆弱性対応、依存パッケージ更新、軽微な改修などです。

試算例は参考値です。24時間監視や障害対応をどこまで契約に含めるかによって、金額は変わります。

Litを含む画面では、ブラウザ仕様や対応ブラウザの変化が保守の課題になります。さらに、npm依存パッケージやデザインシステムの変更にも備える必要があります。

保守の契約では、受付時間と復旧目標を定めます。さらに、定期更新やテスト環境、追加開発の単価を決めておき、ソースコードと設計書の管理者も明記します。

ポイント

費用は、人件費、API・データ・インフラ、運用保守に分けて比べると分かりやすくなります。稼働後の保守費を初期開発費と別枠で見込むことが、予算を組むときの判断の目安になります。

Litのシステム開発費用が変動する要因

検索と登録だけの画面でも、費用は異なります。権限やデータ整合性、既存連携に加えて、利用者の数や品質基準、納期によっても変わります。

予算管理の出発点は、Litを採用するかどうかよりも、共通化する範囲と個別業務として作る範囲を明確にすることです。

機能数・画面数・業務フローの複雑さ

画面数だけでは見えない業務の分岐も、開発とテストの工数に影響します。

  • 基本機能:ログイン、検索、一覧、詳細、登録を含みます。
  • 業務機能:承認、通知、帳票、CSV入出力も工数に影響します。
  • 分岐:役職・部門ごとに表示や承認経路が違うと、複雑になります。
  • 段階化:必須シナリオを先行し、例外操作や高度な集計を第二段階にできます。

共通部品には、初期の設計費がかかります。ただし、1画面だけで使う特殊な部品を汎用化しすぎると、API設計や文書が複雑になります。

特に、複数の部署やサービスで使うテーブル、日付入力、モーダルは、再利用によって後続画面の重複実装や保守費を減らせる可能性があります。

既存システム連携・認証・セキュリティ要件

既存のPHP、Java、C#の画面とLitを同居させる場合は、接続範囲を決めます。ReactやVueのアプリと組み合わせる場合も、接続範囲を決めます。

  • 受け渡し:属性・プロパティ、カスタムイベント、フォーム値を確認します。
  • アプリ境界:ルーティングと状態管理の境界を検証します。
  • 共存:React向けラッパーや既存デザインシステムとの接続で、初期工数が増える場合があります。
  • 移行:段階的な画面移行や、複数環境での部品再利用がしやすくなります。

個人情報や従業員情報を扱う場合は、ログインのほかにも見積もる項目があります。暗号化や認証・認可、セッション管理に加えて、監査ログや管理者操作記録も含めます。さらに、バックアップや委託先管理、脆弱性対応も対象です。

個人情報保護委員会のガイドラインは、組織的・人的・物理的・技術的な安全管理措置を示しています。また、委託先の取扱状況を合理的に把握できる契約内容も示されています(出典:個人情報保護委員会「個人情報の保護に関する法律についてのガイドライン(通則編)」)。

対応ブラウザ・アクセシビリティ・品質基準

対応ブラウザやアクセシビリティ基準は、開発とテストの範囲に影響します。

  • Litの要件:ES2021、Custom Elements、Shadow DOMなどのWeb APIを利用します。
  • モダンブラウザ:ビルドツールによるモジュール解決が必要です。
  • 旧ブラウザ:JavaScript変換やポリフィルが必要になる場合があります。

特に、社内端末に古いブラウザが残る場合は、対応可否の調査やポリフィル、追加の実機テストが費用に加わります(出典:Lit公式「Requirements」)。

Shadow DOMは部品のスタイルとDOMを独立させます。ただし、グローバルCSSやDOM操作との関係は、別に設計します。

フォームやダイアログ、メニューでは、キーボード操作とフォーカスを確認します。ラベルやエラー表示、読み上げも、同じ画面で確かめます。

WCAG 2.2は、キーボード操作と「名前・役割・値」などを定めています。そのため、アクセシビリティはPoCの条件に含めておきます(出典:W3C「Web Content Accessibility Guidelines 2.2」、2024年勧告)。

ポイント

費用は、業務の分岐や既存システムとの連携、認証の要件で大きく変わります。Litを採用するかどうかより先に、共通化する範囲と個別に作る範囲を決めることが、判断の目安です。

Litのシステム開発を進める手順

業務と非機能要件の整理、PoC、段階リリース・運用移管の順に進む開発プロセス図。
PoCが要件整理と本開発の間に置かれています。

まず、業務課題と既存資産を確認してから、Litを採用するかを決めます。先に技術を固定してしまうと、パッケージやSaaSで解決できる業務まで開発することになりかねません。

業務フローやマスタ、権限を整理し、例外処理や連携先、データ保持期間も洗い出します。そのうえで、1画面または1業務のPoCで採用効果と費用を判断します。

要件定義での業務と非機能要件の整理

要件定義では、誰がいつ、どのデータを使い、どの判断を下すのかを業務シナリオとして書き出します。

  • 業務処理:入力チェック、承認差し戻し、権限がない場合の表示を決めます。
  • 例外対応:連携失敗時の再処理や退職者アカウントの停止を定義します。
  • 現場業務:FAX、Excel、手書き、二重入力を見直してから画面化します。

業務を見直さずに画面だけ作ると、非効率な作業をそのままデジタル化するおそれがあります。

非機能要件では、同時利用者数と応答時間、可用性を決めます。バックアップとログの扱いも、ここで決めておきます。対応ブラウザやアクセシビリティ、個人情報の保存場所も、同じ段階で定めます。

実際の認証方式と代表的なデータを使って、API接続を確かめます。エラー表示や、権限による表示の違いも、あわせて確認します。

PoCでのコンポーネント設計と共存可否の検証

検証する対象は、見た目だけでなく、実データを使う検索や登録、承認などの業務から選びます。

  • Lit設計:コンポーネントAPI、イベント、フォーム連携、状態管理を検証します。
  • テストと文書:E2EテストとStorybookなどのカタログ運用を試します。
  • 共存環境:React、Vue、既存サーバーサイドHTMLとの併用を確認します。

PoCの費用は100万〜300万円程度が目安です。認証や実データ接続を含むほど、上限に近づきます。

共通化する部品と、個別画面の中だけで使う部品を分けます。そのうえで、デザイントークンも先に定めておきます。

参考になる実例として、Adobe Spectrum Web Componentsがあります。LitElementを基盤に、複数のWebフレームワークで使えるものです(出典:Adobe「Spectrum Web Components」)。

色、余白、文字、フォーカス表示の各トークンを決めておくと、後続画面の品質と見積もりが安定しやすくなります。

段階リリースと運用移管の設計

本開発では、コンポーネントとAPIを中心に組み立てます。データモデルや認証、監査ログも組み合わせ、業務シナリオのテストを行います。

  • 小さく公開:1部門、1拠点、1業務から段階的にリリースします。
  • 移行設計:旧画面とのデータ整合性と二重入力防止を見積もります。
  • 引き継ぎ:ソースコード、設計書、API仕様、部品カタログ、テスト仕様を渡します。
  • 保守準備:依存パッケージ一覧とリリース手順も共有します。

段階リリースなら、現場からのフィードバックを次のスプリントに反映できます。

また、社内担当者が小さな修正や依存更新を行えると、ベンダーへの軽微な依頼の積み上がりを抑えられます。運用を始める前には、必要な引き継ぎを終えておきます。

保守会社に委託する場合は、脆弱性発見後の更新期限とテストの責任も契約に含めます。

Litのシステム開発で見積もりを取るポイント

見積もりは、総額だけでなく、作る範囲や対象外の作業、前提条件をそろえて比べます。特に、Litの画面部品の実績と、認証やAPIを含む業務システムの実績は、分けて確認します。

提案書には、技術選定の理由とともに、不採用にした場合の代替案も書いてもらいます。

RFPで示す画面数と前提条件

RFPでは、各社が同じ条件で作業範囲を見積もれるよう、業務と環境を具体的に書きます。

  • 業務範囲:対象業務、利用者の役割、ユーザー数、画面数、検索・登録・承認の流れです。
  • 連携と移行:外部連携、既存API、データ移行件数、対応ブラウザ、時期です。
  • 安全性:個人情報、監査ログの保持期間、バックアップ、復旧目標です。
  • Litの条件:部品数、既存FWとの共存、Shadow DOMの範囲、SSRの要否、E2Eテストの対象、対応ブラウザです。

「使いやすい画面」は、検索条件や入力補助といった項目に分けて条件にします。キーボード操作やエラー表示も、同じように書き出します。条件が曖昧だと、会社ごとの前提がずれ、発注後に作業が追加される可能性があります。

作業単位での複数社の見積もり比較

PoCから保守まで工程を分けた見積もりを取り、工数と成果物を照らし合わせます。

単価が低くても、要件定義やテストが少なければ、後から追加費用が出るおそれがあります。各工程の成果物を比べると、その差が見えやすくなります。

一方で、高い見積もりには、アクセシビリティ試験や脆弱性診断が含まれる場合があります。監視や教育、運用移管まで含むこともあります。

質問への回答も確認します。公開実績だけでLitに強いと断定せず、実装者の経験とPoCの成果物で判断します。

  • 利用範囲:LitまたはWeb Componentsをどこで使いますか。
  • 共存経験:ReactやVueと共存した経験がありますか。
  • 品質管理:Shadow DOMのE2Eやアクセシビリティ基準をどう確認しますか。
  • 保守と納品:依存OSSの更新者、ソースコードと設計書の納品形式はどうなりますか。

契約で定める変更管理と追加費用の条件

開発中に仕様が変わる場合に備えて、変更の扱いと費用承認の手順を契約前に決めておきます。

  • 機能の分類:必須、次期、検討機能に分けます。
  • 変更手続き:見積もり方法と承認者を決めます。
  • アジャイル:スプリント範囲、優先順位の決定者、受入条件、予算上限を定めます。

契約書では、納品物と検収、瑕疵対応を確認します。さらに、第三者OSSや知的財産権の扱いも確認します。再委託と個人情報についても、契約書で確かめます。

障害対応と保守の範囲も定めておきます。Litのライセンスが無料であっても、更新や脆弱性・ブラウザ対応まで無料とは限りません。

初期費用とランニングコストの境界を明確にしておくと、予算超過を防ぎやすくなります。

ポイント

見積もりは総額だけでなく、作る範囲や対象外の作業、前提条件をそろえて比べるのが判断の目安です。提案書に技術選定の理由と代替案があるかも、確かめる材料になります。

Litのシステム開発コストを最適化する方法

コストを抑える方法は、単価を下げることよりも、不要な開発や作り直しを減らすことです。Litでは、再利用する部品を選び、最初からすべてを作り込まないようにします。追加画面、保守担当者の学習、障害対応を含めた総保有コストで判断します。

PoCと段階導入による初期リスクの抑制

全社展開の前に、利用者を限定した1業務を選び、価値と連携の課題を確かめます。

  • 候補業務:既存APIを使えて価値を測りやすい案件検索・担当者更新、在庫照会・入出庫申請です。
  • 測定項目:操作時間、入力ミス、部品の再利用数、既存画面との連携課題です。
  • PoC機能:ログイン、権限、実データに近いダミー、通信・入力エラーを含めます。
  • 操作確認:キーボード操作も検証します。

PoCの結果を見て、本開発へ進むかを判断します。見た目だけのモックでは、費用やリスクは測れません。そのため、100万〜300万円程度のPoCは、数千万円規模の本開発で大きな手戻りを防ぐ投資です。

既存APIと標準サービスの再利用

既存資産や標準サービスを使うと、独自開発する機能の範囲を絞れます。

  • 既存基盤:既存の認証等は、安全に使えるAPIがあれば再利用します。
  • 標準サービス:標準化できる会計、勤怠、CRM、在庫機能はSaaS等を検討します。
  • Litの利用先:社内ポータルの周辺画面や複数サービスのワークフローUIに使えます。

標準サービスの改修を増やしすぎると、初期費用や期間が悪化することがあります。さらに、操作性や保守性が損なわれる場合もあります。

まず、標準に合わせる業務と独自ルールを分けます。そのうえで、独自開発する価値を比べます。Litで安くなる範囲と、別製品やサービスに任せる範囲は、機能単位で見積もります。

共通部品の文書化と先行テスト

部品の再利用を続けられるよう、使い方と品質をカタログ化します。

  • 部品文書:使い方、入力値、イベント、エラー状態を記録します。
  • 利用条件:アクセシビリティ上の注意と対応ブラウザを記載します。
  • 納品物:設計書とサンプルコードを含め、社内で追加画面を作れるようにします。

文書がなければ、後続のチームは部品を使わずに個別実装を選びがちで、再利用の効果が失われます。

テストでは、フォームやAPIエラー、権限変更を確認します。画面遷移やブラウザ差異も対象です。Shadow DOMのスタイルやフォーカス、読み上げ時のラベルとエラーも検証します。

早い段階で自動テストと実機テストの体制を整えておくと、本番直前の修正費やリリース延期の損失を抑えやすくなります。

ポイント

コストを抑えるかどうかは、追加画面や保守担当者の学習、障害対応まで含めた総保有コストで判断するのが目安です。最初からすべてを作り込まない判断も、その中に含まれます。

Litのシステム開発費用に関するよくある質問

Litの価格だけでなく、業務システムに必要な範囲も合わせて確認すると、費用の全体像がつかみやすくなります。公開相場とLitの特性をもとに答えます。

Litのライセンス費用はいくらですか?

Litはオープンソースで、通常は製品のライセンス料を支払って使うものではありません。

一方で、システムには人件費がかかります。API、認証、DB、クラウドなどの費用に加え、テストや保守の費用もかかります。

ライブラリが無料でも、システム全体が無料とは限りません。そのため、作業範囲を分けて見積もります。

Litで小規模な業務画面を作る費用はいくらですか?

既存APIがあり、検索・登録・権限管理を含む小規模な社内画面は、300万〜800万円程度が目安です。金額は、画面数や入力項目、承認経路によって変わります。さらに、移行やテスト、ブラウザ対応も影響します。

この価格はLitの採用費ではありません。また、実データ接続を含むPoCは、別に100万〜300万円程度です。

Litはどのようなシステムに向いていますか?

複数画面やサービスで共通UIを使う場合や、混在環境を段階的に刷新する場合に向いています。ReactやVue、Angular、既存HTMLが混在する環境や、軽量な埋め込みウィジェットにも活用できます。

ReactやVueに習熟したチームが短期間でルーティングや状態管理、業務部品を揃える場合は、複数の案をPoCで比べます。

Litのシステム開発会社は何を基準に選べばよいですか?

Litの掲載有無だけでなく、技術実装と業務・運用設計を確認します。

  • 技術:Web Components、TypeScript、Shadow DOMの経験です。
  • 業務設計:API、認証、監査ログを含む設計経験です。
  • 品質:アクセシビリティとE2Eテストの実績です。
  • 移管:PoCから本番、保守移管までの経験です。

実データに近いPoCを使い、検索や登録の動きを確かめます。権限やエラー表示も、同じPoCで確認します。

成果物として、ソースや設計書を見ます。テスト仕様とOSSの更新方針も、あわせて確かめます。

まとめ

Litの開発費はライセンス料ではなく、業務システム全体を使える状態にする費用です。PoCは100万〜300万円、社内画面は300万〜800万円、部門横断は500万〜1,000万円が目安です。

さらに、基幹連携を伴う開発は1,000万円〜数億円が目安です。費用は、規模と連携範囲によって変わります。

いずれも前提によって金額が変わるため、前提の確認が欠かせません。

費用を抑えるための前提と優先順位の統一

予算を抑えるには、開発前の条件と稼働後の負担をあわせて確認します。

  • 見積もり条件:画面数、利用者数、業務ルール、連携、セキュリティ、テストの前提で費用が変わります。
  • 効果検証:業務と非機能要件を整理し、実データに近いPoCでLitの効果を確かめます。
  • 段階導入:共通部品、既存API、SaaSを使い、必須機能からリリースします。
  • 運用費:保守、脆弱性対応、ブラウザ更新、社内の運用負担までを比べます。

見積もりで確認する技術と業務の両面

発注先は、技術と業務対応、見積もり条件をまとめて確認したうえで選びます。

  • 対応力:Lit実装に加え、要件定義、API・認証・移行、アクセシビリティ、テスト、運用移管の経験を確かめます。
  • 見積もり比較:各社に同じ条件を示し、作業範囲、対象外、追加費用、納品物、保守を比べます。
  • 構成判断:Litの軽量性と再利用性を活かす構成なら、段階的な刷新と長期的な保守性を両立できます。

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

会社紹介

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

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

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

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

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

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