WEB制作の流れ（フリーランスの場合のサイト作成フロー）
フリーランスが請け負うWEBサイト制作の流れは通常通りですが、ポイントはクライアントと50／50の信頼関係を築く事です。
決して媚を売らずに安売りしない事。制作作業以外でのサービスがあなたの品質を決めます。各工程において「できる人」である印象を与えましょう。
全ての工程をオールインワンで担当できるコミュニケーション能力を磨きましょう。回数をこなせば上手くなります。
WEB制作の流れ（フリーランスの場合のサイト作成フロー）
本記事ではフリーランスがクライアントからWEBサイトの制作依頼を受けて、完成させるまでの流れをご紹介します。
実はフリーランスとして仕事を請け負うという事は、WEBサイトだけが作れれば良いという次元のものではありません。
大切なのは、クライアントが持つフリーランス（あなた）に対しての認識・印象です。
コミュニケーション能力が必要
全工程にわたって言えるのは、相手とのコミュニケーション能力が必要になる事です。
特に今は電話とメールだけで、一度もクライアントと顔を合わさず・面談しないままやり取りができる便利な時代です。
面談の場合は、あなたが本来持つ「人となり」や雰囲気・しぐさなどいろいろリアルな情報を、いい意味でも悪い意味でも相手に与えますよね。
そういった相手との直接のコミュニケーションに不安がある人がたくさんいます。
印象を操作できる
それに対し電話やメールの場合は、相手に与える情報出力の窓口が限定されます。
ですので「自分を装える」とまでは言いませんが、出したい印象をある程度意図的に操作できるのですね。
電話もメールも練習次第で、いくらでも相手に与えるイメージを調整できる事になります。
本記事でWEB制作の流れを確認しつつ、その都度必要となるコミュニケーション能力も見ていきます。
おおよその流れ
WEBサイト制作は大まかには「受注→打ち合わせ→制作→確認→納品→アフター」が一連の流れでしょう。
状況によっては間にいくつか派生アクションが入る場合もありますが、大体はこのような流れが中心ですね。
今回はデザインやコーディングなど全ての工程を、自分一人で担当する場合を想定しています。
別業者に工程を投げた場合もそこで別業者との別のアクションが発生しますが、本筋は変わりません。
WEBサイト制作案件を受注する
まずは制作案件を受注しなければお話になりませんよね。
フリーランスは主に以下の3つの方法で制作案件を取るのが一般的だと思います。
・ポートフォリオ・SNS・運営ブログ
・クラウドソーシング
・人脈ネットワーク
とにかく普段から積極的にSNSで情報を発信していく事が大事です。ちなみに私は100％WEBサイトからの流入です。
ですのでご自身のポートフォリオづくりは特に入念におこなって下さいね。
全てのツールを駆使してしっかりとした情報発信を根気強く続けていけば、必ず問い合わせはあります。
親戚や友人・知人などのネットワーク、元の勤務先の同僚やお客様だった人なども積極的に活用しましょう。
打ち合わせ（ヒアリング）
ヒアリングで大事なのは「クライアントが何をしたいのかを明確にする」が一番の目的ですよね。
しかしそれと同時に「自分」を売り込む最初の場面である事を忘れないで下さい。
相手の考えていることを具体的に引き出しつつ、提案もしていく必要があります。
ここでまず第一のコミュニケーション能力が試されます。
丁寧に受け応えるする事もそうですが、「こいつ…できるぞ」という印象を与える必要があります。
ポイント
クライアント何を要望しているかを明確にする事に関しては、あらかじめ聞かれそうな項目を書面などにまとめておきましょう。
そうすれば一通りの事は応対できる様になります。
これは練習ありきです。せっかく問い合わせが来たお客様には失礼かもしれませんが、最初は練習台にしましょう。
前回聞かれた事を記録しておけばどんどんネタは増やせます。
専門用語は並べない
出来る人を印象付けるためには専門用語を並べるのが近道です。
しかしWEBサイトに詳しくない人もたくさんおられます。ですのでなるべく専門用語は使わずに話しましょう。
短縮したアルファベットなども使わない様にしましょうね。
相手に提案を必ずしましょう。
話を聞いていくとクライアントの要望と、WEBサイトの方向性がマッチしていないケースもあります。
その場合はある程度の道筋を見せながら提案をこちらからしていくべきです。
「Yes」ばかりではダメ
相手の話に「はい」とうなずいているだけだと、相手は逆に不安になるものなのです。
ここで「それならそちらの案よりもこちらの方が良いですよ」「この案とこの案がありますがどちらが良いですか？」と、提案を一つでもするようにしましょう。
まだ何も作っていない段階でも、こうすればあなたの印象が一段階良くなります。「しっかりしてそうだ」と安心するんですね。
要件定義・概算見積り
要件定義というのは、大まかには以下の内容を決めます。
・WEBサイトの機能
・ページ数や構成
・雰囲気デザイン
制作するWEBサイトがどんなものになるのかを決定付けします。
ヒアリングと提案をすれば、どんなWEBサイトになるかは大体決まりますよね。
この内容を元に、ページ数や作業日数を簡単に計算して概算見積もりを提出します。
この時「そういう目的であればこのようなWEBサイトにすべき」という前提を相手に提示して、それにある程度従ってもらう様にしましょう。
そうでないと、相手の言うがままのWEBサイトになりがちです。
金額は記録に残す
事前に軽く金額の提示をする場合はメールで以下の様に返答しましょう。
「20万円でお受けできるかと思います。」
「正確なお見積もりは、詳細な仕様決定後に再度ご提出できればと思いますがよろしいでしょうか。」
金額の提示は電話よりもメールにてきちんと跡を残すようにした方が良いと思います。
ポイント
本来は本番見積もりの際に予算が増額しないよう、概算見積もりは少し高めに設定しておくべきです。
しかし、仕事を確実に取る場合はあえて少し安めに設定をします。
「追加要望があれば増額しますが、なければこの金額でいけます」と魅力的な金額を提示した方が、即決されやすいです。
クライアントは将来の増額の可能性よりも、額面の金額を気にするものなのですね。
必要な場合は再見積もりしましょう。
フリーランスの場合は、提示した概算見積もりでそのまま正式決定される場合が多いと思います。
あとから細かく仕様を決定した時に値段が上がる事を嫌がるクライアントが多いからです。
仕様が変われば値段が上がるのは当然の事なのですが、まだその辺りフリーランスが軽視されている部分といってよいと思います。
ただビジネスはビジネスですので、仕様が変われば正確な見積書を提出するべきです。
あなたの評価を下げない
ここで話が無くなってしまっても、苦しいとは思いますがそこは我慢です。自分を安売りする必要は無いのですから。
クライアントに対して「きちんとしている人」「簡単にヘコヘコしない人だ」という印象を、最低限度は植え付けておく必要があります。
概算見積もりと大きく相違がなければ、クライアントは予算に了承してくれるはずです。
了承してくれた瞬間、金額ももちろんそうですが、「ヘコヘコしないあなた」を依頼先として認めてくれたことを示します。
ここはフリーランスにとって重要な部分です。
ご契約
契約における注意点は、制作期間や作業量・作業方法などの各仕様を詳しく明記しておくことです。
特に制作期間については、相手方都合の待ち時間がでてどうしても伸びがちです。
余裕を持って設定しつつも制作期限をしっかり縛っておき、超過した場合は追加料金が発生する旨をしっかり明記しておく事です。
お客様は基本わがままです
作業内容についても途中からの追加が出てくる場合があります。
クライアントによってはそれが容赦なく発生する場合があるのです（いやがらせの様にです）。
どこまでやるのか（修正もどこまでやり直すのか）についてきちんと明記するべきです。
どんな形でも契約書を作る
契約書を交わさない事は基本ありえません。
クライアントにも寄ると思いますが、基本的には契約書は必ず取り交わしましょう。
書面は1枚でも良いのです。納期と金額、作業内容だけでもきちんと明記しておくべきです。
相手がそれを拒否ったら、拒否ったという事実をメールで残しておきましょう。それがあなたを守る護符になるかも知れません。
手付金は必ずもらう事
制作料金のうち一部は必ず前金で頂きましょう。
相手側が100％有利な状況はダメです。できれば半金頂いて、相手も土俵に立たせる頃が重要です。
私も以前、前金ももらわず契約書も交わしていなかったために、2年以上待って結果WEBサイトは完成しないまま終了という経験があります。
これは「契約書を交わしたら相手に嫌がられるかも知れない」と私が一瞬狼狽したせいです。
その様な事にならないためにも、しっかりと手付金をもらう様にして下さいね。
このターンは総じて、クライアントに媚を売らない「あなた」を演じましょう
素材準備
クライアントには各ページの内容原稿や写真・会社ロゴなどの素材をご準備いただきます。
この時前もって写真や文面が似通う類似サイトを探しておき、クライアントに「この様な感じです」と提示できれば助かるはずです。
この時「素材が揃うまで作業は進みません」という姿勢のフリーランスがよくいますが、そのような態度は決して見せてはいけません。
常に「私が手伝います、完成まで一緒にあゆみを進めていきましょう」という姿勢でいて下さい。
類似サイトをいくつか見せておくだけでその印象を植え付ける事ができるのであれば、やらない理由が見つかりませんよね。
文章と写真について
私は基本的に、文章・写真については全てクライアント側が用意する仕様で契約をしています。
そうでない場合、こちら側で文面の考案や写真撮影が必要になりますので、当然制作費用に盛り込まれます。
文面を作らなければならない方が結構大変です、なのできちんとここは明確にしておいてくださいね。
TOPページデザイン画の作成
相手に素材を準備してもらう間、こちらは本格的な作業に入る前にTOPページのデザイン画（ワイヤーフレーム・モックアップ）を作ります。
クライアントに確認してもらう事で、具体的なサイトイメージに了承を頂く必要があります。
ポイントはこのデザイン画をどのくらいのレベルで作るのかです。
人気モックアップツールの「moqups」を使っても良いと思いますが、手書きはおすすめしません。
なぜ完成度の高いデザイン画が必要か
デザイン画（ワイヤーフレーム・モックアップ）で評価が決まる
ここで相手に見せるデザイン画の出来が、クライアントに「なかなかやるじゃない」という印象を与えれるかどうかのポイントになります。
さらに次のサイトデザイン制作づくりをショートカットできる可能性にもつながりますのでしっかりと作りましょう。
それがモックアップであっても、きれいなものを目の前にすればクライアントは「おー」とうなりますからね。
ある意味本番のWEBサイト制作よりも大事かもしれません。
テンプレートを加工する方法
一つのアイデアをご紹介します。
海外テンプレートサイトをキャプチャーして上から加工すれば、クライアント専用のデザイン画として代用する事ができます。
海外サイトテンプレートは洗練されたデザインで、かつほとんど出来上がっている状態です。これをデザイン画のベースとしてそのまま使うのです。
ベースが違うのでモックアップ・ワイヤーフレームよりも精度の高いデザインになるのです。
詳細デザイン作成
しかしケースによっては、どうしてもきちんとしたサイトデザインを事前に作らなければならない事もあります。
個人的には結果的にはコーディングしてWEBサイトを作るのに、確認のためだけに全てのデザインを作るのは本来無意味だと思います。
デザイン画でOKを頂いている訳ですからね。
ですのでこの完璧なサイトデザインを作る工程を省く代わりに、少し制作費用を安くするなどの交渉をしても良いと思います。
※詳細なデザイン制作は省略するのでその分少し見積もりを安くしています、など。
デザイン制作の外注
専用のデザイナーさんに外注する場合もありますが、自分でデザイン画を作れれば費用を浮かす事ができますよね。
サイトデザインはトップページ3万円から、下層ページ1万円程度でやってくれる人もいます。
デザインが完成したらクライアント確認に確認をしてもらいましょう。
コーディング作業
確定したデザインを元にWEBサイトを作る作業、コーディング作業に入ります。
HTMLサイトであればHTML5+CSS3の組み合わせが定番、bootstrapなどを使えば作業を簡略化できます。
Wordpressの場合は開発環境として契約サーバーをレンタルし、Wordpressシステムをインストールして準備します。
その際は基本ドメインURLなど、本来のドメインではないURLにて開発を進める事になります。
※最初から独自ドメインを取って開発してもいい許可が出ていればそれで構いません。
そしてhtmlテンプレートを元にテーマを自作していくなどの工程に入ります。
コーディング開始後はデザイン変更や大幅な原稿の差替えは基本的に受け付けられない事をきちんと提示しておきましょう。
場合によっては追加料金もあり得ます。
各ブラウザで問題なく動作するか制作しながらの確認も必要です。
ここはクライアントの事は気にせず、あなたの腕を存分に発揮して下さい。
あわせて読みたい関連記事
確認および修正反映
作業が一通り終わったら、クライアントに最終確認をしてもらいましょう。
契約サーバーにアップロードしたサイトを確認してもらって、都度修正を掛けていきます。
クライアントによっては確認→修正→確認→修正と、際限なく修正依頼されることがあります。
サービス精神を見せる
これをどこまでやるのかは意見が分かれるところでしょう。
私なら、例えば5回までと決めているのであれば「あと1回だけやりましょうか」の心意気を1度だけ見せます（もちろん分量にもよりますけどね）。
これで信頼度が各段に上がります。
それ以上を要望してくる場合は契約上できない事をきっぱり宣言するべきです。
クライアントの言いなりになる癖だけは付けてはいけません。
完成・一般公開
クライアントに最終確認が取れたら完成です。正式にWEBサイトを公開します。
HTMLサイトの場合はここで正式にドメイン・サーバーを契約して良いでしょう。サーバーアップして一般公開です。
Wordpressサイトの場合はそれまで開発環境だったサーバーを、そのまま本番環境にしても良いと思います。
ドメインを契約して、後からWordpressのURLをその独自ドメイン名に変更する流れです。
※開発環境と本番環境を別々にしている場合は、本番環境への移設が必要になります。
同時に、アクセス解析ツール導入や、操作マニュアルの提供などをしていきます。
残金の請求
納品したら残金のご請求書をお送りし、その後30日以内にお支払い頂くようにして下さい。
手付金以外の残金とWEBサイトの維持費などが計上されます。
いつ締めのいつ払いかはあなた次第ですのでお任せします。
仕事は集金をするまでが仕事です。口座に入金があって初めてあなたのこれまでが結実するのです。
入金が遅れる・無かったなどは正直論外ですので、確実に支払ってもらう様にして下さい。
アフターフォロー
サイト一般公開した後は、クライアントのフォローをしていきましょう。
WEBサイトは公開してからが本当のスタートです。
クライアントがWordPressで記事更新ができているか、サイトに何らかのエラーが発生していないかなどを確認しましょう。
「入金があればあとは用は無い」という姿勢ではいけません。
クライアントが困ることのないよう、最後までサポートしていくことが重要です。保守契約をしている場合はなおさらです。
保守契約は完成後に締結してもいい
保守サポートやメンテナンスに関しても、ルールを決定してトラブルにならない様にしておきましょう。
こういった詳しい取り決めについては最初の契約時に決めるのではなく、後から契約を交わす場合もあります。
WEBサイト開設にあまり時間がない場合などはその様な提案をこちらからして、完成後に契約を締結しています。
あわせて読みたい関連記事
まとめ：フリーランスはコミュニケーション能力
WEBサイトの制作依頼の受注から完成・納品までには、数々のクライアントとのコミュニケーションの場が出てきます。
・相手の要望を聞き出すヒアリング時
・クライアントへ提案する時
・各工程を予測して見積もりを提示する時
・契約を取り交わす時（強気）
・モックアップを作ってクライアントへ見せる時
・修正を聞いて反映させる時
・集金時（強気）
・完成後のアフターフォロー
一つ言えるのは、フリーランスってコードを書くだけが仕事じゃないんですよね。
コーディング作業以外に必要な能力がたくさんあります。しかしどれも後から十分培える能力ばかりです。
しかも数をこなせば同じケースに遭遇する事が多い仕事なので、前回の経験が何度も活かせていやでもレベルアップします。
オールインワンで担当する事に意義がある
全ての工程に携わるとどうしてもクライアントとの密接なやり取りが必要になります。
中にはコーディングだけ担当するエンジニアさんもいる様です。その人たちはほとんどクライアントとの接触はしなくて良いしょう。
しかしコードを書くだけのエンジニアはオールインワンのフリーランスと比べるとどうしても単価が低くなりがちです。
食べていくためには、できる仕事が増えないとお話になりません。
自分で仕事を受けて、クライアントと円滑な打ち合わせをして、納品まで自分でできるようになりましょう。
要所要所でクライアントとの信頼関係を作れれば、単価がどんどん上がるのもこのWEB制作の仕事の魅力の一つです。
スキルとコミュニケーション能力を両方上げる
もちろんプログラミング能力が高ければ高いほど受けれる案件レベルが上がる訳ですから、スキルアップは必須です。
しかしそのスキルを発動するためにはプラスαが必要なのですね。
プログラミング能力だけではなく、円滑な作業の流れと・ステップごとのコミュニケーション能力を磨いていきましょう。
