初心者・独学でもわかる！フリーランスの実務2-Web制作案件の受注後フロー

「受注はしたものの、どう進めればいいか分からない…」「ヒアリングって何を聞くの？どこまでやるの？」

そんな不安を抱える独学フリーランス向けに、この記事ではWeb制作案件の受注後に進めるべき流れと、特に重要な「ヒアリング」「デザイン工程」について、項目別にわかりやすく解説します。

「実務経験がなくても、信頼される進め方」を身につけることで、初案件でも堂々と提案できるようになります！

「ぼくら」の失敗談

1.「何をすればいいかは分かっているつもり」でも、実務の流れやクライアント対応の“落とし穴”を見落としがちだった。⇒ヒアリングシートをテンプレート化して、目的・ペルソナ・競合を明確にし、提案型の進行を意識する。

1.Web制作の受注後に必要な業務フロー一覧（全体像）

受注したら、概ね次のような順番で進めていきます。
①ヒアリング　
②デザイン　
③開発環境準備　
④WordPressカスタマイズ＆コーディング　＊
⑤動作確認＆修正作業　
⑥サーバー＆ドメイン契約の支援　＊
⑦本番環境準備　
⑧本番環境へのデータ移行　
⑨運用ツールの設定　
⑩セキュリティ対策の実施　＊
⑪引継ぎ作業　
⑫公開作業　
⑬納品　
⑭請求作業

簡単なものなら省けるものもあり、案件発注者の希望がなければ「④、⑥、⑩」などは必要なくなります。本記事では、『①ヒアリング』と『②デザイン』工程を深堀します。

2.ヒアリングの進め方-7つの確認項目と具体的内容　　

サイト制作の目的、基本情報から、デザインのもとになる情報までをヒアリングします。クライアントの信頼を得る重要工程であり、ヒアリング項目をテンプレート化することで、ケアレスミスなく進行できます。
＊Web制作で使用しているヒアリングシートの項目は一般的には次の7つになります。

項目	内容	注意点
基本情報	サイト種別、目的、競合	強みや差別化要素を深掘りすると提案力アップ
デザイン	ムードボードなどでイメージ共有	感覚的な言葉は視覚資料とセットで
コンテンツ	掲載内容、更新頻度、CMS利用	WordPress使用の有無は費用に直結
仕様	ページ数、必要な機能	機能追加は追加費用になることを事前に伝える
素材	写真、ロゴ、テキスト	担当者と責任範囲の明確化が重要
環境情報	サーバー・ドメイン契約状況	WordPressが使えるか確認すべし
その他	予算、納期、SNS、問い合わせ窓口	要望と実現可能性にズレがある場合は早めにすり合わせを

基本情報：サイトの種類、新規かリニューアルか、事業内容やWebサイト制作の目的、強みやアピールポイント、競合企業などの情報です。
デザイン：デザインイメージの共有のことですが、「ムードボード」などを使ってより効率よく確認できます。
コンテンツ：掲載するコンテンツの内容と更新頻度の確認です。CMS（WordPressなど）の利用有無など費用に大きく関係してくるものも含めます。
仕様：作成するWebサイトのページ数とシステム機能のことです。機能は費用と大きく関係しますので、後から機能追加する場合は別途費用が発生することを伝えておきます。
素材：使用するロゴ、写真、テキストについてのデータの有無や担当についての確認です。クライアントとの担当範囲を明確にしておかないと後でもめる原因にもなります。
環境情報：サーバ・ドメインの契約状況など環境周りの情報の確認です。サーバによっては、WordPressが使えないなど制限がある場合もあります。既に契約済の場合は、ログイン情報を共有してもらい、サーバのサービス内容を確認しておいたほうがいいです。
その他：主に予算や納期についての確認です。ヒアリング情報から必要な費用や納期については、ある程度イメージできますので、要望内容と費用・納期のずれが大きい場合は、クライアントとしっかり話し合っておきましょう。

3.デザインの進め方-4ステップと各工程の役割

ステップ	概要	補足
モックアップ	手書きでもOK。全体像を共有するたたき台	紙でもOK！視覚化が目的
デザインラフ	色・イメージを盛り込んだ仮デザイン	精度より方向性を重視
ブラッシュアップ	精度を上げて印象を整える作業	クライアントの好みに合わせて調整
デザインカンプ	実装直前の最終完成形	コーディング担当にも共有しやすい形式にする

＊ヒアリング内容を元に、デザインを作成していきます。作成するページ数により作業量は変わりますが、基本的な流れは上表のようになります。　

モックアップとは、Web制作においては、ビジュアルデザインを表現したサンプルのことです。デザインカンプとも呼ばれ、明確に区別しないことが一般的です。完成品のイメージをチーム内やクライアントとすり合わせるために使われます。
- ワイヤーフレーム、プロトタイプという言葉もWeb制作ではよく使われます。
  ワイヤーフレームは構成や情報の配置を視覚的に示した設計図で、モックアップは静的な見た目の確認用、プロトタイプは、「動き」や「画面遷移」などインタラクションを再現するものです。
デザインラフとワイヤーフレームは、どちらもWebやアプリ制作の初期段階で使われる「設計資料」です。目的と精度が異なり、ワイヤーフレームは「骨組み」、デザインラフは「外観の試作」と考えるといいです。
Webサイト制作の流れは、大きく3つの工程に分かれ、ラフ作成→デザイン作成→構築という順番で進みます。
まず、デザインの雰囲気や方向性を伝えるラフを作成して、見た目のたたき台にします。イメージしやすく、クライアントとイメージを共有することができます。「最初からデザインでいいのでは？」と思うのは間違いで、Webサイト制作にはラフ作成の工程が非常に重要になります。
ブラッシュアップとは、「磨きをかける」という意味ですが、Web制作においては、すでに完成しているデザインや構成を、さらに洗練させてクオリティを高める作業になります。