ウェブ制作の仕事の流れ（受注から納品まで）【フリーランス向け】
プログラミングができるようになったから、ウェブ制作の仕事がしてみたい！
でも受注から納品までどんな流れで進めればいいか分からない…
そんな人のために、この記事ではフリーランスが、ウェブ制作の仕事を受注してから納品するまでの流れを解説していきます！
- ウェブ制作って何から始めたらいいか分からない！
- 仕事の流れが知りたい！
という人はぜひこの記事を参考にしてみてください！
私も最初は、仕事の進め方の右も左もわからず苦労したので、同じような方のためになればと思います！
ウェブ制作の仕事の流れ
まずは、ウェブ制作の仕事の流れをざっくり紹介すると下記のようになります。
- 依頼が入る
- 概算見積もり出し
- ヒアリング
- 見積書発行
- ワイヤーフレーム作成
- デザイン作成
- コーディング
- 納品
- 請求書発行
これ以外にももう少しやることがあったりしますが、今回は大きな流れがわかるように書いています！
では、１つずつ見ていきましょう！
依頼が入る・概算見積もり出し
ウェブ制作の仕事を募集していることを、SNSやブログに書いていたり、ランサーズなどのクラウドソーシングサイトを利用していたりすると、依頼の声がかかったりします。
クライアントから声がかかるだけでなく、自分で営業をすることも多いです。
とにかく、仕事の依頼が入ったら、まずは概要を簡単に聞き、自分にできそうな案件であれば、概算の見積もりを出して先方に伝えましょう。
どんなサイトを作るのか、納期、予算、ページ数などを聞いておき、制作にかかる日数×1日の作業料でだいたい見積もりを計算して先方に伝えればOKです！
正式な見積書はこのあと発行するので、ここで出す見積もりは、およその金額で大丈夫です。
「正式なお見積もりは、詳細なヒアリングの後に出させていただけたらと思いますが、５ページの企業サイト制作でしたら、20万円程度でお作りできるかと思います。」
と言った感じに伝えれば良いかと思います。
あとで正式な見積書を出す時に、料金が増えてしまうことのないよう、この時点では少し多めに見積もっておく方が良いです！
ちなみに、仕事の探し方ですが、私の場合は、
- ブログ・SNS
- 前職・フリーランスなどの繋がり
- ランサーズ
などからお仕事をもらうのがよくあるパターンです。
フリーランスの中には、ココナラ やクラウドワークスを利用している人もよく見かけますよ！
フリーランスの仕事の探し方について詳しく知りたい人は、こちらを参考にしてください。
ヒアリング
概算の見積もりを出したら、詳細をヒアリングしていきましょう！
ここに全部書けるわけではないですが、具体的には、
- 依頼の内容（新規サイト制作・リニューアル・LP制作なのかなど）
- サイトの種類（企業サイト・ECサイトなのかなど）
- 依頼の目的や背景
- およそのページ数
- 希望デザイン（参考にしたいサイト）
- スケジュール（希望納品日）
- 予算
- 制作についての不安点や現在お困りの点
- 納品方法
etc…
などを聞いていきます。
ヒアリングは、クライアントと、希望や目的、イメージ、必要機能などを共有するための大切な工程です。
ここでうまく双方の合意ができていないと、制作途中で何度も修正が入ったり、出来上がった後に満足してもらえなかったり、、、と言った事が起こりやすくなります。
ヒアリングはできるだけ丁寧にしておいた方が良いでしょう。
たくさん聞けば良いと言うわけではありませんが、クライアントの意図をうまく汲み取れるよう、予め質問項目をある程度予め用意しておくと良いです。
普段私が使っているヒアリング項目も、参考にしてみてください。
見積書発行
ヒアリングした内容を元に、正式な見積書を発行します！
コンテンツの量や必要機能にもよりますが企業サイトのトップページだと、コーディング、デザイン込みで4万円程度〜が妥当だと思います。
下層ページであればその半額くらいでしょうか。
5ページ程度の企業サイト制作の場合、10万〜20万円程度がよくある依頼の例です。
WordPressを導入する場合はもう少し高くても良さそうなイメージです。
この辺りも、ヒアリングした内容に合わせて上下するはずなので、先ほどのヒアリングと照らし合わせてみてください。
ちなみに見積書の制作は、私は、会計ソフトfreeeを使っています！
テンプレートが用意されていて、そこに項目を書き込んでいくだけで見積書ができてしまうので、エクセルなどで作るよりラクにできると思います。
見積書を出すときには、あとでトラブルにならないよう、支払い方法や、支払い期日、外税か税込みか、振り込み手数料はどちらが負担するのかについてもきちんと書いておくと良いでしょう。
また、あとから「これもお願い！」と、追加の作業をどんどん頼まれると困るので、やることをきちんと書き出しておきましょう。
追加の作業が発生した場合は、別途料金を頂戴する旨も伝えておくと良いです。
見積書を出し、先方の了承が得られたら、正式受注です。
随時制作に入っていきましょう。
ワイヤーフレーム作成
では、ここからが実作業開始です！
先方にヒアリングした内容を元に、ワイヤーフレームを作っていきます。
私はアドビのイラストレーターに慣れているので、イラレで作っていますが、ワイヤーフレーム作成用のツールもたくさんあるので、自分にあったツールを探してみてください。
ツールを使わない場合は手書きでも大丈夫です。
参考までに、私の作ったワイヤーを載せておきます。
とある企業のホームページのトップページのワイヤーです。
（深緑の部分は、テキストや企業名を伏せています）
入れたいテキストなども書いておくと、デザイナーさんもデザインしやすくなるので、この時点で決まっているテキストについては、書いておくようにしましょう。
デザインを他の人にお願いする場合は、ワイヤーと一緒に、「〇〇は〇〇な雰囲気」「〇〇はボックスを2つずつ横に並べる」など、諸々の指示も一緒に書いてあげると丁寧です！
デザイン作成
ワイヤーが作成できたら、それを元にデザインを作成していきます。
細かい部分まで作り込む前に、クライアントにデザインの方向性が伝わるようなラフデザインを作成しましょう。
そしてその段階で一度クライアントに確認するようにしましょう。
細かいデザインを作ってしまってから、「イメージと違う」と言われてしまったら、一から作り直しになってしまいますからね。
自分でデザインができない場合は、ランサーズなどで、デザイナーさんに依頼をすると良いでしょう。
自分でデザインをする場合は、必要に応じて、イラストレーター、フォトショップ、XDなどのツールにも慣れておくと良いです。
デザインが出来上がったら、ここでもう一度、クライアントに確認を入れましょう。
コーディングまで出来上がってからデザインを修正するのはかなり大変ですからね。
コーディング
デザインが出来上がったら、コーディング作業に入ります。
コーディング作業は、本番用のサーバーではなく、サイト構築用のサーバーを別に用意しておき、そこで行っていくようにしましょう。
案件によっては、HTMLやCSSだけでなく、JavaScriptやWordPressも勉強しておく必要があるかもしれません。
フリーランスでウェブ制作をするために必要な知識や技術はこちらの記事を参考にしてください！
先方確認
コーディングまでできたら、クライアントにサイトを確認してもらいましょう。
まだこのあとに修正が入る可能性もあるので、サイト構築用のサーバーで確認をもらうようにしましょう。
当たり前かもしれませんが、先方に確認を依頼する前には、バグや間違えがないか、何度もチェックして、できるだけ完璧な状態にしてから見せるようにしましょう。
ここで修正依頼があれば、修正します。
クライアントによっては、一度修正をした後に何度も修正依頼をされたりすることもあるので、できるだけまとめて修正箇所を提示してもらうようにお願いしましょう。
デザインの大きな変更を伴う場合などは、追加料金をもらって対応する場合もあります。
納品
先方チェックの後は、納品作業です。
先方のサーバーにアップロードして納品することになると思うので、FTPソフトの使い方などにも、ある程度慣れておいた方が良いでしょう。
WordPress制作の場合には、WordPressの諸設定も行います。
請求書発行
納品が無事に終わったら、請求書を発行して終了です！
請求書も見積書と同じように、会計ソフトfreee を使っています。
見積書の時も書きましたが、支払いの期日、支払い方法なども記載するようにしましょう。
納品後の修正対応などについても話し合っておくと、あとでトラブルになることを防げます。
私の場合は、３ヶ月以内の、根本的な修正以外については無料対応などとすることが多いです。
まとめ
今回は、フリーランスのウェブ制作者向に、仕事の受注から納品までの流れを紹介しました！
最初は不安なことも多いかと思いますが、まずは自分にもできそうな案件があるかどうか、クラウドソーシングなどを見てみるだけでもおすすめですよ！
どんな案件があるか見ることで、自分に足りないスキルが分かったりしますし、相場感なども掴めると思います。
ちなみに私が、仕事を探すときに一番よく使っているのは、ランサーズです！
こうやって仕事の流れを見てみると、プログラミング以外にも、意外とたくさんやるべることがあることがわかると思います。
コミュニケーションスキルもとっても大切なので、ウェブ制作でフリーランスを目指している方は、プログラミングの学習以外に、そちらのスキル習得も忘れないようにしましょう！
最後まで読んでくださり、ありがとうございました。
ウェブ制作でフリーランスを目指している人は下記の記事もどうぞ！
