概論
WEB制作案件の仕事の流れ
INDEX
目次

0. はじめに

WEBサイト制作案件の仕事の流れ
ここで説明する仕事の流れに沿って案件を進めれば、ほとんどのWEBサイト制作の案件に対応できます。

また、抽象化して応用すれば他のBtoB案件においても問題なくプロジェクトを進行できるでしょう。

具体的な例を用いて説明しないと伝わりづらいと思いますので、一般的なコーポレートサイトのWordPressでのサイト構築の案件を例に、契約~納品までのステップを説明します。
契約~納品までのステップ
  • ヒアリング
  • 要件定義
  • コンセプト策定
  • ワイヤーフレームの作成
  • デザインカンプ作成
  • サーバー環境構築
  • WordPressの構築
  • HTML・CSS・JavaScriptなどフロントの開発
  • 納品&リリース
  • 運用保守

1. 契約から納品までのステップ解説

a. ヒアリング

まずはヒアリングを通じて、クライアントがどのようなWebサイトを構築したいのか聞いていきましょう。
クライアントへのヒアリングのポイント
  • WEBサイト制作の目的

    • たいていの場合は集客が目的となります。
  • ターゲット・商材

    • ターゲットユーザーは誰で、どのような商材を扱っているのかをヒアリングしましょう。
  • コンセプト

    • こういうコンセプトにしたいという思いを持った経営者は多いので、コンセプトをヒアリングしましょう。
  • 想定機能

    • 必要な機能を網羅的に聞いておきましょう。
  • ページ構成

    • どのようなページが必要かヒアリングしましょう。
  • デザインイメージ

    • カラーのイメージ、ユーザーに与えたい印象などをヒアリングしておきましょう。

b. 要件定義

ヒアリングを通じて得た情報をもとに要件定義を行います。こちらは要件定義書のサンプルを紹介します。

実際の制作案件においては、下請けの場合や短納期かつ安価な案件の場合、要件定義には携わらないケースもあります。

要件定義を行わないと、以下のような問題が発生するため非常に重要です。
要件定義を行わないと大変なことに。そんな一例をご紹介
  • 後から要件にない追加ページや機能の依頼が増えて赤字になる
  • 修正回数に制限をつけなかったため、修正がいつまでも終わらない
  • 要件定義でやると言ったことが実現できないと後からわかった
WEBサイト制作案件がうまくいくかどうかは要件定義にかかっています。

案件規模が大きくなるほど要件定義書を作成し、要件について合意を取るのがおすすめです。

c. 要件定義テンプレートとその中身

要件定義書のテンプレート
上記のテンプレートにも含まれる、要件定義書に必要な項目を簡単に解説していきます。

要件定義書の項目の設計に正解はありませんし、「案件の特徴」「種類」「規模」などによってどのくらいのレベルで要件定義書を用意すべきかは変わります。

以下、テンプレートの項目に沿って説明します。
1. 概要
WEBサイト制作の背景やプロジェクトの概要を記載しましょう。
2. 目的
  • 集客
  • ブランディング
  • 採用

などのサイト制作の目的を明確にしましょう。

3. 目標
具体的なアクセス数、回遊率、CVR、フォーム送信率など具体的なKPIの目標値が決まっている場合は目標を記載しておきましょう。

ここで無理な目標を設定してしまうと後で苦しむことになります。
4. 作業スコープ
「発注者側にやってほしいこと」「受注者側がやること」を明確にしておくことは大切です。

「発注者側がやってくれると思ったら全く協力的にやってくれなかった…その結果納期に間に合わない」といったトラブルを防ぐために、発注者側に必ず協力してほしいことを明記しておくことが重要です。
5. プロジェクト体制
大規模な案件になってくると自分一人ですべてやるケースはまれです。

プロジェクトに参加予定のメンバーを明らかにし、役割分担を明確に記載しておきましょう。

プロジェクトメンバー間で役割の分担をしておかないと、後々「誰の責任かわからないタスクが発生する」「仕事の押し付け合いになる」などのリスクがあります。

特に、仕事を一緒にした経験がありまだ信頼関係がない場合など、プロジェクトメンバー間での役割の明確化は大切です。
6. 連絡手段
念のためSlack、Zoomなどクライアントとすり合わせて連絡手段も決めておくとよいでしょう。

意外と「SlackやChatworkではなくすべてメールでやってください」などとなると生産性がかなり落ちたりします。仕事のしやすい方式で連絡手段を確定させておくのも、地味ですが重要です。
7. スケジュール
スケジュールは納品日までゆとりを持って設定して握っておきましょう。

実際に見積もった時間の1.5倍くらいにはゆとりを持っておくのがおすすめです。

納期はできるだけ長めにとっておくように粘り強く交渉する癖をつけましょう。開発には常に想定外があります。そのため想定外に備えてバッファを設けてスケジュールを設定しましょう。
8. 必要な情報
サーバー、WordPress、ドメイン、素材など必要な情報はすべてリストアップしておき、早めにクライアントに用意するようにお願いしておきましょう。

クライアントから必要な情報がこなくてプロジェクトが進まないと言った事態を防ぐようにしましょう。

また、特にサーバー・ドメイン・原稿・素材などは明確にクライアントに用意してもらうように頼みましょう。素材などをこちらで用意したり制作することになると、一気に工数が増えてしまいます。

クライアントが用意すべき情報は明確にしておくのが大切です。
9. 会議について
最初に約束する会議の頻度は月1回、2回など抑えめで設定しておくとよいでしょう。

約束した会議の頻度を減らすことは非常に難しいですが、増やすことは簡単です。必要になったら後から追加すればよいのです。

形式もオフラインになると想定外の移動工数が発生するため、オンラインで約束しておくのがよいでしょう。
10. 納品
納品方法は、わかりやすくサイトを公開する形式としましょう。本番環境で正しくWEBサイトが動作したら納品という扱いになります。

納品物は、公開されているサイトに使われているデザインカンプやソースコードは必須で渡しておくとよいでしょう。

次に特に重要なのが「修正」です。WEBサイトは修正しようと思えばいくらでも修正できますし、誰から見てもまったく改善点がないWEBサイトはほぼあり得ません。

そのため、修正回数の上限を定めたり、一定以上の回数を超えると追加費用が発生する形式にしないと、工数が莫大になるリスクがあります。

支払いについても形式と時期を定めておきましょう。一般的には銀行振込で納品月末締め・翌月払いなどが多いです。ただ、大規模で長期的な案件であったり相手の支払い能力を信用しきれない場合はマイルストーン払いを適用するとよいでしょう。

プロジェクト全体をいくつかのマイルストーンに分割し、要件定義の段階、ワイヤーフレームの段階、デザインの段階など段階をいくつか分けて、その都度クライアントに確認してもらい、一部のお金を支払ってもらう形式です。

クライアント側は支出のタイミングが早くなるので一般に嫌がられることもありますが、受注者側としてはキャッシュインが速くなるため大きなメリットがあります。

また、納品完了後支払いまでの期間が長くても困る場合など、フリーランスにおすすめのサービス(ここでも紹介しているフリーナンスなど)の即日払いサービスを利用するとよいでしょう。
11. サイトマップ
サイトマップとはWEBサイトの構成を視覚的に表したものです。

視覚的にサイト全体でどのページがあってどういう階層構造になっているかを把握できるため、クライアントとサイトの認識をすり合わせる上で重宝します。

FigmaでAutoflowというプラグインを使うと、ボックス同士を簡単に矢印でつなげることができ、サイトマップが作りやすいのでおすすめです。

FigmaでなくてもPowerPointなどで作成する形も可能だと思います。
サイトマップテンプレート
12. ディレクトリマップ
ディレクトリマップは、主にExcelやスプレッドシートを活用して作成することが多いものです。
ディレクトリマップのメリット
  • WEBサイトのページ数を把握できる
  • WEBサイトごとにURL、タイトル、ディスクリプションなど必要な情報が把握できる
  • ワイヤーフレーム、デザイン作成、実装など進行状況が管理できる

WEBサイト制作案件では、ディレクトリマップを作成して、作成するページ数をクライアントとすり合わせ、進行管理をするのがおすすめです。

ディレクトリマップの必要な項目
  • 管理用番号
  • WEBページの名前
  • URL
  • タイトル
  • ディスクリプション
  • 進捗状況

    • ワイヤーフレーム段階なのか、デザイン段階なのか、実装段階なのかなど
  • 期日

    • ページの完成の期日を書くとよいでしょう。

それ以外にも、ディレクトリマップには随時自分が必要だと感じた項目を追加しながら使ってみるとよいでしょう。

ディレクトリマップのテンプレート
13. 機能一覧
ページごとに必要な機能を記載しておくようにするとよいでしょう。

例えば、お問い合わせページであればお問い合わせフォーム機能などが必要になります。
14. ブラウザサポート
ブラウザサポートは、WEB制作案件では非常に重要になります。

ブラウザごとにWEBサイトの表示・動作が異なることがあるため、複数パターンのブラウザで正常に動くことを保証する必要があります。

基本的には代表的に使われるブラウザの最新版を保証しておけば問題ありません。

ブラウザサポートを明確に制限をつけておかないと、とても古いブラウザへの対応まで要求されたりと後で苦労することになります。

要件定義書サンプルに書いてあるような代表的なブラウザのサポートに留めておくことを強く推奨します。
15. サーバー・ドメイン
どのサーバーを使うのか、サーバーは誰が取得するのか、ドメインは誰が取得する予定でどんなドメインを使うのかなどをはっきりしておきましょう。

サーバーの用意とドメインの用意は基本的に発注者側がしてくれるケースが多いです。ただ、クライアントのリテラシーがあまり高くない場合はサーバー・ドメインの取得まで代行するとよいでしょう。

費用はクライアント負担にしてもらうのが通常です。
16. CMS
CMSは何を使うのか?相手の要求デザインや機能・予算・納期に応じて判断して提案していきましょう。

WordPressなのか、WordPressとはいえオリジナルテーマを作るのかカスタマイズでよいのか、WIXにするのかなど、CMSをどうするのかはしっかり決めておくのがよいです。

予算と納期にしっかりと余裕がある場合以外では、WordPressのオリジナルテーマでの開発は選択しない方がよいです。

ユーザーに見える部分だけではなく管理画面の開発やマニュアル化なども含めると膨大な工数がかかります。

その割に、既存テーマに比べると集客効果がその分上がるかと言われるとそうでもないケースが多いので、基本的に費用対効果を重視するならWordPressでの既存テーマカスタマイズや、WIXをおすすめするとよいです。

また、CMSの中でどのような機能を使うつもりなのかもすり合わせておくとよいでしょう。

また、CMSの有料機能を使いたい場合は要件定義の段階で相手に承諾を得ておくべきです。
17. 技術要件
技術要件ではHTML、CSS、JavaScript、PHP、jQueryなど使用予定の技術について記載しておくとよいでしょう。
18. 分析ツール
基本的に導入すべきものになるため、こちらも要件定義に入れてすり合わせておくとよいでしょう。

以下のツールは無料でかなりよいものが使えますので導入しておくのがおすすめです。
導入おすすめ分析ツール
  • Google Analyticsの導入
  • Google Search Consoleの導入
  • ヒートマップツールの導入

d. ワイヤーフレーム作成

各ページにどういうコンテンツをどういう順番で配置していくのか、レイアウトを確定していく目的で使用します。

ワイヤーフレームの目的は情報設計と覚えておきましょう。

そのためデザインに凝りすぎる必要はありません。

レイアウトにはシングルカラム、マルチカラムなど複数のパターンがあったことは覚えていますでしょうか。

ワイヤーフレームの段階でそういったレイアウトも確定していきます。

ワイヤーフレームはサイトマップ・ディレクトリマップを踏まえてページごとに作成していきます。

現実にはすべてのページについてワイヤーフレームを作成するのは工数的に厳しいケースもありますので、重要なページだけ作成し、クライアントにお見せしてすり合わせを行うとよいでしょう。
ワイヤーフレームを作成するページの判断基準
  • ページのコンテンツやレイアウトが他と大幅に異なるページ
  • サイトの中での重要度が高いページ(特にユーザーが読むもの)

    • トップページ

    • お問い合わせページ

また、近年はスマホ版の重要度が上がっているため主要ページについてはスマホ版でもワイヤーフレームを作成しておくと安心です。
ワイヤーフレームの例
情報を設計すればよいだけなのでデザインまで凝らなくて問題ありません。

e. デザインカンプの作成

デザインカンプとはデザインの完成版のことです。これをもとにサイトに実装していきます。

ワイヤーフレームで情報設計について合意を得た後細部まで作り込みデザインを完成させます。

デザインはWEBデザインの原則を意識しながらやっていくとよいでしょう。

また、Figmaであればグループ化などを駆使しながら後で見やすい形で作っていくのも大切です。

Figmaの機能を使用すれば、一通りデザインカンプは作成が可能です。

f. サーバー構築

サーバーはエックスサーバー・ロリポップなどが人気となっています。

また、通常のレンタルサーバーサービスでは簡単にWordPressのインストールができる機能が存在するため、手間がかからず構築できるようになってきています。

サーバー別のWordPressのインストール方法・独自ドメインの接続方法などについては、公式ページにマニュアルが書いてあり、それに従うとできるようになっています。

サーバーにWordPressをインストールし、独自ドメインを接続し、SSLを有効にするといったWebサイトのサーバー・インフラの設定はつまずかないように理解を深めておきましょう。

g. WordPress設計

WordPressでテーマを選択してインストールし、必要なプラグインのインストールなどWordPressのセットアップを完了しておくとよいでしょう。

h. HTML・CSSなどフロントの開発

HTML・CSS・JavaScriptなどを駆使しながらデザインカンプ通りに実装を行いましょう。

完成したら、しっかりとテストを行った上でクライアントに見てもらいましょう。

本番用のWordPressに随時コードをアップロードして反映していく方式と、Localなどのローカル開発ツールを使って作成が完了してからアップロードする方法の2つがあります。

i. 納品&リリース

納品し、リリース作業を行いましょう。

リリース後はしっかりとページの動作チェック、デザインチェックなどを行いましょう!

j. 運用保守

WEBサイトはリリースしたら放置でOKというものではありません。

日常的にコンテンツを更新したりサイトを改善していく必要があります。

運用保守を行い、リリース後も改善を継続していく方が集客効果は圧倒的に高められます。そのため、できる限り運用保守の提案まで行うようにしましょう。

月数万円でもストック型の収益が得られると安定してよいでしょう。。

2. 顧客満足度を高めるには?

顧客満足度を高めるには、一般に「相手の期待値を超える仕事をする」以外ありません。

期待値調整とその期待値をどう超えるかについて説明していきます。

a. 期待値調整は超重要

期待値調整は文字通り相手の期待値を調整することであり、案件の要件定義フェーズで行います。

ここで失敗したら、その時点でいくら頑張っても相手を満足させることはできません。

案件を獲得する際は、最初はやはり期待感を持たせるために「売上アップを実現します」などとストレートに訴求して営業していくことが重要ですが、

具体的に詳細を詰めるフェーズにおいてはスイッチを切り替えて、現実的な話をしていき調整するようにしましょう。

例えば以下のような約束をしてしまうと炎上案件になります。
炎上案件になってしまう例
  • 集客数N人を約束します

    • 元々の認知度がない場合は、そもそもWEBサイトを作っただけでは集客できないため、絶対に実現できない。
  • サイトスピードは超高速を約束します。

    • サイトスピードなどは使うサーバー・CMS・画像などの様々な要因によって変わります。もちろん高速化に向けて努力はするべきですが、非現実的なスピードを約束してはいけません。
  • 納期・単価がきつすぎる

    • 明らかに無理な納期・単価であるにもかかわらず引き受けてしまう

これらのような無理な期待を抱かせず、現実的なラインで調整して受注する努力が必要です。

b. 期待値を超える

相手の期待値をしっかり超えるのが大切です。期待値を超えるとそれが満足につながり、次の仕事や紹介つながっていきます。

期待値は以下のような方法で超えることができます。
期待値を超える方法
  • 「クライアント目線での仕事のしやすさ」を徹底的に追求する。以下のようなことをすると仕事がしやすいと感じてもらえます。

    • 即レス

    • テキストでのコミュニケーションがわかりやすい(すぐミーティングを要求すると面倒な人と思われます)

    • すべての質問を仮説付きで行っている

    • 毎日作業の進捗報告を送っている(返信は求めない)

  • 相手の想定していたデザインよりクオリティの高いものを出す
  • サイトを作って終わりではなく集客方法など+αの提案をしてあげる
  • 運用後まで見据えてサイトを実装する(綺麗なコード)
  • 納期を前倒しする
顧客満足度は期待値調整と期待値を超える仕事をするという2ステップと考えて取り組んでいきましょう。

TIPS:もし約束したことが守れなかったら?

  • 約束した納期を守れない
  • 実装するといった機能が難しかった

などWEBサイト制作では想定外の事態もつきものです。「クライアントとの約束を守れなそう、もう終わりだ…」のように無駄にネガティブになる必要はありません。

できる限りベストを尽くして即時にリカバリーを行いましょう。

ミスした際の対応策
  • 想定外を認識した時点で早めにクライアントに伝える

    • 悪いことの報告は早ければ早いほどいいです。
  • 想定外への対応策と期日を明確に伝える
  • その後、「クライアントは不安になっている状態なのでしばらく日報を送るなどこまめに進捗状況を報告」する

これらの対応を迅速に行うことができれば問題はありません。

絶対にやってはいけないこととしては、音信不通になる・無断で連絡を絶つなどです。当然ですが、このような行動をする人が長くフリーランスとして活躍するのは難しいでしょう。

信頼を大切に頑張っていきましょう!

3. リピート・紹介で次の仕事に繋げよう

リピート・紹介の大前提として必要なことは、顧客に満足してもらうことです。

まだ初案件が終わっていない、あるいは満足してもらえなかった状態でリピートや紹介をお願いするのは無謀なので控えましょう。

まずはしっかりと誠心誠意対応して、満足してもらうことに集中するのが一番よいです。

その上で定期的に自分の存在をアピールしましょう!

定期的に「挨拶」「自分ができること」「相手に役立ちそうなこと(特に相手の事業の売上・利益の向上に関して)」をメッセージで送るなどして、相手に自分を印象づけておきましょう。

そうすると、相手の中で「こういう業務が発生したら〇〇さんに声をかけてみよう」となります。

「まずは一度取引して満足してもらう」「定期的にタッチポイントを持って相手の記憶に残る」という2つを意識して、着実にクライアントを増やしていきましょう。
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH