Stencilのシステム開発費用は、部品数、接続するアプリ数、対応フレームワーク、移行範囲によって、100万円〜8,000万円超まで変わります。
費用を左右する範囲と相場の内訳、見積もり時の確認点を順に見ていきます。
▼全体ガイドの記事
・Stencilのシステム開発の完全ガイド
・業務システム開発を依頼する会社の選び方やRFPの作り方については、無料ホワイトペーパー「業務システム開発の完全ガイドブック」で詳しく解説しています。
・スクラッチシステム開発を依頼する会社の選び方やRFPの作り方については、無料ホワイトペーパー「スクラッチシステム開発の完全ガイドブック」で詳しく解説しています。
Stencilのシステム開発費用を左右する全体像
開発費用は、フロントエンド部品と業務システム本体を分けて考えます。Stencilは、複数画面や異なるフレームワークで使うUI基盤であり、バックエンドやデータベース、認証、業務APIを一式で提供する製品ではありません。
Stencilで作る共通UI基盤の範囲
UI基盤の役割と業務システム本体に残る範囲を分けると、開発対象がはっきりします。
- 部品の実装：ボタン、入力フォーム、テーブル、ダイアログ、タブ、ナビゲーションをTypeScript、JSX、CSSで作成
- ビルド形式：標準仕様のCustom Elementsとしてビルド
- 利用先：React、Angular、Vue、フレームワークを使わないHTML
StencilはWeb Componentsやライブラリのコンパイラで、デザインシステムやアプリも作れます（出典: Stencil公式Introduction、2026年閲覧）。
ただし、顧客情報や受発注データを扱い、権限管理や外部APIを含む業務システムを新規に開発する場合は、バックエンドやインフラの予算も必要です。一方で、ReactとAngularが混在する社内システムでは、部品を再利用して重複開発を減らせる可能性があります。
費用を左右する利用範囲と運用設計
同じ部品数でも、利用先や品質基準が違えば、必要な設計と検証の工数は変わります。
- 利用範囲：部品数、対象アプリ数、対応フレームワーク
- 設計範囲：デザインの統一度、Figma連携、運用設計
- 品質と移行：テストの深さ、既存画面の移行量
同じ20部品でも、新規アプリ1つへ接続する場合と、既存アプリ5つへ段階的に移行する場合では工数が違います。後者は、各チームのリリース支援も必要になります。
費用は、見た目の標準化に加え、キーボード操作・フォーカスやARIA、エラー表示、レスポンシブ仕様をどこまで揃えるかでも変わります。また、見積もりはボタン数だけでなく、利用チーム数と利用年数という運用単位で行います。
Stencilのシステム開発の進め方
Stencilの開発は、共通化する範囲と、どこまでを誰が受け持つかを決めます。そのうえで、小さく検証してから部品を増やします。業務ルールとデザインの差分を先に洗い出しておくと、例外の要求で部品が複雑になるのを防げます。
要件定義で決める共通化の業務画面と対象チーム
既存画面を洗い出し、重複する部品、ブランドごとに変える部分、業務上変えない部分に分けます。あわせて、対象ブラウザやスマートフォン対応、表示速度を決め、アクセシビリティ基準も定めます。
対応するReact、Angular、Vueのバージョンも定めます。Stencilと既存アプリ、バックエンドの責任範囲を文書にしておくと、認証やAPIもStencilに含まれるという誤解を防げます。
コンポーネントの責務やイベント、slotは一覧にします。入力値とエラー表示のルールも、同じ一覧に含めます。特に、要件が曖昧だと後工程で作り直しが起こり、費用と期間が膨らみます。
設計と実装で先に固めるデザイントークンとAPI
設計と実装では、デザインの共通ルール、部品の仕様、接続方式を先に決めておきます。
- デザイントークン：カラー、余白、文字サイズ、角丸、影を定義
- 業務部品：日付入力、金額表示、一覧テーブル、バリデーションを開発者・デザイナー・利用者で仕様化
- 実装方式：Shadow DOMか既存CSSとの共存かを選び、Output Targetを確認
Figmaのデザインとコードを早めに対応させておくのは、部品名やプロパティを後から変えると複数アプリの修正が必要になるためです。
StencilはReactやAngular向けのOutput Targetを提供しており、出力先にはWebサイト、npm配布用部品、Custom Elementsがあります（出典: Stencil公式Output Targets、2026年閲覧）。
出力方式の変更は組み込みやビルド設定に影響するため、PoCで確かめてから決めます。
テストと段階移行による業務への影響の抑え方
品質確認と段階移行は、業務への影響を抑えるため、次の順で進めます。
- 機能テスト：単体、E2E、視覚回帰、主要ブラウザの表示を確認
- 操作確認：キーボード、スクリーンリーダー、フォーカス、エラー文言を検証
操作の違いは、そのまま入力ミスにつながります。そのため、機能要件と非機能要件も同じリリース基準で扱います。
- 利用頻度が高く差分の少ない部品から選び、1画面または1業務で試験導入
- 旧部品とStencil部品を一定期間共存させ、業務を止めずに効果を検証
- 表示速度、障害件数、再利用率、問い合わせ件数を本番展開の条件とする
Stencilの費用相場とコストの内訳
Stencilのツール利用料は基本的に0円ですが、開発プロジェクト全体が無料になるわけではありません。ここに挙げる金額は、2026年の一般的なWebシステム相場と、共通UI基盤の作業量から推定したものです。
Stencil固有の公式価格表ではないため、同じ要件を示したうえで、複数社から見積もりを取ってください。
PoCは100万〜300万円、小〜中規模は500万〜1,500万円の目安
費用の目安は、部品数と接続するアプリ数によって次のように変わります。
- PoC：5〜10部品をReactなどのアプリ1つに接続し簡易テスト。100万〜300万円
- 小〜中規模：15〜40部品を2〜3アプリに展開。500万〜1,500万円
PoCは1〜2か月、小〜中規模は3〜6か月が目安です。ただし、業務データ連携や本番相当のセキュリティ検証を含めると、PoC費用が増える可能性があります。
UIの洗い出しやデザイントークン、Storybookなどの文書まで含めると、部品実装だけの場合より工数が増えます。
複数チーム向けは1,500万〜8,000万円超になる場合
複数チーム向けの費用は、部品数と既存環境の刷新範囲で変わります。
- 共通基盤：40〜100部品を複数チーム・複数フレームワークで利用。1,500万〜4,000万円
- 大規模刷新：多ブランド、レガシー刷新、多数の既存アプリ移行。3,000万〜8,000万円超の場合あり
共通基盤の期間は6〜12か月程度です。費用に影響する作業として、Figma連携、ラッパー生成、アクセシビリティがあります。さらに、性能検証、視覚回帰テスト、採用支援も挙げられます。
一般的な国内相場では、小規模で100万〜300万円、大規模で800万円〜数千万円以上とされます。
要件定義の精度によっては、見積もりが倍以上動く場合もあります（出典: イー・ジーシステム「システム開発の費用相場と見積書の読み方 2026年版」、2026年）。
Stencil案件の予算は、一般的な相場に、共通UIの設計、移行、ガバナンスの費用を加えて検討します。
見積書で設計・開発・移行・保守を分けた内訳
見積書は工程ごとに分け、作業内容と納品物を照合できる形にします。
- 分析・設計：現状分析、要件定義、UI・デザインシステム設計
- 実装・品質：Stencil実装、文書整備、テスト
- 導入：各アプリへの組み込み、リリース支援
2026年の公開相場では、人月単価は60万〜200万円程度です。
単価はPM、テックリード、デザイナーのほか、フロントエンドエンジニアやQAなど役割によって変わります（出典: SIA「システム開発の費用・相場 2026年版」、2026年）。
単価だけでなく、工程ごとの人月数と納品物も照合します。初期費用以外にも、private npm、CI/CD、クラウドの費用や、Figma有料プランの費用が発生します。さらに、監視、脆弱性対応、ブラウザ検証の費用に加え、問い合わせ対応もかかります。
保守費用は、初期開発費の年10〜20％程度とする一般例がありますが、Stencil固有の定価ではありません。利用チーム数やリリース頻度を見て、SLAと夜間対応の有無を決めます。そのうえで、月額または年額の範囲を定めます。
バックエンド・データ移行・セキュリティの別枠費用
StencilのUI基盤だけで予算を組むと、業務システム本体の費用が抜けてしまいます。そのため、別枠にする主な項目を分けて見積もります。
- システム本体：バックエンドAPI、データベース、認証・権限、SSO、ログ監査、クラウド
- データ・連携：データ移行、外部サービス連携
- セキュリティ：個人情報保護、外部診断、SBOM作成
データ移行費は、件数、形式のばらつき、クレンジングの有無で変わります。公開相場では、100万円〜1,000万円以上となるケースもあります。
個人情報を扱う場合は、要件にアクセス制御や監査ログ、秘密情報の分離を含めます。さらに、依存パッケージの脆弱性監視、バックアップ、復旧訓練も要件に加えます。
外部診断やSBOM作成では、担当者、対象、環境をはっきりさせます。また、開発費に含むか別発注かを確かめ、「セキュリティ対応一式」の作業内容も具体的にします。
Stencilの見積もりを取る際のポイント
各社の提案を比べるには、同じ条件で伝えることが大切です。「Stencilで画面を作る」という依頼では、提案の前提がそろわず比べにくくなります。共通部品や利用アプリ、フレームワークに加え、納品物と移行範囲も示します。
発注前の仕様書に書く部品数と対象範囲
仕様書には部品一覧に加えて、部品ごとの状態や入力ルール、エラー表示を書きます。たとえば「ボタン」なら、無効やローディング、エラーなどの状態を数えます。さらに、キーボード操作やレスポンシブ対応、対象ブラウザを記載し、デザイン差分も示します。
接続先のReact、Angular、Vueを示し、対象アプリ数と既存画面の置換範囲も書きます。さらに、FigmaやStorybookの担当者、private npmの運用主体も記載します。
納品物はソースコードのほか、仕様書、利用例、テストコードも指定します。CI設定とCHANGELOGに加えて、リリース手順や依存関係一覧も含めると、社内で運用しやすくなります。
複数社の比較で見る納品物と体制
同じRFPでも、設計やテストの範囲、既存移行の経験によって見積額は変わります。
- 見積条件：3社程度の初期費用、期間、体制、前提、除外、保守費用
- 開発実績：StencilJS、Web Components、複数フレームワーク、デザインシステム
- 品質・移行：アクセシビリティテスト、既存システム移行
設計やテストが見積もりに含まれていない場合、発注後に追加費用が発生することがあります。一方で、移行支援や教育、SLA、脆弱性対応まで含めた提案もあります。
Ionicは、Stencil Enterpriseで、サポートや助言、優先修正、SLAなどを提供すると説明しています。
公開の一律価格はなく、個別相談が前提です。そこで、OSSのみで自社保守する案と、公式支援を含む案を分けて比べます。
コストを抑える共通化の範囲と品質基準
全社の全部品を一度に移行せず、利用頻度が高く差分の少ない部品から始めます。たとえば、ボタンや入力欄、通知、テーブルなどです。そのうえで、PoCで再利用性と開発体験を確かめ、効果が見えた部品だけを正式な共通ライブラリに加えます。
コスト削減を理由にテストや文書を削ると、チーム増加後の問い合わせや改修費が増えます。そこで、セマンティックバージョニングや破壊的変更のルールを決め、承認者と廃止手順も決めておきます。
変更の影響を抑えることは、長期的な節約につながります。また、各アプリに独自の例外を加えず、共通部品へ戻す申請ルールも有効です。
段階導入と内製化による保守体制
将来の保守を外注し続けないため、初期から社内の役割と更新予算を整えます。
- 社内参加：エンジニア、デザイナー、プロダクト責任者が初期から参画
- 技術移管：専門家が少ない場合、最初の数か月は伴走支援を契約
- 更新予算：初期開発費だけでなく毎年の枠を設け、初期費用の一定割合を保守・改善に充てる
社内で設計レビュー、リリース判定、問い合わせ対応を経験すると、契約終了後の小さな修正を外注し続けずに済みます。
Stencil本体やNode.js、ブラウザ、npm依存パッケージを更新します。脆弱性対応、アクセシビリティ再検証、メジャー更新にも備えます。
Enterprise支援は、自社保守に必要な人員と障害対応時間を算出してから比較します。
Stencilのシステム開発でよくある質問
Stencilを採用する際は、技術選定に加えて、予算や移行、保守体制も検討します。発注前によく聞かれる費用と運用について、ここで回答します。
Stencilは無料なので開発費も無料ですか？
いいえ。Stencilの利用料は基本的に0円ですが、開発費や運用費は発生します。UI設計や部品実装、アプリへの組み込みに加え、テストや文書の作成も人件費の対象です。さらに、脆弱性対応や問い合わせ対応にも人件費がかかります。
OSS利用料とプロジェクトの総費用を分けて見積もってください。
Stencilだけで受発注や顧客管理の業務システムを作れますか？
Stencilは、画面部品やデザインシステムに適した基盤で、業務システム全体を作るものではありません。データベースやAPI、認証と権限、業務ロジックは、別途構築します。
フロントエンド基盤として使う範囲を明確にし、業務システム本体の費用を別に計上してください。
小規模な画面でもStencilを導入する価値はありますか？
小さな画面を1つだけ作り、今後も再利用しないのであれば、ReactやVueの単体で作るほうが合理的な場合があります。
複数アプリへの配布を予定し、ReactとAngularなど異なる環境をまたぐ場合は、PoCで再利用性を確かめる価値があります。
発注側は、100万〜300万円程度のPoCを上限として、採用判断に必要な成果を先に定めます。
運用保守費用は毎年どのくらい見ておけばよいですか？
一般例では、初期開発費の年10〜20％程度を保守・改善費用として見ておきます。実額は、部品数や利用チーム数、リリース頻度によって変わり、対応時間や脆弱性対応の責任範囲でも変わります。
依存パッケージ更新だけにするか、問い合わせや追加部品まで含めるかを、契約書で分けてください。障害対応やメジャー更新を含むかどうかも、あわせて決めておきます。
まとめ
Stencilの開発費用は、利用料ではなく、共通UI基盤の設計、複数アプリへの展開、運用の総額で考えます。推定の幅は、PoCが100万〜300万円、小〜中規模が500万〜1,500万円です。
複数チーム向けの基盤は1,500万〜4,000万円、エンタープライズ級は3,000万〜8,000万円超です。
Stencil導入の予算の組み方
要件定義やデザイントークン、フレームワーク連携は、項目ごとに分けて確認します。さらに、テストと移行、文書と教育、保守も、それぞれ別の項目として確かめます。
バックエンドやAPI、認証、データ移行は別枠にします。クラウドやセキュリティ診断も、別枠として扱います。対象範囲を明記すると、発注後の追加請求を抑えやすくなります。
小さなPoCと同じ条件の相見積もり
適性に迷う場合は、5〜10部品と1アプリでPoCを行い、表示性能や既存CSSとの共存を検証します。さらに、React・Angularなどへの接続やテスト方法も確かめます。
結果をもとに、部品数やアプリ数、移行計画を見直します。運用体制も見直し対象に含めます。同じRFPで複数社に依頼すると、費用と技術リスクを比べられます。
▼全体ガイドの記事
・Stencilのシステム開発の完全ガイド
▼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を創業。