「デザインは完成したのに、コーディングを担当できる人が社内にいない」——Webサイトの制作やリニューアルを進めるなかで、この壁にぶつかる担当者は少なくありません。デザイナーやディレクターは確保できても、HTMLやCSSを書き起こすコーダーだけが慢性的に足りない。かといって採用するには時間もコストもかかりすぎる。そんなときに検討したいのがコーディング代行です。
この記事では、コーディング代行の基本から、依頼先ごとの特徴、ページ種別ごとの費用相場、依頼から納品までの流れ、そして失敗しない会社の選び方までを整理して解説します。相場感と発注前の準備物を押さえておけば、外注は「安く済ませる手段」ではなく「制作品質とスピードを両立させる打ち手」に変わります。
コーディング代行とは
コーディング代行とは、Webサイトのデザインデータをもとに、HTML・CSS・JavaScriptなどを記述してブラウザで表示できる形に実装する作業を、外部の制作会社やフリーランスに委託するサービスのことです。デザインから運用までを丸ごと任せる「Web制作の外注」とは異なり、実装工程だけを切り出して発注する点が大きな特徴です。
デザインは自社やパートナーのデザイナーが担当し、コーディングだけを代行会社に回す。この分業によって、社内の担当者は企画・設計・マーケティング施策といったコア業務に集中できます。
コーディングとは何をする作業か
コーディングは、Adobe XD・Figma・Photoshopなどで作られたデザインカンプを、Webブラウザで正しく表示されるソースコードに変換する工程です。具体的には次のような作業が含まれます。
- HTMLでページの構造（見出し・段落・リスト・テーブルなど）をマークアップする
- CSSで配色・余白・タイポグラフィ・レイアウトを再現する
- レスポンシブ対応でPC・タブレット・スマートフォンそれぞれの画面幅に最適化する
- JavaScriptでスライダー、アコーディオン、モーダル、フォームバリデーションなどの動きを実装する
- WordPressなどのCMSに組み込み、管理画面から更新できる状態にする
- 主要ブラウザでの表示チェックと、崩れの修正
見た目を再現するだけの単純作業に見えて、実際には見出しタグの階層設計や構造化データ、画像の軽量化、読み込み速度といったSEO対策やアクセシビリティに直結する設計判断が含まれます。ここが雑だと、後から表示崩れの修正や検索順位の伸び悩みという形で跳ね返ってきます。コーディングを「誰がやっても同じ作業」と考えないほうがよい理由はここにあります。
コーディング代行を利用する企業が増えている背景
コーディング代行の需要が伸びている背景には、Web人材の採用難があります。経済産業省の試算では2030年に最大79万人規模のIT人材不足が生じるとされ、転職市場でもIT・通信分野の求人倍率は全職種平均を大きく上回る水準が続いています。求職者1人を複数社が奪い合う状況では、コーダー1名を採用するだけでも相応の時間と採用コストが必要です。
一方で、企業側のWebサイト制作ニーズは減っていません。サービスサイトの新設、採用サイトのリニューアル、キャンペーンごとのLP制作、既存サイトのスマートフォン対応——案件は断続的に、しかも波を伴って発生します。波のある業務に対して正社員を抱えるのは、稼働の谷でコストが遊ぶという構造的な問題があります。
そこで、繁忙期だけ外部の実装体制を借りる、あるいは実装工程を恒常的に外部化する、という判断が合理的になります。デザインツールの標準化（Figmaの普及）によってデータの受け渡しが容易になったことも、外注のハードルを下げた要因です。
コーディング代行の依頼先の種類と特徴
コーディングの外注先は大きく4種類に分けられます。それぞれ得意領域と料金水準、リスクの性質が異なるため、案件の規模と重視するポイントに応じて使い分けるのが基本です。
| 依頼先 | 費用感 | スピード | 品質の安定性 | 向いているケース |
|---|---|---|---|---|
| Web制作会社 | 高め | 標準 | 高い | 大規模サイト、要件が固まりきっていない案件 |
| コーディング代行専門会社 | 中 | 速い | 高い | 実装だけを大量・継続的に回したい |
| フリーランス | 低〜中 | 個人差大 | 個人差大 | 小規模、単発、コスト重視 |
| クラウドソーシング | 低 | 個人差大 | ばらつき大 | 少数ページ、予算が限られる案件 |
Web制作会社
企画・デザイン・コーディング・運用までを一気通貫で担う会社です。ディレクターが間に入るため要件の整理を任せられ、仕様が固まっていない状態からでも相談しながら進められます。大規模サイトやシステム連携を伴う開発、複数部署をまたぐプロジェクトでは、この体制の安心感が効いてきます。
反面、ディレクション費や管理費が上乗せされるため、単純に実装だけを依頼する用途では割高になりやすいのが弱点です。下層ページのコーディングでも1ページあたり5,000円〜50,000円と、幅の上限が高く設定されているケースが目立ちます。
コーディング専門の代行会社
実装工程に特化した事業者です。コーダーを社内に多数抱え、テンプレート化されたワークフローとコーディングガイドラインで作業を標準化しているため、価格・納期・品質のバランスが取りやすいのが最大の強みです。
見積もりフォームからデザインデータを送れば数営業日で概算が返り、そのまま発注できる会社が多く、月間の制作本数が多い企業ほど恩恵を受けやすい選択肢と言えます。ブラウザチェックの対象範囲や、納品後30日間の無償瑕疵修正といった保証を明文化している会社もあり、品質担保の仕組みが見えやすい点も評価できます。
一方で、デザインの相談やコンテンツの企画までは範囲外とする会社がほとんどです。「デザインデータが完成していること」が前提となるため、上流工程は自社または別のパートナーで担保する必要があります。
フリーランス（個人）
個人のコーダーに直接発注する方法です。中間マージンが乗らないぶん費用を抑えやすく、担当者と直接やり取りできるためコミュニケーションのラグが少ないというメリットがあります。実力のある個人であれば、制作会社と遜色ない品質を安価に得られることもあります。
ただし、リスクは個人に集中します。体調不良や他案件の逼迫で納期が遅れる、途中で連絡が取れなくなる、といった事態に対するバックアップが基本的にありません。継続的に依頼するなら、契約書と検収条件を明確にし、ソースコードの受け渡し方法（GitHubリポジトリなど）を最初に取り決めておくべきです。大規模案件や、複数人体制が必要な短納期案件には向きません。
クラウドソーシング（ココナラ・ランサーズ・クラウドワークスなど）
プラットフォーム経由でコーダーを探す方法です。それぞれ性格が異なります。
| サービス | 特徴 | 発注スタイル |
|---|---|---|
| クラウドワークス | 国内最大級の登録者数と案件数 | 案件を掲載して応募を募る |
| ランサーズ | 認定ランサー制度で実績者を判別しやすい | 案件掲載・直接依頼の両方 |
| ココナラ | スキルを「商品」として出品する形式 | 出品されたサービスを購入 |
いずれも仮払い（エスクロー）に対応しているため、入金だけして納品されないという最悪の事態は避けられます。相場も低く、トップページのコーディングを数千円で請け負う個人が見つかることもあります。
その代わり、品質のばらつきは4つの選択肢のなかで最も大きいと考えてください。ポートフォリオと評価件数を確認し、いきなり全ページを任せずテスト発注から始めるのが現実的です。なおプラットフォームには受注者側に10〜22%程度のシステム手数料がかかるため、極端に安い提示額は受注者の手取りが相当薄いことを意味します。品質と価格のバランスは常に意識しておきたいところです。
コーディング代行の費用相場
「コーディング代行の相場はいくらか」は、発注検討者が最も知りたい情報でしょう。結論から言えば、下層ページで5,000円〜20,000円、トップページで15,000円〜50,000円、LPで30,000円〜75,000円程度が目安のレンジです。ページ単価の平均は8,500円前後という調査もありますが、実際は仕様によって大きく上下します。
ページ単価の目安と決まり方
多くの代行会社は「1ページあたり◯円（縦幅◯pxまで）」という形で料金を提示します。たとえば「1ページ15,000円（5,000pxまで）」といった具合で、pxはページの縦の長さを意味します。縦に長いページほど要素数が多く作業量が増えるため、超過分は追加料金となる仕組みです。
見積もり額を左右する主な変数は次のとおりです。
- ページの縦幅と、セクションごとの要素の密度
- レスポンシブ対応の有無と、対応するブレイクポイントの数
- JavaScriptによるアニメーション・インタラクションの量
- 対応ブラウザの範囲（古いブラウザまで含めるか）
- CMS（WordPressなど）への組み込みの有無
- フォームやマイクロコピーなどの細部の指定精度
このうち発注者が意識しづらいのがレスポンシブ対応です。既存サイトのレスポンシブ化は1ページあたり15,000円〜35,000円前後が相場とされ、新規コーディングでもレスポンシブ込みだとPC単体のコーディング費の1.5〜2倍程度になる、という価格設計をとる会社が多く見られます。PCトップページが20,000円なら、レスポンシブ込みで30,000〜40,000円というイメージです。「レスポンシブ対応は当然込みだろう」と思い込むと見積もりで想定外が発生します。
ページ種別ごとの相場
| ページ種別 | 費用の目安 | 補足 |
|---|---|---|
| LP（ランディングページ） | 30,000円〜75,000円 | 画像中心の構成なら30,000円前後から |
| トップページ | 15,000円〜50,000円 | 情報量とアニメーションで大きく変動 |
| 下層ページ | 5,000円〜20,000円 | テンプレート化できれば単価が下がる |
| 既存ページのレスポンシブ化 | 15,000円〜35,000円 | 画像の再調整は別途 |
| 画像加工（大サイズ） | 1点4,000円〜6,000円 | メインビジュアルなど |
| 画像加工（小サイズ） | 1点2,000円〜3,000円 | 商品画像など |
LPがトップページより高くなりがちなのは、縦に長く、セクションごとに独自レイアウトが組まれ、CVボタンやアニメーションが多用されるためです。同じ「1ページ」でも作業密度がまったく違うことを、見積もりを見る側も理解しておくと交渉がスムーズになります。
一方、下層ページは共通パーツを増やすほど単価が下がります。10ページ発注するなら、レイアウトのパターンを3種類程度に集約したうえでデザインを起こすほうが、総額を大きく圧縮できます。この設計はデザイン段階で決まるため、コーディングの見積もりを取る前に検討しておく価値があります。
WordPress構築を含む場合の相場
静的なHTMLコーディングに加えてWordPressへの組み込みを依頼する場合、費用は一段上がります。テーマ化（HTMLをWordPressのテンプレート構造に変換する作業）だけであれば数万円規模、カスタム投稿タイプやカスタムフィールドの設計、投稿機能や絞り込み検索の実装まで含めると、ページ単価は20,000円〜80,000円程度、サイト一式では30万円〜150万円というレンジで語られることが多くなります。
WordPress案件では、次の項目が見積もりに含まれるかを必ず確認してください。
- テーマ化の範囲（固定ページのみか、投稿一覧・詳細・アーカイブまで含むか）
- カスタム投稿タイプ・カスタムフィールドの設計と実装
- サーバー・ドメイン設定、SSL化、テスト環境から本番環境への移行作業
- プラグインの選定と初期設定
- 更新マニュアルの作成有無
なお納品後の運用まで任せる場合は、更新代行が月額1万円〜5万円、保守込みの運用代行が月額3万円〜15万円程度が中心的な価格帯です。構築費だけで比較して安い会社を選ぶと、運用フェーズでコストが逆転することもあるため、トータルの予算で判断する視点が欠かせません。
依頼先による料金の違い
同じ下層ページ1ページでも、依頼先によって価格帯は次のように分かれます。
| 依頼先 | 下層ページ1ページの目安 |
|---|---|
| Web制作会社 | 5,000円〜50,000円 |
| コーディング代行会社 | 5,000円〜20,000円 |
| フリーランス・クラウドソーシング | 3,000円〜20,000円 |
上限の開きが大きいのは、ディレクション費や品質保証の体制がどこまで含まれているかの違いによるものです。単価が安い＝お得とは限りません。修正対応が有償だったり、ブラウザチェックの範囲が狭かったり、コードの可読性が低くて後の運用に手間がかかったりすれば、総コストは膨らみます。見積書を比較する際は、単価だけでなく「その金額に何が含まれるか」を横並びで確認するのが鉄則です。
コーディング代行を利用するメリット・デメリット
メリット
1. 採用・育成コストを抑えられる コーダーを1名採用すれば、採用費に加えて年間の人件費、教育コスト、社会保険料が固定費として発生します。案件の波に応じて外注する体制なら、必要なときに必要な量だけ支払う変動費に置き換えられます。
2. 実装品質とスピードが安定する 実装を専門にする事業者は、コーディングガイドラインとチェック体制を整備しています。慣れないメンバーが片手間で書いたコードに比べ、表示崩れや構造の乱れが起きにくく、レスポンシブ対応や表示速度の最適化もスムーズです。結果として、検索エンジンからの評価やユーザー体験にもプラスに働きます。
3. 社内リソースをコア業務に回せる Web担当者の時間は本来、企画・コンテンツ設計・数値分析・改善施策に使うべきものです。実装を外に出すことで、成果に直結する業務への集中度が上がります。
4. 繁忙期の波を吸収できる キャンペーン期やリニューアル期に発生する一時的な負荷を、社内の残業ではなく外部リソースで吸収できます。
デメリット・注意点
1. 細かい修正を即座に反映できない 「この文言を今すぐ直したい」という場面でも、外注先へ依頼して着手を待つ必要があります。日常的な更新が多いサイトでは、更新頻度の高い箇所をCMSで自社編集できる設計にしておくなどの対策が必要です。
2. コミュニケーションコストが発生する デザインの意図や動きの挙動を言語化して伝える手間は、社内で完結する場合より確実に増えます。認識のズレは修正の往復を生み、納期とコストの両方を押し上げます。この工数は最初から見込んでおくべきものです。
3. 規模が大きくなるとコストが膨らむ ページ数が数十〜百単位になると、ページ単価の積み上げが無視できない金額になります。一定規模を超えたら、内製化やチーム単位での委託（準委任契約）と比較検討する価値があります。
4. 品質にばらつきが出るリスク 特に個人やクラウドソーシングでは、コードの書き方や命名規則が担当者ごとに異なり、後任者が引き継ぎづらいコードになることがあります。コーディング規約を発注側から指定するか、規約を持つ事業者を選ぶことでリスクを下げられます。
5. 情報管理の取り決めが必要 未公開の商品情報やキャンペーン内容を含むデザインデータを渡す以上、NDA（秘密保持契約）の締結は必須と考えてください。多くの代行会社は標準で対応しており、自社のNDA雛形での締結を受け入れる会社も一般的です。
コーディング代行の依頼から納品までの流れ
事前に準備しておくもの
見積もり精度と納品品質は、発注時に渡す情報の質でほぼ決まります。最低限そろえたいのは次の3点です。
デザインデータ Figma、Adobe XD、Photoshopなどで作成されたデザインカンプです。PC版とスマートフォン版の両方を用意するのが理想で、スマホ版がない場合は「代行会社側の判断でレイアウトを組む」ことになり、認識のズレが生じやすくなります。フォント・カラーコード・余白の数値が整理されていると、再現度が上がり修正回数も減ります。
サイトマップ サイト全体のページ構成と総ページ数を示した資料です。これがあると、代行会社は共通パーツの切り出しやテンプレート設計を最初から検討でき、結果的に総額を抑えやすくなります。
コーディング指示書 リンク先URL、ホバー時の挙動、アニメーションの動き方、フォームの送信先、対応ブラウザの範囲、SEO関連の指定（title・meta description・見出しタグの階層）などをまとめた資料です。「言わなくても分かるだろう」と省いた項目こそ、後の手戻りの原因になります。
このほか、画像素材（元データ）、ロゴデータ、既存サイトのFTP情報やサーバー環境の情報も、必要に応じて用意します。
問い合わせ〜見積もり
多くの代行会社は、問い合わせフォームからデザインデータやページ数、希望納期を送ると概算見積もりを返す流れをとっています。この段階で確認しておきたいのは以下の点です。
- 見積もりに含まれる範囲（レスポンシブ対応、JavaScript実装、ブラウザチェック、画像加工）
- 修正対応の回数と、無償対応の範囲
- 納期と、急ぎ対応時の追加料金の有無
- 支払い条件（前払い・後払い、分割の可否）
複数社から相見積もりを取ると、相場観と各社の得意領域が見えてきます。同じデザインデータを渡しても金額が倍近く違うことは珍しくなく、その差はたいてい「含まれる範囲」の差です。
データ入稿〜コーディング〜納品
発注が決まったら、デザインデータ一式を入稿します。多くの会社はFigma・XD・Photoshopの入稿に対応しており、形式によって追加費用がかかる場合もあるため事前確認が無難です。
その後の流れは概ね次のとおりです。
- キックオフ／要件確認 — 指示書の内容をすり合わせ、不明点を解消する
- コーディング作業 — 共通パーツから着手し、テンプレート単位で実装を進める
- テストサーバーでの検証 — 開発環境にアップロードし、指定ブラウザ・端末で表示を確認
- 確認・修正 — 発注者側が実機で確認し、修正点をまとめてフィードバック
- 納品 — ソースコード一式を受領（ZIP、GitHub、サーバーへの直接アップロードなど）
- 検収・請求 — 動作確認後に検収完了、請求書に基づき支払い
小規模なLP1本なら数日〜1週間、10ページ規模のコーポレートサイトで2〜4週間程度が一般的な目安です。修正フィードバックは個別に小出しにせず、一覧にまとめて渡すほうが、往復回数が減り納期短縮につながります。
なお「デザインが未確定でも依頼できるか」という質問は多く寄せられますが、原則としてデザイン確定後の入稿が前提です。未確定のまま着手すると、後からのデザイン変更がそのまま追加費用として跳ね返ります。どうしても並行で進めたい場合は、変更が入らないページから順に着手する段取りを組むとよいでしょう。
失敗しないコーディング代行会社の選び方
得意分野・対応範囲の確認
まず、自社の案件と依頼先の得意領域が一致しているかを確認します。チェックすべき観点は次のとおりです。
- 対応言語・技術（HTML/CSSのみか、JavaScript、PHP、Reactなどまで対応するか）
- WordPressをはじめとするCMS構築への対応可否
- レスポンシブ対応が標準か、オプション扱いか
- 対応可能なデザインデータ形式（Figma、XD、Photoshop、Illustrator）
- 検証対象ブラウザと端末の範囲
- 最低発注金額や基本料金の設定の有無
特に基本料金は見落としがちなポイントです。1ページ単価が安く見えても、案件ごとに数万円の基本料金が加算される料金体系だと、小規模案件では割高になります。
実績・品質担保の仕組み
実績数そのものより、「自社と似た案件の実績があるか」を見てください。ECサイトの実装経験が豊富な会社と、コーポレートサイトを中心に手がける会社では、得意なつくりが異なります。制作事例が公開されていれば、実際のサイトをブラウザの開発者ツールで開き、HTMLの構造やクラス名の付け方を確認するのも有効です。
品質担保の仕組みとしては、次のような要素が判断材料になります。
- コーディングガイドラインを社内で整備しているか
- 実装者とは別の担当がチェックする体制があるか
- W3Cバリデーションや表示速度のチェックを行っているか
- 納品後の瑕疵修正期間（30日間無償など）が明記されているか
- 複数人での対応体制があり、担当者不在時のリスクが低いか
コミュニケーションのしやすさ・サポート体制
見積もり時のやり取りは、そのまま制作中のやり取りの予告編です。質問への回答が的確か、レスポンスが早いか、こちらの説明不足を補う質問を投げてくれるか——この時点での印象は、かなりの精度で本番の進行を予測します。
あわせて確認しておきたいのが、連絡手段（メール、Slack、Chatworkなど）と対応時間帯、担当者が固定されるかどうか、そして納品後のサポート範囲です。「納品後の軽微な修正はどこまで無償か」を契約前に文書で確認しておくと、後のトラブルを確実に減らせます。
最後に、契約面ではNDAの締結、著作権の帰属、再委託の可否、検収条件と支払いサイトを取り決めておきます。特に著作権とソースコードの取り扱いは、将来的に別の会社へ運用を移す際に効いてくる項目です。
まとめ
コーディング代行は、デザインデータをもとにHTML・CSS・JavaScriptなどで実装する工程を外部に委託するサービスです。採用難が続くWeb人材市場において、実装工程だけを切り出して外部化する手法は、多くの企業にとって現実的な選択肢になっています。
依頼先はWeb制作会社、コーディング専門の代行会社、フリーランス、クラウドソーシングの4種類に大別され、品質重視なら制作会社、価格とスピードのバランスなら専門代行会社、コスト重視ならフリーランスやクラウドソーシング、という使い分けが基本になります。
費用の目安は、下層ページで5,000円〜20,000円、トップページで15,000円〜50,000円、LPで30,000円〜75,000円程度。レスポンシブ対応はコーディング費の1.5〜2倍前後、既存サイトのレスポンシブ化は1ページ15,000円〜35,000円前後が相場です。WordPress構築を含む場合はページ単価20,000円〜80,000円、サイト一式で30万円〜150万円というレンジになります。ただし縦幅・要素密度・JavaScriptの量・対応ブラウザによって変動するため、実際の金額は見積もりで確認する必要があります。
発注前にデザインデータ・サイトマップ・コーディング指示書の3点をそろえておけば、見積もり精度が上がり、修正の往復も減ります。会社選びでは、対応範囲・実績と品質担保の仕組み・コミュニケーションとサポート体制の3点を軸に比較し、単価の安さだけで判断しないことが、結果的に総コストを抑える近道です。