Webデザイナー向け! 見積書の作り方(Web制作案件テンプレート付き)

「検討したいので、見積書をお願いできますか?」
フリーランスでWeb制作のお仕事を受る際、避けて通れないのが“見積もり”です。ヒアリングで明確化したご要望を実現するための、金額目安お客様に提示します。

自分がクライアントだったら、料金がわからない状態で契約のお話は進めたくないですよね。受注者(制作者)側としても、見積もりをベースに話し合うことで契約・制作時のトラブルを予防できるというメリットがあります。

今回はWeb制作のお仕事を受ける場合の、見積もり方法を紹介します。自分の時給単価と、ご依頼達成までに必要な作業工程・時間を考えつつ、見積書を作成してみましょう。

見積書作成①自分の時給を決める

見積書はどんなお仕事を、いくらで行うかを一覧化したものです。
料金部分を決めるために、まずは自分の時給単価を決めておきましょう。

時々「コーディング:1ページ〇〇円」など単一料金で請け負っている方もいらっしゃいますが、この方法はあまりおすすめできません。

理由は、同じWebページであっても、コーディングの難易度・かかる時間には大きな差があるため。単一金額だと、すごく時間のかかる作業をしたのに、報酬は数千円なんて事になってしまう可能性もあります。

このためSkillhubでは自分の時給単価を決める→それを参考に金額を算出するという必要工程・労力ベースの見積額算出方法推奨しております。

時給単価の目安は?

WEB制作のお仕事では、相場がかなり幅広くなっています。
あってないようなもの、と言っても過言ではないほど。

ですので希望額を付けても構いませんが、完全未経験(Web制作、もしくはデザイン関連の業務経験なし)のWebデザイナー/コーダーであれば、時給1000円前後に設定しておくと仕事が取りやすいです。

ランサーズなどのクラウドソーシングサービスでは、もう少し安めの料金設定をされていることも珍しくありません。
「少し安くても、まず実績を作りたい!」という方は、公開案件とその採用者のキャリアなどを見て、市場調査をしてみてください。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

見積書作成②必要な工程・時間を考える

では、2つのお仕事ケースを例に、どのように自分の時給単価から見積もりを作るかを考えてみましょう。

それぞれの場合の見積書は「お仕事の進め方講座」キットで共有しています。
こちらも項目を入れ替えることで、見積書テンプレートとしてもご利用いただけます。

見積書ファイルはこちら

ケース1:LP制作(デザイン&コーディング)の場合

まずはシンプルに、LP作成を1ページのみ請け負った場合を例に考えてみましょう。

ダーゲットやSEOキーワード選定・掲載文章作成、ページに使用する画像は、全てクライアント側で用意されていると仮定します。また、納品もファイルをクライアントに送るだけとします。

①必要な作業を書き出す

今回のケースで行うのは、大雑把に言えば下記2つの作業です。

  • 1ページのWebページデザイン
  • 1ページのHTML&CSSコーディング

ただし、一口に「Webページ1ページのデザイン」と言っても、自身でデザイン画を作ってお終いではありません。クライアントに確認してもらい、ページの構成やデザインの方向性が希望通りかを確認する必要があります。

ですので、ラフを作ってクライアントに見てもらう、修正する、本デザインを行う、本デザインを修正する、と細かく見ていくと作業にも段階があります。

それを書き出してみましょう。

【サイトデザイン】

  1. アイディア収集(参考サイト・競合サイトチェック)
  2. ラフデザイン作成
    →クライアントによるチェック・打ち合わせ
  3. ラフデザイン修正1
    →クライアントによるチェック・打ち合わせ
  4. ラフデザイン修正2
    →クライアントによるチェック・打ち合わせ
  5. 本デザイン作成
    →クライアントによるチェック・打ち合わせ
  6. 本デザイン修正1
    →クライアントによるチェック・打ち合わせ
  7. 本デザイン修正2
    →クライアントによるチェック・打ち合わせ

同様にコーディングも、HTMLの大まかな構図を考えるところから、各ブラウザ・スマホでの表示チェックなどの工程があります。

【コーディング】

  1. コーディング設計
  2. HTMLコーディング
  3. CSSコーディング
  4. レスポンシブコーディング
  5. ブラウザチェック
    →クライアントによるチェック・打ち合わせ
  6. コード調整

②それぞれの作業時間を考える

お仕事の際の作業工程が見えたら、それぞれにどのくらいの時間が必要かを考えてみましょう。

所要時間は見積書に載せるのではなく、どのくらいの時間がかかるかの目安です。
きっちり厳密に考えず、少し余裕を持たせつつ大まかな数字で良いです。

【サイトデザイン】

  1. アイディア収集 => 8時間
  2. ラフデザイン作成 => 8時間
  3. ラフデザイン修正1 => 2時間
  4. ラフデザイン修正2 => 2時間
  5. 本デザイン作成 => 16時間
  6. 本デザイン修正1 => 4時間
  7. 本デザイン修正2 => 2時間

●クライアントとの打ち合わせ(6回) => 合計6時間

同様にコーディングも、HTMLの大まかな構図を考えるところから、各ブラウザ・スマホでの表示チェックなどの工程があります。

【コーディング】

  1. コーディング設計 => 8時間
  2. HTMLコーディング => 8時間
  3. CSSコーディング => 8時間
  4. レスポンシブコーディング => 6時間
  5. ブラウザチェック => 6時間
  6. コード調整 => 3時間

●クライアントとの打ち合わせ(1回 ) => 2時間

③金額を計算してみる

それぞれ作業に必要な時間が書き出せたら、その時間数に自分の時給をかけてみましょう。

最初のうちは、まず大きな項目ごとに金額を算出。
各項目の合計金額を出す、という方法がおすすめです。

例の場合はデザインに50,000円、コーディングに41,000円になりました。
1ページのLP作成(デザイン・コーディング)全体で91,000円です。

LP作成の代金として特別高くはありません。
が、クラウドソーシングなどでは、5万円~8万円前後という依頼も多いです。
クライアントの予算を大きく越えてしまう可能性もあるでしょう。

実績がほぼ無いWebデザイナー/コーダーの場合は、予算を上回る金額で応募しても、仕事を受託できる可能性は低いです。自己PRによほど自信がある以外は、予算内に収まるプランを提案したほうが仕事獲得率は高くなります。

ご予算に合わせて削れるところを削ってみましょう。

上図では、デザイン部分の修正をラフ・本デザインそれぞれ一回とし、時間が短くても何とかなりそうな「アイディア収集」の時間を削りました。

コーディングも、実際はHTMLとCSSを一緒に組んでしまうので最初の予想より作業時間が短かくても仕上げられそうですよね。Bootstrapを取り入れるなどしても、作業時間を短くすることが出来るでしょう。

このように予算内と、自分の作業時間を見合わせて実現可能なプランに落とし込んでみると良いでしょう。

【作業時間を客観的に見ることも大切】
初心者と熟練者では作業スピードが違いますよね。
最初の「時給を決めておく」で、未経験の方は新米webデザイナー/コーダーであることも考慮して時給単価を決めたと思います。

しかし、作業スピードがあまりにも違うと、最終的にはベテランの経験者よりも金額が高くなってしまう可能性もあります。

クラウドソーシングで採用されているエントリー式の場合、実績が多く価格も安いベテランAさんを採用する可能性が高いのではないでしょうか。

このため、クラウドソーシングサイトに掲載されている案件などを見て、相場と自分の作業時間の差を掴むことも大切です。(※クラウドソーシングの相場は安めなので、それより少し高くなっても可)。

例に使った「LP制作」の各作業に、どのくらい時間が必要かを考えて見て下さい。
130時間を超えるのであれば、合計金額が高くなりすぎる可能性が高いです。

まずは「仕事をとって実績を作りたい」という場合は、

  • 自分の問題でかかっているであろう作業時間は計上しない
  • 時給単価を少し下げて考える
  • 「ご希望に沿ったページを、完全オーダーメイドで作ります」など時間がかかる(価格が高めになる)ことを納得してもらえるPRをする

などの工夫する必要があるでしょう。
法外に安くする必要はありませんが、クライアントが納得できる金額を提示することも「仕事」を獲得するためには必要です。

④見積書にまとめる

今回は下記の時間・金額で見積書を作ってみます。

デザイン・コーディングそれぞれの金額を出しました。
ですが、このまま「デザイン費」「コーディング費」でまとめてしまうと、ちょっと分かりにくいですよね。

  • クライアントが納得しやすい
  • 交渉も出来ると思ってもらえる(送って音沙汰なしにならないように)

上記に配慮して、もう少し詳しく、わかりやすく項目化してみましょう。

例えば、レスポンシブデザインの場合は、PCとスマホ対応(スマホ幅表示)のデザイン・コーディング)が必要ですよね。

実際にコーディングする際は、同時進行で行うこともあるでしょう。
しかし、見積書はどんな作業を行うかをクライアントに伝える役割もあります。

デザインやコーディングでまとめられているよりも、「PC幅とスマホ幅それぞれを作る必要がある」ことを記載したほうがクライアントが納得しやすい傾向にあります。

見積書の項目に厳格なルールはありませんので、クライアントが納得しやすいか・納得できない点があっても交渉してみようと思えるかを意識して作ってみてください。

ケース2:企画&Webサイト丸ごと制作する場合

LPよりも大きなお仕事としては、Webサイトを丸ごと制作するものがあります。クライアントがWeb制作やマーケティングに詳しくない場合は、企画部分の方もお手伝いすることになるでしょう。

お仕事の内容が多岐にわたる場合も、見積もりの考え方はケース1と変わりません。行うべき作業を書き出し、それぞれに必要であろう時間をベースに金額を考えます

例えば、下記のようなWeb制作依頼を請け負ったとしましょう。

【サイトフルリニューアル】

  • SSL対応にして、デザインもフルリニューアルしたい
  • サイトの最終目標は問い合わせのCVアップ
  • 問い合わせフォームを設置して欲しい
  • Webサイト用部分の企画は任せる
  • SEO対策もして欲しい
  • サイト掲載文章も作って欲しい
  • 主に3階層構造、第2回層以下は共通デザインで良い (※1)
  • 会社概要のページだけは別のデザインで作って欲しい (※2)

※1…WoedPressでいうfront-page,index,singleのような構成。

※2…会社概要のページを固定ページで作るイメージ。

この場合は、「企画・コンサルティング」「サイト構造・コンテンツ制作」が加わります。
また、デザインやコーディングも階層別に行う必要がありますね。

作業内容と所要時間を考える

【企画・コンサルティング】

  1. 情報収集(ヒアリング、現状分析、競合調査、キーワード調査など)
    => 12時間
  2. サイト方針(ユーザー定義、コンテンツ定義、サイトイメージの決定など)
    =>24時間
  3. SEO戦略方針(キーワード選定、キーワード戦略など) => 6時間
  4. ディレクション => 計6時間

・・・合計:84時間

【サイト構造・コンテンツ制作】

  1. サイトマップ策定 => 8時間
  2. 掲載文章の作成 => 24時間
  3. ワイヤーフレーム作成(主要ページ5枚分) =>36時間
  4. ディレクション => 計6時間

・・・合計:74時間

【サイトデザイン】

  1. アイディア収集 => 8時間
  2. ラフデザイン作成 => 10時間×1ページ + 6時間×4ページ
  3. ラフデザイン修正1 => 8時間
  4. ラフデザイン修正2 => 6時間
  5. 図版作成 => 6時間
  6. 本デザイン作成 => 7時間×1ページ + 4時間×4ページ
  7. 本デザイン修正1 => 6時間
  8. 本デザイン修正2 => 2時間
  9. ディレクション => 計8時間

・・・ 合計:101時間

【コーディング】

  1. コーディング設計 => 6時間
  2. HTMLコーディング => 8時間×1ページ + 6時間×4ページ
  3. CSSコーディング => 8時間×1ページ + 3時間×4ページ
  4. レスポンシブコーディング => 12時間
  5. 問い合わせフォームの作成 => 8時間
  6. 内部SEO設定 => 6時間
  7. ブラウザチェック => 8時間
  8. コード調整・修正 => 7時間
  9. ディレクション => 3時間

・・・合計:90時間

見積書に落とし込む

見立てた作業・時間を元に、見積書の項目と金額に落とし込んでいきます。

(例)スプレッドシート「見積書(ケース2)」

全体はこちら

項目や金額が増えるほど、交渉の余地も増えますので、見本では少し高めに設定してみました。もちろん、このあたりはクライアントの予算・作業の難易度や時間によっても変わってきますので、臨機応変に調整しましょう。

ケース3:他の方に委託する業務がある場合

例えば「独自の予約システムを作りたい」など、自分ひとりで作成するのが難しい機能をリクエストされることもあります。

システムなど自分で実装が不可能なものは、外注に出します。
その際には、クライアントから出来るだけ詳しく「どんな機能が欲しいのか(機能要件)」をうかがうようにしましょう。

動作フローや画面遷移の全てをクライアントに尋ねても、わからないことが多いので
「このサイトのような」
「サイトAのこの機能と、サイトBのこの機能を組み合わせた感じ」
のように見本になるサイト(機能)を挙げていただくと、イメージが掴みやすでしょう。

そして外注の方にクライアントの要望を伝え、見積もりを貰います。

クライアントにお渡しする見積もりには、実費+手間賃等の金額を載せます。
これは、クライアントの代わりにディレクションや確認を行っているためです。
また、作ってもらった機能を見栄えの良いページにするコーディングする必要があれば、その作業分も見積もりに載せます。

まとめ

見積書を作成するためには、まず下記の3点を考えます。

  • クライアントの要望を実現するには、どんな作業が必要か
  • 各作業工程はどのくらいの時間・労力がかかるか
  • 各作業工程は時給換算でいくら位になるか

算出した金額を参考に、クライアントの予算・料金相場などを考えながら見積書の項目・金額を決めていくと良いでしょう。

見積書は割に合わない労働にならないか、クライアントが納得できる内容か、この2つのバランスが大切です。見積りは確定額ではありません。見積書をお渡ししてからもクライアントと話し合い、双方が納得できる形に落とし込みましょう。

まずは無料で14講座から始めましょう!

ハイクオリティな14講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
11月24日まで

募集 人数
100名 (残りわずか)

こちらもオススメ

×