独学・フリーランス・在宅・SNS疲れのWebデザイナーさんへ、
ビジネス思考を磨いて「わたしの売りはコレ!」を作っていこう。

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

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

こんにちは。フクモト学長(@WebcreatorsTips)です。未経験からフリーランス歴17年のWebデザイナーです。スクール運営 10年目になります。
詳しいプロフィールはこちら


こんな人の役に立てる記事です。
  • 独学やスクール卒業後、小規模案件からスタートしたい人。
  • Webサイト制作の流れを勉強中の人。
  • フリーランスで制作の流れが固まっていない人。

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

  • クライアントは個人事業主または小さな会社・お店。
  • 5ページ程度の静的サイトで作成する小規模案件。
  • 受注が決まっている前提。

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

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

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


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

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

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

  • クライアントの抱える問題・要望
  • Webサイトの目的、ゴール
  • 掲載内容(コンテンツ)
  • ドメイン・サーバーの契約、管理はどちらがするか?
  • 利用するプログラム(静的サイト、WordPress、ノーコード系など)
  • 対応デバイス(PC、タブレット、スマホ)
  • 素材・原稿の用意はどちらがするか?
  • トンマナ(デザインの一貫性を保つためのルール)
  • 制作スケジュールの確認
  • 制作費の予算・支払方法

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

打ち合わせ後の議事録

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

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

議事録を書く理由

  1. お互いに合意できているようでも、人により認識が異なることは少なくありません。
    打合せの内容を明確に言語化しておくことで、後の作業の「保険」に繋がります。
  2. Web制作では、クライアントにやっていただかないと進まないことが多くあります。
    「この作業内容をいつまでに、やっていただく」ことを明確にし、クライアントの協力をお願いします。
    自分自身の頭の整理にもなり、最適な提案に繋がります。

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

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

私の場合はマインドマップを作り、コンセプトシートの役割も兼ねるようにしています。

下記はサンプルですが、実際にはもっと細かく記載します。

マインドマップはXMindが便利!

2:見積書と提案書

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

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

見積書

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

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

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

見積のポイント

クライアントが持つ値頃感
追加作業の線引き
  • クライアントが見積金額を妥当だと感じることが大事です。
  • 想定している予算内であることもポイント。
  • 予算を超える場合は、納得させるだけの提案が必要です。
  • 制作途中に大きく方向性を変えられたり、コンテンツの追加があったり、予期しない追加作業に対して、見積の範囲内か外かは線引きする意識を持ちましょう。

提案書

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

かっこよくデザインされた提案書よりも「どういったものを作れるか?」が具体的に伝わる書類ができればよいです。

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

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

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

3:受注・契約

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

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

契約書を交わさない場合

契約書を交わさない場合でも、メールやSNSでのやり取りは残しておきましょう。
口頭でのやり取りはトラブルの元です。
メールは法的な根拠になるので、取り決め事項をまとめたものを関係者に送信します。

4:サイト設計

Webサイトの設計は
  1. Webサイトの目的とゴール
  2. 誰に(ターゲットユーザー)
  3. 情報のブロック(掲載内容)

が明確になってはじめてスタートします。

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

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

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

導線とは?

例えばWebサイトの目的が「資料請求を増やす」ことであれば、資料請求フォームのページにたどり着くまでのユーザーの動きです。

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

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

ワイヤーフレームとは
  1. どの情報を
  2. どの順番で
  3. どのくらいの面積で
  4. どの位置に配置するか?

というWebサイトの設計図です。

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

最初の段階では、細かい部分は気にしないで、紙とペンで手描きのラフを書いていき、配置が固まったところで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デザイナーとして代替案や解決するための工夫も必要となってきます。

経験が少ないうちは実力不足を痛感されるかもしれません。
でも、失敗をたくさんしたほうが、成長できます。

私もいまだに失敗します。

完璧を目指さず、ピンチを楽しみ、でも仕事は丁寧に。

失敗は大事な経験

精進していきましょう。

Webクリエイターズスクール 学長 フクモトトモコ

【Webクリエイターズスクール】
学長 福本 智子

Webもデザインも未経験からいきなりフリーランス歴16年。
『仕事は自分で創りだす』をモットーに生きてきた50代。
WordPress・Webマーケティングが得意。

独学・Webスクールを卒業したのに仕事に繋げられない学習迷子さん、在宅・フリーランス希望の人を対象に「マーケティング理論に基づいた、じぶん事業計画」をお伝えしてサポートしています。

関連記事

じぶんの売り方に集中できる。おひとりさま専用Webデザインスクール
フリーランスwebデザイナー個別相談

受講者の声