WEB制作初心者のための受注から納品までの実務的な流れを解説

WEB制作初心者のための受注から納品までの実務的な流れを解説

※この記事にはプロモーションが含まれています

WEB制作は、スムーズで無駄のない環境やフローを構築しないと収益が上がりません。僕も案件を受け始めたときは、効率が悪くて1日15時間以上労働することも少なくありませんでした。

あなたがもし、受注から納品までひとりで仕事を請け負っているのなら、収益の出ない作業を効率化しないととても大変です。

ではどうするかというと、おすすめは各個撃破。受注から納品までの実務的な流れを把握し、それぞれの手順を分割して、ひとつずつ改善していけばいい。

この記事ではWEB制作初心者の方に向けて、案件獲得から納品までの具体的な流れと、陥りやすい失敗、効率化できるポイントなどを解説しました。長く安定してホームページ制作を続けていくための戦略的なリスクヘッジとして、ご参考いただければと思います。

※なお、ここでの開発環境はワードプレスを使用する場合を想定して、解説しています。大きな流れは変わりませんが、その点だけご了承ください。

目次

WEB制作案件を受注してから納品までの流れ

WEB制作のマーケットは、現代のデジタル全盛時代において非常に需要の高いスキルの一つとなっています。AIの進化や制作ツールの高度化で、専門スキルは必要なくなるのではないかという推測もありますが、そんなことはありません。クライアントの要望に柔軟に応えながら、他社と比較して勝てるホームページの作成は、まだまだ代替はきかない。プログラミングやデザインスキルだけでなく、マーケティングなど総合的なスキルが必要になるからです。

ただ、初心者がWEB制作の案件を受注して納品、アフターフォローまでしていくには、理解しておくことがたくさんあります。この記事では、初心者でも安心して取り組むことができるよう、受注から納品、フォローまでスムーズに進めるための実務的な流れを紹介します。

WEB制作の受注から納品までのベーシックな流れは下記の通りです。

  1. 請負前のヒアリングと要件定義
  2. WEB制作案件を受注する
  3. ホームページ設計のためのヒアリング
  4. ワイヤーフレームの提案と提示
  5. 開発環境の準備
  6. ホームページ作成
  7. 動作確認と修正
  8. 公開
  9. アフターフォロー

なお、案件や、制作環境、進捗状況によってはこの限りではありません。ここでは全体の流れをわかりやく、なおかつ実務としてこなせる情報に絞って解説しています。

請負前のヒアリングと要件定義

クラウドソーシングサイトなどのプラットフォーム、紹介、直接契約など、受注の仕方によりやや異なりますが、正式な受注の前の打ち合わせから戦略的になるべきです。

まずは、クライアントがホームページを作る目的と課題を中心に確認しましょう。初期段階でできるだけ正確にゴールを具体的にしておくことで進行をスムーズにし、誤解や問題を最小限に抑えることができます。

参考までに、当社が見積もりにありクライアント側に確認していることをご紹介します。

✔ホームページ制作の目的
例:新規事業のため必要になった、リニューアルしたい、Web集客を強化したい

✔ホームページの種類
①新規構築orリニューアル
②コーポレートサイト・LP・通販サイト・オウンドメディア・個人ブログ・個人サイト…etc

✔参考サイトURL(あれば)

✔想定ページ数
①トップページ②お問い合わせ③ブログ④会社概要⑤プライバシーポリシー⑥よくある質問⑦ABOUTページ⑧SERVICEページ⑨お客様の声…etc

✔絶対に必要な機能
例:会員ページ機能、ブログ機能、お問合せフォーム、スライドショー、サイトマップ、SNS連携、決済機能、スマホ対応、SEO対策…etc

✔予算

✔希望公開日

場合によっては、希望の色やデザイン、素材のあるなし、ドメインの準備など、細かなヒアリングが必要になります。ただ、ホームページというのは始まってみないとどうなるかわからないところも多分にあるもの。

当社ではたとえ作業工数に前後あるとしても、それを含めて見積もりをたてています。

WEB制作案件を受注する

正式に依頼へと進むことになったら、クライアントとの良好な関係を確保するために、契約書の作成、定期的な進捗管理、効果的なコミュニケーションの維持、変更要求への適切な対応などを丁寧に行うことが必要です。クラウドソーシングサイトを介しての契約なのか、直接なのかなど、受注状況によって変わるので、ここでは詳しく述べません。

それよりも、クライアントとのコミュニケーションを円滑にし、良好な関係を築きながら付き合っていくポイントをご紹介しましょう。どのような仕事でもそうですが、顧客と”適切”に仲良くなると仕事はスムーズに運びます。当社でも、クライアント様との信頼構築を初期段階では特に大切にしてるんです。

よくある失敗として、自分たちが使っている専門用語を使い、専門性をアピールしすぎること。エンジニアの方に多いのですが、プログラミング用語や技術者間の独特の言い回しを、クライアントに対して行うのは賢明ではありません。まして、知識の豊富さを披露するのは最悪です。専門性は伝わりますが、顧客の信頼を損ねる可能性があります。

人格の高い専門家は、クライアントにも分かるような言葉を使って説明します。相手を思いやるコミュニケーションを意識できれば、顧客の好感度も爆上がり。

また、丁寧さも大事ですが、丁寧すぎても相手の時間を奪うことになりかねません。相手の立場に立ち、常に感謝の気持ちを持って接することをおすすめします。それは必ず、相手にも伝わります。

価値観の合わな人とは極力付き合わないこと!

しかし、どれほどこちらが誠実に対応しても、すべての方が同様に返してくれるわけではありません。厄介な人や理不尽な人は少なからずおられます。

最初のうちは選んでいる余裕などないかもしれません。しかし、誰と付き合うか?というのは、特にひとりでWEB制作を請け負っている場合、極めて重要です。

なぜなら、その後の制作効率だけでなく、コミュニケーションコストや精神的なストレスにも影響を及ぼす可能性があるからです。相手も、こちらも人間。合わないのは仕方ありません。そんなときは後々のトラブルを回避するためにも丁重にお断りしましょう。

ここでは深く触れませんが、下記の記事を参考いただき、付き合うべきクライアント様を見極めることを強くおすすめします。

ホームページ設計のためのヒアリング

ホームページ設計のためのヒアリングでは、クライアントのビジョンや目標の確認、ターゲットユーザーの特定、請負前のヒアリングと要件定義での内容に加え、具体的な機能や要件、競合サイトの調査、プロジェクトの予算とスケジュール、保守・運用に関するクライアントの要望などを徹底的にヒアリングします。

もしこれらを怠ると、ホームページが出来上がった後に「思っていたのと違う」「これを言うのを忘れてた」「想定以上に工数がかかってしまった」などトラブルに繋がるリスクがあるので注意が必要です。

また、サイトを完成させるためにはクライアント側に必要な画像素材や情報を準備してもらわなくてはいけません。ホームページは制作者だけで勝手に作れない。クライアントとの共同作業です。クライアント側にも自分ごとと認識してもらうために、具体的な質問で段階的なヒアリングを行い、情報を収集しましょう。

もちろん、制作サイドから提供できる素材や情報、提案はたくさんあります。期待を超えるサービスを提供するにはそうした提案力も大切。深くヒアリングしていくと、クライアントのために出来ることが見えてくるはずなので、密なコミュニケーションを通じて、あなたのスキルを総動員して役立てる努力をしましょう。

勝てるホームページ設計のためのヒアリング

ただし、ホームページは作るだけでは何の意味もありません。見込み客に見つけてもらわなければ、成果に繋がることはないですし、競合と比較されて選ばれなくても同じです。また、せっかく訪問してくれても離脱して、二度と戻ってこなければどのような結果にも繋がらないですよね。

自己満足ではなく、ビジネスで構築する場合、クライアントにとって何らかの利益につながらなければ意味がないのです。

そのために必要なのは、とにもかくにも<戦略>。「勝てるホームページ設計」のための深いヒアリング都、シナリオ作成が欠かせません。

しかし、そのノウハウをここでお伝えするのは困難です。当社では具体的なヒアリングの手順や、勝てるホームページ制作のためのシナリオ設計を簡単に構築できるテンプレートなどを用意した「勝てるホームページの作り方講座」を提供していますので、よければご参考ください。

効果実証済みのノウハウを元にしており、実践的なマーケティングが学べます。

ワイヤーフレームの提案と提示

さて、ヒアリングが深まったら、当社では戦略マップを作成しますが、多くのWEB制作会社では、ワイヤーフレームの提案と提示をします。

ここでは、戦略マップについての詳細な解説は講座受講生の便益を考えてブラックボックスにしているため、ワイヤーフレームの提案と提示を解説します。

ワイヤーフレームとは、一般的に「ホームページのレイアウトやコンテンツの配置を定めた設計図」のこと。具体的には、ヒアリング内容を整理して、その要望を基に目的達成可能な仮設計をクライアントと共有するわけです。

このときによく使われるのが「UI」と「UX」。

簡単に言うと、UI(ユーザー・インターフェイス)は「WEBサイトの使いやすさ・分かりやすさ」のこと。UX(ユーザー・エクスペリエンス)とは「WEBサイトやサービスを通して得られる体験」のこと。

ワイヤーフレームの作成では、「UI」と「UX」を意識しながら、コンテンツの適切な配置とデザインの一貫性に焦点を当て、コンバージョン(目標としているアクション)につながりやすいページ構成を意識するとよいでしょう。

こうしたサイト設計・ワイヤーフレームが完成したら、クライアントサイドに、「こんな感じで造ろうと思いますがいかがですか?」と大まかなサイト設計図を提示し、共有するわけです。この工程を飛ばすと「思っていたのと違った」などトラブルになりかねません。二度手間を防ぎ、良好な関係を築くためにもリスクヘッジしておくことが重要です。

開発環境の準備

さて、ここからは実務的な作業となってきます。大きく分けると、新規構築する場合と、リニューアルするケースとで構築する環境が変わります。

開発環境の準備としては3つの方法あります。

  1. 顧客の契約サーバー/ドメインに直接構築する
  2. ローカル環境で構築し、完成後移行する
  3. 自社の契約サーバー/ドメインに仮構築し、移行する

どの方法を採用するかはクライアントの環境や、用途により変わりますので、それぞれの特徴を踏まえたうえでご判断ください。

なお、サーバーやドメインの契約は必ずクライアントに行ってもらうようにします。契約を制作側でしてほしいと言われた場合でも、代行するのはあまりおすすめしません。カード情報など個人情報入力が必要となる場合も多く、時間もかかる上に不要な責任が伴うためです。

繰り返しになりますが、ワードプレスで構築する開発環境の解説なので、他のCMSを使用する場合は、この限りではありません。

顧客の契約サーバー/ドメインに直接構築する

顧客の契約サーバー/ドメインに直接構築するケースは、下記をご参考下さい。

ホームページの目的新規構築
メリットサイト移行の手間がなく、移行後の調整も必要ない
デメリット公開までメンテナンスモードにするなど注意が必要

ローカル環境で構築し、完成後移行する

ローカル環境で構築し、完成後移行するケースは下記をご参考ください。

ホームページの目的リニューアル /(新規構築)
メリット公開可能状態になってからデータ移行するので安全
デメリット本番環境へ移行する際、知識が必要
本番環境へ移行後、調整が必要になるケースがある

なお、ローカル環境とは、自身のパソコンで構築した開発環境のこと。「Local by flywheel」などのソフトをインストールして使用します。ある程度、プログラミングスキルのある製作者向けの手法です。

リニューアルの場合は既存のWEBサイトが存在した状態のまま、開発をしないといけないので、ローカル環境で開発すれば、同時進行できます。ちなみに、本番環境とは、クライアントのドメインで実際に公開する環境をいいます。

自社の契約サーバー/ドメインに仮構築し、完成後移行する

自社の契約サーバー/ドメインに仮構築し、移行するケースでは、下記を参考にしてください。

ホームページの目的リニューアル/(新規構築)
メリット公開可能状態になってからデータ移行するので安全
デメリット自社契約サーバーを用意する必要がある
自社契約ドメインに仮設置しなくてはならない
本番環境へ移行する際、知識が必要
本番環境へ移行後、調整が必要になるケースがある

ローカル環境での構築に自信がないときは、自身のサーバーと仮ドメインを活用して、構築するのもありです。自社契約サーバーを使用するので、多少の負担はありますが、ローカル環境で構築するケースと比べ、専門知識はそこまで必要とされません。

本番環境へデータを移すには、様々な方法がありますが、初心者の方はWordPressプラグインの【All-in-One WP Migration】を利用すると良いでしょう。また、エックスサーバーでは、ログイン情報だけで簡単に移行できるツールも用意されています。こうしたサービスを利用すれば特別なスキルは必要ありません。

ホームページ作成

いよいよ、ホームページの作成です。提案したワイヤーフレームやサイト設計に基づいて作成していきます。

「おすすめのワードプレステーマはありますか?」

とよく聞かれるのですが、初心者の方でしたら下記のテーマをお勧めします。

読んでいただくと分かりますが、「The Gem」というテーマは海外製のワードプレステーマで、日本ではほとんど使っている人がいません。それだけに差別化しやすく、何よりアレンジの自由度、拡張性、コスパ、何をとっても非常に優れているのです。

デザインだけでなく、マーケティングに有効な機能も簡単に実装できますので、興味あればご覧になってください。

なお、ホームページは70-80%程度の完成度の段階で、クライアント側に確認してもらうことをおすすめします。完全に仕上げてから修正するのは大変なので、方向性が間違っていないか確認するためです。

動作確認と修正

ホームページ完成後、ブラウザやモバイルデバイスでのテスト、リンクやフォームの動作確認、ページの読み込み速度やセキュリティの確認を行います。

クライアントからのフィードバックを取り入れつつ、必要な修正を行い、最終的な確認をして問題が解消されていることを確認します。

最終調整で確認すべき主な項目を以下にまとめてみました。

チェック項目

  • 誤字・機種依存文字・ダミーテキストなどは残っていないか
  • 表記の統一(半角・全角・日付や名前で表記がブレていないか)
  • ダミー画像・未購入画像などは残っていないか
  • 画像を圧縮してファイルサイズを小さくしているか
  • メールがちゃんと届くか(ユーザー側・管理者側)
  • 迷惑メール・文字化けなどは起こしていないか
  • ページ内リンク、SNSなど外部のリンク先は正しいか
  • 対象ブラウザで表示崩れが起きていないか
  • レスポンシブ対応でデザイン崩れは起きていないか
  • 不要な記事データが残っていないか(下書き含む)
  • 不要なプラグインは残っていないか

これらの項目を網羅的に確認することで、ホームページの品質を向上させ、ユーザーにとって使いやすく信頼性の高いWEBサイトを構築することができます。

公開

クライアントによる最終チェックが完了したら、公開作業に入ります。リニューアルの際はこの時点で、ローカル環境またはテスト環境から本番環境にサイトを移行します。

公開する際に注意するポイントは、セキュリティの確保やSSL証明書の導入、バックアップの作成、データベースの最適化、レスポンシブの確認、外部リンクとソーシャルメディアの統合などです。これらのポイントを考慮することで、WEBサイトの公開と運用を安全かつ効果的に行うことができます。

公開後は、クライアントにログインや投稿方法について共有してください。できれば、コンテンツを育てていくためのマニュアルやガイダンス資料を渡してあげると良いでしょう。質が良いほど非常に喜ばれます。サイトを制作したのはこちらでも、これからサイトを育てていくのはクライアントだからです。

特に、SEOの知識を有しているクライアントは多くありません。完璧に理解するのは無理でも、記事のタイトルは28-32文字がベストであることや、URLは半角英字で、画像には代替テキストを忘れずに、など最低限のポイントを抑えるだけでも結果が違います。よければ下記で、最低限抑えたいSEOライティングのコツを解説しているので、参考にしてください。

もちろん、ワードプレスの基本的な操作方法などの解説も忘れずに。パソコンでの作業に疎い方には、動画で簡単に解説してあげると喜ばれます。

なお、公開してすぐはGoogle検索でもひっかからないので、クライアントから「検索しても出てこない」と言われることがあります。その際はGoogle検索にはすぐ載らないことなどを伝え、フォローしましょう。

アフターフォロー

クライアントは基本的に、Webサイト活用において初心者の方が多いです。制作者側が簡単だと思うこともクライアントにとってはハードルが高い場合もありますので、サイトをうまく運用してもらえるように、納品が終わってもアフターフォローを実施します。

丁寧なマニュアルを作っても、隅から隅まで読んでもらえるとは限りません。時には根気がいるときもありますが、一度つないだ縁は大切になさってください。納品が終わっても、問い合わせやフィードバックには速やかに対応し、変わらず丁寧に伝えることで、深い信頼関係を築けるはずです。

ちなみに当社では、ひとつのご縁からいくつものご縁に繋がった事例は数え切れません。ココナラのようなクラウドソーシングサイトは、飲食店にとっての食べログのように口コミ評価が強いと、集客力も強くなりますから、顧客との関係構築はほんとうに大切です。

ただし、永久にアフターフォローをする訳にはいきませんので、アフターフォローの期間や対応できる範囲などを事前に決めておきましょう。プラットフォームには明確な線引きをしておくことをおすすめします。

まとめ

ホームページを作れるようになったけど案件を受注するのが恐い、具体的に何をすればいいか分からない、など案件受注にはWEB制作初心者にとって大きな壁があるかもしれません。また、WEB制作では、受注から納品までひとりで仕事を請け負っている場合、収益の出ない作業を効率化しないととても大変です。

そのためにはまず、受注から納品までの実務的な流れを把握し、それぞれの手順を日々、改善していく必要があるとお伝えしてきました。一つひとつの項目をみれば、そこまで難しいものではない事が分かります。

この記事を参考に、長期的に収益を上げるための仕組み化と戦略的なリスクヘッジをぜひ心がけてください。

ご登録いただくと、月1~2回、更新通知を送らせていただきます。

ご登録いただくと、月1~2回、更新通知を送らせていただきます。

「良いな」と思ったらシェアしてください!損はさせません
  • URLをコピーしました!
  • URLをコピーしました!
目次