HTML5開発は、要件定義・企画、設計・開発、テスト・リリースの3フェーズで進めます。対応範囲と品質基準を先に決めておくと、進めやすくなります。
W3Techsの2025年調査では、世界のWebサイトの98.5%以上がHTML5を採用しています。詳しくは、下の全体ガイドの記事をご覧ください。
▼全体ガイドの記事
・HTML5開発の完全ガイド
Webサービス開発の工程ごとの進め方と注意点については、無料ホワイトペーパー「Webサービス開発の完全ガイドブック」で詳しく解説しています。
HTML5開発の全体像
HTML5とは、Webページの構造とコンテンツを定義するマークアップ言語HTMLの第5世代仕様です。2014年にW3Cによって正式勧告されて以来、Web開発の標準技術として確固たる地位を築いてきました。
HTML4やXHTMLから進化し、header、nav、article、sectionなどのセマンティック要素で文書構造を定義できるようになりました。videoタグやaudioタグでメディアを再生でき、Canvas APIやWebGL APIで描画もできます。さらに、Geolocation APIやWeb Storage API、picture要素、srcset属性も使えます。
プロジェクトを正しく進めるには、まずこの技術の全体像と開発プロジェクトの種類を把握しておくことが大切です。
HTML5の主要機能と活用領域
構造、メディア、Web APIを一体で扱えるのが、この技術の強みです。
- セマンティック要素：SEOと支援技術に役立つ
- メディア：videoやaudioを標準機能で扱う
- Web API：CanvasやWeb Storageを使える
Web開発の中核技術として重要視されるのは、豊富な機能群と幅広い対応領域があるためです。
意味を持つ要素名を使うため、クローラーが構造を理解し、スクリーンリーダーにも意味が伝わります。
まず、header、footer、nav、main、article、sectionを使い分けます。Googleの公式ドキュメントでは、セマンティックHTMLの使用がクローリングの効率化に寄与することが示されています。
次に、マルチメディア対応もHTML5の大きな強みです。videoタグとaudioタグにより、Adobe Flashなどの外部プラグインを使わずにブラウザ上で直接動画や音声を再生できるようになりました。特に、Flashのサポートが2020年末に完全終了して以降は、HTML5が動画コンテンツ配信における唯一の標準技術となっています。
Canvas APIとWebGLで2D、3Dの表示を作れます。また、ゲーム開発やデータビジュアライゼーションにも使われています。
Web StorageはlocalStorageとsessionStorageを扱い、Cookieの4KBを超える5MB以上のデータを保存できます。さらに、オフライン対応のWebアプリケーションにも役立ちます。Service Workerと組み合わせると、PWA（Progressive Web App）にでき、ネイティブアプリに近い体験を提供できます。
HTML5開発プロジェクトの種類と特徴
目的に応じて、サイト、移行、アプリ、ハイブリッドに分かれます。
- 新規構築：情報設計から一貫して作る
- モダナイズ：HTML4やXHTMLから移行する
- アプリ化：SPA、PWA、ネイティブ連携を選ぶ
HTML5開発プロジェクトは、目的や規模で分類できます。
第一に、コーポレートサイトやサービスサイトを新規に構築するプロジェクトがあります。
企業サイトからSaaSプロダクトのランディングページまで対応し、HTML5、CSS3、JavaScriptでフロントエンドを新規に作ります。情報アーキテクチャとHTMLの構造を設計したうえで、CSS3やJavaScriptフレームワークとの連携も決めます。
第二に、既存サイトのHTML5移行・リニューアルプロジェクトがあります。HTML4やXHTMLで構築された古いWebサイトをHTML5にモダナイズし、レスポンシブ対応やSEO改善、パフォーマンス向上を図るものです。
経済産業省のDXレポートでも、Webシステムの老朽化が指摘されています。日本では2018年以前のシステムが多く、このためHTML5への移行需要があります。
第三に、Webアプリケーション開発プロジェクトがあります。React、Vue.js、AngularとHTML5のAPIを組み合わせ、SPA（Single Page Application）やPWA（Progressive Web App）を構築します。また、開発期間は3ヶ月から1年以上になることもあります。
第四に、ハイブリッドアプリ開発やクロスプラットフォーム開発があります。Apache Cordova、Ionic、Capacitorでネイティブアプリを作り、iOS・Android両対応を一つのコードベースで開発できます。
ただし、現代のWeb開発ではHTML5単体で完結しません。CSS3、JavaScript、バックエンドまで含めて設計する必要があります。
HTML5開発の進め方
HTML5開発は、一般的なシステム開発と同じく、要件定義・企画、設計・開発、テスト・リリースの3つのフェーズで段階的に進みます。ただし、フロントエンドはユーザーが直接操作するため、ユーザビリティ、互換性、SEOを独自に管理する必要があります。
要件定義・企画フェーズ
要件定義では、目的と対応範囲を数値でそろえます。
- 目標：課題と改善指標を明確にする
- 対応範囲：ブラウザ、端末、HTML5機能を決める
- 設計検証：FigmaやAdobe XDの案を試す
最初のステップは、要件定義と企画の策定です。
たとえば、モバイルからの直帰率が72%なら、この数字を出発点にします。HTML5で刷新して、モバイルコンバージョン率を25%改善することを狙います。
対応範囲では、主要4ブラウザの最新2バージョンを基準にします。あわせて、スマートフォン、タブレット、デスクトップのどこまでを対象にするかも決めます。
HTML5機能、CMS連携、バックエンド連携を一覧にします。構造化データやCore Web Vitalsなど、SEOの要件も洗い出します。
デザイナーとエンジニアが、FigmaやAdobe XDの案を確認し、HTML5で実現できるかを並行して検証します。この段階でペルソナ設定やカスタマージャーニーマップの策定まで行っておくと、ユーザー視点に立った設計を組み立てられます。
要件定義の期間は、中規模のWebサイトであれば2週間から1ヶ月程度が一般的です。なお、要件があいまいなまま次のフェーズに進むと、後工程での手戻りが発生し、当初見積もりの1.5倍から2倍にコストが膨らむケースも珍しくありません。
設計・開発フェーズ
設計では、情報構造とマークアップの規則を先にそろえます。
- 情報設計：サイトマップと導線を定める
- マークアップ：要素と見出しのルールを決める
- 開発環境：GitHubやビルドツールを整える
要件定義が終わると、設計・開発フェーズに入ります。
情報アーキテクチャ設計では、ワイヤーフレームで各ページのコンテンツと配置の順序を整理します。
HTML5のセマンティック要素のうち、header要素は、サイト全体とセクション内の2種類で使えます。
プロジェクト内のルールを統一しておくと、後から保守しやすくなります。見出しの階層（h1からh6まで）の運用ルールも、SEOとアクセシビリティの両面で大切な設計判断です。また、Schema.orgの構造化データも、この段階で対応範囲を決めておくと、後工程がスムーズに進みます。
開発環境では、PugやEJS、HTMLリンターを導入し、WebpackやViteを設定します。リポジトリはGitLabなどで管理するとともに、コードレビューの体制も整えます。ReactやVue.jsではJSX（TSX）が中心になりますが、HTML5準拠のセマンティックな記述は守ります。
実装段階では、コンポーネント単位で開発を進めると効率的です。各コンポーネントの動作確認は、StorybookなどのUIカタログツールで行い、そのうえで統合を進めます。
設計・開発フェーズの期間は、小規模なWebサイトであれば1ヶ月から2ヶ月、大規模なWebアプリケーションであれば3ヶ月から6ヶ月以上が目安です。
テスト・リリースフェーズ
テストでは、表示と互換性、アクセシビリティ、性能を確認します。
- 仕様：W3C検証とブラウザ互換性を見る
- 利用体験：レスポンシブ表示と支援技術を試す
- 性能：Lighthouseで指標を計測する
HTML5開発におけるテストは、機能的な検証に加えて、表示品質やSEO適合性など多角的な観点から行われます。
まず、W3CのMarkup Validation Serviceを使い、HTMLバリデーションでHTML5の仕様に準拠しているかを検証します。仕様違反のマークアップは、ブラウザごとに解釈の差を生む原因になります。そのため、エラーや警告がゼロになるまで修正するのが基本です。
クロスブラウザテストでは、Chrome、Safariなどの主要ブラウザで確認します。FirefoxとEdgeも対象で、HTML5要素とWeb APIの動作を、ブラウザごとに見ます。特にiOSのSafariでは、HTML5のvideoタグの自動再生に独自の制約があり、挙動の違いに注意が必要です。
BrowserStackやLambdaTestなどのクラウドテストプラットフォームを利用すれば、手元に実機がなくても幅広い環境でのテストが可能です。また、レスポンシブテストでは、320pxの小型スマートフォンから2560px以上の4Kディスプレイまで、さまざまな画面幅での表示崩れを確認します。
アクセシビリティは、WAVE（Web Accessibility Evaluation Tool）やaxe DevToolsで確認します。WCAG 2.1のガイドラインへの準拠状況も見ます。さらに、ARIA属性の適切な使用やキーボードナビゲーションの動作検証も含まれます。
パフォーマンステストでは、GoogleのLighthouseやPageSpeed Insightsで、Core Web Vitalsのスコアを計測します。適切なHTML5は、LCP（Largest Contentful Paint）の改善に寄与するほか、CLS（Cumulative Layout Shift）の抑制にもつながり、SEOにも影響します。
すべてのテストが終わり、ステージング環境でクライアントの最終確認を経たら、本番リリースに進みます。リリース後も、HTML Living Standardは更新されます。そのため、新しい要素やAPIへの定期対応が必要です。
費用相場とコストの内訳
HTML5開発の費用は、規模や要件によって大きく変わります。一般的な相場観と費用の構成要素を、初期開発とランニングの両面から見ていきます。予算を適切に立てるには、初期の開発費用だけでなく、運用開始後のランニングコストまで見据えた総合的な視点が欠かせません。
初期開発費用の相場
初期費用は、ページ数、機能、フレームワークで変わります。
- 小規模：企業サイトやLPを中心に作る
- 中規模：ページ数とフォーム機能が増える
- 大規模：SPAやPWAの構築を含める
小規模なコーポレートサイトやランディングページの場合、HTML5とCSS3を使ったレスポンシブ対応のフロントエンド開発で、50万円から150万円程度が相場です。10ページから30ページ程度のサイト構成で、既存のデザインカンプに基づくコーディングが中心であれば、この価格帯に収まることが多いです。
中規模のWebサイトやECサイトのフロントエンド開発になると、200万円から600万円程度が一般的です。50ページを超えると、カスタムフォームやCanvas APIの対応も必要になり、実装工数が増えます。
大規模なWebアプリケーションやPWAの開発では、500万円から2000万円以上に達することもあります。ReactやVue.jsとHTML5を組み合わせたSPA開発、Service Workerによるオフライン対応が含まれます。また、Geolocation APIやWebSocket APIを使う場合も、この規模に当たります。
費用の配分の目安は、要件定義・設計が全体の20%から25%、実装が40%から50%、テストが15%から20%です。プロジェクト管理は、10%から15%を見込みます。フロントエンドエンジニアの人月単価は、経験やスキルレベルで変わりますが、国内の開発会社では60万円から120万円が相場です。
ランニングコストと保守費用
運用費は、インフラ、保守、更新計画を分けて見積もります。
- インフラ：ホスティングとCDNを確認する
- 保守：ブラウザ更新と安全性に備える
- 長期費用：3年間のTCOで判断する
HTML5開発では、初期開発費用に加えて、リリース後のランニングコストも検討しておく必要があります。まず、サーバーの費用として、ホスティングサービスやCDNの月額利用料がかかります。静的サイトはAWS S3とCloudFrontで月額数千円から対応できます。一方で、動的なWebアプリケーションは月額1万円から10万円以上かかります。
次に、ブラウザ更新への対応やセキュリティパッチの適用、コンテンツ更新のサポートなどが、保守費用に含まれます。一般的には、初期開発費用の15%から20%を、年間の保守費用として見込むのが適切です。たとえば、初期開発費用が500万円のプロジェクトであれば、年間75万円から100万円の保守費用を予算に組み込んでおく必要があります。
機能追加やデザインリニューアルには費用がかかる場合があります。そのため、中長期のロードマップと年間予算を用意しておくことが大切です。
SSL証明書とドメイン更新は、年間数千円から数万円程度です。ただし、Let’s Encryptを使えば、SSL証明書を無料で取得できます。
HTML5プロジェクトは、3年間のTCO（Total Cost of Ownership）で見積もります。初期開発費用の1.5倍から2倍程度が目安です。
見積もりを取る際のポイント
HTML5開発の見積もりを開発会社から取る際には、費用が妥当かを判断するための観点を押さえておきましょう。見積もり金額の高低だけでなく、内訳の透明性と技術的な裏付けを確認すると、品質とコストのバランスを見極められます。
複数社からの見積もり取得と比較
比較では、金額と作業範囲を同じ基準でそろえます。
- 社数：3社以上から提案を集める
- 範囲：テストや保守の有無を確認する
- RFP：ブラウザ、ページ、納期をそろえる
HTML5開発の見積もりは、最低でも3社以上の開発会社から取得して比較することをおすすめします。同じ要件を伝えても、会社によって見積もり金額に2倍から3倍の開きが出ることは珍しくありません。
これは、各社の技術スタックや人員体制、利益率の設定が異なり、見積もりに含める作業範囲も違うためです。
複数社の見積もりを並べるときは、金額だけでなく、「何が含まれていて、何が含まれていないか」を丁寧に確認することが大切です。たとえば、A社の見積もりにはブラウザテストが含まれている一方で、B社では別途オプションとして記載されている場合、単純な金額比較では正確に判断できません。
また、見積もりを依頼するRFP（提案依頼書）の中身も、比較の正確さを左右します。RFPには、対応ブラウザやページ数、納期を書いて提示します。機能、デザイン、保守の条件も含めると、見積もりを正確に比べられます。
見積もり内訳の透明性
工程ごとの工数と単価が見える見積もりを選びます。
- 工程：設計、実装、テストを分ける
- 余裕：要件変更に備えた予備費を見る
- 根拠：各項目の作業内容を質問する
見積もりの内訳が明確かどうかは、開発会社の信頼性を測る大切な目安になります。優れた見積もりでは、工程ごとの人月数と単価が示されています。
「フロントエンド開発：一式300万円」と書かれているだけでは、中身が分かりません。要件定義、HTML、テストは、それぞれ分けて書かれているかを見ます。CSS3・JavaScriptと管理も、同じように分けて示されているかを確認します。
内訳が不透明な見積もりは、後から追加費用が発生するリスクが高いため、注意が必要です。要件変更や技術的な課題に備えた余裕が織り込まれていないと、プロジェクトの途中で予算オーバーが分かり、スコープを縮小せざるを得ないケースがあります。そのため、「バッファ」や「予備費」として、見積もり全体の10%から15%程度が計上されているかも確認しておきましょう。
見積もり金額に疑問があれば遠慮せず質問し、その答えをもとに適正かどうかを判断します。
契約形態と支払い条件の確認
契約は、要件の確定度と変更の多さを基準に選びます。
- 請負契約：成果物と範囲が明確な案件向け
- 準委任契約：流動的な開発に向く
- 支払い：検収と不具合期間を明記する
HTML5開発の契約形態は、大きく「請負契約」と「準委任契約」の2種類に分かれます。プロジェクトの性質によって、適した形態が変わります。
請負契約は、あらかじめ定義した成果物を合意した金額で納品する形態で、要件が明確でスコープの変更が少ないプロジェクトに適しています。完成責任が開発会社側にあるため、発注者にとってはコストを見通しやすいメリットがあります。
準委任契約は、ラボ型やSES型とも呼ばれます。稼働時間に応じて費用がかかるため、流動的な開発に適しています。また、月額の人件費が固定され、スコープの変更や優先順位の調整を柔軟に行えるのが利点です。
支払いは、マイルストーン型が一般的です。たとえば、着手時30%、中間30%、納品時40%といった条件が使われます。一括前払いは、そのリスクを確認したうえで判断します。
検収条件（何をもって「完了」とするか）を契約書に明記しておくと、プロジェクト終盤のトラブルを防げます。
なお、瑕疵担保期間は、通常3ヶ月から6ヶ月です。ただし、ブラウザ互換性の不具合は発見が遅れる場合があります。そのため、HTML5では、できるだけ長い期間を確保しておくのが望ましいです。
まとめ
HTML5開発では、全体像を押さえたうえで、進め方、費用、見積もりの順に確認することが大切です。HTML5は、世界のWebサイトの98%以上で採用され、構造、メディア、Web APIを支える基盤技術です。
進め方では、要件定義で対応ブラウザやデバイス、SEOの目標を決め、設計段階でHTML5の構造を整えて保守性とアクセシビリティを守ります。見積もりでは、複数社の内訳を比べ、3年間のTCOをもとに予算を計画します。
HTML Living Standardは今も継続して進化しており、Popover API、Dialog要素、Container Queriesといった新しい機能も実装されています。こうした最新動向を把握し、プロジェクトに取り入れることで、効率的で高品質なWeb開発につなげられるでしょう。
▼全体ガイドの記事
・HTML5開発の完全ガイド
開発を相談する前に役立つ資料として、次の無料ホワイトペーパーを用意しています。
会社紹介
株式会社riplaでは、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを、構想策定・要件定義から開発・改善まで一気通貫で支援。事業会社でIT・DXを経験したプロフェッショナルによる高い要件定義力・システム設計力を活かし、事業成果の最大化に伴走します。
また、当社独自の開発テンプレート「Boxシリーズ」による標準機能の高速開発と、AI駆動開発の独自フレームワーク「GoDD」による独自機能のAI実装を組み合わせることで、低コスト・短期間で開発を実現いたします。
もし、システム開発やプロダクト開発に関するご要望がございましたら、お気軽にお問い合わせください。
・サービス概要資料のURLはこちら >>>
・お問合せページのURLはこちら >>>
・お役立ち資料のURLはこちら >>>
株式会社ripla 代表取締役CEOとして、システムパッケージ活用、システム開発、データ分析、生成AI活用、SaaS開発、アプリ開発、EC構築など、幅広い領域で企業のDX推進と事業成長を支援している。事業会社でIT・DXを経験したプロフェッショナルが集う株式会社riplaにおいて、お客様の事業・ユーザー・業務に最適化したオーダーメイド型システムを構想策定・要件定義から開発・改善まで一気通貫で支援し、単なるシステム納品にとどまらず、クライアントと同じ目線で事業成果の最大化に向けた伴走支援を行う。早稲田大学卒業後、ラクスル株式会社、LINEヤフー株式会社にて事業開発やDX推進などに従事した後、株式会社riplaを創業。