こんにちは、現在Web系フリーランスとして5年ほど活動しているしょーごと申します。
この記事では「Web制作実案件の進め方・流れ」についてまとめていきます。
初学者の方は「サイトを作る練習」ばかりでここの知識が抜けがちなので、要注意ポイントになります!

この記事を書いたのは
しょーご(@samurabrass)
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
\現役エンジニアのレビュー付き/
実践レベルのコーディング課題公開中

- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
コーディングを学習中の方はぜひご活用ください。
\無料の入門編から本格企業サイトまで/
Web制作の流れ

Web制作の流れについては、以下の記事にまとめました。
基本的にはこのひと記事でOKです。
実案件前に準備するもの
実際の案件ではいくつか用意しておかないと後悔するツールがありますので、紹介しています。
Adobe CCは必ず必要
MacユーザーはWindowsを準備しておくこと
見積もり書、請求書、会計
必ず会計ソフトfreeeで各種書類を発行できるようにしておきましょう。
確定申告など除き、とりあえず無料で使い始めることができます。
Web制作の契約関連は大丈夫か

案件を始める前に会社と「業務委託契約」「秘密保持契約(NDA)」を交わす場合があります。
このしょーごログではまだ解説記事がありませんが、最高に役立つテンプレート集&解説コンテンツを発見しましたため、そちらを共有させていただきます。

正直ここにあるので問題ないです。
【初心者向け】Web業務委託契約のひな形セット(制作、保守、SNS運用代行)
\Web関連の契約書類はこれで完結/
コーディング開始前に確認すること
実際のコーディング案件に入る前に確認するべきことがあります。
ここを確認しないと、案件が普通に炎上しますので、何を事前確認しておくべきか、この記事で確認しておきましょう!
コーディング後にチェックすること
コーディングを終えて初稿チェックに出す前に、 チェックしておくべき項目をまとめておきました。
セルフチェックした上で相手に確認してもらうのは、最低限のマナーです。
私のコーディング課題をやってくださった方は、セルフチェックは慣れているので大丈夫ですね。
進捗報告のやり方
相手に現在の進捗を報告するときは、テキストだけでなく、わかりやすくテスト環境にアップロードして行うのが基本です。
以下の記事でその手法をマスターしておきましょう!
納品方法まとめ
Web制作案件はコーディングしたら終わりではありません。
以下の記事で「納品方法」を予習しておきましょう!
失敗の予防法
案件で失敗はつきものです。
「失敗しないでフリーランス人生を終える」ことは100%不可能です。それより「失敗率を下げる」ことにフォーカスするべきです。
以下の記事では
- 失敗率を下げる方法
- 失敗からのリカバリー方法
について述べています。