いくらかかるの?Webサイト制作費用の内訳を徹底解説!

   

creative-apple-desk-office-large
  • このエントリーをはてなブックマークに追加
Code部

Webサイト制作を依頼したい人は何を考えるでしょうか?

制作までの期間、サイトのコンテンツ、サイトマップなど様々なことを考えるでしょう。

 

ですが、一番初めに考えるのは制作費なはず。

いくら理想的なサイトを作るためとはいえ、予算以上の金額でサイト制作を依頼は出来ません。

 

Webサイトを作るのにかかる費用は人件費です。

サーバー費用やドメイン費用もかかりますが、人件費に比べると微々たるものなのです。

 

ではその人件費の内訳はどうなっているのでしょうか?

この点についてお話しします。

 

サイト制作に必要な主な費用

business-cash-coin-concept-41301-large

 

サイト制作は様々な工程があります。

見積もりを出す際は、その工程ごとに費用を換算する場合が多いです。

 

ざっくりとは、以下のような工程が発生します。

 

・ディレクション費用

・デザイン費用(Webデザイン・バナー制作)

・フロントエンド開発費用(コーディング)

・バックエンド開発費用

・ブラウザ検証費用

 

Webサイト制作を経験している方なら分かるかと思いますが、大まかにこのような工程が発生します。

ただ一般の方がこれを見てもイマイチわからないと思うので、後ほど解説します。

 

お見積もりの一例

 

各項目の前にお見積もりの一例をこちらに記載しておきます。

※あくまで一例です!!

作業項目人日単価
合計320,000円
ディレクション費用1010,000円100,000円
デザイン費用520,000円100,000円
フロントエンド開発費用220,000円40,000円
バックエンド開発費用230,000円60,000円
ブラウザ対応費用120,000円20,000円

 

かなりざっくりとしたもので、実際に使われる見積書はもう少し細分化されているでしょう。

ここでは、一般の人を対象にした説明なので、かなりざっくりとしたものにしています。

 

では、それぞれ解説していきますね。

 

 

ディレクション費用

people-coffee-tea-meeting-large

 

ディレクション費用は、その名の通りWebディレクターの稼働費用のことです。

Webサイトを一度制作した経験がある人はわかると思いますが、実際にWebサイトを作り始めるまでに様々な工程があります。

 

どんなサイトを作るのかヒアリング、作るWebサイトの目的、それに応じたコンテンツなどなど様々な準備が必要です。

なのでWebディレクターの稼働が長いので、費用が多くかかってしまいがちです。

 

項目としてはこんな感じです。

 

・打ち合わせ

・仕様策定

・プロジェクト進行管理

・デザイナー・エンジニアへの指示

 

 

ここで、Webディレクターの人件費が勿体無いと思われた方はいませんか?

ディレクションなんていらないよと思うかもしれませんが、それは危険な発想です。

 

Webサイト制作が成功するかは、Webディレクターにかかってると言っても過言ではありません。

なので、Webディレクション費用をかけないということは作るWebサイトの質を下げるというのと同じことです。

ディレクション費用はよいWebサイトを作るのに必要な費用なことは知っておいて下さいね。

 

 

デザイン制作費用

apple-iphone-books-desk-large

 

Webサイトのデザインや、管理画面の設計。またサイトに使われるバナー制作などを行うデザイナーの人件費になります。

 

・Webサイトのベースデザイン

・バナーデザイン

・イラスト制作

・ロゴ制作

 

項目としてはこのような感じです。

ちなみにロゴ制作はデザインとは別で費用が発生する場合が多いです。

 

サイトデザインやバナーを制作する時は、写真素材が必要になります。

写真素材と言っても、有料素材サイトから支給するのか、自ら撮影するのかでは手間が大きく違います。

どうするかは、Webデザイナーと相談の上決めていくのがいいでしょう。

 

 

フロントエンド開発費用

startup-photos-large

フロント、つまり目に見える部分の開発費ということです。

 

Webサイトの裏側で動いているプログラムではなくて、視覚的に認識できる部分の開発費用になります。

HTMLやCSS、JavaScriptなどで作る部分のこと、フロントエンド開発費用はいわゆるコーディング費用ですね。

 

・HTMLマークアップ

・CSS実装

・JavaScript等のアニメーション実装

・複数ブラウザの対応

・複数デバイスの対応

 

ざっとこんなところでしょうか。

 

デザイン終了後に作業開始することになります。

 

 

バックエンド開発費用

pexels-photo-90807-large

プログラミング言語を仕使用し、Webページの裏側のシステムを開発するエンジニアの人件費になります。

 

・システム設計・開発

・お問い合わせフォームの実装

・Wordpressのカスタマイズ

・サーバー設定作業

 

バックエンドは少しイメージしづらいかもしれません。

しかし、大きなWebサイトを作るのには必須です。

 

もちろん機能を増やせば増やすほど見積もりが高くなってしまいますので、機能のつけすぎには注意です。

予算が限りなくあればいいですが、そんな状態は稀かと思いますので、必要な機能を効率的に作るようにディレクターと相談しましょう。

 

ブラウザ検証費用

pexels-photo-large

デザイン、フロントエンド、バックエンドの作業が終了しましたら、ブラウザ検証が始まります。

 

この金額は対応ブラウザが増えるほど上がっていきます。

 

主な対応ブラウザは以下のものになるでしょう。(2016/10/03)

 

・Internet Explorer 11

・Safari 8(Mac・iPhone)

・Chrome 最新版

・Firefox 最新版

 

 

実際はもう少し細かいですが、ざっくりとはこんな感じになります。

ちなみに、IE8、9などの古いブラウザは料金が少し高額になるケースが多いです。

 

 

まとめ

 

という感じで、ざっくりとでしたがWebサイト制作の費用の内訳とその項目について説明しました。

 

ただ本当にざっくりとしたものですので、実際はもう少し項目が増えたり細分化されることになるかと思います。

機能や要望が多すぎると莫大な金額になってしまうかもしれませんので、ディレクターと相談して現実的な機能を実装していきましょう。

 

 - ビジネス