具体的なWEB制作案件の流れ【副業・フリーランス向け】
こんにちはTERUです。
フリーランスでWEB制作（コーディング と ディレクション業務）をしています。
読者の悩み
- WEB制作の受注後の流れが知りたい
- コーディングはできるけど、WEB制作では、他にどんな作業が必要なの？
本記事では、こういった疑問に答えます。
今回は、案件受注後のWEB制作の流れについて、実際に僕が行っている作業内容を説明します。
また、WEB制作を進める上での注意点についてもまとめます。
前提条件として、WEB制作で、よくあるパターンのWordPressを使ったコーポレートサイトを作る場合の流れを説明します。
コーディングのみの案件の流れは下記の記事が参考になります。
>>最低限押さえておきたいWeb制作（コーディング）案件の流れ
この記事を読んで分かること
- WEB制作案件を受注した後の作業の流れがわかる
- 案件を進める際の注意点が分かる
目次
- 具体的なWEB制作案件の流れ【受注後〜納品】
- ヒアリング
- デザイン
- 開発環境準備
- WordPressカスタマイズ＆コーディング
- 動作確認＆修正作業
- サーバー＆ドメイン契約の支援
- 本番環境準備
- 本番環境へのデータ移行
- 運用ツールの設定
- 引継ぎ作業
- 公開作業
- 納品
- 請求作業
- WEB制作案件を進める上での注意点３選
本記事の信頼性
- フリーランスとしてWordPress案件を中心としたWeb制作を仕事にしている
- WordPressを使ったWeb制作を数多く経験（2年で約6０件）
- Web制作会社にてディレクターの経験もあり
スポンサードサーチ
具体的なWEB制作案件の流れ【受注後〜納品】
案件を受注した後のWEB制作の大きな流れは下記のようになります。
- ヒアリング
- デザイン
- 開発環境準備
- WordPressカスタマイズ＆コーディング
- 動作確認＆修正作業
- サーバー＆ドメイン契約の支援
- 本番環境準備
- 本番環境へのデータ移行
- 運用ツールの設定
- 引継ぎ作業
- 公開作業
- 納品
- 請求作業
ヒアリング
まずはヒアリングです。
サイト制作の目的、サービスの強みなどサイトの基本情報から、テーマカラーや競合サイトなどデザインのもとになる情報まで、幅広くヒアリングしていきます。
ヒアリングが疎かになると要件漏れによるトラブルや手戻りが発生してしまいます。
クライアントのやりたい事を正確に把握することがお互いの手間を軽減することにつながるので、時間をかけて行いましょう。
どのような項目をヒアリングすればいいの？
ヒアリングシートに記載する項目については、下記の記事にまとめています。
Web制作のヒアリングシートに記載すべき項目【サンプルあり】
こんにちはTERUです。 フリーランスでWEB制作（コーディング or ディレクション業務）をしています。 読者の悩み ヒアリングシートでどんな項目を確認すればいいのか知りたい ヒアリングで抜け漏れを
デザイン
ヒアリング内容を元にデザインを作成していきます。
作成するページ数により作業量は変わりますが、基本的に下記の流れで行います。
- モックアップ作成（手書き）
- デザインラフ作成
- ブラッシュアップ
- デザインカンプ作成
開発環境準備
次にWordPressを使用する開発環境を準備します。
開発環境を準備する方法は、大きく２パターンがあります。
- ローカル環境（自分のPC）に構築するパターン
- レンタルサーバー を契約して構築するパターン
自分のPC内に開発環境を構築する場合は、「Local」という環境ツールを利用します。
「Local」は無料で利用でき、簡単にWordPress環境を構築することが可能です。
WordPress開発環境をPC内（ローカル）に構築する具体的方法【Web初学者必見】
こんにちは、TERUです。 SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。 フリーランスAさん「自分のサイトで、新しいテーマやプラグインを試したいけど、公開済みのサイ
僕のオススメはレンタルサーバーを契約して構築するパターンです。
なぜなら、自分のサーバー環境を持つことで、以下のようなメリットがあるからです。
- ポートフォリオが公開できる。
- ブログ運営してライティング＆マーケティングの実践ができる。
- 移行手順やサーバー周りの作業を検証できる。
サーバやドメイン周りの契約＆設定については下記の記事が参考になります。
ローカル環境で作成したポートフォリオサイトの公開方法【WEB初学者向け】
こんにちはTERUです。 フリーランスでWEB制作（コーディング or ディレクション業務）をしています。 読者の悩み ローカル環境で作成したサイトの公開方法が知りたい 本記事では、こういった疑問に答
WordPressカスタマイズ＆コーディング
次にWordPressカスタマイズ＆コーディングを行います。
WordPressのカスタマイズ内容については、テーマ設定や投稿設定などいくつかありますが、ここでは割愛します。
WordPressのよくあるカスタマイズについては、以下の記事にまとめています。
WordPressで仕事をするために勉強するべきこと【Web初学者必見】
こんにちはTERUです。 フリーランスでWEB制作（コーディング or ディレクション業務）をしています。 読者の悩み WordPressを効率的に学習する方法が知りたい 何から手を出していいかわから
コーディングはデザインデータをもとに行います。
その為、デザインデータから画像の書き出しやコーディング情報を読み取る必要があります。
具体的なやり方については、以下の記事にまとめています。
▼Photoshop（PSD）データの場合
Photoshop（PSDデータ）からコーディングする具体的な方法
こんにちは、TERUです。 SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。 プログラミング初学者Aさん「デザインデータからどうやってコーディングするの？」「デザインデ
▼Adobe XD（XD）データの場合
Adobe XD（xdデータ）からコーディングする具体的な方法
こんにちは、TERUです。 SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。 読者の悩み Adobe XDのデザインデータからどうやってコーディングするの？ デザインデ
動作確認・修正対応
開発環境でサイト構築が完了したら、お客様に動作確認をしてもらい、指摘事項があれば修正対応していきます。
お客様に確認してもらう前に、下記の３点は事前に確認しておきましょう。
- 各ブラウザとスマホでの表示崩れはないか？
- 仕様通りに動作するか？
- サイト表示速度は遅くないか？
指摘事項については、スプレッドシートなど、お客様と共有で管理できるツールに記載しましょう。
なぜなら、対応状況を常に共有でき、指摘事項の漏れを防ぐことができます。
※記録を残すことで、お互いにトラブル防止にもなります。
サーバー＆ドメイン契約の支援
新規にサイト制作をする場合、お客様がレンタルサーバやドメインの契約をしてない場合があります。
その際は、契約の支援をします。
注意点
契約自体は必ずお客様に行ってもらいましょう。
こちらで契約してしまうと、もし揉めた際にトラブルの元になります。
本番環境準備
お客様が契約したレンタルサーバ上で下記の作業を行います。
- WordPressのインストール
- 独自ドメインの紐付け
本番環境へのデータ移行
開発環境から本番環境へのデータ移行を行います。
WordPressの場合、プラグインを利用してデータ移行するのが簡単です。
下記のプラグインを利用してデータ移行を行いましょう。
「All-in-One WP Migration」
【2021年最新】All-in-One WP Migrationの使い方(移行/引っ越し)
All-in-One WP Migrationは、WordPressを移行(引っ越し)できるプラグインです。移行元でWordPressのデータをファイルにエクスポートし、移行先でインポートするだけで簡単に引っ越しができます。All-in-One WP Migrationの基本的な使い方や注意するべきポイントとは？
運用ツールの設定
次に運用ツールの設定です。
WEBサイトは公開して終わりではなく、分析＆改善を繰り返し育てていくものです。
そのため、本番環境には、サイト分析する上で下記のツールを設定しておきましょう。
- Googleアナリティクス
- Googleサーチコンソール
引継ぎ
引継ぎ作業は、手順書を作成し、実際にお客様に操作してもらいながら行います。
お客様が、今後運用で定期的に操作する項目を中心に行います。
具体的には、以下のような項目です。
- ログイン操作
- 投稿作業
- 特定ページの更新作業
手順書について
手順書に関しては、スプレッドシートやnotionで作成して共有すると、変更や管理が楽になります。
また、ある程度再利用可能なので、初めにしっかり作っておくのがオススメです。
公開作業
引継ぎ作業が終わると、いよいよサイトの公開作業です。
公開作業はnoindexの解除など、設定漏れがないかの最終チェックです。
チェック項目については、下記の記事に公開前チェックリストをまとめています。
サイト公開前のチェックリスト10選【WordPress対応】
こんにちはTERUです。 フリーランスでWEB制作（コーディング or ディレクション業務）をしています。 読者の悩み デザイン通りにコーディングできたけど、このまま公開してもいいのか不安 サイト公開
できてない項目があれば、このタイミングで対応しておきましょう。
納品
基本的に公開作業が終わった段階で納品完了です。
請求作業
最後に請求作業です。
請求書を発行し、お客様に振り込んでもらって完了です。
請求書の発行にはMisoca（みそか）を利用しています。
会員登録無料・会費なしで、請求書が月5通まで無料で作成できるのでオススメです。
無料で使える クラウド請求書・見積書・納品書管理サービス Misoca（みそか）
スポンサードサーチ
WEB制作案件を進める上での注意点３選
ここではWEB制作を進める上での注意点を説明します。
大きくは下記の３点になります。
- 小まめなコミュニケーションからの雰囲気作り
- プロジェクトにお客様を巻き込む
- 納品後のアフターフォローは必須
１つずつ説明しますね。
小まめなコミュニケーションからの雰囲気作り
当たり前のことですが、お客様とマメにコミュニケーションをとることです。
特にデザインやコーディングの作業に入ると、コミュニケーションを取らなくても作業は勧めれます。
しかし、制作が終わった後に、大きな変更点を言われたり、実はお客様が納得していなかったなど、後から分かると手戻りが発生し、結果的に工数が膨れ上がることがあります。。
具体的には、コミュニケーションが必要ない工程でも１週間単位で進捗を報告することで、お客様も気になる点を言いやすい雰囲気を作ることができます。
コミュニケーションを増やすことで、一緒にサイトを制作しているんだという主体的な気持ちをお客様に持ってもらうことができます。
プロジェクトにお客様を巻き込む
１点目と似ていますが、案件を進める上でお客様を巻き込んでいくことが重要です。
結論、どれだけお客様を巻き込めるかでサイトのクオリティは大きく変わってきます。
なぜなら、WEBの技術やユーザビリティーについての知見は持ってますが、会社の強みや特徴、目指すべき目標など、お客様自身が一番把握しています。
お互いの意見を出し合って、落とし込んでいくことで制作側、お客様側の両方の観点から最良となるサイトを作っていくことができます。
納品後のアフターフォローは必須
3つ目の注意点が納品後のアフターフォローは絶対必要という点です。
引継ぎして納品した後、基本的に1ヶ月間チャットでのサポートをメインにアフターフォローを行っています。
なぜなら、引継ぎだけでお客様がサイト運用を理解するのはハードルが高いからです。
通常1日程度の引継ぎ作業ですが、その時はお客様も実際に操作をして理解したつもりになります。
しかし、サイトの運用作業は毎日行うものではないので、いざ作業をしようとした際にやり方を忘れていて、納品されたマニュアルを見ただけでは対応できないというパターンが多いからです。
具体的には下記のような運用作業が必要なサイトはアフターフォローは必要です。
- お知らせや実績などの投稿作業
- アクセス解析の見方
- サービス予約や商品を購入された後のオペレーション
ただ、無期限にアフターフォローをするのは不可能なので、フォロー期間の目処を予め設定し、それ以上のフォローが必要な場合は、お客様に保守契約を結んでもらうのが、お互いにWinWinな関係を築けると思います。
今回は、WEB制作案件の流れついてまとめてみました。
一度WEB制作の全体像を掴んでおくと、安心して作業や必要な勉強に取り組めるので知っておいて損はないと思います。
何かご質問がありましたら、気軽にご連絡ください。
以上です。
スポンサードサーチ