コーディング費用の相場はいくら？料金が変わる要因と依頼前に知るべき見積もりのポイント
2. コーディング費用の主な料金体系
コーディングの料金体系は、ページ単価制、時間単価制、プロジェクト単価制などに分かれます。見積もりを比較する際は、総額だけでなく、どの料金体系で計算されているかを理解することが大切です。
2-1. 1ページごとに料金が決まる「ページ単価制」
ページ単価制は、「トップページ3万円」「下層ページ1ページ1万円」のように、ページごとの料金を積み上げる方式です。
ページ数が明確なコーポレートサイトやサービスサイトでは、総額を把握しやすい点がメリットです。ただし、ページの長さや複雑さによって追加料金が発生することがあります。
ページ単価制の見積もりでは、次の点を確認しましょう。
1ページの基準となる長さ
トップページと下層ページの料金差
複製ページや流し込みページの料金
レスポンシブ対応の有無
JavaScriptの基本的な動きが含まれるか
規定の長さを超えた場合の追加料金
ページ単価が安くても、基本料金やオプション料金を加えると総額が高くなる場合があります。
2-2. 作業時間に応じて料金が決まる「時間単価制」
時間単価制は、作業にかかった時間や日数に応じて料金を計算する方式です。「1時間あたり」「1日あたり」「1人月あたり」などの単位が使われます。
既存サイトの部分修正、仕様が確定していない案件、継続的な改善作業などに適しています。作業内容を柔軟に変更できる一方、修正や確認に時間がかかると予算を超える可能性があります。
時間単価制で依頼するときは、事前に想定工数と上限金額を提示してもらいましょう。作業報告の方法や、打ち合わせ・調査時間が請求対象になるかも確認が必要です。
2-3. サイト全体で料金が決まる「プロジェクト単価制」
プロジェクト単価制は、サイト全体の仕様をもとに一式料金を提示する方式です。
ページ数が多いサイトや、WordPress、フォーム、アニメーションなど複数の作業が含まれる案件で採用されます。個別のページ単価を積み上げるより、進行管理や検証を含めた総額を把握しやすい点が特徴です。
ただし、契約後に仕様を追加すると、追加見積もりが発生する可能性があります。どこまでが当初の料金に含まれ、どの変更から追加料金になるのかを明確にしておきましょう。
2-4. 基本料金とオプション料金を組み合わせる料金体系
基本料金にページ単価やオプション料金を追加する方式も一般的です。
基本料金には、プロジェクトの準備、CSSやJavaScriptの基本設計、開発環境の構築、進行管理などが含まれます。そこに、ページ数や機能に応じた料金が加算されます。
主なオプションには次のようなものがあります。
レスポンシブ対応
WordPress組み込み
フォーム実装
JavaScriptアニメーション
特定ブラウザへの対応
表示速度の改善
サーバーへのアップロード
特急対応
修正回数の追加
見積もりでは、基本料金とオプション料金を合計した最終金額を確認してください。
2-5. 見積もりに含まれやすい作業と別料金になりやすい作業
一般的なコーディング費用には、HTML・CSSによる実装、基本的なレスポンシブ対応、指定ブラウザでの表示確認などが含まれます。
一方、次の作業は別料金になりやすい項目です。
デザインの修正や不足部分の作成
画像加工やバナー作成
原稿の作成・修正
高度なJavaScript実装
WordPressやCMSへの組み込み
フォームの開発
外部APIとの連携
古いブラウザへの対応
サーバー移行
ドメインやSSLの設定
公開後の更新・保守
仕様確定後の大幅な変更
「コーディング一式」という記載だけでは作業範囲が分かりません。見積書には、含まれる作業と含まれない作業を具体的に記載してもらいましょう。
3. コーディング費用が変わる主な要因
コーディング費用は、ページ数だけで決まるものではありません。デザイン、機能、対応端末、検証範囲、納期など、さまざまな条件によって変動します。
3-1. ページ数とページの長さ
基本的には、ページ数が増えるほど費用も高くなります。ただし、同じテンプレートを使えるページが多ければ、1ページあたりの料金を抑えられる場合があります。
ページの縦幅も重要です。短い会社概要ページと、数十セクションあるLPを同じ1ページとして扱うことはできません。
見積もりを依頼するときは、ページ数だけでなく、各ページの長さやセクション数も伝えましょう。
3-2. デザインやレイアウトの複雑さ
シンプルな1カラムのレイアウトよりも、要素が重なるデザイン、斜めの装飾、画面幅をまたぐ配置などは、実装と検証に時間がかかります。
次のようなデザインは費用が上がりやすい傾向があります。
要素が複雑に重なっている
ページごとにレイアウトが異なる
写真や文字が画面幅に応じて大きく移動する
表や比較コンテンツが多い
背景や装飾が細かい
パソコン版とスマートフォン版で構成が大きく違う
見た目がシンプルでも、画面幅によって特殊な切り替えが必要な場合は工数が増えます。
3-3. レスポンシブ対応の範囲とブレイクポイント数
パソコンとスマートフォンの2段階だけで調整する場合と、タブレットや大型モニターを含めて細かく調整する場合では作業量が異なります。
ブレイクポイントとは、画面幅に応じてレイアウトを切り替える基準です。ブレイクポイントが増えるほど、調整とテストの回数も増えます。
スマートフォン用デザインが支給されていない場合、コーダーが表示方法を判断する必要があります。その判断作業が追加費用の対象になることもあります。
3-4. アニメーションやJavaScript機能の有無
アニメーションやJavaScript機能を追加すると、実装だけでなく動作確認にも時間がかかります。
特に、スクロール量と連動する演出、複数の要素が連続して動く演出、動画と連動する機能などは費用が高くなりやすい項目です。
アニメーションを依頼するときは、「ふわっと表示する」といった抽象的な説明だけでなく、参考サイトや動画を提示すると正確な見積もりを得やすくなります。
3-5. WordPress・CMSへの組み込み範囲
WordPressを導入する場合でも、更新する箇所によって工数が変わります。
新着情報だけを更新できればよい場合と、サービス、実績、スタッフ、FAQなどをそれぞれ管理できるようにする場合では、必要な投稿機能の数が異なります。
管理画面から更新したい項目、一覧ページに表示する条件、カテゴリーやタグの使い方を整理しておくことが重要です。
3-6. 対応ブラウザや動作検証の範囲
対応ブラウザが多いほど、検証と修正の工数が増えます。
一般的には、Google Chrome、Safari、Microsoft Edge、Firefoxなどが対象になります。パソコンだけでなく、iPhoneやAndroid端末での確認を求める場合は、検証環境を明確にしましょう。
古いブラウザや特定の端末まで保証対象にすると、代替実装が必要になる場合があります。
3-7. SEO・表示速度・アクセシビリティへの対応レベル
検索エンジンや利用者に配慮したコーディングを求める場合は、その基準を事前に伝える必要があります。
具体的には、次のような対応です。
見出し構造を適切に設定する
画像に代替テキストを設定する
HTMLタグを意味に沿って使う
画像を軽量化する
不要なCSSやJavaScriptを減らす
キーボードだけでも操作できるようにする
文字の読みやすさやコントラストに配慮する
基本的な対応は通常料金に含まれることもありますが、数値目標や詳細な基準への適合を求める場合は追加工数が発生します。
3-8. デザインデータや仕様書の完成度
デザインデータや仕様書が整理されているほど、見積もりの精度が上がり、作業中の手戻りを減らせます。
次のような状態では、確認や補完作業が増える可能性があります。
スマートフォン版のデザインがない
ボタンを押したときの動作が決まっていない
使用する画像が確定していない
ページごとに余白や文字サイズが統一されていない
フォームの入力項目や送信先が決まっていない
更新する箇所が明確になっていない
不足部分を制作側に判断してもらう場合は、コーディング費とは別に設計費やディレクション費が発生することがあります。
3-9. 納期の短さと特急対応の有無
短納期の案件では、通常より多くの人員を確保したり、他案件のスケジュールを調整したりする必要があります。そのため、特急料金が加算される場合があります。
納期を短縮するには、制作側だけでなく、発注側も確認や素材提供を迅速に行わなければなりません。確認が遅れた場合の納期変更についても事前に決めておきましょう。
3-10. 修正回数と公開後のサポート範囲
「修正2回まで無料」「仕様どおりに実装できていない部分は無償修正」など、修正条件は依頼先によって異なります。
デザインどおりに表示されない不具合の修正と、発注後のデザイン変更は区別されます。後から文章量や画像サイズを大幅に変えた場合は、追加料金が発生することがあります。
公開後の不具合対応期間、軽微な修正の料金、保守契約の有無も確認しておきましょう。
4. 依頼先別に見るコーディング費用と特徴
コーディングの主な依頼先には、Web制作会社、コーディング代行会社、フリーランス、クラウドソーシングがあります。
同じ仕様でも、対応人数、進行管理、保証、サポート体制によって料金が変わります。
4-1. Web制作会社に依頼する場合
Web制作会社は、企画、デザイン、コーディング、システム開発、公開後の運用まで一括して依頼できる点が特徴です。
複数の担当者が関わるため、コーディングだけを依頼する場合でも、ディレクション費や管理費が発生することがあります。その分、担当者が離脱した場合の引き継ぎや、大規模案件への対応がしやすい傾向があります。
デザインの調整やシステム開発も含めて相談したい場合、品質管理や保守体制を重視する場合に適しています。
4-2. コーディング代行会社に依頼する場合
コーディング代行会社は、デザインデータからHTML・CSS・JavaScriptを実装する業務に特化しています。
ページ単価やオプション料金が明示されていることが多く、コーディングだけを切り出して発注しやすい点がメリットです。大量ページや短納期の案件に対応できる会社もあります。
一方、原稿作成やデザイン修正には対応していない場合があります。入稿ルールやデザインデータの形式を事前に確認してください。
4-3. フリーランスに依頼する場合
フリーランスは、制作会社より管理コストを抑えやすく、制作者本人と直接やり取りできる点が特徴です。
経験豊富なフリーランスであれば、設計からWordPress構築まで幅広く依頼できます。一方、対応できる技術や稼働時間は個人によって大きく異なります。
実績だけでなく、連絡の頻度、納期管理、バックアップ体制、公開後の対応範囲を確認しましょう。
4-4. クラウドソーシングで依頼する場合
クラウドソーシングでは、多数の制作者から提案や見積もりを受け取れます。小規模なページや部分修正を依頼しやすく、予算に合わせて募集できる点がメリットです。
ただし、価格だけで選ぶと、コードの品質、ブラウザ検証、レスポンシブ対応などに差が出る可能性があります。
応募者の評価だけでなく、実際に担当する人物の制作実績や、今回の案件に近い経験を確認することが重要です。
4-5. 依頼先ごとの費用・品質・対応範囲を比較するポイント
依頼先を比較するときは、次の項目をそろえて確認しましょう。
見積もり総額
レスポンシブ対応の範囲
WordPressやJavaScriptへの対応
対応ブラウザ
修正回数
納品形式
テスト方法
公開作業の有無
公開後の保証期間
連絡方法と担当者
制作実績
ソースコードの権利
見積もり条件が異なる状態で総額だけを比べても、適切な判断はできません。同じ仕様書とデザインを渡して比較することが大切です。
4-6. 安さだけで依頼先を選ぶリスク
費用の安さは重要ですが、極端に安い見積もりには注意が必要です。
安い料金で依頼した結果、次のような問題が起こる可能性があります。
スマートフォンで表示が崩れる
修正を依頼しても連絡が取れない
コードが複雑で更新しにくい
表示速度が遅い
対応ブラウザが限定されている
WordPressの更新で不具合が起きる
見積もり後に追加料金が増える
納期が守られない
料金を比較するときは、実装後に発生する修正費や運用費も含めて判断しましょう。
5. コーディングの見積もりに含まれる費用の内訳
見積書では、「コーディング費一式」とまとめられていることがあります。しかし、適正な価格か判断するためには、どの作業にいくらかかっているのかを確認する必要があります。
5-1. HTML・CSSによる基本コーディング費
基本コーディング費は、デザインをHTMLとCSSでWebページとして再現するための費用です。
ページの骨組み、文字や画像の配置、余白、装飾、共通パーツの作成などが含まれます。ページ単価だけでなく、最初に共通CSSやコンポーネントを設計する費用が加わることもあります。
5-2. レスポンシブ対応費
レスポンシブ対応費には、画面幅に応じたレイアウト変更、画像サイズの調整、スマートフォンメニューの実装などが含まれます。
パソコン版しかデザインがない場合は、スマートフォン表示の設計費が追加される可能性があります。タブレット専用のデザインが必要かどうかも確認しましょう。
5-3. JavaScript・アニメーション実装費
JavaScript実装費は、クリックやスクロールに応じた動き、スライダー、タブ、モーダルなどを作るための費用です。
既存ライブラリを使用する場合でも、デザインへの調整や複数端末での検証が必要です。アニメーションの内容、発動するタイミング、スマートフォンでの動作を仕様書にまとめておくと、追加費用を防ぎやすくなります。
5-4. WordPress・CMS構築費
WordPress・CMS構築費には、初期設定、テーマ作成、投稿機能、管理画面の設定などが含まれます。
見積もりでは、更新できる項目を確認しましょう。「WordPress対応」と書かれていても、すべての文章や画像を自由に更新できるとは限りません。
投稿タイプ、入力項目、カテゴリー、一覧の並び順、公開予約など、必要な管理機能を明確にしてください。
5-5. フォームや外部サービスの連携費
お問い合わせフォーム、資料請求フォーム、予約フォームなどは、項目数や機能によって料金が変わります。
主な確認項目は次のとおりです。
入力項目数
必須項目
確認画面の有無
自動返信メール
管理者への通知
ファイル添付
迷惑メール対策
個人情報への同意
データの保存
外部システムとの連携
決済、顧客管理、予約管理、地図などの外部サービスと連携する場合は、サービス側の利用料金が別途必要になることもあります。
5-6. テスト・検証・修正対応費
テスト費には、対応ブラウザや端末での表示確認、リンク切れの確認、フォームの送信テストなどが含まれます。
検証範囲が見積書に記載されていない場合は、対象となるOS、ブラウザ、端末を確認してください。
発注側による確認後、何回まで修正できるのか、修正期間は何日間かも重要です。
5-7. ディレクション・進行管理費
ディレクション費は、打ち合わせ、仕様整理、スケジュール管理、担当者間の連絡、品質確認などにかかる費用です。
ページ数が多い案件や複数の担当者が参加する案件では、進行管理が必要になります。ディレクション費を省くと安く見えるものの、発注側が仕様整理や品質確認を担当しなければならない場合があります。
5-8. サーバーへのアップロード・公開作業費
完成したデータを本番サーバーにアップロードし、Webサイトを公開する作業が別料金になることがあります。
公開作業には、次のような内容が含まれます。
サーバーへのデータ転送
WordPressの設置
データベースの設定
ドメインの切り替え
SSLの設定
テスト環境から本番環境への移行
公開後の表示確認
リダイレクトの設定
既存サイトをリニューアルする場合は、旧ページから新ページへの転送やバックアップも必要です。
5-9. 保守運用・更新サポート費
公開後の保守運用には、WordPressやプラグインの更新、バックアップ、セキュリティ対策、軽微な修正などが含まれます。
保守料金は、月額制、作業時間制、作業ごとの個別見積もりなどがあります。
保守契約を結ぶ場合は、毎月の作業時間、対応できる内容、緊急時の連絡方法、契約期間を確認しましょう。
6. 正確な見積もりを依頼するために準備すべきもの
正確な見積もりを受け取るには、制作側が作業量を判断できる資料を用意する必要があります。
情報が不足した状態では、制作側がリスクを見込んで高めに見積もったり、作業開始後に追加料金が発生したりする可能性があります。
6-1. コーディングするページの一覧
まずは、コーディングするページを一覧にしたサイトマップを用意しましょう。
ページごとに、次の情報を記載すると見積もりの精度が上がります。
ページ名
URL
新規作成か既存ページの修正か
個別デザインか共通テンプレートか
ページのおおよその長さ
必要な機能
WordPressで更新するか
フォームの有無
公開予定日
似たレイアウトのページはグループに分け、「テンプレート1種類・流し込み10ページ」のように整理すると、制作側が工数を判断しやすくなります。
6-2. デザインデータと画像・テキスト素材
デザインデータは、Figma、Adobe XD、Photoshop、Illustratorなど、使用している形式を伝えます。
次の素材も可能な限りそろえておきましょう。
ロゴデータ
写真やイラスト
アイコン
Webフォントの情報
掲載する原稿
リンク先の一覧
動画データ
ダウンロード用のPDF
プライバシーポリシーなどの固定文章
仮の文章や画像でコーディングを進める場合は、本番素材に差し替える担当者と期限を決めてください。文章量や画像比率が大きく変わると、レイアウトの再調整が必要になります。
6-3. PC・スマートフォン・タブレットの対応範囲
対応するデバイスと画面幅を事前に決めておきましょう。
最低限、次の内容を制作側に伝えます。
パソコン版デザインの有無
スマートフォン版デザインの有無
タブレット版の個別調整が必要か
対応する最小・最大画面幅
対応ブラウザ
実機確認の対象端末
横向き表示への対応
スマートフォンとパソコンで表示内容を変える箇所
タブレット版のデザインを用意しない場合は、パソコン版とスマートフォン版のどちらに近い表示にするかを指定すると、認識のずれを防げます。
まとめ
コーディング費用の相場は、トップページで1万円～5万円程度、下層ページで1ページ5,000円～2万円程度、LPで2万円～10万円程度が一つの目安です。
ただし、実際の料金は、ページの長さ、デザインの複雑さ、レスポンシブ対応、JavaScript、WordPress、検証範囲、納期などによって変わります。
見積もりを比較するときは、金額だけでなく、次の点を確認することが重要です。
料金に含まれる作業範囲
レスポンシブ対応の対象
対応ブラウザとテスト方法
修正回数
WordPressの更新範囲
公開作業の有無
追加料金が発生する条件
公開後の保証や保守
ページ一覧、完成したデザイン、素材、必要な機能、対応端末を整理してから見積もりを依頼すれば、追加費用や認識のずれを防ぎやすくなります。