やっほう!フリーエンジニアのテツヤマモト(@okapo192)です。
今回は「フリーランスエンジニアのお仕事受注から納品までの流れ」を共有します。


この辺りの疑問にお答えしていきます。
昨今、プログラミングの学習サービスが整ってきて、隙間時間にスキル取得を目指す人が増えてきてますね。
僕の経験からも、その調子で一生懸命勉強すれば、楽しく自由に働けるのでファイトです。
しかし、プログラミングを勉強するだけでは、仕事にはならないってことを忘れちゃいけません。
仕事にするからには、営業活動しなきゃいけないし、クライアントや外注先とのスムーズなコミュニケーション能力が必須になります。
言ってしまえば、プログラミングスキル以上に、ビジネススキルの方が重要になるんですね
今回はフリーランスエンジニアが仕事を受注してから、納品するまでの流れを順番に共有します。
流れを頭に入れて、円滑に作業を進めていけるようにしましょう!
Webサイト制作の仕事の流れ
始めに大まかなサイト制作の流れを紹介します。

大まかには、受注→打ち合わせ→制作作業→確認・納品の流れです。
この辺りはどの仕事も同じですよね。
今回はディレクション(打ち合わせ・構想段階・外注との進捗管理など)込みのWordPressサイト制作案件を受注、デザインは外注を前提に書きます。
もしあなたがコーディングとシステム構築のみの受注予定でも、こちら一通りのサイト制作の流れを抑えて損はないです。
仕事を受注する
まずはお仕事を受注しないと、お話になりません。
フリーランスエンジニアは、主に3つの方法で仕事を取るのが一般的です。
- SNS, ブログ
- クラウドソーシング
- フリーランスネットワーク
普段から積極的に情報発信をしたり、フリーランス同士のコネを作ることが何より重要ですね。
人によっては、制作会社の営業マンや、元勤務先とのつながりも活かせるかもしれません。
▼フリーランスの仕事の取り方について、詳しくはこちらでまとめています。
打ち合わせ
1.概算見積もり
適宜、営業活動をしていれば、

みたいな声がかかるかと思います。
この段階では概算見積もりとして、ページ数や作業日数を簡単に計算して、

と言った形で、お返事すれば良いかと。
本番見積もりの際に予算が増えてしまわないよう、概算見積もりは少し高めに設定しておくといいです。
ちなみに、フリーエンジニアのWEB制作の相場は、ランディングページが3〜5万円、コーポレートサイト,WEBメディアが10万円〜20万円のイメージです。
中小企業にお願いすると30万円ほど、大企業だと数100万円かかるので、お手軽ですよね。
▼相場に関しては、「ランサーズ」の相場価格が参考になります。

2.ヒアリング
概算見積もりを確認してもらい、問題が無さそうであれば、ヒアリングを進めます。
ヒアリングで最低限聞くべきことは、Webサイトの内容・納期・イメージに近い参考サイトですね。
他にも、クライアントとサイトイメージをすり合わせるために、いくつか質問を用意するといいです。
ちなみに僕がWEB制作の仕事をする際に使っている、簡易的なヒアリングシートはこちらになります。
シートに記入してもらった上で、電話やスカイプで一度意図を確認すると良いです。
3.本番見積もり
ヒアリング情報を元に、正確な見積書を提出します。
概算見積もりと大きく相違なければ、基本的にクライアントは予算了承してくれるはず。
見積書のサンプルを置いておきます。
ここでの注意点は、納品の時期・方法の定義と、作業内容を詳しく書き出しておくことです。
納品時期は、相手方の外注先の素材待ち時間がどうしても伸びがちなので、余裕を持って設定します。
作業内容は、途中で「これもお願い!」「やることそんなにあるの?」とグダつかないためにも、全て書き出しておくと良いです。
4.ワイヤーフレーム,ラフデザイン
本格的な作業に入る前に、ラフデザインをクライアントに確認してもらい、大まかな方向性を整える必要があります。
まずはワイヤーフレームをツールや手書きでささっと作って、デザイナーさんにラフデザインの作成を依頼します。
僕は手書きでやってるんですけど、モックアップツールの「moqups」も便利そうです。

デザイナーさんからラフデザインが上がってきたら、クライアントに内容を共有します。
問題なければ、本格的な作業に入りましょう。
制作作業
5.デザイン制作
サイトデザインを本格的に作ります。
僕はデザイナーさんに外注してますけど、自分でできる人は自分でまかなえると報酬の取り分が増えますね。
サイトデザインはトップページ3万円、下層ページ1万円くらいでやってくれる人が多いです。
依頼から1週間後くらいでしょうか。
デザインが上がってきたら、コーディングに取り掛かる前にクライアント確認を挟むといいです。
デザイナーさんがホット一息つけます。
6.コーディング
デザイナーさんから受け取ったデザインデータを元に、サイトのコーディングを行います。
HTML/CSSとJavascriptあたりのコードを書いていくイメージです。
過去に制作したサイトで似たものがあれば、どんどん応用して作業時間を短縮しましょう。
7.システム構築
手持ちのサーバー、もしくはMAMP等の仮想環境で、システム構築をしていきます。
WordPressサイトであれば、PHPやプラグインを使って、打ち合わせたシステムを実現する形になりますね。
各ブラウザで問題なく動作するか確認が必須です。
確認依頼・納品
8.確認依頼・修正
作業が一通り終わったら、クライアントに最終確認の依頼をします。
自分のサーバー、もしくはクライアントのサーバーにアップロードしたサイトを確認してもらい、適宜修正しましょう。
もし今後の更新作業をクライアント自身が行うなら、簡単な操作マニュアルを用意して、操作感を確認してもらうといいです。
クライアントによっては、確認→修正→確認→修正と、際限なく修正依頼されることもあるので、回数を制限するか、一度で修正を出し切ってもらうよう注意を促す工夫は必要です。
9.納品、請求書発行
確認・修正を経て、事前に定義した方法で「納品」とします。
最終的な動作確認も忘れずに行ってくださいね。
また、納品時に請求書も提出します。
こちらは見積書に振込先情報を記載したものを再度提出すればOKです。
請求書のサンプルを置いておきます。
コードを書くだけのエンジニアは単価が低い!?
こう見ると、フリーランスエンジニアってコードを書くのだけが仕事じゃないってことがわかりますね。
むしろ各工程で考えると、コーディング作業をしてるのはほんの少しです。
ここで理解して欲しいのが、コードを書くだけのエンジニアはどうしても単価が低いってことです。
自分で仕事を受注する、クライアントとの円滑な打ち合わせ等ができないと、独立は難しそうです。
一筋縄ではいきませんが、クライアントとの信頼関係を作れれば、単価が倍以上変わるのもエンジニアの魅力です。
プログラミングスキルだけではなく、円滑な作業フロー・ビジネスコミュニケーションも学ばなくてはいけませんね。