ページ構成や機能によって変わるコーディング費の考え方を、実務目線で整理します。
Webサイトの見積りを作っていると、
「コーディング費って、1ページいくらくらい見ておけばいいんだろう？」
と迷うことがあります。
検索すると、
「トップページ○万円」
「下層ページ○万円」
といった料金表も見つかります。
概算を考えるうえでは参考になりますが、実際の案件では、同じ「1ページ」でも必要な工数はかなり違います。
短い会社概要ページと、30,000pxを超えるLP。
静止したページと、スクロールに合わせてさまざまな要素が動くページ。
さらにWordPressやフォームが加われば、ページ数だけでは金額を判断できません。
では、クライアントへ見積りを出すとき、コーディング費をどう考えればよいのでしょうか。
コーディング費は「ページ数＋工数」で考える
コーディングの見積りでは、ページ数も一つの基準になります。
ただし、
「5ページ × ○円」
と単純に計算するだけではありません。
私の場合、まずページの長さを見ます。
たとえば、
- 10,000px程度
- 30,000px程度
- それ以上
といったように、ボリュームを段階に分けます。
さらに、
- 画像を中心に実装するのか
- HTMLのテキストとして細かく組むのか
- レイアウトが複雑か
- レスポンシブ対応がどの程度必要か
- JavaScriptによる動きがあるか
- アニメーションがあるか
- フォームがあるか
- WordPressへの組み込みが必要か
といった条件を加えて工数を考えます。
見出し・文章・会社情報の表だけで構成された短い会社概要ページと、30,000pxを超えるLPでは、同じ「1ページ」でも必要な作業量は大きく違います。
LPの各所に、
「スクロールするとここが動く」
「数字がカウントアップする」
「この要素が横から入ってくる」
といった指定があれば、その分だけ実装と確認の時間も増えます。
そのため、工数が大きく違うページについては、見積書でも明細を分けています。
「1ページ」はページ数を把握するには便利な単位ですが、価格まで一律に決められる単位ではありません。
私が「1ページいくらですか？」と聞かれた場合も、
「この程度のページなら○円くらい」
「このくらい長く、動きも多ければ○円くらい」
と、実際のページを比較しながら説明することがあります。
料金表の数字だけを示すより、そのほうが金額の違いを理解してもらいやすいためです。
複数ページのサイトは「案件全体の工数」で考える
複数ページのサイトでは、ヘッダーやフッターなど、全ページで共通する部分があります。
私は、こうした共通部分の制作費をトップページの見積りに含め、そのことも明細に記載しています。
では、似たレイアウトの下層ページが何ページもある場合、2ページ目から安くするのか。
私はそうしていません。
似た下層ページが複数ある場合は、案件全体の作業量から平均したページ単価を出し、同額で積み上げます。
たとえば実際の作業量が、
- 1ページ目は多い
- 2ページ目以降は少ない
という場合でも、
「1ページ目○円、2ページ目以降○円」
と極端に差をつけると、1ページ目だけ別の人へ発注され、2ページ目以降だけ依頼される可能性があります。
それでは、後半の単価だけでは採算が取れません。
見積りでは単純な作業時間だけでなく、
その部分だけを依頼されても、仕事として成立する金額になっているか
という視点も必要です。
ページ単体だけでなく、案件全体として無理のない価格になっているかを見て見積ります。
WordPress案件は「2階建て」で考える
WordPress案件には、デザインだけを見ていると分かりにくい作業があります。
たとえば、
「トップページ1ページ、下層5ページだから、6ページ分のコーディング」
と考えたとしても、それだけでWordPressサイトが完成するわけではありません。
ページを作る前に、WordPressを動かすための土台を用意する必要があります。
たとえば、
- WordPressのインストール
- テーマの選定
- プラグインの選定
- 各種初期設定
- テンプレートの作成
などです。
私はこれを、「WordPress案件の見積りは2階建て」と説明しています。
1階がWordPressの構築。
2階が、デザインをもとにした通常のコーディングです。
デザイナーからは2階の「1ページいくら？」が見えやすいのですが、WordPressサイトとして動かすためには1階の作業も必要になります。
さらにフォームや独自のカスタマイズが加われば、その分も追加されます。
静的サイトとWordPressサイトで、同じページ数なのに金額が違うのは、
「WordPressだから高い」
というより、
ページを作る以外の作業があるから
と考えると分かりやすいと思います。
デザイン完成前でもコーダーへ相談できる
クライアントへ見積りを出す段階で、デザインが完成しているとは限りません。
むしろ、
「まだワイヤーフレームしかない」
「参考サイトだけ決まっている」
という段階で金額を求められることもあります。
その場合でも、条件がある程度分かれば概算を出すことはできます。
たとえば、
「この参考サイトと同程度のボリューム・仕様なら○円程度」
あるいは、
「○ページ、フォームあり、この程度のアニメーションを前提として○円」
という出し方です。
実際、何度も一緒に仕事をしているデザイナーからは、デザイン完成前の段階で相談を受けています。
参考サイトやワイヤーフレームを見ながら、
「このくらいのページ数なら」
「この機能まで必要なら」
「WordPressならこの作業も必要になるので」
と条件を整理し、概算を出します。
このとき重要なのは、何を前提にした金額なのかを残しておくことです。
最低限、次のような条件を整理しておきます。
- ページ数
- 想定しているページの長さ
- フォームの有無
- WordPressの有無
- アニメーションの程度
- 参考にしたサイト
完成したデザインが参考サイトより大幅に長くなったり、想定していなかった機能が追加されたりすれば、当然工数も変わります。
その場合は再見積りになる可能性があることも、最初に伝えておきます。
避けたいのは、自分の感覚だけで、
「コーディングは5万円くらいだろう」
と先にクライアントへ提示して受注し、そのあとコーダーへ相談したら10万円必要だった、というケースです。
受注後にクライアントへ金額を上げてもらうのは簡単ではありません。
コーディング費を自分だけで正確に予想できる必要はありません。
判断できない段階で、判断できる人に相談する。
そのタイミングを、受注後ではなく見積り前に持ってくることが重要です。
コーダーの見積りは「原価」として考える
コーディングを外注する場合は、コーダーから出てきた見積りをそのままクライアントへの販売価格にしないことも重要です。
仮にコーダーから、
「10万円」
という見積りが届いたとします。
それをそのまま、
「コーディング費 10万円」
としてクライアントへ提示すると、その部分についてデザイナー側にはほとんど利益が残りません。
外注しても、デザイナー側の仕事がなくなるわけではないからです。
たとえば、
- コーダーへ渡すデータを整理する
- 仕様を伝える
- コーダーからの質問をクライアントへ確認する
- 完成したページをチェックする
- 修正内容をまとめる
- スケジュールを調整する
といった作業があります。
こうした進行管理やディレクションにも時間がかかります。
そのため、コーダーから提示された金額は、
クライアントへの販売価格ではなく、デザイナー側の原価の一つ
として考えます。
そこへ、自分が担当する確認・調整・進行管理の工数や利益を含めて、クライアントへの見積りを作ります。
「外注費10万円だから、クライアントにも10万円」
ではなく、
10万円の外注費を使って案件を進めるために、自分にどれだけの作業が発生するのか
まで含めて考える必要があります。
予算が合わないときは、値引きより仕様を見直す
コーダーから15万円の見積りが出た。
でも、クライアントの予算では10万円しか確保できない。
そんなとき、
「10万円に値引きできませんか？」
と聞く前に、まず仕様を見直せないか考えます。
たとえば、
- アニメーションを減らす
- クライアントが更新できる範囲を限定する
- 独自開発ではなく既存プラグインを利用する
- 優先度の低い機能を今回は外す
といった方法があります。
フォームなら、確認画面や独立した送信完了ページをなくし、送信後に同じ画面上で完了メッセージを表示する方法へ変えることもできます。
テキストとして細かくコーディングする予定だったLPなら、一部を画像で実装することで工数を減らせる場合もあります。
ただし、画像で実装すると、あとから文章を変更するときにデザイナー側で画像を作り直す必要が出てきます。
安くする代わりに、何が変わるのか。
そこまで含めてクライアントへ説明します。
考え方としては、
同じものを安く作ってもらうのではなく、予算内で実現できる仕様へ組み替える
ということです。
早い段階でコーダーへ相談しておけば、単に「高い・安い」で終わらず、こうした代替案も検討しやすくなります。
「修正」と「仕様変更」は分けて考える
あとから修正が増えることを心配して、
「念のため最初から多めに見積っておこう」
と考えることもあると思います。
私は、できるだけ仕様を明確にして、その内容に対して見積ることを基本にしています。
そして制作後に変更が出たときは、
こちらの瑕疵なのか、当初の仕様からの変更なのか
を分けて考えます。
たとえば、デザインどおりに表示されていないのであれば修正すべきです。
一方、
「やっぱりここにもアニメーションを追加したい」
「フォームに入力項目を増やしたい」
という要望は、修正ではなく仕様変更です。
私は検収期間中の修正回数そのものには制限を設けていません。
ただし、瑕疵と仕様変更は分けます。
また、検収終了後の変更については別料金になることも、見積り時点で明記しています。
単純に、
「修正は○回まで」
と回数だけで区切るのではなく、
何に対する修正なのか
で判断する考え方です。
見積り前にコーダーへ渡したい情報
デザインが完成していなくても、次の情報がある程度そろっていれば、コーディング費の概算を相談しやすくなります。
- ページ数
- 各ページのおおよその長さ
- 参考サイトやワイヤーフレーム
- WordPressを使うかどうか
- フォームや更新機能の有無
- アニメーションや動きの程度
すべてを確定してから相談する必要はありません。
「ここまでは決まっている」「ここから先は未確定」と分けて伝えれば、その条件を前提に概算を考えることができます。
その金額を外注原価の一つとして、自分の進行管理や確認作業、利益を加えてクライアントへの見積りを作る。
予算が合わなければ、単純な値引きではなく仕様を調整する。
制作が始まったあとは、修正と仕様変更を分けて考える。
この流れを見積り前から整理しておけば、受注後に「思っていたよりコーディング費が高かった」と慌てる場面を減らせます。
コーダーへ相談するのは、受注したあとでなくても構いません。
受注するための見積りを作る段階から相談する。
そのほうが、デザイナー自身の利益を守りながら、無理のない条件で案件を進めやすくなります。