制作費の内訳を大公開!Webサイト制作にかかるお金について


制作費の内訳を大公開!Webサイト制作にかかるお金について

こんにちは。ディレクターのJack (@y_kazuhiko) です。ディレクター連載「いいWebつくろう〜クライアントと制作会社〜」の第3回は、Webサイト制作にかかるお金についてです。

ぶっちゃけ、Web担当者はサイト制作にいくらかかるの? って思いますよね。無料ブログなどを利用すれば簡単にWebサイトを構築できる時代。ただ、実際に0から作るとなるとそれなりにお金がかかります。コンセプト設計をおこない、仕様を策定し開発をおこなう。家を作るステップと大変似ています。家をつくるときって、大勢の人が建築に携わり、とてもお金がかかりますよね。Webサイト制作もそれと同じなのです。制作に携わった人数分、お金がかかります。いわゆる人件費というやつですね。

本記事では、サイト制作時に発生する費用に関して説明できればと思います。

サイト制作時に発生する費用に関して

サイト制作時にはさまざまな費用が発生します。下記項目を人日計算で金額を見積もるケースが多いです。

  • ディレクション費
  • デザイン制作費
  • フロントエンド開発費
  • バックエンド開発費
  • ブラウザ検証費

これだけ見ただけでは、「ディレクション費って、具体的にどんな作業をするの?」「フロントエンド開発費って何それ?」と思うかもしれません。各項目に関して、ひとつずつ解説をさせていただきます。

お見積り例

皆さんも下記のような見積書をもらったことはありませんか?
※今回記載している内容は、あくまで例となります。

項目 人日 単価
ディレクション費 10 40,000円 400,000円
デザイン制作費 6 40,000円 240,000円
フロントエンド開発費 5 40,000円 200,000円
バックエンド開発費 5 40,000円 200,000円
ブラウザ検証費 3 40,000円 120,000円
合計 1,160,000円

この見積書は必要最低限の項目しか入れておりませんので、制作会社によってさらに細分化されている可能性もあります。不明点がある場合は、都度担当者に確認してみましょう。

さて、上から順にひとつずつ解説していきます!

ディレクション費

ディレクション費とは、ディレクターの稼働対価となります。実際に制作をおこなう際には、ヒアリング、提案書の作成など制作に入る前にさまざまな作業が発生します。プロジェクトのはじまりから終わりまでを担当する人員です。エンジニア、デザイナーよりもプロジェクトに携わる期間が長いので、かかる費用が高くなる傾向があります。

  • 打ち合わせ(ヒアリング)
  • 提案資料の作成
  • プランニング・コンセプト設計など
  • 仕様策定(サーバ構成書なども作成するディレクターもいます)
  • プロジェクト進行管理(デザイナー、エンジニアへの指示)

「ディレクション費? プランニング費? いらないでしょ? 値引きしてよ!」

そう思った方は、危険です。プロジェクトの成功可否は、ディレクターにかなり依存しています。この費用の値引き交渉をしてしまうと、その分ディレクターはプロジェクトに割ける時間が減ってしまうので、制作物の品質が下がってしまいます。

また、ディレクション費を「全体金額の30%」など「パーセンテージ(%)」で算出されている場合は、あくまで概算ですので注意が必要です。

デザイン制作費

画面設計書の作成、UI/UX設計、デザイン制作を実施するデザイナー稼働の対価となります。
デザイナーの作業内容もいろいろとあります。

  • UI/UX設計・画面設計書の作成
  • ベース(トップ)デザインの制作
  • 下層デザインの制作
  • ロゴの制作
  • イラストの作成

ロゴの制作に関しては、別途料金がかかるケースが多いです。ロゴで一括りといっても、コーポレートロゴとサービスロゴで設計から作業工数は、大きく変わってきます。

また、デザイン制作する際は、写真素材が必要となります。お客様の方で素材の支給が難しい場合は、有料の写真素材を購入する必要があります。写真素材購入以外にも撮影も可能ですので、担当のディレクターと確認してみるのも良いでしょう。

Webサイトの命運を左右するデザイン。会社の顔となります。「少し高いな〜」と思った方は、デザインは投資と考えてみてはいかがでしょうか? 今後3〜5年という中長期で考えてみるとデザインに対する考えは変わるかと思います。なぜなら、24時間フル稼働で営業してくれる、とびきりの営業マンになるのですから。

フロントエンド開発費

HTMLやCSS、JavaScriptなどを利用し、Webサイトのフロント部分を制作するエンジニアの稼働対価となります。

デザイン制作が完了後に発生する作業です。

  • システム設計
  • HTMLマークアップの実装
  • CSS実装
  • JavaScript実装
  • アニメーション実装
  • Webサイト設計のドキュメント作成

フロントエンドエンジニアは、ただHTMLを制作するだけのエンジニアではありません。Web標準に準拠したり、利用者が使っていて「気持ちいい」と思わせるような表現や設計をおこないます。また、対象ブラウザが増えると実装難易度が上がりますので、費用が高くなります。

バックエンド開発費

PHPやRubyなどのプログラミング言語を利用し、Webサイトのシステム部分を開発するエンジニアの稼働対価となります。

主な作業内容は、下記となります。サーバ設定などのインフラ作業もこの項目に含まれる事があります。

  • システム設計
  • PHPやRubyなどを利用したシステム開発
  • WordPressの構築・カスタマイズ(問い合わせフォームの実装など)
  • サーバ設定作業

バックエンド開発というのは、目に見えることはなかなかなく、イメージし難いかもしれません。ただ、なくてはならない存在です。縁の下の力持ちというイメージでしょうか。このブログでも記事を実際に表示させているのは、バックエンド側で「このURLにアクセスしたらこの記事を表示してね!」という命令を裏側で処理しているからです。実装したい機能が増えるほど見積りが増えるので、本当に必要な要件・機能を洗い出す必要があります。機能の洗い出しが難しい場合は、担当ディレクターやエンジニアと確認してみてください。

ブラウザ検証費

一通り制作が完了したら、ブラウザ検証作業に入ります。このブラウザ検証というのは、制作したWebサイトが正常挙動しているか確認する作業になります。検証完了後、お客様に検収していただき納品という流れになります。

LIGでは、原則的に下記ブラウザで確認をおこないます。(2016/02/09時点)
もちろん案件に応じて、利用するブラウザは変更になる可能性があります。

  • Windows8.1: Internet Explorer 11
  • Windows8.1: Firefox最新版
  • Windows8.1: Chrome最新版
  • MacOS X(10.10): Chrome最新版
  • MacOS X(10.10): Firefox最新版
  • MacOS X(10.10): Safari 8
  • iPhone iOS8: Safari 7
  • iPhone iOS9: Safari 8
  • Android 4.4以上: Android Browser

Internet Explorer 9など対象ブラウザが古い場合や、検証する対象ブラウザが増えた場合は料金が変動しますので、注意が必要です。

まとめ

本記事では、制作時に必要な下記項目の制作費の確認をおこないました。

  • ディレクション費
  • デザイン制作費
  • フロントエンド開発費
  • バックエンド開発費
  • ブラウザ検証費

いかがでしたか? あくまで必要最低限の項目ですので、つくりたいWebサイトの種類(コーポレートWebサイト、メディアWebサイト、サービスWebサイトなど)によって見積りの項目は変動しますので担当者に都度確認してみましょう。
要望を出せば出すほど金額は上がりますので、「この機能やページは本当に必要なの?」ということを意識することが重要です。また、概算見積りで社内稟議を通すのは、のちのち予算の確保が難しくなる場合がありますので、要件・機能を確定後に正式な見積りで社内稟議を通すことをオススメします! 高い金額をかけて制作するWebサイト。お金の不明点はしっかりと明確にして、イケてるWebサイトを発注側・受注側とで二人三脚で作っていきたいですね!

一緒にいいWebをつくりましょう。


この記事を書いた人

Jack
Jack ディレクター 2015年入社
ディレクターのJackです。
テクニカルディレクターも兼務しています。趣味はサーフィンです。
PHPとAWS、Google Analyticsも大好きです。

Web事業部制作課チームリーダー。
ディレクターユニットリーダーも兼務しています。
ディレクター向けの講演依頼はお気軽にご連絡ください。