WEBサイト制作の仕事の流れ(受注から納品まで)を解説する【フリーエンジニア向け】

やっほう!フリーエンジニアのテツヤマモト(@okapo192)です。

今回は「フリーランスエンジニアのお仕事受注から納品までの流れ」を共有します。

プログラミングの勉強が進んできたから、どんな感じで実際に仕事をやっていくのか知りたい!
フリーランスエンジニアってどんな感じで働いているのか知りたい!

この辺りの疑問にお答えしていきます。

 

昨今、プログラミングの学習サービスが整ってきて、隙間時間にスキル取得を目指す人が増えてきてますね。

僕の経験からも、その調子で一生懸命勉強すれば、楽しく自由に働けるのでファイトです。

 

しかし、プログラミングを勉強するだけでは、仕事にはならないってことを忘れちゃいけません。

仕事にするからには、営業活動しなきゃいけないし、クライアントや外注先とのスムーズなコミュニケーション能力が必須になります。

言ってしまえば、プログラミングスキル以上に、ビジネススキルの方が重要になるんですね

 

今回はフリーランスエンジニアが仕事を受注してから、納品するまでの流れを順番に共有します。

流れを頭に入れて、円滑に作業を進めていけるようにしましょう!

スポンサーリンク

Webサイト制作の仕事の流れ

始めに大まかなサイト制作の流れを紹介します。

大まかには、受注→打ち合わせ→制作作業→確認・納品の流れです。

この辺りはどの仕事も同じですよね。

 

今回はディレクション(打ち合わせ・構想段階・外注との進捗管理など)込みのWordPressサイト制作案件を受注、デザインは外注を前提に書きます。

もしあなたがコーディングとシステム構築のみの受注予定でも、こちら一通りのサイト制作の流れを抑えて損はないです。

仕事を受注する

まずはお仕事を受注しないと、お話になりません。

フリーランスエンジニアは、主に3つの方法で仕事を取るのが一般的です。

  • SNS, ブログ
  • クラウドソーシング
  • フリーランスネットワーク

普段から積極的に情報発信をしたり、フリーランス同士のコネを作ることが何より重要ですね。

人によっては、制作会社の営業マンや、元勤務先とのつながりも活かせるかもしれません。

 

▼フリーランスの仕事の取り方について、詳しくはこちらでまとめています。

フリーランスエンジニアの仕事の探し方・受注のコツ【駆け出し向け】

2018.06.02
クラウドソーシングやブログやSNSでの受注コツは、後日詳しく記事にまとめる予定です。

スポンサーリンク

打ち合わせ

1.概算見積もり

適宜、営業活動をしていれば、

ホームページを作りたいんですけど、だいたいいくらでお願いできますか?

みたいな声がかかるかと思います。

 

この段階では概算見積もりとして、ページ数や作業日数を簡単に計算して、

10万円でお受けできるかと思います!正確なお見積もりは、詳しいヒアリングの後に再度ご提出できればと思いますが、よろしいでしょうか。

と言った形で、お返事すれば良いかと。

 

本番見積もりの際に予算が増えてしまわないよう、概算見積もりは少し高めに設定しておくといいです。

ちなみに、フリーエンジニアのWEB制作の相場は、ランディングページが3〜5万円、コーポレートサイト,WEBメディアが10万円〜20万円のイメージです。

中小企業にお願いすると30万円ほど、大企業だと数100万円かかるので、お手軽ですよね。

2.ヒアリング

概算見積もりを確認してもらい、問題が無さそうであれば、ヒアリングを進めます。

ヒアリングで最低限聞くべきことは、Webサイトの内容・納期・イメージに近い参考サイトですね。

他にも、クライアントとサイトイメージをすり合わせるために、いくつか質問を用意するといいです。

サイトデザインが別途用意されていて、コーディング・システム構築のみの依頼の場合は、疑問点を確認すれば大丈夫ですね。

 

ちなみに僕がWEB制作の仕事をする際に使っている、簡易的なヒアリングシートはこちらになります。

シートに記入してもらった上で、電話やスカイプで一度意図を確認すると良いです。

3.本番見積もり

ヒアリング情報を元に、正確な見積書を提出します。

概算見積もりと大きく相違なければ、基本的にクライアントは予算了承してくれるはず。

見積書のサンプルを置いておきます。

 

ここでの注意点は、納品の時期・方法の定義と、作業内容を詳しく書き出しておくことです。

納品時期は、相手方の外注先の素材待ち時間がどうしても伸びがちなので、余裕を持って設定します。

作業内容は、途中で「これもお願い!」「やることそんなにあるの?」とグダつかないためにも、全て書き出しておくと良いです。

4.ワイヤーフレーム,ラフデザイン

本格的な作業に入る前に、ラフデザインをクライアントに確認してもらい、大まかな方向性を整える必要があります。

 

まずはワイヤーフレームをツールや手書きでささっと作って、デザイナーさんにラフデザインの作成を依頼します。

僕は手書きでやってるんですけど、モックアップツールの「moqups」も便利そうです。

moqupsについてはエンジニアのマナブさん(@manabubannai )が記事にまとめてくれていますので参考にしてください!

【比較あり】Web制作のモックアップツールならmoqupsが神【愛用】

IMG 4407

デザイナーさんからラフデザインが上がってきたら、クライアントに内容を共有します。

問題なければ、本格的な作業に入りましょう。

制作作業

5.デザイン制作

サイトデザインを本格的に作ります。

僕はデザイナーさんに外注してますけど、自分でできる人は自分でまかなえると報酬の取り分が増えますね。

サイトデザインはトップページ3万円、下層ページ1万円くらいでやってくれる人が多いです。

 

依頼から1週間後くらいでしょうか。

デザインが上がってきたら、コーディングに取り掛かる前にクライアント確認を挟むといいです。

デザイナーさんがホット一息つけます。

外注を考える場合は、問い合わせを受けた段階で、ウェブデザイナーにスケジュールを聞いてみると良いです。突然依頼して「今忙しいから無理」と言われるパターンもあるので。

6.コーディング

デザイナーさんから受け取ったデザインデータを元に、サイトのコーディングを行います。

HTML/CSSとJavascriptあたりのコードを書いていくイメージです。

過去に制作したサイトで似たものがあれば、どんどん応用して作業時間を短縮しましょう。

7.システム構築

手持ちのサーバー、もしくはMAMP等の仮想環境で、システム構築をしていきます。

WordPressサイトであれば、PHPやプラグインを使って、打ち合わせたシステムを実現する形になりますね。

各ブラウザで問題なく動作するか確認が必須です。

スポンサーリンク

確認依頼・納品

8.確認依頼・修正

作業が一通り終わったら、クライアントに最終確認の依頼をします。

自分のサーバー、もしくはクライアントのサーバーにアップロードしたサイトを確認してもらい、適宜修正しましょう。

もし今後の更新作業をクライアント自身が行うなら、簡単な操作マニュアルを用意して、操作感を確認してもらうといいです。

 

クライアントによっては、確認→修正→確認→修正と、際限なく修正依頼されることもあるので、回数を制限するか、一度で修正を出し切ってもらうよう注意を促す工夫は必要です。

9.納品、請求書発行

確認・修正を経て、事前に定義した方法で「納品」とします。

最終的な動作確認も忘れずに行ってくださいね。

 

また、納品時に請求書も提出します。

こちらは見積書に振込先情報を記載したものを再度提出すればOKです。

請求書のサンプルを置いておきます。

請求書を発行しても油断は禁物。入金が遅れたり、忘れられたりしてることはちょくちょくあります。入金までしっかり確認することを忘れずに。自分が外注をしたなら、自分自身も振込を忘れずに。

コードを書くだけのエンジニアは単価が低い!?

こう見ると、フリーランスエンジニアってコードを書くのだけが仕事じゃないってことがわかりますね。

むしろ各工程で考えると、コーディング作業をしてるのはほんの少しです。

 

ここで理解して欲しいのが、コードを書くだけのエンジニアはどうしても単価が低いってことです。

自分で仕事を受注する、クライアントとの円滑な打ち合わせ等ができないと、独立は難しそうです。

 

一筋縄ではいきませんが、クライアントとの信頼関係を作れれば、単価が倍以上変わるのもエンジニアの魅力です。

プログラミングスキルだけではなく、円滑な作業フロー・ビジネスコミュニケーションも学ばなくてはいけませんね。

初心者がプログラミングで稼ぐための5ステップ【開始3ヶ月で20万円受注!】

2018.02.22

フリーランスエンジニアの仕事の探し方・受注のコツ【駆け出し向け】

2018.06.02

WordPress制作で月10万円稼ぐための最速勉強法【未経験から3ヶ月】

2018.05.30

ABOUT

海外ノマド系フリーランス, ブロガー, WEBエンジニア, 24歳。フットワーク軽く生きたくて、新卒でフリーに。その後、海外35カ国を旅しながらノマドワーク。現在は1ヶ月ごとに拠点を変えつつ、旅生活を継続中です。勉強が大好きで年に3回語学留学をします。 

>>詳しいプロフィールはこちら!