【フリーランス向け】Webサイト制作・小規模案件の受注から納品までの流れ　

このページでは、以下の前提でフリーランスWebデザイナーの立場から見たWebサイト制作の流れを説明します。

プレゼンやコンペ、複数業者を比較する相見積もりを取られる場合の制作ケースとは異なります。
また、制作するWebサイトの種類や依頼内容、予算により、制作の流れは異なりますので、一例として参考にしてください。

Webサイト制作の流れの全体像を把握しよう

まずは、全体像を把握できるよう図解にしてみました。

以下、ひとつひとつ説明していきます。

1：ヒアリング・打ち合わせ

打合せではヒアリングシートを利用しながら以下の内容を明確にします。

ヒアリングの詳細に関してはこちらにまとめています。

打ち合わせ後の議事録

打ち合わせ後の議事録は必須です。
当日から遅くとも翌日には議事録にまとめて関係者で共有します。

議事録は打合せでの決定事項を簡潔に記載します。

議事録を書く理由

議事録を作るためのツール

共有しやすいGoogleスプレッドシート（Excel）やGoogleドキュメント（Word）などがおすすめです。

2：見積書と提案書

ヒアリングから依頼内容を把握したら、これを基に見積書を作成します。

見積書と提案書はセットで提出します。
この時、制作スケジュールも一緒に提示します。

見積書

見積書は、「初期段階で出す概算見積」と「途中・最終段階で出す詳細見積」に分かれます。

最初におおよその見積を出し、最終的に詳細な見積を提示し、承認を得て請求という流れが一般的です。

フリーランスの場合は前金で20%～50%、できれば全額の支払いが受けられるのが理想です。
このあたりは、どんなクライアントと付き合うか？や交渉力が関係してきます。

見積のポイント

提案書

クライアントの立場で考えると、その見積でどんな価値提供をしてくれるか？が見えないと不安になります。
見積書と同時に魅力的な提案書も一緒につけることをおすすめします。

ここで打ち合わせ時にピックアップしたイメージ画像や話し合ったトーン＆マナーが役立ちます。

これらを利用してまとめた提案書を作り「どういったものを作れるか？」をクライアントがイメージできる工夫をしましょう。
後の工程で提示するサイトマップやワイヤーフレームに近いラフ案も一緒に添えられると、なおGoodです。

ぽんっと見積書を出すよりも信頼度がグッと上がり、見積も通りやすくなります。

3：受注・契約

見積が承認されたら、正式な受注、契約になります。

契約書を交わし、対応する範囲、納期、支払などについて書面に残すのが理想です。

4：サイト設計

サイトに掲載する内容を洗い出しまとまりごとにグループ化して視覚化します。
これがサイトマップと呼ばれるものです。

多くの場合、第2階層がグローバルナビゲーションとなり、全ページに配置されます。
ユーザーが目的のページにたどり着くまでのクリック数もここで検討します。
理想は1クリック、多くても3クリックまでを目安にします。

特にWebサイトの目的を果たすまでの導線が重要となります。

これは、後の工程のワイヤーフレームでもキーポイントとなります。

5：ワイヤーフレームの作成

通常、色や画像などのデザイン要素は入れず、四角形と簡単なテキストのみの図となります。

最初の段階では、細かい部分は気にしないで、紙とペンで手描きのラフを書いていき、配置が固まったところでAdobe XDやPhotoshopなどのアプリケーションで清書したほうが効率的です。

清書に入る前に手描きのラフの状態でクライアントに確認するのもよいでしょう。
最終的に清書したものをクライアントに提示しOKが出たらデザイン作成に入ります。

6：デザインカンプの作成

デザインカンプを作る目的は、クライアントの持つデザイン、配色イメージやWebサイトの目的に合っているかを確認することです。

トップページ+コンテンツページそれぞれのデザイン案を作成するかどうかは案件や予算によります。

ワイヤーフレームに画像やテキストを配置、装飾を加え、配色、デザイン案として煮詰めていきます。

クライアントに提示し、OKが出たら、必要な画像を書き出し、コーディングに入ります。

スマホ対応が必要となりレスポンシブWebデザインが多く採用されている現在は、デザインカンプを作らない「インブラウザ デザイン」という手法で進めることもあります。

インブラウザ デザインとは？

デザインカンプという静止画ではなく、ブラウザ上で実際に動きを検証できるHTML・CSSでコーディングしながら制作を進めていくほうが、レスポンシブ対応に向いているんじゃない？という考え方です。

この場合、ワイヤーフレームをベースに必要な素材を作成し、コーディングしながらWebデザインを仕上げていきます。

インブラウザ デザインにもメリット・デメリットがあります。
これに関しては、別途、解説記事を書きます。

7：コーディング

HTML・CSSでコーディングしていきます。
Webサイトの階層をしっかりと把握して、フォルダ構成やファイル名の規則も守りながら進めます。

経験を積むごとに自分のオリジナルコード集を作っていくとコーディング作業も効率化できます。
Bootstrapのようなフレームワークを活用している現場もあります。

8：動作確認

各デバイスで問題なく表示され、想定通りの動きになっているかを確認し、問題なければ仮サーバーにアップしてクライアントに確認してもらいます。

案件によっては、トップページができた段階、ファーストビューができた段階など、早い段階でブラウザ上での動きをクライアントと共有することもあります。

問題なければ、本番環境に移ります。

9：公開・納品

本番サーバーにアップしてWebサイトを公開します。

ドメイン取得は希望ドメインが決まり次第、取得するというように早い段階で行います。
どの段階でレンタルサーバーを契約するかは案件によります。

静的サイトの場合、データ自体を送付するか？本番サーバーにアップすることで納品となるか？のどちらかです。

請求を立てて支払いを受けます。

10：運用・効果測定

Webサイトは公開後が本当のスタート。
最初に設定したゴールと成果を数値で解析し、改善しながら育てていくものです。
SEOやSNSとの連携など、新しい手法が開発されたり、有効とされる手法も変化していきます。

Webデザイナーとして運用、サポートに関われると安定収入に繋がります。

納品後、関わらない場合も、制作したサイトがどのように成長していくかを見るのも、自身の制作スキルを上げるために必要なことです。

以上、小規模案件の場合のWebサイト制作の大まかな流れを紹介してきました。

こうやって文章にすると、制作の工程ごとに確認しながら進めれば、スムーズに行えるように感じられるかもしれません。

しかし、現実は「Webサイトの目的は何ですか？」という質問ひとつとっても、クライアントが明確にできないこともあります。
掲載内容や原稿、素材に関しても、整理された状態で予定通りに渡されることは少ないでしょう。

その場合、Webデザイナーとして代替案や解決するための工夫も必要となってきます。

精進していきましょう。