Share on facebook
Share on twitter
Share on linkedin

Blog

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

Webサイト制作/ リニューアルサービス制作 採用サイト制作 IRサイト制作 大学サイト制作 イントラサイト構築 レスポンシブサイト構築 Vue.js/React.js開発 iOS/Androidアプリ構築 ハイブリッドアプリ構築 など
Uncategorized

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

ディレクション費って何?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サイトを発注側・受注側とで二人三脚で作っていきたいですね!

Leave your thought here

メールアドレスが公開されることはありません。

Popular tags

1つのWEBサイトを作るのには、どれだけの時間がかかるもの? alt属性とは?画像検索の対策 business DTPデザイナーが陥りがちな残念なWebデザイン IT Security IT services ITで働き方改革!クラウド、テレワークの新しい仕事の形とは LP(ランディングページ)って何? Pythonでできることって何だろう? Pythonとは?大人気プログラミング言語のメリット Webサイトの制作って、なぜこんなに高いの?! Webサイトを更新したのに反映されない?それ、キャッシュが原因 Webサイトを更新したのに反映されない?それ、キャッシュが原因かも…【PC編】 Webデザイナーの1日・生活スタイル WEB制作の現場で使われる用語をご紹介 WordPress(ワードプレス)でのホームページ制作・ウェブサイト制作 WordPressのメリットとデメリット WordPressを使ったホームページ作成のメリットデメリット 「デザインお願いします」と言われてデザイナーは何を考えてデザインしているの? この修正、お金かかるんですか? なんて名前? WEBサイトの基本パーツ名と導入時の注意点! イメージコピーとセールスコピーの違い クリック率とCV数をUP!サイトの入り口を飾る「titleタグ」「meta description」とは? コロナ対策のためにネットショップを素早く開設しよう!ECサイト構築 ネットワークエンジニアとは?ネットワークエンジニアの仕事内容と将来性 ネットワークエンジニアになるには資格が必要?おすすめの資格 フリーランスのWebデザイナーが仕事を効率良くする方法とは? ブログで使っているその画像は本当に大丈夫? プログラマーとは?プログラマーの種類と将来性 ペルソナってなに? 〜WEBサイトのターゲット ホームページとウェブサイトの違い! ホームページを制作する目的の重要性 ホームページ作成に失敗しないための、制作料⾦の費⽤相場と Web制作ツール・制作業者選定のポイント ホームページ制作で起きるトラブル事例と対策 ホームページ制作と動画や写真撮影などを一社でまとめるメリット ホームページ制作に関する著作権 ホームページ制作の注意点 企業にとってのホームページの役割と運用目的を再確認 働きながらWebプログラミングスクールに通う方法 初心者でも簡単!無料でホームページ作成ができるソフト 危険!Wordpressの更新は制作会社にご依頼ください。 古いサイトは何故ダメなのか 在宅でできるWebデザインを副業にしよう♪初心者におすすめの仕事は? 画像はリサイズして使いましょう! 〜重いサイトにしないために 結果が出ないホームページの初歩的なミス
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping