ディレクション費って何？Webサイト制作費の内訳

Webサイト制作にかかるお金についてです。

ぶっちゃけ、Web担当者は「サイト制作にいくらかかるの？」ということが気にかかりますよね。

無料ブログなどを利用すれば簡単にWebサイトを構築できる時代。

ですが、実際にゼロから作るとなるとそれなりにお金がかかります。

コンセプト設計をし、仕様を策定し、開発をおこなうWeb制作は、家を作るステップと似ています。家をつくるときって大勢の人が建築に携わるので、なかなかお金がかかりますよね。Webサイト制作も同じなのです。制作に携わった人数分、お金がかかります。いわゆる人件費というやつです。

本記事では、サイト制作時に発生する費用に関してご説明できればと思います。
サイト制作時に発生する費用に関して
サイト制作時にはさまざまな費用が発生します。下記の項目でかかる人日(＝にんにち)を計算して、金額を見積もるケースが多いです。

※「人日」とは、システム開発やWeb制作などのIT業界ではよく使われる言葉で、1人の社員がある作業を完遂させるためにかかる日数のことです。「デザインに5人日かかる」というふうに使います。そして、この「人日」に、その人が1日稼働する際に売り上げなければいけない金額=「人日単価」を掛けて見積もりを出す、というやり方が一般的です。
ディレクション費
デザイン制作費
フロントエンド開発費
バックエンド開発費
ブラウザ検証費
これを見ただけでは、

「ディレクション費って、具体的にどんな作業をするの？」
「フロントエンド開発費って何それ？」

と思われるかもしれません。各項目に関して、ひとつずつ解説をさせていただきます。

お見積り例
皆さんは、下記のような見積書をもらったことはありませんか？

項目 人日 単価 計
ディレクション費 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円
この見積書は必要最低限の項目しか入れておりませんので、制作会社によってさらに細分化されている可能性もあります。不明点がある場合は、都度担当者に確認してみましょう。

※上の表に記載している金額は、Web制作業界で私が見聞した限りでの平均的な費用感となります。弊社LIGに発注いただく場合の費用感についてはWeb制作事業のページをご参照ください。上に掲げた費用感よりも若干高めの設定となっておりますが、それは弊社がマーケティングやコンサルティングの要素も併せて提供させていただいているためです。
さて、上から順にひとつずつ解説していきます！

ディレクション費
ディレクション費とは、Webディレクターの稼働対価のことです。

たとえば下記のような項目が該当します。

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

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

そう思った方！ それは危険です！

Webディレクターの働きは目に見えづらいため、そういった考え方に陥りがちなのだと思います。しかし、Webディレクターはプロジェクトの始まりから終わりまでを担当し、ヒアリング、企画書作成、要件定義書の作成、定例ミーティングの議事録作成、各所とのメールやりとり、デザイナーやエンジニアの期日管理……等々、業務範囲は多岐にわたります。

そしてプロジェクトの成功可否は、そのWebディレクターの働きにかなり依存しています。

この費用の値引き交渉をしてしまうと、そのぶんWebディレクターがプロジェクトに割ける時間が減ってしまうので、制作物の品質が下がってしまいます。

※ディレクション費が「全体金額の30%」など「パーセンテージ（%）」で算出されている場合は、あくまで概算ですので注意が必要です。弊社の場合、デザイン、コーディング、システム開発を合わせた金額の30%を進行管理費として、企画書や画面設計書の作成などWebディレクター単体で稼働するものに関しては人日×単価で計算し、見積もりをお出ししております。
デザイン制作費
画面設計書の作成、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では、原則的に下記ブラウザで確認をおこないます。（2020/01/17時点）

もちろん案件に応じて、利用するブラウザは変更になる可能性があります。

Windows10: Edge最新版
Windows10: Firefox最新版
Windows10: Chrome最新版
macOS 10.14: Chrome最新版
macOS 10.14: Firefox最新版
macOS 10.14: Safari最新版
iPhone iOS13: Safari最新版
Android 5.1: Chrome最新版
Internet Explorer 11など対象ブラウザが古い場合や、検証する対象ブラウザが増えた場合は料金が変動しますので、注意が必要です。

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

ディレクション費
デザイン制作費
フロントエンド開発費
バックエンド開発費
ブラウザ検証費
いかがでしたか？ あくまで必要最低限の項目ですので、つくりたいWebサイトの種類（コーポレートWebサイト、メディアWebサイト、サービスWebサイトなど）によって見積りの項目は変動します。わからない点があれば、担当者に都度確認してみましょう。

要望を出せば出すほど金額は上がりますので、「この機能やページは本当に必要なの？」という意識を持っておくことが重要です。

また、概算見積りで社内稟議を通すのは、のちのち予算の確保が難しくなる場合がありますので、要件・機能を確定後に正式な見積りで社内稟議を通すことをオススメします！

高い金額をかけて制作するWebサイト。お金の不明点はしっかりと明確にして、イケてるWebサイトを発注側・受注側とで二人三脚で作っていきたいですね！