【フリーランス・副業】Web制作の流れを実案件で解説
Web制作始めて間もないフリーランス「Web制作をやりたいんだけど、受注後はどんな流れで進んでいくの？具体的にWeb制作の流れを教えて欲しい。」
こういった疑問に答えます。
本記事でわかること
- Web制作の流れ【企画、制作、運用】
- フリーランスがWeb制作を行うときに注意する点
- フリーランスがうまく案件をこなす3つのコツ
上記の通り。
本記事の信憑性
先日Twitterで以下のツイートをしました。
【総受注額が4ヶ月で７桁を超えました】
昨日、ランサーズでペライチ案件を受注しました！
そして！ついに『受注額７桁』を達成しました😭✨
Progateを始めて4ヶ月も経っていません。
努力で変われました🔥お祝いの、いいね&リプお待ちしております🙌#Web制作#駆け出しエンジニアと繋がりたい
— めてお@Web制作4ヶ月で7桁 (@meteo_web) June 17, 2021
とその後すぐに80万の案件を受注しました！
【ひっさびさの案件獲得報告】
えぐいです。80万円弱の案件受注。
最近は案件獲得報告やめてたのですが、やばすぎたのでご報告🙇♂️✨
やっぱり #codolife 神ですね😎
引き続き結果出していきます！
はらさん（@haraponta1496 ）サポートお願いします🙇♂️#Web制作#駆け出しエンジニアと繋がりたい
— めてお｜Web制作チーム化の人 (@meteo_webteam) August 13, 2021
こんな感じで順調に案件を受注している僕ですが、web制作の学習を始めたのは2021年2月。こんな僕がしっかりと稼げる人からのアドバイスがほしいということでこの記事を書いています。
Web制作の流れ【企画、制作、運用】
フリーランスだと、Web制作のすべてをしなきゃいけないので大変ですよね。結論、Web制作の受注後の流れはこちら。
- Web制作の流れ①：企画
- Web制作の流れ②：制作
- Web制作の流れ③：運用
上記の通り。順番に解説します。
Web制作の流れ①：企画
主に企画フェーズでは何のためにWebサイトを制作したいかどんな機能を持たせたいかなどを決定します。具体的にはこんなことをします。
- 企画①：ヒアリング
- 企画②：スケジュール決定
- 企画③：素材用意
企画①：ヒアリング
受注後にまず行うのはヒアリングです。そして、Web制作ではこのヒアリングが1番大切です。
その際に特に重要なのが以下の3点。
- 大切なこと①：納期はいつか
- 大切なこと②：Webサイト作成の目的
- 大切なこと③：ITの知識をどれだけもっているか【見落としがち】
この3点は必ず聞きましょう。忘れがちなのがお客様のITの知識の部分です。これから相手と会話をする上で相互の認識がずれないように大体でいいので必ず確認しましょう。
ヒアリングの方法としては、大きく２つです。
- ヒアリング方法①：テキスト（チャットやメール）
- ヒアリング方法②：電話（テレビ電話や通常の電話）
電話の方が、相手の言いたいことや自分の伝えたいことが伝わりやすいので、できれば電話の方がいいです。ただ電話は苦手という方も多いので適切にヒアリングできれば、結論どっちでもいいかなと思います。
ヒアリングするときは、必ずヒアリングシートを使うようにしましょう。
ヒアリングシートの内容はどんなものか疑問に思われた方のために下にヒアリングシートについての記事を載せておきます。
>>Web制作におけるヒアリングシートとは？作り方と大切な理由の記事はこちら
企画②：スケジュール決定
ヒアリングが終わったら次はざっくりと以下の項目のスケジュールを決定していきます。()の中は全体の日数の何割くらいを占めるのかを記載しています。
2.原稿作成(1.5割)
3.デザイン作成(2.5割)
4.コーディング(3割)
5.最終チェック、修正(1割)
6.本番環境移行(1割)
7.納品
例えば以下のようなスケジュールで行います。
企画③：素材用意
スケジュールが決まったら最後に素材の用意をお客様にご依頼しましょう。ここを、製作者側のスコープにいれてしまうのはおすすめしません。（写真や画像は感覚的なものなのでいつまで経ってもきまりません。）
Web制作の流れ②：制作
企画のフェーズが終わったら次は制作のフェーズになります。制作は以下の5つのステップで進んでいきます。
- 制作①：ワイヤーフレーム作成
- 制作②：デザイン作成
- 制作③：コーディング
- 制作④：最終チェック、修正
- 制作⑤：本番環境移行
制作①：ワイヤーフレーム作成
ここではワイヤーフレームの作成について説明します。
※下層ページが多い場合はトップページだけ作成されることもある。
ワイヤーフレームのイメージをもってもらうために、あるページのワイヤーフレームとデザイン作成後の両方を見比べてみましょう。
上記のような感じです。ワイヤーフレームを作成するツールはデザインを作成するツール（後述）を使用したり、パワーポイントや手書きだったりもします。
制作②：デザイン作成
ワイヤーフレームが出来てお客様に承認がもらえたら次はデザイン作成に進みます。基本的にワイヤーフレーム通りの構成でデザインを作成していきます。使用するツールの例は以下の通りです。
デザイン作成使用ツール例
- Figma
- AdobeXD
- GIMP
上記のようなツールを用いてデザインを作成します。
例えば、Figmaを使用した場合にこんな感じでデザインを作っていきましょう。
次のコーディングのステップで手戻りにならないようにコーディングしやすいデザインを心がけましょう。
制作③：コーディング
デザインが決まったら次は実際にコーディングしてページを作成していきます。以下の2点に気をつけてコーディングしましょう。
- コードの可読性
- 編集しやすいコード
コードの可読性はかなり重要です。もし、運用フェーズなども今後担当していくことを狙っているのであればコードの可読性を高くしておかないと自分が困ってしまいます。
それに加えて編集しやすいコードも意識しましょう。
制作④：最終チェック、修正
コーディングまでが終わったら最後に最終チェックをお客様にしてもらいます。
お客様に見てもらうポイントとしては、サイトがお客様のイメージ通りになっているかどうかという点です。ここで何かを修正したいという場合は追加料金などをとって修正するのもありです。
制作⑤：本番環境移行
上記までのステップがすべて完了したら、最後に本番環境にアップしましょう。ここで、本番環境にあげるとまたリンクなどが切れてしまう可能性がありますので、もう一度確認しましょう。確認してすべてうまいこと言っていれば完成になります。
Web制作の流れ③：運用
Web制作は作って終わりではありません。作った後にどのようにサイトを運用していくかでそのサイトの価値が決まります。
運用フェーズでは例えば以下のような仕事があります。
- 運用①：文字、画像の入れ替え
- 運用②：新しいページの作成
- 運用③：SNS連携など
上記の通り。順番に解説します。
運用①：文字、画像の入れ替え
運用でよくあることは文字や画像の入れ替え作業です。難易度としては1番簡単な部類でしょう。
ただ、文字や画像を入れ替えるのにも専門知識が必要なためしっかりとお金をとれる作業になります。
運用②：新しいページの作成
他には運用作業の一つとして新しくページを作りたいなどがあります。運用しているサイトが自分の作ったサイトならば簡単に対応できますが、他の人が作ったサイトの場合は事前に自分でもちゃんと作れそうか確認しましょう。
運用③：SNS連携など
SNS連携なども運用フェーズの一つの作業です。専門的知識っぽいですが、ググればすぐに出てくるので身構える必要はありません。
Web制作を行うときに注意する点
Web制作を行う時に以下の3点を注意しましょう。
- 注意点①：ヒアリング時に相手の行うこと、自分の行うことを明確にしておくこと
- 注意点②：サイトに載せるテキストや画像は事前に先方に用意してもらうこと
- 注意点③：テストは必ず行うこと【単純ミスを先方に気づかれると運営フェーズを任せてもらえなくなります】
上記の通りです。
注意点①：ヒアリング時に相手の行うこと、自分の行うことを明確にしておくこと
ヒアリングをした際に、何をするかについては話し合うと思います。ただ決定し忘れるのはだれがするかです。
「相手はお客さんだから、全部自分が担当するんじゃないの？」というのは違います。
素材編集：自分担当
のように、項目ごとにだれが担当するかを明確にしましょう。
そしてこれが大切ですが、言葉での決定だけではなくヒアリングシートにしっかりと明記しておきましょう。あとで言った言わないがなくなり問題が起こらなくなります。
注意点②：サイトに載せるテキストや画像は事前に先方に用意してもらうこと
サイトに載せるテキストや画像の準備が整ってからデザインカンプの作成に入れるとかなりいいです。
デザインはテキストの長さや画像の配色によってかなり変わるためです
注意点③：テストは必ず行うこと【単純ミスを先方に気づかれると運営フェーズを任せてもらえなくなります】
リンクがちゃんと繋がっているかなどのテストをする必要があります。だからと言って大袈裟なテストは必要ありません。
上記で十分です。もし、リンクがうまくいっておらずお客様に納品したら悪い評価をつけられるのでそれだけは避けましょう。
フリーランスがうまく案件をこなす3つのコツ
フリーランスとして、トラブルなく効率的に案件をこなすためのコツを3つほど紹介します。
- コツ①：口頭で話した決定事項をテキスト化
- コツ②：修正回数を事前に決定
- コツ③：リキッドデザインかソリッドデザインかを決定
コツ①：口頭で話した決定事項をテキスト化
トラブルを起こさないために一番重要なのは口頭で決めたことはすべてテキスト化することです。
一番ある問題点は言った言わないのトラブルです。それをなくすためにテキスト化を意識しましょう。
議事録というと、会議で話した内容を全てメモしたもののように聞こえますが、記載するのは決定事項と決定身事項のみで大丈夫です。
これでトラブルの9割は防ぐことができます。
コツ②：修正回数を事前に決定
修正回数に制限を持たせることもかなり大切です。修正回数を無制限にしてしまうと一生修正がきます・・・
コーディングの修正が一番きついので、一度デザインが決まったらそれ以降基本的に修正は受け付けない方がいいです。
コツ③：リキッドデザインかソリッドデザインかを決定
そもそもリキッドデザインとソリッドデザインが何かというと
ソリッドデザイン・・・画面幅が変わってもデザインは変化しない
連続的にというのがポイントです。ある画面幅より小さく（大きく）なったときにデザインが変わるのはレスポンシブデザインと呼ばれます。
直感的にわかると思いますが、リキッドデザインの方が作成するのが圧倒的に難しいです。特にコーディング工程が最強に難しくなります。
ここを決めずにサイト制作してしまうと、お客さんはリキッドデザインを期待していたのに製作者はソリッドデザインで作ってしまったなどで最悪作り直しなどの事態は避けられないのでお気をつけください。
まとめ【フリーランスの人のWeb制作案件の流れはイメージつきましたか？】
いかがでしたか？本記事ではWeb制作案件の流れを受注してから納品するまでに重点を置き解説しました。復習のためもう一度下記の流れを確認してください。
- Web制作の流れ①：企画
- Web制作の流れ②：制作
- Web制作の流れ③：運用
- 制作①：ワイヤーフレーム作成
- 制作②：デザイン作成
- 制作③：コーディング
- 制作④：最終チェック、修正
- 制作⑤：本番環境移行
- 運用①：文字、画像の入れ替え
- 運用②：新しいページの作成
- 運用③：SNS連携など
上記の通りです。
今回は、Web制作を初めたての初心者が最初に通るであろうクラウドソーシングにおいて仕事を受注した場合のWeb制作の流れに特化して解説しましたので、実際のWeb制作会社さんとは流れが異なる部分が出てくるかもしれません。
本記事は以上になります。なお、TwitterもやっていましてWeb制作案件を受注するためのノウハウを発信していますので、以下よりフォローお願い致します。
また本記事の画像は以下のサイトより使用しています。
Illustration by Freepik Storyset
最後になりますが、以下のLstepでは営業術・チーム化・自動化を発信しております。フォローすると時給が大幅に上がります！