HTML5開発の納期は、画面数や機能、対応端末を決めてから、工程ごとに計画すると立てやすくなります。目安は小規模で1〜3か月、中規模で4〜9か月、大規模で10か月以上です。
規模別の期間と工程、機能が期間に与える影響、遅延対策を順に見ていきます。発注先の見積もりを読むときの判断材料になり、発注先選びや社内計画にも役立つ判断軸を確認できます。
▼全体ガイドの記事
・HTML5開発の完全ガイド
Webサービス開発の種類・工程・費用・会社選定までの全体像については、無料ホワイトペーパー「Webサービス開発の完全ガイドブック」で詳しく解説しています。
HTML5開発の開発期間の全体像
HTML5はマークアップ言語で、CSSやJavaScript、バックエンドと連携してフロントエンド開発を進めます。期間は単一ページか複数画面のWebアプリかによって大きく変わるため、サイトやアプリ全体の規模で捉えます。
標準的なWeb開発の期間は、小規模で1〜3か月、中規模で4〜9か月、大規模で10か月以上が目安です。費用の目安は、小規模で50万〜200万円、中規模で200万〜1,000万円、大規模で1,000万〜3,000万円です。超大規模は、期間が12か月超、費用が3,000万円以上が目安です。
規模ごとの案件の例を挙げると、小規模はLPや社内向けツール、中規模は業務システムや顧客向けWebアプリです。大規模は基幹系や複雑な外部連携を伴う案件で、超大規模はグローバル展開のプラットフォームです。
これらの数値は、HTML/CSS/JavaScriptを中心とした標準的なWeb開発を前提にしたものです。HTML5のマークアップは、その中の一工程として組み込まれます。
単純なコーポレートサイトのように、テキストや画像を中心にセマンティックなマークアップで組むなら、HTML5の構造化は素直に進みます。一方で、ブラウザ上のCanvas描画、video・audioのメディア体験、オフラインでも動くPWA（Progressive Web Apps）は、実装と検証の工数を増やします。
さらに、位置情報やカメラなどのデバイス連携は、実装と検証の工数を大きく増やします。期間は画面数だけでなく機能の範囲にも左右されるため、要件に含める機能を見積もりの段階で確認しておく必要があります。
規模別の開発期間と費用の目安
規模ごとの期間・体制・費用を並べて見ておくと、初期見積もりを読むときの前提になります。
- 小規模：期間1〜3か月、体制1〜2名、費用50万〜200万円程度
- 中規模：期間4〜9か月、体制4〜6名、費用200万〜1,000万円
- 大規模：期間10か月以上、費用1,000万〜3,000万円
小規模開発には、キャンペーンLPや会社案内サイト、5〜10画面程度の社内向けツールが該当します。作業は主に、HTML5とCSSで簡単なフォームやアニメーションを実装することです。
中規模は20〜50画面程度で、会員登録、権限管理、外部API連携を備えます。レスポンシブ対応や動画・地図も含み、PM、フロントエンド・バックエンドエンジニア、デザイナーで進めます。
大規模は、基幹システム連携やリアルタイム処理を伴い、PWA化やデザインシステム構築も含みます。期間と費用は初期の概算で、要件定義とデザインが確定した後に、正確な期間が決まります。
開発期間を左右する変数
同じ中規模でも、4か月で終わる案件と9か月かかる案件があります。その差を生む要因を把握しておくことが、現実的な計画を立てるうえで欠かせません。
- 機能：リッチコンテンツとデバイス連携の度合い
- 対応環境：対象ブラウザ、古いブラウザ、業務端末の範囲
- 画面設計：ブレークポイント数とレイアウトの複雑さ
- 意思決定：デザイン確定やレビュー・承認の速度
テキスト・画像中心ならマークアップは進めやすい一方、Canvas描画ツールや動画演出は実装と検証を増やします。PWAのオフライン対応やGeolocation、カメラなどを加えるほど、開発に時間がかかります。
最新ブラウザだけを対象にするか、古いブラウザや業務端末まで含めるかで、機能ごとの互換対応とフォールバックの工数が変わります。
PC、タブレット、スマートフォンでレイアウトが大きく変わる場合は、各画面の崩れ確認が増えます。また、発注側のレビューや承認が遅れると、実装が待ち状態になります。
見積もりの段階で遅延要因を確認し、楽観的すぎない期間を設定しておくことが、遅延予防につながります。
工程別スケジュールと期間配分
期間を正しく見積もるには、全体を工程に分けて、工程ごとに必要な週数を把握することが欠かせません。ここでは、中規模の約6か月（24週、10〜15人月）で進むウォーターフォール型開発を例に、配分を見ていきます。
標準配分は、要件定義が約15%、設計が約25%、実装が約35%です。テストは約15%、リリース準備・受入テストは約10%です。
設計には、UI/UXデザインと情報構造・セマンティクスの設計が入ります。実装には、HTMLマークアップ、スタイリング、スクリプティングが入ります。
配分を知っておくと、各社の見積もりスケジュールが妥当かどうかを判断しやすくなります。たとえば、見積もりで実装が全体の6割を占めている場合は、設計やデザインの確定が軽く扱われていないかを確認します。設計が薄いと、後工程で手戻りする可能性があるからです。
要件定義・デザインフェーズ（約10週・40%）
開発の成否を大きく左右するのが、要件定義とデザインのフェーズです。24週の案件では、要件定義に約4週、UI/UXデザインと情報構造・マークアップ設計に約6週を配分します。合計で約10週（40%）が目安です。
要件定義では、画面要件、対応端末・ブラウザ、アクセシビリティの要求水準を決めます。WCAGのどのレベルを満たすかは、この段階で定めておく必要があります。
- 機能要件：動画やCanvasなどのリッチコンテンツ、PWA化の要否
- 非機能要件：パフォーマンスと表示速度
- 情報構造：画面要件とセマンティック要素の割り当て
デザインでは、FigmaやAdobe XDでワイヤーフレームとデザインカンプを作ります。加えて、header・nav・main・article・section・footerの使い分けも設計します。
よくある失敗は、デザインと情報構造が固まらないまま実装に着手することです。構造が二転三転すると、マークアップとCSSを大幅に書き直すことになり、全体の期間が延びます。一方で、セマンティクスを丁寧に設計すると、SEOやアクセシビリティへの対応を後から付け足さずに済み、手戻りも減らせます。
デザインカンプを確定したうえで、作る範囲と除外項目を明記します。仕様変更が起きたら、まず影響範囲を調べ、工数と費用を見積もります。そのうえで承認を得てから、実施に進みます。
変更管理（Change Request）の手順を契約に組み込んでおくと、納期を守るうえで大きな予防策になります。
マークアップ・実装フェーズ（約8週・35%）
デザインと情報構造が確定したら、実装に移ります。中規模の案件では、約8週（35%）を割り当てます。
- 基本実装：HTML5の構造、CSSのスタイリング、JavaScriptの動的処理
- 共通部品：ボタン、フォーム、カード、ナビゲーション、テーブル
- 標準要素：video、audio、Canvas、picture（レスポンシブ画像）
共通部品を再利用可能なコンポーネントにしておくと、同じマークアップとスタイルを何度も書く手間が省けます。その結果、UI実装の工数を2〜3割削減できます。
HTML5の標準要素を使えば、従来はプラグインや外部ライブラリで実装していた機能をブラウザの標準機能で実現でき、依存関係も減らせます。
位置情報、通知、オフライン動作などのWeb標準APIでは、ブラウザごとの対応と許可に関するエラー処理が必要です。そのため、機能ごとに1〜2週間程度の追加を見込みます。
実装は全体の約3分の1を占めます。実装の生産性とリッチ機能の量が、プロジェクト全体の期間を左右します。
テスト・リリースフェーズ（約6週・25%）
テストに約4週（15%）、リリース準備と受入テスト（UAT）に約2週（10%）を割り当てます。
- ブラウザ・端末：主要ブラウザとiOS・Androidの表示や動作
- レスポンシブ：複数端末と画面幅での表示崩れ
- アクセシビリティ：ランドマーク、読み上げ、キーボード操作、コントラスト比
一般的な機能テストに加えて、Chrome、Safari、Edge、Firefoxなどでの表示と動作を確かめます。iOSとAndroidのモバイルブラウザも対象です。
video要素は、ブラウザやOSによって対応コーデックと自動再生の扱いが異なります。アクセシビリティの要件がある場合は、セマンティック要素の機能も確認します。
リリース準備では、本番デプロイ手順、UATの最終確認、HTML/CSS/JSのビルド・圧縮（minify）などを行います。
クロスブラウザとレスポンシブの確認を削ると、公開後に動画が再生できない、レイアウトが崩れるなどの問題が起きます。結果として、総コストと総期間が膨らみます。
テストとリリースに全体の約25%を確保することが、品質と納期を両立する目安です。
HTML5固有機能が開発期間に与える影響
HTML5は、ページの骨組みを超えて、リッチコンテンツやネイティブアプリに近い体験を実現します。そのため、期間を縮める面と延ばす面を理解し、要件に応じて機能を選ぶことが、納期を計画する出発点になります。開発期間に影響するHTML5の機能を、短縮要因と増加要因の両面から見ていきます。
セマンティックHTMLとWeb標準APIによる短縮
HTML5には、開発期間を短縮する方向に働く要素もあります。まず挙げられるのは、セマンティックなマークアップです。
- セマンティックHTML：ページ構造を明確にし、SEOやアクセシビリティを初期から考慮
- Web標準API：複数ランタイムで動くコードにより、将来の移行作業を軽減
- UI生成ツール：初期UIやMVPの立ち上げを短縮
header・nav・main・article・section・footerなどを使うと、divやspanだけの場合よりコードを読みやすくできます。そのため、複数人での実装や後工程の修正が進めやすくなり、手戻りも減ります。
第二の要素は、Web標準APIを基にしたフレームワークです。Honoのようなフレームワークを使うと、Node.js、Deno、Bun、Cloudflare Workersなどの環境で同じコードを動かせます。その結果、将来のインフラを移す際に書き直す工数が減り、中長期の運用スケジュールも縮められます。
第三の要素は、標準CSSやユーティリティCSS、生成AIによるUI構築です。たとえば、Vercelのv0やLovableは、自然言語からHTML5の土台を数分で生成できます。これらを組み合わせると、とくに立ち上げ期の開発スピードを高められます。
Canvas・動画・PWAによる期間増の要因
一方で、HTML5のリッチ機能は期間を延ばす場合があります。代表例は、Canvasによる高度な描画です。
- Canvas：描画、性能調整、メモリ管理、端末ごとの表示確認
- 動画・音声：連動演出、複数コーデック、字幕、再生制御UI
- PWA：Service Worker、キャッシュ、通知、マニフェストの設計
- デバイス連携：ブラウザ対応と許可まわりのエラー処理
Canvasは単純な図形なら短時間で済みます。画像加工ツールやデータ可視化、ゲーム表現のように作り込むと、実装とテストが数週間から1か月以上長引くことがあります。
video・audioも、単純な埋め込みなら短時間で済みます。ただし、再生に連動した演出や複数コーデック対応を加えると、字幕や独自UIも含めて工数が増えます。
PWAでは、オフライン時に許可する操作を要件定義で決めておく必要があります。実装とテストを含めると、1〜2か月程度の追加期間が目安になります。
Geolocation（位置情報）やWeb Bluetoothでは、ブラウザ対応と許可まわりのエラー処理が必要になり、機能ごとに1〜2週間程度、期間が延びる要因になります。要件定義の段階で必要性を検討し、フェーズを分けて段階的に実装できるかを確認します。
納期遅延の典型要因と対策
納期遅延は、綿密に計画しても完全にはなくせません。そのため、典型要因を把握し、対策を契約や進捗管理に組み込んでおく必要があります。
HTML5を含むフロントエンド開発では、デザインや情報構造の確定遅れ、リファクタリング、ブラウザ互換対応が遅延要因になり、それぞれに具体的な対策が必要です。
スコープの曖昧さとリファクタリングの同時進行
デザインや情報構造が決まらないまま、開発範囲も曖昧な状態で進めると、手戻りが増えます。実装中の変更は、そのまま遅延につながります。
- 構造を確定：着手前にデザインカンプと情報構造を承認
- 範囲を明記：作る内容と除外項目を要件定義書に記載
- 変更を管理：影響調査、工数・費用見積もり、承認後に実施
構造が未確定のままだと、画面構成や動画・インタラクションの変更が終盤まで続き、既存のマークアップとCSSを大幅に書き直すことになります。
対策としては、デザインと情報構造を関係者全員でレビューして承認し、作る内容と除外項目を要件定義書に明示することが必要です。さらに、変更管理の手順を契約に組み込んでおくことが、納期を守るうえで大きな予防策になります。
既存のJavaScriptコードをTypeScriptへ移す際に、リファクタリングを並行して進めると、バグの原因を切り分けにくくなります。その結果、テストが終わらず、スケジュールが崩れる場合もあります。
まず型付けに専念し、リファクタリングは後回しにします。作業ごとに目的を一つに絞ると、進捗を把握しやすくなります。
ブラウザ互換と進捗管理・バッファ確保
第二の遅延要因は、ブラウザや端末の互換対応に想定以上の時間がかかることです。
- 対応範囲：ブラウザ・端末とサポート対象外の環境
- 代替動作：API未対応ブラウザでのフォールバック範囲
- 進捗管理：クリティカルパスの洗い出しと週次・月次報告
- 予備期間：全体工数の10%程度のバッファ
最新ブラウザで動いても、古い版や業務端末ではvideo再生やCanvas描画、PWAに問題が起きる場合があります。その修正には、時間がかかることも珍しくありません。
範囲を曖昧にしたまま「全部対応」を求めると、検証と修正の工数が増え続けます。新しいWeb標準APIを使うときは、未対応のブラウザで代わりにどう動かすかを、着手前に決めておきます。
第三の遅延要因は、進捗管理の甘さとリスク対策の不足です。ガントチャートやJIRAで、クリティカルパスを追えるようにします。
Canvasや動画、PWAのように、ブラウザ対応を含めて想定外の時間がかかりやすい箇所があります。そのため、バッファのない計画は、小さな想定外でも崩れます。
契約に遅延時のペナルティ条項を設けると、開発会社側にスケジュールを守る動機が働きます。対策を組み合わせて、遅延リスクを管理します。
まとめ
HTML5を含むフロントエンド開発の期間は、小規模で1〜3か月、中規模で4〜9か月、大規模で10か月以上が目安です。工程の配分は、中規模の例（24週）で見ると、要件定義と設計が約10週（40%）、実装が約8週（35%）、テストとリリースが約6週（25%）です。
画面数やリッチ機能、デバイス連携が期間を左右します。加えて、対応ブラウザやレスポンシブの複雑さも影響します。デザインと情報構造を確定してから実装すると、手戻りを防ぎやすくなります。
セマンティックHTMLやWeb標準API、生成AIによるUI生成は、開発を速める場合があります。一方で、Canvasの高度な描画や動画の作り込み、PWA化は期間を延ばすため、要件定義の段階で段階的な実装を検討します。
納期を守るには、スコープと変更管理を明確にし、ブラウザ対応の範囲を決めたうえで、10%のバッファを確保します。さらに、進捗を追える形にしておきます。
具体的なスケジュールの相談は、複数の開発会社に要件の概要とデザインの方向性を示し、見積もりを取ることから始めます。
▼全体ガイドの記事
・HTML5開発の完全ガイド
▼開発を相談する前に読みたい無料ホワイトペーパー
・Webサービス開発の完全ガイドブック
・【2026年最新版】AI駆動開発の完全ガイドブック
会社紹介
株式会社riplaでは、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを、構想策定・要件定義から開発・改善まで一気通貫で支援。事業会社でIT・DXを経験したプロフェッショナルによる高い要件定義力・システム設計力を活かし、事業成果の最大化に伴走します。
また、当社独自の開発テンプレート「Boxシリーズ」による標準機能の高速開発と、AI駆動開発の独自フレームワーク「GoDD」による独自機能のAI実装を組み合わせることで、低コスト・短期間で開発を実現いたします。
もし、システム開発やプロダクト開発に関するご要望がございましたら、お気軽にお問い合わせください。
・サービス概要資料のURLはこちら >>>
・お問合せページのURLはこちら >>>
・お役立ち資料のURLはこちら >>>
株式会社ripla 代表取締役CEOとして、システムパッケージ活用、システム開発、データ分析、生成AI活用、SaaS開発、アプリ開発、EC構築など、幅広い領域で企業のDX推進と事業成長を支援している。事業会社でIT・DXを経験したプロフェッショナルが集う株式会社riplaにおいて、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを構想策定・要件定義から開発・改善まで一気通貫で支援し、単なるシステム納品にとどまらず、クライアントと同じ目線で事業成果の最大化に向けた伴走支援を行う。早稲田大学卒業後、ラクスル株式会社、LINEヤフー株式会社にて事業開発やDX推進などに従事した後、株式会社riplaを創業。