Preactのシステム開発の費用は、150万円から数億円まで幅があります。金額を左右するのは、画面数よりも業務ルールや外部連携の範囲です。
費用の内訳や価格を左右する条件、開発の進め方も、本文で順に取り上げます。
▼全体ガイドの記事
・Preactのシステム開発の完全ガイド
・業務システム開発を依頼する会社の選び方やRFPの作り方については、無料ホワイトペーパー「業務システム開発の完全ガイドブック」で詳しく解説しています。
・スクラッチシステム開発を依頼する会社の選び方やRFPの作り方については、無料ホワイトペーパー「スクラッチシステム開発の完全ガイドブック」で詳しく解説しています。
Preactのシステムの概要
Preactのシステムは、ブラウザで動く画面にPreactを使い、API、データベース、認証基盤などと組み合わせて作るWebシステムです。
Preactが担当するのは、入力フォーム、一覧表、ダッシュボード、チャート、モーダルなどの画面と、その状態です。ERPや販売管理ソフトそのものではありません。
Preactが担当する範囲と担当しない範囲
Preactとバックエンドの担当範囲を分けておくと、見積もりの作業を整理できます。
- 画面：顧客・商品・案件の検索、一覧・詳細・登録・編集、入力チェック、権限別メニュー、通知、リアルタイム更新。
- サーバー側：データ保存、請求計算、承認判定、監査ログ、バックアップ、バッチ。
Preact公式の「Fast 3kB alternative to React」は、基本ランタイムの軽さを示す目安です。ただし、完成したシステム全体の容量や開発費ではありません（出典：Preact公式、2026年8月閲覧）。実際のシステムには、画面部品、画像、フォント、API通信、認証、監視用のコードも加わります。
導入効果は、こうした条件を含めて、実際の端末とネットワークで測定します。
Preactが向いているシステムと向かないシステム
利用環境と既存資産を基準に、PreactとReactのどちらが合うかを比べます。
- Preact向き：軽い管理画面、検索・予約の埋め込み、静的ページへの部品追加。
- Reactも候補：専用部品が多い場合や、既存基盤で総保有コストを抑えられる場合。
小さなフロントエンドを複数の業務画面に広げる場合も、必要な機能だけを読み込む設計と相性がよくなります。
`preact/compat`を使えば、Reactとの互換性を高められます。ただし、すべてのライブラリが動くとは限らないため、採用前に主要部品をPoCで確認します。
Preactのシステム開発費用の相場
画面中心なら150万〜300万円、社内業務システムなら300万〜800万円が目安です。複数部門、外部連携、監査対応を含む場合は800万〜1,500万円です。さらに、基幹連携や大規模展開では1,500万円から数億円まで広がります。
小規模の画面中心なら150万〜300万円
画面中心の小規模開発は、範囲を絞ると150万〜300万円が出発点になります。
- 機能：ログイン、権限別メニュー、一覧・詳細、簡易検索、既存API連携。
- 前提：既存の認証、DB、API、デザインシステムを使い、複雑な移行や承認がない。
期間は2〜4か月程度で、要件定義や受け入れテストも含みます。
ウィジェット追加だけなら50万〜200万円程度の案件もあります。ただし、これは画面部品の追加を中心とする類似案件からの推定です。API新設、権限設計、ブラウザ対応、リリース手順が増えると、この金額の範囲を超えます。
社内業務システムなら300万〜800万円
社内業務システムは、業務機能と開発範囲を含めると300万〜800万円程度です。
- 業務機能：顧客・商品・案件・在庫のCRUD、CSV入出力、複数権限、通知。
- 開発範囲：複数API、基本テスト、データ移行。
期間は4〜8か月程度です。
業務例外、登録条件、承認者の変更、重複データの扱いまで決めるため、要件定義の比重が高まります。
2026年公開の国内相場情報では、業務システムは300万〜1,500万円、期間は4〜12か月とされています（出典：モカモコ株式会社「システム開発の費用相場完全ガイド 2026年版」、2026年）。
Preactを採用しても、相場が一律に下がるわけではありません。画面の軽量化と、バックエンドや業務設計の費用は分けて考えます。
基幹連携や大規模展開は800万円以上
基幹連携や大規模展開は、要件によって800万〜1,500万円以上になります。
- 業務・連携：複数部門の承認、会計・ERP・WMS連携、帳票、細かな権限。
- 品質・移行：監査ログ、高可用性、データ移行、操作教育。
大規模案件は1,500万円から数億円、期間は12か月から数年になる場合があります。
データ品質、API接続先、復旧目標によっても見積もりは変わります。
利用者数、監査要件、移行リハーサルも費用を左右します。ただし、業務停止を避けるテストや段階リリースを削ると、稼働後の追加費用が膨らみます。
Preactのシステム開発費用の内訳
見積書は、Preactの実装だけでなく、企画から運用までの工程ごとに分けて確認します。
人日、成果物、変更時の扱いも、費用の判断に必要です。
要件定義と設計に10〜35％程度
上流工程では、要件定義と設計で決める内容を分けて整理します。
- 要件定義：担当者、業務の順序、正とするデータ。
- 基本設計：画面遷移、権限、API、データモデル、エラー処理、運用方針。
配分の目安は、要件定義10〜15％、基本設計15〜20％、詳細設計10〜15％です。
業務が複雑になるほど、上流工程の比率は高まります。
Preact案件では、React互換性やテーブル・チャート、フォーム検証の扱いを決めます。
SSRやハイドレーションが必要かどうかも、この段階で判断します。
`preact/compat`を使う場合は、PoCでReact用ライブラリを検証し、代替部品や追加の工数も見積もります。
画面・API開発とテストに45〜60％程度
開発費の中心は、Preactの画面とAPI、DBの開発です。認証認可や外部サービス連携も、大きな工数になります。検索条件やページング、同時編集、添付の仕様は工数に影響します。CSVの文字コードやタイムゾーン、入力エラーの扱いも、工数を押し上げます。
テストでは、単体、結合、総合の各テストを行います。権限別の受け入れと、主要ブラウザや端末の確認も必要です。開発とテストは、全体の45〜60％程度と仮置きできます。
個人情報や決済を扱う場合は、脆弱性診断、負荷試験、復旧テストが別枠で必要になることがあります。
移行・教育・保守の費用
初期移行と公開後の運用に必要な費用を、見積もりに含めます。
- 移行・教育：データ整備、CSV変換、リハーサル、並行稼働、利用者教育、マニュアル。
- 公開後：クラウド、監視、バックアップ、脆弱性対応、依存更新、検証、問い合わせ。
Excelに表記の揺れや重複があると、単純なインポートだけでは終わりません。そのため、マスタの統合と確認会の費用も必要になります。
年間保守費は、初期開発費の15〜20％程度が目安です。
24時間監視や即時対応、継続改善は、別料金になる場合があります（出典：業務システム費用に関する国内公開相場、2026年）。
Preactの費用を左右する変動要因
見積もりは、必要な機能や接続先によって変わります。さらに、利用者数やデータ量、品質要求も金額を左右します。各社の金額は、含まれる条件をそろえて比べます。
機能数より業務ルールと外部連携
費用を左右するのは、画面数よりも業務ルールや外部連携です。見積もりでは、特に次の条件を確認します。
- 業務ルール：在庫引当、承認後の出荷、会計への二重計上防止。
- 連携先：会計、ERP、WMS、決済、メール、チャット。
連携先ごとに、認証とAPI制限への対応が必要になります。再送と仕様変更への対応も含めます。
利用者が数十人か数千人かで、検索設計や負荷試験の要件が変わります。
キャッシュや監視、冗長化も、要件として検討します。
Preactで初期表示を軽くしても、APIやDB検索が遅ければ、利用者が感じる性能は改善しません。
認証・権限・監査・セキュリティ要件
個人情報、従業員情報、取引情報を扱う場合は、認証と監査、安全対策を見積もります。
- アクセス管理：多要素認証、役割別認可、退職者停止、サーバー側の認可検証。
- 安全対策：操作履歴、バックアップ、復旧、入力検証、出力エスケープ、CSRF。
ブラウザ側では、Cookie属性やCSP、依存パッケージの監視も費用に関わります。
IPAの「安全なウェブサイトの作り方」は、XSSやCSRF対策を整理しています。
IPAの整理を踏まえ、見積もりではレビューと修正の範囲を明示します（出典：IPA「安全なウェブサイトの作り方」、2026年8月閲覧）。
React互換性と開発体制
`preact/compat`は、React APIとの互換層として使えます。ただし、利用する部品との相性と、開発体制も確認が必要です。
- 互換性：Portal、Suspense、CSS-in-JS、テスト、アクセシビリティを組み合わせて確認。
- 体制：Preact、TypeScript、API、認証認可、クラウド、テスト、運用を担当。
既存のReact資産は、別名設定だけで済む場合もあります。一方で、UI部品の置換やイベント差異の修正、テストの書き換えが必要になることもあります。
AdyenはCheckoutやKYC向けSDKにPreactを採用した事例を公開しています。
SDKの事例であるため、自社の業務システムに費用や効果をそのまま当てはめることはできません（出典：Adyen「Right tooling, Right Problem: Preact at Adyen」、2022年公開）。
実案件では、対象画面を使った性能PoCで判断します。
Preactのシステム開発の進め方
まず業務を棚卸しし、技術PoCを行ってから段階的に開発します。そのうえで、Preactの軽量性と業務データ・運用条件を合わせて検証します。
業務棚卸しと小さなPoC
業務と技術の検証対象を先に定めておくと、デジタル化後の手戻りを防げます。
- 業務棚卸し：紙・Excel・メール・既存システムの二重入力、差し戻し、例外、締め日、不在時の手順を一覧にする。
- 小規模PoC：画面1〜3枚、API1本、主要端末数種類で操作と性能を確認。
表記揺れや重複を残したままデジタル化すると、入力ミスが広がります。そのため、マスタ整備も初期計画に含めます。
PoCでは、ログインや一覧、検索の操作を試し、登録やエラー表示も確認します。
あわせて、`preact/compat`の部品の動きと、転送量や初期表示、API応答を調べます。採用の可否と追加費用も、この結果から判断します。
画面・API・運用を分けて設計
画面とAPIの構成、運用要件を分けて設計し、完了条件を合意します。
- 構成例：画面、API、クラウド基盤の組み合わせ。
- 設計項目：API入出力、権限、応答時間、バックアップ、復旧、切り戻し。
画面はPreact、TypeScript、Viteで作り、RESTまたはGraphQLのAPIにつなぎます。クラウド側には、認証、DB、ストレージ、監視を用意します。
社内の管理画面は、認証後のSPAを中心にします。一方で、公開画面やSEOが必要な部分では、SSRやSSGを検討します。
設計書には、エラーコードやデータ保持期間、同時利用者数を記載します。さらに、障害時の復旧目標を定めておきます。
MVPからの段階導入と指標の測定
1部門・1業務のMVPから始め、導入前後の効果を測定します。
- 測定：操作時間、入力完了率、差し戻し率、エラー率、初期表示、API応答、問い合わせ件数を導入前後で比較。
- 納品物：要件・画面・API設計書、テスト仕様と結果、ソースコード、CI/CD設定。
依存パッケージ一覧、操作マニュアル、障害対応手順も受け取ります。
更新方法を開発会社だけが把握している状態は避け、保守会社の変更や内製化の選択肢を残しておきます。
Preactの見積もりを取る際のポイント
見積もりの依頼前に、利用者、業務範囲、既存システムを整理します。さらに、必要データ、希望時期、セキュリティ要件も書き出します。複数社には、同じ条件と成果物を提示します。
要件と見積もり範囲の統一
要件と費用の範囲を統一し、各社を同じ条件で比べます。
- 要件：画面、利用者・権限、業務フロー、連携、移行、端末、時期、保守。
- 見積もり範囲：要件定義、設計、開発、インフラ、テスト、移行、教育、保守。
画面一覧には、空データや入力エラー、権限不足の時の動作を記載します。さらに、通信失敗や同時編集、CSVエラーの時の動作も記載します。
含まない項目も、開発会社に明示してもらいます。また、契約形態や仕様変更単価、検収の条件を確認します。追加費用、権利、納品範囲の扱いも見ておきます。
開発会社へ確認する質問
技術検証と運用責任の両面から、開発会社へ確認します。
- 技術経験：Preact・`preact/compat`の実装やテスト、利用予定のUI・表・チャート・認証部品の確認。
- 運用分担：API、認証、監査、バックアップ、脆弱性対応、障害連絡、更新責任。
React専用部品が動かない場合の代替案と費用も尋ねます。Preact実績が公開されていない場合は、ReactとTypeScriptの実績だけで判断せず、担当者がPoCを行えるかを確認します。
障害連絡時間、ブラウザのサポート期間、納品物、保守費も確認します。検証方法や品質基準、運用分担が具体的であれば、発注後の認識違いを減らせます。
低価格見積もりのリスク
低価格の理由を確かめ、費用範囲と性能の比較条件をそろえます。
- 費用範囲：要件定義、テスト、移行、保守、セキュリティの抜けを確認。
- 性能検証：軽量性を理由に試験を省かず、初期表示時間、JavaScript転送量、メモリ使用量、API応答時間、検索完了時間を測定。
総額は、API・DB・認証の費用と、監視・障害対応・教育の費用を含めて比べます。さらに、稼働後1年の保守費も見ます。
目標値と測定環境を決め、業務時間の短縮や離脱率の低下につながるかも確認すると、費用対効果を説明できます。
Preactのシステム開発費用を最適化するポイント
作る範囲を明確にし、既存資産を活用して手戻りを減らします。
将来の保守費を含めて、総額で考えます。
MVPと優先順位による範囲の絞り込み
初期開発の範囲を優先順位で決め、基盤要件は最初に定義します。
- MVPに含める：ログイン、検索、登録、承認、出力など、効果と利用頻度が高い業務経路。
- 段階化する：低頻度機能、画面装飾、高度な分析機能。
- 初期に定義する：セキュリティ、監査、バックアップ、権限、エラー処理。
後から組み込みにくい基盤要件を先に定義すれば、初期費用と将来の作り直しを抑えられます。
SaaS・パッケージ・既存APIの組み合わせ
標準的な業務では、SaaSやパッケージを比べ、不足する画面だけをPreactで追加する方法があります。
- SaaS中心：SaaS利用が中心なら初期費用0万〜100万円程度から。月額やユーザー数も比較。
- 追加開発・連携：パッケージ追加開発や連携は100万〜500万円程度から。移行や制限も確認。
- 既存資産：仕様、保守担当、性能、セキュリティを調査して再利用。
データ移行やカスタマイズ制限も確かめておきます。
既存認証やAPIを再利用できれば、画面開発に集中できます。ただし、古いAPIの仕様やデータの意味が不明なら、再利用の前に調査費が発生します。
保守しやすい標準化と自動化
開発方法を標準化し、CIで品質確認と繰り返し作業を自動化します。
- 標準化：TypeScript、Vite、ルーティング、フォーム、検証、エラー境界、テスト、ログ。
- 自動化：Lint、型・単体・E2Eテスト、依存パッケージの脆弱性確認。
ライブラリをばらばらに選ぶと、依存更新や担当交代のたびに調査費がかさみます。自動化には初期費用がかかりますが、手作業の確認や障害対応を減らし、年間保守費を抑えられます。
Preactや互換層の更新は、検証後に行います。
よくある質問
技術料だけでなく、必要な機能と運用条件も確認しておく必要があります。
見積もりの前によく聞かれる質問に、回答します。
Preactの利用料やライセンス費用はいくらですか？
PreactはMITライセンスのオープンソースUIライブラリで、基本ランタイムに専用利用料はかかりません。
開発人件費やクラウド、外部APIの料金がかかります。そのほか、監視、脆弱性対応、保守の費用もかかります。
有料の部品やSaaSは、各料金とライセンスを確認します。
PreactならReactより安く開発できますか？
必ず安くなるとは限りません。UI部品の調査や互換性検証には、費用がかかる場合があります。テスト環境の調整や人材確保でも、費用が増えることがあります。
既存のAPIや画面資産を活用でき、軽量化の効果を実測できる案件では、総額を抑えられる可能性があります。技術名だけで値引き率は決まりません。
Preactの業務システム開発には何か月かかりますか？
画面中心は2〜4か月、顧客・案件・在庫を扱う社内業務は4〜8か月が目安です。
複数部門や外部連携を含む標準的な業務システムは、6〜12か月です。
基幹連携、大量移行、複数拠点展開では、12か月以上になる場合があります。要件確定やレビュー、移行準備の遅れでも、期間は延びます。
Preact対応の開発会社は何を基準に選べばよいですか？
Preactや互換層、TypeScriptの検証に加えて、APIや認証、DBの設計を説明できる会社を選びます。業務フローやテスト、クラウド運用についても確かめます。
画面3枚とAPI1本、主要端末を対象にPoCを依頼します。そのうえで、互換性や性能、テストを確かめ、概算費用と保守担当も確認します。
まとめ
画面中心なら150万〜300万円、社内業務システムなら300万〜800万円、複数部門・連携・監査対応では800万〜1,500万円以上が目安です。
大規模な基幹連携や拠点展開では、1,500万円から数億円になります。ただし、これはPreact専用の公的統計ではなく、2026年時点の国内相場と構成をもとにした概算です。
技術料ではなくシステム総額での判断
Preactは軽量なUIの選択肢ですが、業務の成果は、業務ルールやデータ品質などで決まります。そのほか、API・認証認可・テストの品質も影響します。教育・運用の体制も、成果を左右します。
3kBだけで判断せず、初期費、クラウドや外部サービスの月額、年間保守を合計して比べます。将来の追加開発も見込みます。
画面とAPIの小さなPoCから始める見積もり
発注前に、代表画面とAPIで`preact/compat`とUI部品を確かめます。初期表示やAPI応答、認証を確認し、主要端末での操作性も見ます。
見積もりは、要件定義、設計、開発、テスト、移行、保守の工程ごとに分けて出してもらいます。対象外と追加費用の条件も合意し、予算と品質を管理します。
▼全体ガイドの記事
・Preactのシステム開発の完全ガイド
▼RFP作成前に読みたい無料ホワイトペーパー
・業務システム開発の完全ガイドブック
・スクラッチシステム開発の完全ガイドブック
・【2026年最新版】AI駆動開発の完全ガイドブック
会社紹介
株式会社riplaでは、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを、構想策定・要件定義から開発・改善まで一気通貫で支援。事業会社でIT・DXを経験したプロフェッショナルによる高い要件定義力・システム設計力を活かし、事業成果の最大化に伴走します。
また、当社独自の開発テンプレート「Boxシリーズ」による標準機能の高速開発と、AI駆動開発の独自フレームワーク「GoDD」による独自機能のAI実装を組み合わせることで、低コスト・短期間で開発を実現いたします。
もし、システム開発やプロダクト開発に関するご要望がございましたら、お気軽にお問い合わせください。
・サービス概要資料のURLはこちら >>>
・お問合せページのURLはこちら >>>
・お役立ち資料のURLはこちら >>>
株式会社ripla 代表取締役CEOとして、システムパッケージ活用、システム開発、データ分析、生成AI活用、SaaS開発、アプリ開発、EC構築など、幅広い領域で企業のDX推進と事業成長を支援している。事業会社でIT・DXを経験したプロフェッショナルが集う株式会社riplaにおいて、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを構想策定・要件定義から開発・改善まで一気通貫で支援し、単なるシステム納品にとどまらず、クライアントと同じ目線で事業成果の最大化に向けた伴走支援を行う。早稲田大学卒業後、ラクスル株式会社、LINEヤフー株式会社にて事業開発やDX推進などに従事した後、株式会社riplaを創業。