独学でWeb制作を身につけ、クライアント様のホームページをつくっているかきおです。
最近、副業ブームということもあり、独学でWeb制作を勉強して、案件獲得に向けて動いている人が増えてきています。
それゆえに最近は、
未経験なので、Web制作案件の進め方がわからない…。どうやって進めるんだろう？
悩んでいる人
案件を進めていくとどんなところで問題が生じやすいんだろう？
こんな悩みを抱えているWeb制作者さんたちは多いのではないでしょうか？
この記事ではこのような「Web制作案件のフロー・流れ」についてお伝えします。
うまくいく手順はもちろん、僕自身が苦労した点や後悔した点も豊富に盛り込んでいます。
受注前段階のフロー
案件を受注する前に聞いておきたいことをまとめました。ここら辺を聞いておくと、案件をスムーズに進められます。
費用感の共有
最初に費用感の共有をしておきましょう。基本的にすり合わせるべきは下記の2点です。
- 自分がどれくらいで受注できるのか
- クライアント様がどのくらいの額で発注したいと考えているのか
この点については、営業文やご自身のサービスページなどで料金を明示しておけば、そこまでのミスマッチは生じないでしょう。
面談・ヒアリング
制作をするためには、作業内容を把握し、見積もりを出す必要があります。状況共有や希望を知るために面談・ヒアリングを行います。
人によって聞くことは違いますが、下記のものは聞いておくとよいでしょう。
- 制作物に関すること
- サイト制作の目的
- 事業内容
- ターゲット
- サイトのコンセプト
- 現在のサイトの課題
- SEO対策の必要性
- 対応ブラウザ・デバイス
- 必要ページ（会社概要など）
- 必要な機能（お問い合わせなど）
- 付随した制作物（バナーなど）
- 希望のデザインテイスト
- フォントやカラーの指定
- 提供素材に関すること
- 競合サイトのURL
- 参考サイトのURL
- 嫌いなサイトのURL
- 現在のサイトのURL
- 既存のドメイン
- サーバーアップロードのための情報
- ロゴ・画像データの有無
- テキストデータの有無
- 画像素材サイトの有無
- 配布している資料
- 運営しているSNS
- 納品・連絡に関すること
- 納品希望日
- 納品方法
- 納品順序
- 修正期間の希望
- 進捗報告頻度の希望
- 予算
- 連絡手段
- 連絡担当者（2人以上がよい）
- 分析ツール設置希望の有無
- 公開後の運用サポートの必要性
以上で、作業内容を把握できるので、見積もりをだすことができます。
もちろん、本見積もりは後日になると思いますが、面談の最後に、期間／作業内容・量／金額などをざっくり出しておいてあげると、クライアント様は安心できます。
見積書作成・提案
面談・ヒアリングの内容を参考に、見積書を作成します。正確に素早く作成できることから、僕はfreee会計を利用しています。
ご興味のある方は下のリンクをご覧ください。
受注
見積もりに両者が納得すれば、受注となります。
初の取引ならば、このタイミングで、業務委託契約や秘密保持契約（NDA）などの契約書を交わすケースが多いです。
受注することになったら、納期・作業内容を明確にして、両者の認識に相違が出ないようにしましょう。
デザイン段階
サイトをデザインする段階に入ります。
サイト設計を行う
まずサイト設計をおこないます。
ヒアリングしたターゲットやビジネスモデル、集客方法、どんな機能を実装したいのか、などをもとにサイトの全体像を設計していきます。
サーバー契約とドメイン取得を依頼or代行
サーバーやドメインの取得を依頼しましょう。先方に依頼してもすぐに対応してもらえるとは限らないので、早めに伝えておくのがよいと考えます。
もとからドメインやサーバーを所持していたら、この依頼は必要ありません。
※サーバーの貸し出しには注意してください。サーバーによっては無料であっても、サーバーの貸し出しが禁止になっているところもあるからです。
ラフ画・ワイヤーフレーム作成
ラフ画やワイヤーフレームを作成します。
このラフ画時点では頻繁に修正が出るポイントなので、修正しやすいようにしておくのがポイントです。
そのため、XDとかPhotoshopで作るのではなく、手書き作るのがおすすめ。僕は手書きのラフ画を提出します。
素材提供依頼
写真や文章などの提供を依頼しましょう。
- 会社のロゴ
- 会社の内装画像
- サイトで使用する文章
- お問い合わせフォーム送信先
- ページ作成に関する情報（サービス内容など）
サイトで使用する画像に関して、「有料画像サイトから写真を使ってよい」と許可された場合については、一旦、サンプル状態のまま画像を挿入しておくのをおすすめします。
デザインにOKがでたら、購入する形でよいからです。
デザインカンプ作成
ラフ画がOKになればデザインカンプを作成します。アバウトなデザインカンプにしてしまうと、後々に認識の相違から問題が生じる可能性があるので、きちんと作り込むことをおすすめします。
いただいた写真や文章も入れ込んでおきましょう。
開発段階（コーディング段階）
コーディング
デザイン通りにコーディングしていきます。ピクセルパーフェクトなコーディングが求められるかはクライアント様によるでしょう。
ロゴやバナーなどを作成
ロゴやバナーなど、サイトに関係するものを作成する必要があるならば、作成していきましょう。
テスト段階
テスト用のドメイン・サーバーへアップロード
コーディングしたものを一旦、自分で用意したドメイン・サーバーにアップロードします。ローカルとネット上で挙動が代わってしまうケースがあるので、そういった箇所がないか確認するためです。
※お客様が新規でドメイン取得している場合で、お客様の許可が出れば、いきなり本番用ドメイン・サーバーへのアップロードでもよいです。
誤字脱字・画像表示チェック
誤字脱字や画像が乱れてないかなどをチェックをしましょう。
コーディング時点では気づけなくても、ブラウザで見ると意外と抜け漏れに気づけたりします。
- targetの設定
- リンク切れ
- jQueryの挙動
- ダウンロードデータの挙動
ブラウザチェック
PCとモバイルのそれぞれで表示崩れがないか確認しましょう。画面の大きさを変えても表示が崩れないかもチェックします。
異なるブラウザできちんと表示されるかもチェックしましょう。（対応ブラウザについては、費用感を鑑みて、クライアントさんと交渉になるケースが多いです）
- Google Chrome
- Safari
- Edge
- Firefox
- IE←曲者
クライアント様への公正依頼
本番ドメインへの移行前にクライアント様にチェックしてもらいましょう。文章や画像などがイメージと異なる可能性があるからです。
公開段階
ここまで進めば、サイトのデザインなどは仕上がっているはずなので、正式なアップロードに進んでいきましょう。
本番用のドメイン・サーバーへアップロード
クライアント様に用意していただいたドメイン・サーバーにアップロードします。
アップロードしたら、再度、サイトをチェックしましょう。
- アップロードするページの抜け漏れ
- URLが正しいか（WordPressなどだと特に注意）
- target設定
- 画像データの抜け漏れ
- お問い合わせフォームへの回答が送られてくるメールアドレス
お客様への公正依頼
最終チェックを依頼しましょう。
公開後のフォローアップ
公開直後のチェックだけでは見逃してしまう可能性があるので、数週間は修正可能期間として設けてあげるとよいです。
僕は、2週間〜3週間を目処にフォローアップ期間とさせていただいています。
まとめ
Web制作のフローをまとめると下記の通りです。
- 受注前段階のフロー
- 費用感の共有
- 面談・ヒアリング
- 見積書作成・提案
- 受注
- デザイン段階
- サイト設計を行う
- サーバー契約とドメイン取得を依頼or代行
- ラフ画・ワイヤーフレーム作成
- 素材提供依頼
- デザインカンプ作成
- 開発段階（コーディング段階）
- コーディング
- ロゴやバナーなどを作成
- テスト段階
- テスト用のドメイン・サーバーへアップロード
- 誤字脱字・画像表示チェック
- ブラウザチェック
- クライアント様への公正依頼
- 公開段階
- 本番用のドメイン・サーバーへアップロード
- お客様への公正依頼
- 公開後のフォローアップ
全体を把握して、作業に取り掛かることが、時間削減・パフォーマンス向上に繋がります。
ぜひ、俯瞰した視点から制作業務を行い、クライアント様の利益に貢献してみてください。
最後までお読みいただきありがとうございました。
