Webサイト制作の工程に欠かせないのがコーディングです。今まではWebデザインの仕事の一部としてとらえられることも多かったコーディングですが、近年Webテクノロジーの進化に伴いコーディングがより専門化し、一つのカテゴリとして認識されてきています。当記事では、コーディングの基礎知識から、コーディングを外注・代行依頼する場合の相場やポイントについて解説します。
目次
コーディングの外注先や費用の相場は？
近年では特にコーディングに求められる知識が専門的になってきました。コーディングとは、プログラミング言語を使ってWebサイトのデザインを設計・拡張することです。例えば、企業サイトに動きのあるグラフィックや、成約用のバナーや問い合わせフォームを取り入れることができます。オウンドメディアやECサイトの構築にもコーディングが必要です。
Webサイトの機能が多様化するにつれて、社内の人材だけでは対応に限界を感じている場合は、コーディングを外部の専門家に依頼するのも一つの解決策です。そこで、コーディングの外注先とそれぞれの費用の相場をご紹介します。
Web制作会社
社内にコーディングのノウハウがなく、一切制作チームを持っていない場合は、Web制作会社に依頼する方法があります。Web制作会社に外注する費用の相場は以下の通りです。
| 作業範囲 | 費用の目安 |
|---|---|
| ディレクション費用 | 0～200,000円 |
| トップページ | 10,000〜40,000円 |
| 下層ページ（1ページあたり） | 5,000～20,000円 |
| レスポンシブ対応 | 通常ページ単価の1.5～2倍 |
| 企業サイト（10ページ程度） | 120,000～180,000円 |
Webサイトの企画・デザインからコーディングまでワンストップで依頼できるのがメリットです。この場合、コーディングというよりはWebサイト全体の構築となり、制作期間も費用もそれなりにかかります。
テンプレートを用いたデザインであれば費用を抑えて依頼できる場合もあります。
コーディング代行会社
最近ではコーディングに特化した代行業者も数多くあります。コーディング代行会社に外注する費用の相場は以下の通りです。
| 作業範囲 | 費用の目安 |
| 基本料金 | 30,000～50,000円 |
| トップページ | 10,000円〜40,000円 |
| 下層ページ（1ページあたり） | 5,000円～10,000円 |
| レスポンシブ対応 | 通常ページ単価の1.5～2倍 |
デザイナーが社内にいる場合でコーディングだけ外注したい場合は、コーディング代行会社も外注先の候補として検討できます。
代行会社にはコーダーの上位のフロントエンジニアと呼ばれる職種の人がいる場合もあり、専門性が高く、ノウハウ面や品質面で安定している傾向にあります。
別途基本料金が発生する場合もあり、基本料金が必要な場合はページ単価が安く設定されていることもあるので、サイトの規模により使い分けるのもいいでしょう。
フリーランス
同じように社内にデザイナーがいてコーディングだけ外注したい場合は、個人で活動するフリーランスのコーダーに依頼する方法もあります。フリーランスに外注する費用の相場は以下の通りです。
| 作業範囲 | 費用の目安 |
|---|---|
| 基本料金 | 0円 |
| トップページ | 25,000円～ |
| 下層ページ（2～5ページ） | 20,000円～ |
| レスポンシブ対応 | 10,000円～ |
昨今ではクラウドソーシングサイトのように個人で活動するコーダーとマッチングできるサービスも数多くあります。
個人に依頼するメリットはランディングページのような1枚だけのページ、既存ページのコードの作り直しや部分的な追加なども依頼しやすい点です。
他にも個人であれば、急ぎで納期があまりない案件にも対応してもらいやすいメリットもあります。
コーディングを外注する3つのメリット
費用面で負担に感じられることもある外注ですが、Webサイトの構築や拡張など専門知識やスキルを要するコーディングには以下のメリットがあります。
- 質の高い制作が期待できる
- コストパフォーマンスがよい
- 社内の人的リソースを節約できる
それぞれについて解説します。
メリット1. 質の高い制作が期待できる
専門知識とスキルが必要なコーディングを外部のプロに依頼すれば、当然質の高い制作が可能です。例えば、パソコンだけでなくスマートフォンやタブレットなど、デバイスの画面サイズに合わせて表示できるレスポンシブ対応があります。
また、コーディング技術は常に進化しています。最新技術に精通したプロなら、使用頻度が高いフォントやファイルパスなど、コードデザインのトレンドに合わせてサイトを最適化させることが可能です。
メリット2. コストパフォーマンスがよい
コーディングを外部に依頼すれば、コストパフォーマンスの高いWeb制作が期待できます。実際のところ、専門性の高いコーディングを社内で内製化するには、ノウハウのある人材を採用しなければなりません。採用にかかる費用や人件費、福利厚生費等を考慮すると、特定の業務についてのみ対価を支払う外注は、かなりの節約につながります。
メリット3. 社内の人的リソースを節約できる
コーディングは、知識やスキルがあり日々学習しているプロに任せることで、社内の人的リソースを節約できます。例えば、Webサイト制作に人件費も外注費もかけられない企業では、社員にコーディングを兼任してもらう選択肢もあります。
しかし、作業負荷が重いため他業務に支障をきたしたり、どちらも中途半端になったりするリスクが否めません。外注すれば社員への負担を減らし、その分本来の業務に集中することが可能です。
コーディングを外注する5ステップと注意点
これからWebサイトの制作や改善を行う方のために、コーディングを外注する流れをステップ形式で解説します。各ステップでの注意点についても触れています。ぜひ参考にしてください。
ステップ1. 外注候補に作業内容を相談
まずは、サイト構築や改善の目的を明確にし、どのような作業を行えばいいのか目星をつけてください。その上で、対応可能な外注候補数か所に問い合わせをします。このときゼロからサイトを構築するなら、コーディングに限らず、総合的なコンサルティングが受けられる制作会社に相談する方法があります。
レスポンシブ対応や部分的なサイト改善の場合、予算に合わせて幅広く外注候補を探してみましょう。また、ECサイトの構築ならパッケージ化しているコーダーもいます。
ECサイトのコーディングパッケージについては、こちらの記事でも解説しています。
ステップ2. 見積もりを依頼・費用交渉
外注候補に相談をしたら、実際に依頼する業務内容を指定して見積もり依頼をします。外注候補の料金体系や制作期間、支払いについても確認しておきましょう。料金は、サイト規模や作業範囲、コーダーの専門性によって大きく変動します。依頼したい作業を予算範囲で収めるには、費用交渉を行うことも一つの方法です。
ステップ3. 外注候補を決めてコーディング指示書を提示
複数の見積もりから納得できる依頼先を決めたら、発注する際に具体的な作業内容を記したコーディング指示書を提出します。WordPressなどのサイトを作成するCMSの扱いや、スライダーなどの動きの実装など詳細情報が必要です。
コーディング指示書の作成方法がよく分からない場合は、依頼先に確認してください。指示書のフォーマットを提供してくれる会社やフリーランスもいます。
ステップ4. コーディング後のテスト
コーディングが完了したら、制作物の確認とテストを行います。CMSへ仮アップロードを行い、動きや速度などを見ていきます。指示書通りの制作ができているか、また微調整が必要な場合は修正依頼を行います。エラーが出た場合も同様です。
ステップ5. 検収
コーディング指示書通りに制作されたら、本アップロードを行って検収完了です。検収後にもフォローやエラー対応が必要な場合は、別途相談する運びになります。当初決めておいた期限内に支払いを行い、コーディングの1プロジェクトが終了します。
コーディングを外注する前に知っておきたいスクリプト、Web開発言語の種類
上述の通りコーディングではカバーする範囲が多いので、実装したい機能によってコーダーに求める対応言語範囲も異なります。
外注する前に以下を参考にして、必要な言語にはどんなものがあるかを把握しておきましょう。
HTML
HTMLはコーディングの基本となる言語です。
画像やテキストなどページ上にある大部分の構造を表現するために使われます。
実はHTMLにもバージョンがあるのをご存知でしょうか。
現在はHTML5が標準仕様とされています。
HTML5の知識は内部SEO対策にも必須ですし、これからの標準となる記述方式です。
コーダーでHTMLが書けない人はいないと思いますが、HTMLのバージョン違いの認識やHTML5に準拠したコードが書けるかはチェックすべきポイントになるでしょう。
CSS
CSSは「カスケーディング スタイル シート」の略で、HTMLと同様にコーディングの基本となる言語です。
文字の種類やサイズ、色、背景色などページ内の体裁の部分を表現するために使われます。
基本的な装飾だけでなくCSSを使えば画像を使わずボタンデザインを作ったり、簡単なアニメーションを作ったりできます。
またCSSはさまざまなデバイスに合わせて表示を変えるレスポンシブデザインには必須の言語です。
HTMLと同じくコーディングには最低限必要な言語と認識しておきましょう。
JavaScript、jQuery
JavaScriptとはWebサイト上でよく用いられるプログラミング言語です。
ページ内で動的な挙動をさせる場合によく使われます。
ページ内にアニメーションを表示させたり、クリックのようにユーザーが取った特定の動作にあわせてコンテンツを表示させたりするのもJavaScriptで制御します。
jQueryはJavaScriptで頻繁に使われるプログラムコードをあらかじめ用意してあるライブラリのことです。
JavaScriptやjQueryは使い勝手の良いメニューやフォーム、画像表示には欠かせませんので、これらの機能が必要な場合は必ず対応可能か確認しましょう。
PHP
PHPはここまで紹介したものより、より本格的なプログラミング言語と位置付けられます。
PHPは通常のWebサイトのコーディングでは必要ありませんが、WordPressを使ったサイトを作る場合は必要なケースがでてきます。
WordPressは「テーマ」と呼ばれる既にデザインされたテンプレートを使ってWebサイトを構築していきます。
「テーマ」は便利ですが、自分のサイトにあわせて部分的に変更したり、改良したりする必要がある場合も出てきます。
CSSのみである程度の改良も可能ですが、よりダイナミックな改良が必要な場合はPHPでプログラムそのものを書き換える必要があります。
PHPはコーディングの領域というよりはプログラミング領域に入りますが、WordPressを採用する場合は、必要になる場合があると頭に留めておきましょう。
コーディングを外注する時のチェックポイント
コーディングを依頼するとき、対応できる言語を確認するだけでは実は少し不十分です。
なぜなら同じプログラミング言語の知識があっても、ノウハウや経験によって強みや対応可能な範囲が異なるからです。
実際にコーディングを外注する際にポイントとなる点を以下にまとめましたので、依頼する際の参考にしてみてください。
入稿できるデザインデータの種類
コーディングのみを依頼する時は、デザインした画像データを渡してコーディングしてもらう流れになります。
このときに渡す画像データがどのようなデータ形式に対応しているのかは必ず前もって確認しておきましょう。
AdobeのIllustratorで作られたAI形式やPhotoshop で作られたPSD形式、PNG形式であれば一般的には対応可能な場合が多いです。
他の形式でデザインデータを入稿したい場合は、前もって対応可能かどうかを必ず確認しましょう。
レスポンシブWebデザインに対応可能か
レスポンシブWebデザインとは表示デバイスのサイズの違いによってレイアウトを切り替えるページ作りを表します。
スマートフォンの普及によりパソコンだけでなくモバイル端末でも、Webサイトを読みやすく表示させるコーディングが必要な時代になりました。
よっぽど限定したサイトでない限りはスマートフォンを含めたあらゆるデバイス対応が必須ですので、チェックポイントとして押さえておくようにしましょう。
さらに昨今ではスマートフォンやタブレットでもサイズがバラバラなので、デバイスに関わらず全ての画面サイズで表示を可変させるリキッドデザインと呼ばれる方法もあります。
レスポンシブ対応と併用するとより最適な表示が可能になるので、セットで確認するといいでしょう。
複数ブラウザ表示に対応可能か
上記のデバイスと同様に、ChromeやSafari、Edgeといったブラウザにも様々な種類が存在します。
実はブラウザごとにもサポートしているHTMLやその他の機能の範囲が異なります。
それを知らないままコーディングしてしまうと、一部のブラウザで正常にページが表示されないという事態を招いてしまいます。
バージョンの違いも含めるとブラウザの種類は多数あるので、全てに対応するのは難しいですが、主要なブラウザで問題の出ないコーディングができるかは聞いておきましょう。
ブラウザごとの表示チェック、コードチェックまでしてもらえるとより安心です。
SEO対策を意識したコーディングに対応可能か
SEO対策とはキーワード検索された際の結果画面に自社のWebサイトを上位に表示させる対策を指します。
一般的にSEO対策といえば、キーワード選定やライティング、外部からのリンク獲得のような施策を思い浮かべがちですが、それだけではありません。
内部SEO対策と言われるコーディング上で行う対策も同時に行う必要があります。
特に最近では、検索エンジンがサイトの情報を認識しやすいような構造を意識したコーディングが不可欠と言われています。
SEO対策はノウハウが重要な分野でもあります。
もしSEO対策を意識している場合は、コーディングで内部SEO対策をどこまでやってもらえるのか、実績やノウハウがあるか確認するようにしましょう。
CMSのカスタマイズが可能か
CMSとは専門知識がなくてもWebページを簡単に作成したり更新したりするためのシステムです。
最近では利用者も非常に多くなったWordPressはこのCMSの代表例です。
もしサイトの制作・運営にCMSを使う場合は、カスタマイズしてもらえるかどうかもチェックポイントになります。
カスタマイズでも、文字の種類や大きさ、背景色のような簡単な変更から、機能を新たに追加するなど、その範囲は幅広くあります。
カスタマイズの種類によって必要な言語スキルや技術にも差がでてきます。
やりたいことをあらかじめ明確にしておいてから外注先を検討しましょう。
納期
依頼する時に押さえておきたいポイントは技術的なものばかりではありません。
費用や納期も外注先選びでは重要です。
コーディングの費用に関しては前述した通りですが、納期は外注先によってまちまちですので、必ず費用と同時に確認するようにしましょう。
急ぎの案件の場合、個人であれば短納期の仕事も受けてもらいやすい傾向にあります。
コーディング代行会社では、別途費用が必要な場合もありますので注意が必要です。
まとめ
Webサイト制作には欠かせないコーディングについてご紹介してきましたが、求められる専門性やスキルの幅広さに驚かれたかもしれません。
これまでもそうであったように、これからもIT環境やWebテクノロジーは目まぐるしいスピードで進化していくことは想像に難くありません。
社内にコーディング専任担当を採用する方法もありますが、必要に応じてスキルのある外部の人材を柔軟に活用するのも選択肢の一つです。
昨今では大企業でも、クラウドソーシングサイトを使ってフリーランスの人材を活用する事例も多く見られます。
ランサーズなら全国各地からコーダーが多数登録しています。
ネットで募集、依頼、納品まで完結できるので、1ページだけの依頼や急なコーディングでも必要に応じて依頼できます。
まずはこちらから、コーディングができるフリーランスを探すところからはじめてみませんか。
