こんにちは、現在Web系フリーランスとして6年ほど活動しているしょーごと申します。
この記事では「Web制作実案件の進め方・流れ」についてまとめていきます。
初学者の方は「サイトを作る練習」ばかりでここの知識が抜けがちなので、要注意ポイントになります！
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
案件前にフリーナンスに入っておくこと
Web制作の実案件にこれから取り組む前に、【FREENANCE(フリーナンス)】
に登録しておきましょう。
【FREENANCE(フリーナンス)】では「完全無料」で損害賠償請求に対して「最大5,000万円の補償」をしてくれます。
駆け出し期はクライアントとトラブルになりやすく、周りでもよくその手の話を聞くので、強くおすすめします。
納期遅れ、情報漏洩、システムの欠陥など、個人で支払うには大きすぎる額が請求されることもあります。
【FREENANCE(フリーナンス)】の解説記事を以下に書いていますし、無料なのでぜひ登録しておいてください。
＼損害賠償を最高5,000万円補償してくれる／
1,000円貰える招待コード→bmcI2o
Web制作の流れと工程を理解する
Web制作全体の流れを掴む
Web制作の流れについては、以下の記事にまとめました。
基本的にはこのひと記事でOKです。
案件開始前のヒアリングは何を聞けば良い？
直案件において、依頼を受け付けたらまず行うことは、「ヒアリング」です。
ではヒアリングでは具体的には何をすれば良いのでしょうか？
それを「Web制作フリーランスが使ってるヒアリングシートと項目を解説【テンプレ配布】」では私が使っているヒアリングシートを元に、徹底解説しています！
実案件前に準備するもの
実際の案件ではいくつか用意しておかないと後悔する書類やツールがありますので、紹介しています。
Adobe CCは必ず必要
これから実案件に挑む段階でまだAdobe CCを用意していない人は、以下の記事で最安で入手し使えるようにしておきましょう。
MacユーザーはWindowsを準備しておくこと
Mac民はEdge、Windows民はSafariを検証できるようにしておいてください。
見積もり書、請求書、会計
必ず会計ソフトfreeeで各種書類を発行できるようにしておきましょう。
確定申告など除き、とりあえず無料で使い始めることができます。
Web制作の契約関連は大丈夫か
案件を始める前に会社と「業務委託契約」「秘密保持契約(NDA)」を交わす場合があります。
業務委託契約書については「Web制作フリーランスは必ず用意!!業務委託契約書とはなにか【この雛形を使えばOK】」にて解説しています。
この記事を見てもらえば、「相手から契約書が送られた時に、自分に不利な条項が無いか、欠けてる条項が無いか」が確認できるようになります。
業務委託契約書のひな形については、法務の仕事を15年されており、Web制作もしている方の以下の「Web業務委託契約のひな形1１点セット」を使用しています。
ネット上には契約書について色んな情報がありますが、「自分の契約書はじゃあどうすれば良いのか」がわかりません。
しかしこのひな形には契約書中にコメントで解説もあるので、自分でどうカスタマイズすべきかも分かるようになります。
なぜかあまり認知されてないですが、めちゃくちゃおすすめです！！
【初心者向け】Web業務委託契約のひな形セット（制作、保守、SNS運用代行）
＼Web関連の契約書類はこれで完結／
コーディング開始前に確認すること
実際のコーディング案件に入る前に確認するべきことがあります。
ここを確認しないと、案件が普通に炎上しますので、何を事前確認しておくべきか、この記事で確認しておきましょう！
コーディング後にチェックすること
コーディングを終えて初稿チェックに出す前に、 チェックしておくべき項目をまとめておきました。
セルフチェックした上で相手に確認してもらうのは、最低限のマナーです。
進捗報告のやり方
相手に現在の進捗を報告するときは、テキストだけでなく、わかりやすくテスト環境にアップロードして行うのが基本です。
以下の記事でその手法をマスターしておきましょう！
納品方法まとめ
Web制作案件はコーディングしたら終わりではありません。
以下の記事で「納品方法」を予習しておきましょう！
納品後の保守は絶対に行うこと！
Webサイトは作ってからが本番です。
なのに制作だけするケースが多すぎますし、保守も立派な案件でサブスク収益が狙えるので、絶対に巻き取るようにしましょう。
以下の記事でWordPressサイトの保守について、しっかり学んでおいてください！
失敗の予防法
案件で失敗はつきものです。
「失敗しないでフリーランス人生を終える」ことは100%不可能です。それより「失敗率を下げる」ことにフォーカスするべきです。
以下の記事では
- 失敗率を下げる方法
- 失敗からのリカバリー方法
について述べています。
おまけ：実案件に挑むのが怖いなら…
MENTAを活用しよう
MENTAというサービスがおすすめです。
「MENTA」はエンジニア、デザイナーなどのメンターに月額数千円から相談・質問ができるスキルシェアサービスです。
プログラミング学習、ポートフォリオ、エラー解決方法などを学べます。登録しているメンターは4000人程度です。
実案件で困った時に、サポートしてくれるWeb制作おすすめメンターも以下の記事では紹介しています。
＼現役エンジニアに相談してみる／
他のまとめ記事一覧↓
Web制作勉強法【完全まとめ】
Web制作案件獲得・受注方法【完全まとめ】
Web系の仕事で役立つ便利ガジェット・サービス
ご寄付を頂けると今後の更新の励みになります！
