いざ、案件を獲得するぞ!と営業や提案をしよう思うと、
「この案件、実際はどのくらい時間かかるものなんだろう?」
「全然基準が分からなくて、提案できない・・・」と悩みますよね。
私も同じでした。
この記事では、実際のWEB制作コーディング案件でどれくらい時間がかかったのかを紹介します。
ぜひ参考にして、案件に応募してみてください!
目次
実際の案件でかかった時間を5つご紹介
今まで私が実際に担当した案件を
- どんな内容の案件か
- どれくらい時間がかかったか
- 具体的な流れ
という内容でまとめてみました。
案件開始から案件完了までイメージできるようにしているので、ぜひ参考にしてください!
LP1ページのコーディング
1つ目にご紹介する案件は、LPリニューアルのため、1ページをコーディングする案件です。
案件の流れとトータルでかかった時間を表にまとめました。
案件の流れ | トータルの時間 |
①コーディング(24h) ・HTML:4h ・CSS(レスポンシブ含む:20h) ②確認依頼 ③修正(4h) ④確認依頼 ⑤修正(4h) ⑥納品 | 約4日:32h |
案件の具体的な内容は以下の通りです。
- フォトショップのデザインを見ながらのコーディング。(2セクション)
- レスポンシブ対応。
- アップロードなどもお客さんに実施してもらう。
最初は、画像としてコーディングするのか、テキストとしてコーディングするのか曖昧な状態で始めました。
また、慣れない作業でファーストビューがうまくいかず、CSSにかなり時間がかかりました。
合計4日(32h)ほどかかりましたが、LP1枚は1週間くらいの納期が一般的です。
実際にこの案件も1週間が納期でした。
フルタイムで作業できる場合は、1週間より短い期間。
他案件と並行する場合は、1週間を目安にするといいと思います。
下層ページ × 1のコーディング
2つ目にご紹介する案件は、Crowd Worksで応募した案件でリニューアルのため、下層ページ × 1をコーディングする案件です。
案件の流れとトータルでかかった時間は以下の通りです。
案件の流れ | トータルの時間 |
①ヒアリング/認識合わせ(1h) チャットで不明点や認識齟齬がないようヒアリング ②コーディング(8h) ・HTML:1h ・CSS(レスポンシブ含む):7h ③確認依頼 ④修正(2h) ⑤納品 | 約1日 :13h |
案件の具体的な内容は以下の通りです。
- デザインは決まっており、参考ページを見ながらコーディング。(3セクション)
- レスポンシブ対応。
- アップロードなどもお客さんに実施してもらう。
流用できるパーツが多くあったので、初案件でしたが、合計13hほどで納品しました。
下層ページでデザインが簡単な場合は、1日、2日を目安にするといいと思います。
実際に2日で提案し、受注することができました。
記事LPページのコーディング
3つ目にご紹介する案件は、記事LPという、文字が多めのLP1ページをコーディングする案件した。
案件の流れとトータルでかかった時間は以下の通りです。
案件の流れ | トータルの時間 |
①コーディング(10h) ・HTML:5h ・CSS(レスポンシブ含む):4h ・js:1h ②確認依頼 ③修正(2h) ④納品 | 約2日:12h |
案件の具体的な内容は以下の通りです。
- XDのデザイン(7000文字程度)を元にコーディング。
- レスポンシブ対応。
- アップロードなどもお客さんに実施してもらう。
文字が多いため、HTMLのコーディングと文章のチェックに時間がかかりました。
記事LPは簡単な構成が多いため、CSSの装飾もそこまで時間はかからないと思います。
記事LPも4日〜1週間を目安にするといいと思います。
企業サイトTOPページ1枚のコーディング
4つ目にご紹介する案件は、TOPページをLP風にリニューアルするため、コーディングする案件です。
案件の流れとトータルでかかった時間は以下の通りです。
案件の流れ | トータルの時間 |
①コーディング(36h) ・HTML:8h ・CSS(レスポンシブ含む):24h ・js:4h ②確認依頼 ③修正(4h) ④確認依頼 ⑤修正(2h) ⑥確認依頼 ⑦修正(2h) ⑧納品 | 約5.5日:44h |
案件の具体的な内容は以下の通りです。
- デザインはPCのみ決まっており、イラストレーターのデザインを元にコーディング(12セクション)
- レスポンシブ対応。
- アップロードは外注。
この案件は12セクションもあり、量が多めでした。
さらに、「イラストレーターでコーディング」「デザインが複雑」「スマホ版のデザインがない」などの時間のかかる要因が多くあり、コーディングに4.5日(36h)かかりました。
また、デザインの修正が3セクション発生し、修正にも1日(8h)かかりました。
スマホデザインがなかったり、要素の配置が雑だったりと、デザインが中途半端な場合があります。
その分コーダーの負担は多くなるので、案件の状況を事前に確認しましょう。
このような内容の場合は2週間を目安にするといいと思います。
個人事業主さんのサイト3ページの制作
5つ目にご紹介する案件は、個人事業主さんのサイト3ページを、jimdo(ノーコード)で作成する案件です。
案件の流れとトータルでかかった時間は以下の通りです。
案件の流れ | トータルの時間 |
①ヒアリング(2h) ②構成案作成(4h) ③画像作成(10h) ④コーディング(2h) ⑤修正&追加要望(6h) ⑥納品 | 約3日:24h |
案件の具体的な内容は以下の通りです。
- 構成案イメージはある状態。(TOP、詳細、お問い合わせの3ページ)
- 画像やテキストは分担して用意。
- ドメインやサーバーの登録はしてある。
- デザインは直接jimdoで作成。
ノーコードのため、構成案もjimdoで作成しながら制作をする内容でした。
ノーコードの場合は、構成案や画像の準備などに時間がかかるため、コーディングは時間がかかりません。
今回の規模で自分がコーディング担当の場合は、1日が目安になるでしょう。
納期の提案時に気をつけること
実際の案件でコーディングにどれくらい時間がかかるか紹介しましたが、「じゃあ最短の納期で提案しよう!」と思われた方は少し考えてみてください。
本当に急いでいるお客さんの場合はそれでいいかもしれません。
ですが、納期が短すぎると
- 本当に終わるのかな?
- クオリティ大丈夫かな?
と思われる可能性があるため、逆効果の場合があります。
なので、「実際の納期でかかった時間」の文末に紹介した目安を参考に、短すぎず長すぎない納期で提案しましょう。
例えば、
LP1ページのコーディングで、4日(32h)かかる案件。
- 4日で提案 ×
- 1週間で提案 ◯
といった感じです。
コーディングの時間がかかるポイント
コーディングで一番時間がかかるポイントは、実はやり直しです。
やり直しを防ぐことで、スムーズに納品まで進めることができるので、まずはやり直しを防ぎましょう。
具体的なやり直しは、
・画像ではなくテキストで実装しなおす
・class名,id名の付け直し
などが発生することがあります。
コーディングを開始する前に、画像で実装していいかの有無や、class名,id名のルールがあるかどうか確認しておきましょう。
お客さんが全く知識がないので「お任せします」といった場合もあり、
・画像で実装していいかの有無→「お任せします」
・class名,id名のルール→「お任せします」
と変換することもできます。
あとから言われないように、事前に確認しておきましょう。
まとめ
いかがだったでしょうか。
今回ご紹介したWEB制作コーディングの時間を参考に、
・案件は余裕をもって納期を提案すること
・やり直しを極力防ぐこと
このような内容に注意してみてください。
きっと記事を読む前よりも、効率よく案件を進めることができると思います。
兎にも角にも場数を踏むのが一番だと思うので、まずはこの記事を参考に案件にチャレンジしてみてください!