初心者向けにWeb制作の流れを解説。発注から制作、納品まで。

Webサイト案件を実際に受注して納品するまでに、Webデザイナーはどんなことをやらなければいけないのか。

クライアント（お客様）とは、どういうやりとりをするのか。

Web制作の全体像がわからない！という未経験者・初心者の方は多いと思います。

会社員であれば先輩に習えでいいのですが、フリーランスの場合右も左もわからない状況で、不安な方もいらっしゃるのではないでしょうか。

ここでは、Web案件の発注からリリースまで請け負った場合のWeb制作の流れを、具体的に説明していきたいと思います。フリーランス向けの小規模案件を仮定しています。

【受注から納品まで】Webサイト制作の全体の流れ

案件の打診があってから納品までの全体の流れを簡単にフローにすると、以下のようになります。

具体的にどんな作業になるのか、ひとつずつ見ていきましょう。

1.案件の打診

クライアントから案件の打診があったら、まず概要と予算・納期を聞きます。

最低限以下の点を確認しましょう。

• 先方の予算
• 納期
• ページ数、サイトの規模
• どんな人に向けたサイトか。ターゲットやジャンル。
• CMSや特別なシステムが必要か
• 新規作成かリニューアルか

概要を聞いて、以下の内容を見極めて問題なさそうであれば、お返事しましょう。

• 自分のスキルで納品可能な案件か
• 予算は適当な価格か（相場はともかく自分が納得できるか）
• スケジュール的に受けても問題ないか

また、予算に関しては、初めてのお客様だと相場を知らないので、逆にいくらでできるの？と聞かれる場合もあると思います。

まずは「細かい見積は具体的な内容をヒアリングしてからになりますが、ざっくりと◯円くらいあれば可能かと思います」というふうにお返事をするといいと思います。

2.クライアントと打ち合わせ（見積用）

受注できそうとなったら、早速具体的な内容の打ち合わせに進みます。直接会う、メールやチャットツール、zoom等いろいろな方法がありますが、クライアントの意向に合わせる形が一般的です。

ヒアリングした内容を元にして見積書とデザインラフを作成しますので、この打ち合わせは細かいところまですり合わせが必要になります。

また先方からのヒアリングだけでなく、より良いサイトになるよう、お互いの考えを交えながら進めましょう。

先方にヒアリングしたいことは、以下になります。

• サイトを立ち上げる目的orリニューアルする目的
• リニューアルの場合は、今のサイトの不満な点
• サイトの最終的なゴール、目的（資料請求、お問合せ、来店等）
• ターゲットの選定。性別、年齢、カテゴリ等。
• コンテンツの内容。具体的なメニューとそれぞれのボリューム感
• トップページに盛り込みたい内容は何か
• 一番訴求したいことは？
• どんなイメージを考えているか。参考にしているサイトやライバル会社等。
• コーポレートカラーがあるか。打ち合わせ中にサイトのメインカラーを決めることが多い。
• 具体的な納期と全体のスケジュール感
• リリース後の運用について

また、以下の点も確認しましょう。

あるかないかで、見積金額が変わってきます。

• 文章は用意してもらえるのか。こちらが用意するのか。
• 画像は用意してもらえるのか。こちらが用意するのか。
• 商品イメージやロゴなど、先方でしか用意できないものは用意してもらえるのか（ない場合はどうするかも決める）
• CMSはありか、なしか。必要であればどこまで編集可能とするか
• その他システム的なものは、ありかなしか。
• 動画はありか、なしか。
• SNSとの連携はどうするか。ページ内に埋め込みするか。
• お問合せ等のフォームは必要か。必要な場合はその内容とボリューム感。
• サーバーは持っているのか。新規で契約するのか。
• ドメインは持っているのか。新規で契約するのか。
• 納品形態はどうなるのか。

これらの内容は、事前に「ヒアリングシート」としてクライアントに記入をお願いする、もしくは当日ヒアリングシートに沿って話を進めていくと、打ち合わせがスムーズになりますよ。

3.見積作成・提出

ヒアリングが終わったら、見積書を作成します。見積書の作成は、作成ソフトやエクセルで作る人が多いです。

私は 「freee」を使っています。理由は、freee内で見積書作成→請求書の発行→会計→確定申告と一括して管理ができて、非常に便利だからです。

見積書の作り方は、「【フリーランスデザイナー向け】はじめての見積書の作り方」を参考にしてください。

作成したら、相手方に送付。返事を待ちましょう。

4.発注

見積書の金額が通ったら正式な発注となるので、契約書を交わします。

5.スケジュールを作成

発注が決まったらまずはスケジュール表を作成して、制作スケジュールをクライアントと共有します。

納期から逆算して、最低限以下の内容を盛り込みます。

• デザイン制作期間
• HTML制作期間
• 先方の検収期間
• 合間に打ち合わせする場合は、その日付を決定

それぞれの期間にどれくらいの日数を持たせるのかは案件の規模によります。

大きな案件であればプロジェクト管理ツールを使う場合もありますが、小規模案件であればエクセルやgoogleスプレッドシートでの作成でまずは十分です。

大事なのは、クライアントとスケジュール間を共有することです。

6.ワイヤーフレームの作成

ヒアリングで聞いた内容を元に、サイトマップとワイヤーフレームの作成に入ります。

サイトマップとは、サイト全体がどういう構成になっているかをあらわしたものです。

まずはサイトマップを作ることで、メニューに漏れがないか、どういうツリー構造になっているかを、クライアントと共通認識します。

また、ワイヤーフレームとは、イラストや色等のデザイン要素を入れる前に、サイトのレイアウトを線で著したものです。

このイトマップとワイヤーフレームが、Webサイトの設計図になります。

まずはこの２つでクライアントと意識のすり合わせを行います。

ワイヤーフレームは、Figma や Adobe XD 等のツールを使って作ります。昔ながらのパワーポイントやエクセルで作る人もいます。

出来上がったワイヤーフレームをクライアントに送ると、たぶんいろいろ調整が入ると思います。修正を繰り返しつつ、お互いOKとなったらデザインカンプの作成に入ります。

ワイヤーフレームはサイトの方向性を決めるのに便利なものではありますが、完璧である必要はありません。制作途中で「トップページの構成を変えたい」と言われるのもよくあることです。

なので、工程が進んだ後でもある程度の修正は効くことは、クライアントにも伝えておくといいです。（さすがに全修正のちゃぶ台ひっくり返しはやめてほしいですが）

最初からデザインカンプ作成に入る場合も

たまにですが、ワイヤーフレームを見ても「イメージが全然ピンとこない。よくわからない」と言われるお客様もいます。その場合は、ワイヤーフレームの過程を飛ばして、デザインカンプを作成することもあります。

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

ワイヤーフレームが完成したら、デザインカンプの作成に入ります。

ヒアリングで確認した内容を意識して、作成しましょう。

デザインカンプは、 Adobe Photoshop、 illustaror、XD 等のソフトを使って作ります。

今まではデザインカンプはjpg等の画像形式で確認してもらうのが一般的でしたが、近年ではAdobe XDでデザイン兼デモ画面を構築するケースも増えました。

XDでは、画面上でボタンを動かしたりサイトの動線を見ることができるデモ画面を作ることができます。

デザインカンプの時点でデモ画面を作り込むのは最初の工程こそ時間がかかりますが後の工程が楽になるのと、クライアント側で完成イメージが湧きやすいというメリットがあります。

最初のデザインカンプは、

・パソコン画面 トップページ

・パソコン画面 下層ページ(1,2枚）

・スマホ画面 トップページ

・スマホ画面 下層ページ(1,2枚）

の４パターンくらいの提出がおすすめです。下層ページは基本レイアウトが一緒なことが多いので、最初の提出は1枚か2枚で十分。デザインが固まったら他のページも作る、もしくはデザインカンプには起こさず、HTML構築時に量産していくやり方もあります。

8.定期的な打ち合わせ

定例MTGでは主に

・制作の進捗（遅れがある場合はその言い訳など…）

・クライアント側で用意する画像やテキスト集めの進捗確認

・クライアントからの修正要望等

等を打ち合わせします。

ワイヤーフレーム作成やデザインカンプ提出の段階で、すでにクライアントとは何度かやり取りをしていると思いますので、必ずしも打ち合わせを組む必要はありませんが、メールだけより顔を合わせた方がスムーズにプロジェクトが動くことも多いですよ。

9.HTML構築・システム構築

デザインが出来上がったら、HTML/CSSでのサイト構築に取り掛かります。

もしCMSを使いたいとなればそのシステムの導入も行います。必要に応じて外注のプログラマとのやりとりも必要になってくるかもしれません。

作業はローカルサーバーや自分の環境で行います。

10.必要に応じて、サーバーの用意

クライアントからの依頼にサーバーの用意も入っている場合は、サイトを稼働するサーバーの用意をします。

新規の場合、サーバーやドメインは、基本的にクライアントへ直接契約してもらう方が良いです。制作者を通しての契約だと、トラブルがあったときに責任問題が分かりにくくなるからです。手伝うとしても、契約時のサポートのみにしておきましょう。

新規で小規模のお客様であれば、レンタルサーバーの契約がおすすめです。契約も簡単だし、サーバーのスペックもサポートも十分すぎるくらいです。

サーバーを用意してもらったら、サーバー情報やFTP情報を教えてもらいましょう。アップの時に必要になります。

なお、クライアント側の自社サーバー等にアップする場合は、注意が必要です。

もし本番環境にギリギリまで触れないようであれば、まずは別途テスト環境を用意してそこにテストサイトをアップするようにしましょう。テスト環境は、本番環境と全く同じ条件のサーバーでないと、本番リリースしたときにうまく動かない可能性がでてくるのでご注意を！

11.テストサイトのアップ

作成したHTMLファイルを、サーバーにアップします。

この時アップしたものはまだテストサイトとして使いますので、本番ドメインではなく、テスト用のURLにします。また、パスワード等を使って、外からは見えないようにします。

作ったサイトを先方に送る前に、自分でも念入りに動作確認をするようにしましょうね。

ブラウザチェックしてレイアウトの崩れがないか、動きに問題はないか、リンク切れやボタンのミス、フォームの送信エラーはないか等、すべて細かく確認します。

12.クライアント側での検収作業

完成したテストサイトをクライアントに見てもらい、必要に応じて修正作業を行います。

この検収をクリアしたら、もうサイトが世に出てしまいますので、クライアント側にも気合を入れて細かくチェックをお願いしてもらいます。

制作側で気づかなかった部分や意外な条件でのエラー等、検収での修正はたくさん出てくるはず。

修正項目はgoogleスプレッドシートやエクセル等で管理し、クライアントと共有するといいです。

13.納品

検収が終わったら、晴れて納品となります。

・本番サーバーにテストサイトをそのままコピーしてリリース

・テストサイトを本番サイトのURLへ変更してリリース

・あらかじめwordpress等でサイトを構築しておいて、リリースのタイミングで公開処理を行う

・HTMLファイルをメールで納品して完了

納品のやり方はいろいろあります。

納品形態は、契約時にクライアントとしっかり決めておきましょう。

まとめ

Web制作の、全体的な流れについて説明しました。少しでも参考になれば嬉しいです。

制作会社であれば、デザイナーは制作周りだけで、サーバーへのアップはエンジニアが、お客さまとのやり取りは営業やWebディレクターが行うことが多いかと思いますが、フリーランスの場合はこの記事に書いてある内容を全て全部一人で行うケースも頻繁にあります。