プログラミング/仕事

現役フリーランスが語る:Web制作実案件の進め方・流れ【仕事の仕方】

Web制作実案件の流れ
本ページにはプロモーションが含まれています。

こんにちは、現在Web系フリーランスとして6年ほど活動しているしょーごと申します。

この記事では「Web制作実案件の進め方・流れ」についてまとめていきます。

しょーご

初学者の方は「サイトを作る練習」ばかりでここの知識が抜けがちなので、要注意ポイントになります!

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

案件前にフリーナンスに入っておくこと

Web制作の実案件にこれから取り組む前に、【FREENANCE(フリーナンス)】に登録しておきましょう。

【FREENANCE(フリーナンス)】では「完全無料」で損害賠償請求に対して「最大5,000万円の補償」をしてくれます。

【フリーランス最強保険】フリーナンスで損害賠償に備えよ【加入必須】

駆け出し期はクライアントとトラブルになりやすく、周りでもよくその手の話を聞くので、強くおすすめします。

しょーご

納期遅れ、情報漏洩、システムの欠陥など、個人で支払うには大きすぎる額が請求されることもあります。

【FREENANCE(フリーナンス)】の解説記事を以下に書いていますし、無料なのでぜひ登録しておいてください。

\損害賠償を最高5,000万円補償してくれる/

1,000円貰える招待コード→bmcI2o

Web制作の流れと工程を理解する

Web制作の流れ解説_figure

Web制作全体の流れを掴む

Web制作の流れについては、以下の記事にまとめました。

基本的にはこのひと記事でOKです。

案件開始前のヒアリングは何を聞けば良い?

直案件において、依頼を受け付けたらまず行うことは、「ヒアリング」です。

ではヒアリングでは具体的には何をすれば良いのでしょうか?

それを「Web制作フリーランスが使ってるヒアリングシートと項目を解説【テンプレ配布】」では私が使っているヒアリングシートを元に、徹底解説しています!

実案件前に準備するもの

実際の案件ではいくつか用意しておかないと後悔する書類やツールがありますので、紹介しています。

Adobe CCは必ず必要

これから実案件に挑む段階でまだAdobe CCを用意していない人は、以下の記事で最安で入手し使えるようにしておきましょう。

MacユーザーはWindowsを準備しておくこと

Mac民はEdge、Windows民はSafariを検証できるようにしておいてください。

見積もり書、請求書、会計

必ず会計ソフトfreeeで各種書類を発行できるようにしておきましょう。

確定申告など除き、とりあえず無料で使い始めることができます。

Web制作の契約関連は大丈夫か

案件を始める前に会社と「業務委託契約」「秘密保持契約(NDA)」を交わす場合があります。

業務委託契約書については「Web制作フリーランスは必ず用意!!業務委託契約書とはなにか【この雛形を使えばOK】」にて解説しています。

この記事を見てもらえば、「相手から契約書が送られた時に、自分に不利な条項が無いか、欠けてる条項が無いか」が確認できるようになります。

業務委託契約書のひな形については、法務の仕事を15年されており、Web制作もしている方の以下の「Web業務委託契約のひな形11点セット」を使用しています。

ネット上には契約書について色んな情報がありますが、「自分の契約書はじゃあどうすれば良いのか」がわかりません。

しかしこのひな形には契約書中にコメントで解説もあるので、自分でどうカスタマイズすべきかも分かるようになります。

しょーご

なぜかあまり認知されてないですが、めちゃくちゃおすすめです!!

【初心者向け】Web業務委託契約のひな形セット(制作、保守、SNS運用代行)

\Web関連の契約書類はこれで完結/

コーディング開始前に確認すること

実際のコーディング案件に入る前に確認するべきことがあります。

ここを確認しないと、案件が普通に炎上しますので、何を事前確認しておくべきか、この記事で確認しておきましょう!

しょーご
しょーご
案件前に必要事項を事前確認出来ていない人が大半です

コーディング後にチェックすること

コーディングを終えて初稿チェックに出す前に、 チェックしておくべき項目をまとめておきました。

セルフチェックした上で相手に確認してもらうのは、最低限のマナーです。

しょーご

私のコーディング課題をやってくださった方は、セルフチェックは慣れているので大丈夫ですね。

進捗報告のやり方

相手に現在の進捗を報告するときは、テキストだけでなく、わかりやすくテスト環境にアップロードして行うのが基本です。

以下の記事でその手法をマスターしておきましょう!

納品方法まとめ

Web制作案件はコーディングしたら終わりではありません。

以下の記事で「納品方法」を予習しておきましょう!

納品後の保守は絶対に行うこと!

セキュリティ ハッキング

Webサイトは作ってからが本番です。

なのに制作だけするケースが多すぎますし、保守も立派な案件でサブスク収益が狙えるので、絶対に巻き取るようにしましょう。

以下の記事でWordPressサイトの保守について、しっかり学んでおいてください!

失敗の予防法

案件で失敗はつきものです。

失敗しないでフリーランス人生を終える」ことは100%不可能です。それより「失敗率を下げる」ことにフォーカスするべきです。

以下の記事では

  • 失敗率を下げる方法
  • 失敗からのリカバリー方法

について述べています。

おまけ:実案件に挑むのが怖いなら…

Web制作の独学をしている人に全力でMENTAというサービスを進めたい【使い方と評判まとめ】

MENTAを活用しよう

MENTAというサービスがおすすめです。

MENTA」はエンジニア、デザイナーなどのメンターに月額数千円から相談・質問ができるスキルシェアサービスです。

プログラミング学習、ポートフォリオ、エラー解決方法などを学べます。登録しているメンターは4000人程度です。

しょーご

実案件で困った時に、サポートしてくれるWeb制作おすすめメンターも以下の記事では紹介しています。

\現役エンジニアに相談してみる/

他のまとめ記事一覧↓

Web制作勉強法【完全まとめ】

Web制作案件獲得・受注方法【完全まとめ】

Web系の仕事で役立つ便利ガジェット・サービス

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!