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

Preactのシステム開発費用は、画面中心の小規模開発で150万〜300万円、社内業務システムで300万〜800万円、複数部門や基幹連携を含む場合は800万〜1,500万円以上が目安です。Preact自体はMITライセンスの軽量なUIライブラリであるため、費用の中心はライセンス料ではなく、要件定義、API・データベース、認証、テスト、移行、保守に移ります。

「PreactならReactより小さいから安く作れる」と考えて見積もりを取ると、業務ルールや外部連携が増えた段階で予算を超えやすくなります。本記事では、Preactをフロントエンドに採用したWeb業務システムを前提に、費用相場、内訳、開発期間、価格が変動する要因、見積もりの見方、コストを抑える進め方をわかりやすく解説します。

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

Preactのシステムとは何ですか？

Preactのシステムとは、Preactをブラウザ画面のフロントエンドに採用し、別途用意したAPI、データベース、認証基盤などと組み合わせたWebシステムです。PreactはERPや販売管理ソフトそのものではなく、入力フォーム、一覧表、ダッシュボード、チャート、モーダルなどの画面と状態を担当する技術です。

Preactが担当するのは、ユーザーが操作する画面の表示と更新です。たとえば、顧客・商品・案件の検索、一覧・詳細・登録・編集、入力チェック、権限に応じたメニュー表示、通知、リアルタイム更新などを実装します。一方で、取引データの保存、請求計算、承認の最終判定、監査ログ、バックアップ、バッチ処理は、通常はバックエンドやデータベース側に実装します。

公式にはPreactは「Fast 3kB alternative to React」と説明されていますが、3kBは基本ランタイムの軽量性を示す目安であり、完成した業務システム全体の容量や開発費ではありません。画面部品、画像、フォント、API通信、認証処理、監視用コードなどが加わるため、導入効果は実際の端末とネットワークで測定する必要があります（出典: Preact公式、2026年8月閲覧）。

Preactが向いているのは、現場端末やモバイル回線で初期表示を軽くしたい管理画面、既存サイトに検索や予約だけを埋め込む構成、静的ページにインタラクティブな部品を追加する構成です。小さなフロントエンドを複数の業務画面へ展開する場合にも、必要な機能だけを読み込む設計と相性が良いです。

反対に、React専用のUIライブラリやプラグインを大量に利用する場合、社内のReact向け開発基盤をそのまま使うことが最優先の場合は、Reactのほうが総保有コストを抑えられることがあります。Preact公式の説明でも、`preact/compat`によってReactとの互換性を高められる一方、すべてのライブラリが無条件に動くわけではないため、採用前に主要部品をPoCで確認することが重要です。

Preactのシステム開発費用相場はいくらですか？

結論として、Preactを使った業務システムの開発費用は、画面だけなら150万〜300万円、社内業務を一通り扱うなら300万〜800万円、複数部門・外部サービス連携・監査対応まで含めると800万〜1,500万円が概算の目安です。基幹システムとの連携、大量データ移行、高可用性、複数拠点展開を含む場合は1,500万円から数億円まで広がります。

ログイン、権限に応じたメニュー、数種類の一覧・詳細画面、簡易な検索と既存API連携に絞る場合は、150万〜300万円が一つの出発点です。既存の認証、データベース、API、デザインシステムを利用でき、データ移行や複雑な承認フローがないことが前提です。開発期間は2〜4か月程度が目安ですが、要件定義や受け入れテストを省くという意味ではありません。

既存システムにPreactのウィジェットを追加するだけなら、50万〜200万円程度の小さな案件になる可能性があります。ただし、これは画面部品の追加を中心とした類似案件からの推定であり、APIの新規作成、権限設計、ブラウザ対応、リリース手順が増える場合はこの範囲を超えます。

顧客、商品、案件、在庫などのCRUD、CSV入出力、複数の権限、通知、複数API、基本的なテストと移行を含めると、300万〜800万円程度が目安になります。開発期間は4〜8か月程度です。画面数だけでなく、業務上の例外、登録できる条件、承認者の変更、重複データの扱いまで決める必要があるため、画面中心の案件より要件定義の比重が高くなります。

2026年公開の国内相場情報でも、業務システムは300万〜1,500万円、期間は4〜12か月という整理が見られます（出典: モカモコ株式会社「システム開発の費用相場完全ガイド 2026年版」、2026年）。Preact採用によってこの相場が一律に下がるわけではなく、画面の軽量化とバックエンド・業務設計の費用を分けて考えることが大切です。

複数部門の承認、会計・ERP・WMSとの連携、帳票、監査ログ、細かな権限、高い可用性、データ移行、操作教育まで含めると、800万〜1,500万円以上を見込む必要があります。大規模な基幹連携や拠点展開では1,500万円から数億円まで広がり、期間も12か月から数年になることがあります。

この価格帯では、Preactの選択よりも、既存データの品質、APIの接続先、障害時の復旧目標、同時利用者数、監査要件、移行リハーサルの回数が見積もりを左右します。フロントエンドを軽量にしても、業務停止を避けるためのテストや段階リリースを削ると、稼働後の追加費用が大きくなるため注意が必要です。

Preactのシステム開発費用の内訳は何ですか？

見積書では、Preactの実装費だけを探すのではなく、企画から運用までの工程を分けて確認します。費用の大小を判断するには、各項目に何人日が含まれるか、成果物は何か、変更時の扱いはどうかを確認することが有効です。

要件定義では、誰が、どの業務を、どの順番で行い、どのデータを正とするかを整理します。基本設計では画面遷移、権限マトリクス、API仕様、データモデル、エラー処理、運用方針を決めます。一般的な配分の目安では、要件定義10〜15％、基本設計15〜20％、詳細設計10〜15％程度とされますが、業務が複雑なほど上流工程の比率は高くなります。

Preact案件では、Reactとの互換性、テーブルやチャートなどのUI部品、フォームのバリデーション、SSRやハイドレーションの要否も設計段階で決めます。特に`preact/compat`を使う場合は、React向けライブラリの動作確認をPoCに含め、動かなかった場合の代替部品や追加工数まで見積もりに記載してもらうと安心です。

開発費の中心は、Preactの画面、API、データベース、認証認可、外部サービス連携を作る費用です。画面数が少なくても、検索条件、ページング、同時編集、添付ファイル、CSVの文字コード、タイムゾーン、入力エラーの表示などが増えると工数は増加します。

テストは単体テストだけでなく、APIと画面を組み合わせる結合テスト、実際の業務を通した総合テスト、権限別の受け入れテスト、主要ブラウザと端末の確認まで含めます。開発とテストを合わせて45〜60％程度という配分を仮置きできますが、個人情報や決済を扱う場合は脆弱性診断、負荷試験、復旧テストが別枠で必要になることがあります。

本番データのクレンジング、CSV変換、移行リハーサル、旧システムとの並行稼働、利用者教育、操作マニュアル作成は、初期見積もりから漏れやすい項目です。既存のExcelに表記揺れや重複がある場合、移行作業は単純なインポートでは終わらず、マスタ統合と確認会の費用が必要になります。

公開後は、クラウド利用料、監視、バックアップ、脆弱性対応、依存パッケージ更新、OSやブラウザの検証、問い合わせ対応が発生します。年間保守費は初期開発費の15〜20％程度を目安に置けますが、24時間監視や障害時の即時対応、継続的な機能改善を含める場合は別の料金体系になります（出典: 業務システム費用に関する国内公開相場、2026年）。

Preactの費用を左右する変動要因は何ですか？

同じPreactでも、必要な機能、接続先、利用者、データ量、品質要求が異なれば見積もりは大きく変わります。見積もりを比較するときは、安いかどうかだけでなく、どの条件を含んだ金額なのかをそろえて確認することが重要です。

ログイン画面が一つ増えるより、受注後に在庫を引き当て、承認後だけ出荷でき、会計側へ二重計上なく連携する仕組みのほうが費用に影響します。会計、ERP、WMS、決済、メール、チャットなどの外部サービスごとに認証方式、API制限、エラー時の再送、仕様変更への対応が必要です。

ユーザー数とデータ量も確認します。数十人の社内利用と、全国拠点の数千人が同時に利用するシステムでは、検索の設計、キャッシュ、負荷試験、監視、冗長化の要件が変わります。Preactで初期表示を軽くできても、APIの応答やデータベースの検索が遅ければ、利用者が感じる性能は改善しません。

個人情報、従業員情報、取引情報を扱う場合は、ログインだけでなく多要素認証、役割ごとの認可、操作履歴、退職者のアカウント停止、バックアップ、復旧手順まで考えます。認可判定をPreactの表示制御だけに任せると、APIを直接呼び出されたときに情報が漏れる可能性があるため、サーバー側でも必ず検証します。

入力値の検証、出力エスケープ、CSRF対策、Cookie属性、CSP、依存パッケージの脆弱性監視も費用に関わります。IPAの「安全なウェブサイトの作り方」ではXSSやCSRFの対策が整理されているため、見積もりではセキュリティレビューと修正の範囲を明示してもらうと、納品直前の追加費用を抑えやすくなります（出典: IPA「安全なウェブサイトの作り方」、2026年8月閲覧）。

`preact/compat`はReact APIとの互換層として利用できますが、Portal、Suspense、CSS-in-JS、テストツール、アクセシビリティ対応などは組み合わせによって検証が必要です。既存のReact資産を移行する場合、単純な別名設定で済むケースもあれば、UI部品の置き換え、イベント差異の修正、テストの書き換えが必要なケースもあります。

このため、Preactに触れた経験だけでなく、TypeScript、API設計、認証認可、クラウド、テスト、運用まで担当できる体制を確認します。AdyenではCheckoutやKYC向けSDKの開発にPreactを採用した事例が公開されていますが、これはSDKという特定用途の事例です。自社の業務システムにそのまま同じ費用や効果が当てはまるわけではないため、実案件では対象画面を使った性能PoCで判断します（出典: Adyen「Right tooling, Right Problem: Preact at Adyen」、2022年公開）。

Preactのシステム開発はどのように進めますか？

費用を正しく見積もるには、いきなり全機能を作り始めず、業務の棚卸し、技術PoC、段階的な開発を順に進めます。Preactの軽量性を検証しながら、業務データと運用の現実を設計に反映する流れが重要です。

まず、紙、Excel、メール、既存システムの二重入力を洗い出し、現場が実際に行っている業務を可視化します。理想的な手順だけでなく、差し戻し、例外処理、締め日の作業、担当者不在時の代替手順も確認します。データの表記揺れや重複を放置したままデジタル化すると、入力ミスが速く広がるだけになるため、マスタ整備も初期計画に含めます。

次に、代表画面を1〜3枚、APIを1本、主要端末を数種類に絞ったPoCを実施します。ログイン後の一覧表示、検索、登録、エラー表示、`preact/compat`で利用したい部品、ビルド後の転送量、初期表示、API応答を確認し、採用可否と追加費用を判断します。

典型的な構成は、Preact、TypeScript、Vite、必要に応じたSSRやSSG、RESTまたはGraphQL API、クラウド上の認証・データベース・ストレージ・監視の組み合わせです。社内管理画面なら認証後のSPAを中心にし、公開画面やSEOが必要な部分ではSSRやSSGを検討します。

設計書には、APIの入力・出力、エラーコード、権限、データ保持期間、同時利用者数、応答時間、バックアップ、復旧目標、障害時の切り戻しを記載します。画面の見た目だけで見積もりを依頼すると、後から非機能要件が追加されやすいため、業務側と開発側で完了条件を先に合意します。

最初から全社の全業務を置き換えるのではなく、1部門・1業務のMVPから始めます。操作時間、入力完了率、差し戻し率、エラー率、初期表示時間、API応答時間、問い合わせ件数を導入前後で測定すると、Preact採用の効果を感覚ではなく数字で判断できます。

納品時には、要件定義書、画面・API設計書、テスト仕様と結果、ソースコード、CI/CD設定、依存パッケージ一覧、操作マニュアル、障害対応手順を受け取ります。開発会社だけが更新方法を知っている状態を避けることで、保守会社の変更や内製化の選択肢を残せます。

Preactの見積もりを取る際のポイントは何ですか？

見積もりを依頼するときは、「Preactで業務システムを作りたい」と伝えるだけでなく、利用者、業務範囲、既存システム、必要なデータ、希望時期、セキュリティ要件を整理します。複数社から提案を受ける場合も、同じ前提条件と同じ成果物で比較することが大切です。

最低限、画面一覧、利用者と権限、業務フロー、外部連携先、データ移行の有無、対応ブラウザ・端末、目標時期、保守の希望をまとめます。画面一覧には、一覧と詳細だけでなく、空データ、入力エラー、権限不足、通信失敗、同時編集、CSVのエラー時の動作も書きます。

見積書では、要件定義、設計、フロントエンド、バックエンド、インフラ、テスト、移行、教育、リリース、保守を分け、含まない項目も明示してもらいます。準委任か請負か、仕様変更の単価、検収条件、追加費用が発生する条件、ソースコードと設計書の権利・納品範囲も確認します。

「Preactまたは`preact/compat`の実装・テスト経験はどのようなものですか」「今回使うUI、表、チャート、認証部品はPreactで動作確認済みですか」「React専用部品が動かなかった場合の代替案と費用は何ですか」と質問します。Preactの実績が公開されていない場合は、ReactとTypeScriptの実績だけで判断せず、実装担当者がPoCを行えるかを確認します。

さらに、API・認証・監査ログ・バックアップ・脆弱性対応をどこまで担当するか、障害時の連絡時間、依存パッケージの更新責任、ブラウザのサポート期間、納品物、保守費の計算方法を確認します。会社名や技術名よりも、担当者、検証方法、品質基準、運用分担が具体的に説明されるかを重視すると、発注後の認識違いを減らせます。

相場より極端に安い見積もりでは、要件定義、テスト、移行、保守、セキュリティのどれかが含まれていない可能性があります。画面を作る費用だけを比べず、API、データベース、認証、監視、障害対応、教育までを含めた総額と、稼働後1年の保守費を並べて比較します。

また、Preactの軽量性を理由に性能試験を省略しないことも重要です。計測対象を初期表示時間、JavaScript転送量、メモリ使用量、API応答時間、検索完了時間に分け、目標値と測定環境を決めます。性能改善の結果が業務時間の短縮や離脱率の低下につながるかまで確認すると、技術採用の費用対効果を説明しやすくなります。

Preactのシステム開発費用を最適化するポイント

コスト最適化は、単純に安い技術や会社を選ぶことではありません。作る範囲を明確にし、既存資産を活用し、手戻りを減らし、将来の保守費まで含めて総額を下げる考え方です。

最初から高機能なダッシュボード、複雑な帳票、全社の細かな例外処理まで作るのではなく、業務効果が大きく、利用頻度が高い流れをMVPにします。ログイン、検索、登録、承認、出力など、業務の主要経路を先に安定させ、低頻度の機能や便利機能は導入後の効果を見て追加します。

ただし、セキュリティ、監査、バックアップ、権限、エラー処理を「後で追加する機能」に分類しないことが重要です。後から組み込みにくい基盤要件を最初に定義し、画面の装飾や高度な分析機能を段階化することで、初期費用と将来の作り直しを抑えられます。

標準業務が中心なら、最初にSaaSやパッケージを比較し、不足する画面だけをPreactで追加する方法があります。初期費用は、既存SaaSの利用が中心なら0万〜100万円程度から、パッケージへの追加開発や連携がある場合は100万〜500万円程度から検討できますが、月額利用料、ユーザー数、データ移行、カスタマイズ制限を合わせて比較する必要があります。

既存の認証やAPIを再利用できれば、画面と連携の開発に集中できます。ただし、古いAPIの仕様が不明、データの意味が部署ごとに違う、変更時の影響範囲がわからない場合は、再利用による節約より調査費が先に発生することがあります。再利用する資産は、仕様、保守担当、性能、セキュリティを確認してから決めます。

TypeScript、Vite、ルーティング、フォーム、バリデーション、エラー境界、テーブル、テスト、ログの書き方をプロジェクト内で標準化します。画面ごとに異なるライブラリを増やすと、初期開発が速くても、依存パッケージの更新や担当者交代のたびに調査費が発生します。

CIでLint、型チェック、単体テスト、主要画面のE2Eテスト、依存パッケージの脆弱性確認を自動化します。自動化には初期費用がかかりますが、リリース前の手作業確認と障害対応を減らし、年間保守費の抑制につながります。Preactの更新やReact互換層の変更も、検証環境で安全に確認してから本番へ反映します。

よくある質問

Preactの費用を検討するときは、技術の利用料だけでなく、業務システムとして必要な機能と運用条件を確認することが大切です。ここでは、見積もり前によく寄せられる質問に回答します。

PreactはMITライセンスで公開されているオープンソースのUIライブラリであり、基本ランタイムに業務システム専用の利用料を支払う形ではありません。ただし、開発者の人件費、クラウド、外部API、監視、脆弱性対応、保守は必要です。React向けの有料部品やSaaSを組み合わせる場合は、それぞれの料金とライセンス条件を別に確認します。

必ず安くなるとは限りません。基本ランタイムが軽量でも、Preactで動くUI部品の調査、React互換性の検証、テスト環境の調整、採用できる人材の確保に費用がかかる場合があります。既存APIや画面資産を活用でき、軽量化の効果を実測できる案件では総額を抑えられる可能性がありますが、技術名だけで値引き率を決めないことが重要です。

画面中心の小規模開発は2〜4か月、顧客・案件・在庫などを扱う社内業務システムは4〜8か月、複数部門や外部連携を含む標準的な業務システムは6〜12か月が目安です。基幹連携、大量データ移行、複数拠点の展開では12か月以上になることがあります。要件の確定、利用者のレビュー、データ移行の準備が遅れると、技術選択に関係なく期間は延びます。

Preactの納品実績だけでなく、TypeScriptとReact互換層の検証、API・認証・データベース、業務フロー、テスト、クラウド運用まで一体で説明できる会社を選びます。画面3枚、API1本、主要端末を対象にしたPoCを依頼し、互換性、性能、テスト方法、概算費用、保守担当を具体的に示せるか確認すると比較しやすくなります。

まとめ

Preactのシステム開発費用は、画面中心なら150万〜300万円、社内業務システムなら300万〜800万円、複数部門・外部連携・監査対応を含むなら800万〜1,500万円以上が目安です。大規模な基幹連携や拠点展開では、1,500万円から数億円まで広がります。これらはPreact専用の公的統計ではなく、2026年時点の国内Web・業務システム相場と、Preactをフロントエンドに採用する場合の構成を組み合わせた概算レンジです。

Preactは軽量なUIを実現する選択肢ですが、業務改善の成果は、業務ルール、データ品質、API、認証認可、テスト、教育、運用によって決まります。3kBという特徴だけで費用を判断せず、初期開発費、クラウドや外部サービスの月額、年間保守、将来の追加開発を合計して比較します。

発注前は、代表画面とAPIを使って`preact/compat`の動作、UI部品の互換性、初期表示、API応答、認証、主要端末での操作性を確認します。そのうえで要件定義、設計、開発、テスト、移行、保守を分けた見積もりを取り、含まれない範囲と追加費用の条件まで合意すると、Preactのメリットを活かしながら予算と品質を管理しやすくなります。

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

会社紹介

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

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

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

株式会社riplaの会社HPはこちら

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

執筆者プロフィール

張田谷凌央

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