Web制作で案件を獲得した後はどうする？デザイナーもコーダーも知っておきたいWeb制作全体の流れ

お友達のお店のWebサイトをつくることになったけど、Web制作全体の流れが分からなくて不安なんだ…

あなたもWeb制作全体の流れや進め方が分からずに困っていませんか？
実はWebデザインもコーディングもWeb制作全体の工程の一部に過ぎません。

Web制作全体の案件の流れ・進め方を知っておくとメリットが沢山あります。

• Webディレクターを目指せる
• エンド営業からの案件の進め方が分かる
• 全体の流れを考えながら自分のデザインやコーディングを担当できる

Web制作全体の流れを押さえておくと良いことが沢山あるよ✨

君は…デイトラ公式キャラクターのデイトラちゃん！

デイトラちゃん【東京フリーランス・マーケティング事業部所属】
デイトラの公式マスコットキャラクター。普段はデイトラ公式LINEアカウントに生息している。何を勉強するべきか悩んでいる人にアドバイスをしたりオンラインスクール「デイトラ」の広報活動をしたりしている。Webにﾁｮｯﾄ詳しい。

お困りのようだから僕がWeb制作全体の流れを解説するよ。
それぞれの工程を勉強するのにデイトラのおすすめコースも教えてあげる✨

Web制作の全体の流れ

Web制作の全体像をまずはまとめてみました✨
ディレクター、デザイナー、コーダー、マーケターが担当する工程も分かりやすく色分けしておいたよ！

Web制作の工程ってこんなに沢山あるの！？

デザインやコーディングのように手を動かすところから勉強をはじめる人が多いから、Web制作の全体像を把握するのって後回しになりがちかもしれないね。

こしば、Web制作会社からデザインカンプをもらって実装（コーディング）の仕事をしてるけど、ほんの一部分しか担当してなかったんだ…

それぞれの工程で求められる技術レベルが高くなってるから規模の大きいWeb制作会社だと分業化が進んでいるところも多いよ！
デザインやコーディングなど得意なことに特化して、一部の工程だけ仕事にするフリーランスの方も沢山いるよ✨

あれこれ最初に手を出しちゃうと全部、中途半端になっちゃうからね。
こしば最初は迷ったけど最初は実装（コーディング）で一人前になることを優先させたよ。

Web制作の仕事も幅広いし奥が深いからね。今は選択肢も増えて何からはじめるか迷う人も多いんだ。だから僕は公式LINEで「おすすめWebスキル診断！」の仕事をしているんだよ✨

一方、小規模なWeb制作会社だと複数の工程を担当することも珍しくないね。例えばデザインもコーディングも全部、任されることもある。
小規模なWebサイト制作を一人で全部するフリーランスの人もいるね。

一口にWeb制作の仕事といっても幅広いね。
でもヒアリングとか要件定義とか情報設計とか難しい言葉で、こしば良く分かんないよ。

それぞれの工程をこれから深掘りして解説していくから安心して！✨

１：ヒアリング

Web制作の工程１はヒアリングだよ✨
まずお客様がどんな悩みを抱えているのか？どんな目的があるのか？どうしてWebサイトが必要なのか？お話を聞いてみるんだ。

まずはお話を聞いてみないとはじまらないもんね。
でも仕事だと緊張して大事なことを聞き忘れちゃいそうだよ。

実際にヒアリングするときは聞き忘れがないようにヒアリングシートを事前に用意しておくのがおすすめだよ✨

事前に聞くことをまとめておけば安心だね。
でも、どんなことを聞けばいいの？

ヒアリングシートでよくある項目は他にこんな感じだよ✨

• お客様がWebサイトを通して何がしたいのか？
• 企業理念・コンセプト
• 他社と比べた時の強み、自慢、サービスや商品の特徴
• サービスや商品のメイン客層
• HPを訪れた人に見せたいイメージ
• 完成イメージに近いサイトのURL（あれば）
• HPに必ず載せたい内容は？
• 追加したい機能などあれば
• 現行サイトがある場合は、現環境についての情報

特に①「コンセプト」②「サービスの強み」③「ターゲット客層」
この3つはヒアリングのときに、しっかり聞いておくことが大切だよ✨

Webサイトを作る前にこんなに沢山のことを聞かないといけないの！？

これでも必要最低限。もっと細かく聞く人も沢山いるよ！
何も確認しないで勝手にWebサイトを作って後から「こんなはずじゃなかったのに…」ってお客さんから言われたら残念だよね？

たしかに…。お客さんによってはお金を払ってくれなくてトラブルになりそう。

特にエンドクライアントとの仕事では、お客様の課題を解決してあげることが大事なんだよ✨
お客さんの課題をしっかり聞いてあげもしないで課題を解決してあげられないでしょ？

そうだね。
お客さんの課題をちゃんと解決してあげられるようにヒアリングシートをちゃんと用意するよ！

デイトラのWeb制作コースでもデザインコースでもヒアリングはカリキュラムの中に含まれているよ✨

２：企画・提案

Web制作の工程2は企画・提案だよ✨
ヒアリングした内容をもとに、お客さんの課題を解決してあげる企画や提案をするんだ！

企画・提案って具体的にどんなことをすればいいの？

例えばお客さんが会社を立ち上げたばかりで会社の看板になるWebサイトが必要ならコーポレートサイト制作の提案をするよ！
お客さんがモノの販売をWebで完結させたいならECサイトの制作を提案することもある✨

住宅のような高額商材を販売するなら、住宅の購入を検討している見込み客と営業マンの橋渡しになるようなランディングページ制作の提案をすることもあるよ✨

そっか。お客さんの解決したい課題にあったWebサイトを作ってあげるのに「こんなサイトはどうですか？」って言ってあげればいいんだね。

Webサイトを制作するときはゴールを見据えることを忘れちゃいけないよ✨
集客がしたいのか？何かサービスをはじめたいのか？認知拡大を目指すのか？ゴールを見据えて適切な企画と提案をするのが大事なんだ！

Webサイトはただ作るだけじゃなくて目的を達成できないとダメなんだね！

３：受注

Web制作の工程3は受注だよ！
企画と提案をお客さんに納得してもらったらお仕事をもらえるんだよ✨

「案件獲得しました！」って嬉しい気持ちになるところだね！

お仕事を受注できると嬉しいよね✨
でも「案件獲得」はゴールじゃないからね。受注したからにはお客さんをがっかりさせないためにプロとして責任をもってプロジェクトを進めないといけないよ！

そうだね。
こしばも責任をもってプロ意識をもってお仕事をするよ！

４：契約書を交わす

Web制作の工程4は「契約書を交わす」だよ✨

契約書って用意した方がいいの？

もちろん。契約書はお客さんとトラブルを未然に防ぐためにも自分を守るためにも必要だよ！
もしWebサイトを制作して納品したのにお金を払ってもらえなかったらどうするの！？

お金を払ってもらえるのは困るよ！
でも、こしば法律とか詳しくないし契約書なんて作れないよ…

自分で契約書を作れなくても弁護士など法律の専門家と相談して契約書の雛形をつくるのがおすすめだよ✨

え！？弁護士の先生に契約書とか作ってもらったらお高いんでしょ？

デイトラのWebデザインコースや独立サポートでは契約書のテンプレートを用意しているよ✨
契約前に気をつけるべきこともカリキュラムの中に含まれているんだ！

本当に？
契約書のこととか全然、分からないから助かるよ。

デイトラでは技術的なことだけじゃなく実際に仕事をする際につまずきやすいポイントも解説しているんだよ✨

それは有難いね！
技術だけ勉強しても仕事につながらないと受講費用を回収できないもんね。

ところで最近はオンラインで仕事の受注ができることもあると思うんだけど、遠方のお客さんとはどうやって契約書を交わすの？

クラウドサインとかオンラインでも契約書を交わせるサービスが最近は流行っているよ✨
もし遠方の人と契約するならオンラインで契約を交わせるサービスを利用するのもおすすめだよ！

ちなみに契約書を交わして制作に入る前に、着手金を支払ってもらう人や前払いで制作費をいただく人もいるよ！

え！？制作が終わる前に制作費を請求してもいいの？

前払いか後払いかはフリーランス、Web制作会社の方針によるよ✨
先にお金をいただいておけば外注費を払う余裕がなくなったり、納品した後にお金を支払ってくれなかったりというリスクは回避できるからね。

エンド営業だと請求のタイミングも自分で考えていかないといけないんだね。

請求のタイミングに正解はないよ。
でも納品後じゃなくて納品前に請求するWeb制作会社やフリーランスもいることは知っておいていいんじゃないかな？✨

５：要件定義

Web制作の工程5は「要件定義」だよ✨

要件定義？なんだか難しそうな言葉だね。

正直、これだけじゃよく分かんないよ。

やることとやらないことの線引きをするって考えると分かりやすいかもしれないね！

例えばWebサイトでリッチなアニメーションを実装するのかどうか？CMSは組みこむのか？写真素材やテキストは誰が用意するのか？をしっかり決めることが大事なんだよ✨

ちゃんと要件定義をしないとどうなっちゃうの？

あとから「この機能は入ってないんですか？」とか「テキストも写真も用意してもらえると思っていました！」とか、制作を進める中でお客さんに言われて揉める原因になるよ。

せっかくお仕事を受注できても、お客さんと揉めるのは悲しいね。

要件定義がしっかりできているかどうかがWeb制作の案件が成功するか失敗するかを分けるんだよ！
ちなみにデイトラのWebデザインコースでは要件定義についてかなり細かく触れているよ✨

実践的な要件定義を教えてくれるスクールや講座って少ないから気になる…!!

デイトラのWebデザインコースは、デザイナーが実案件でつまづきやすいデザイン以外の部分にもこだわってカリキュラムを作っているんだ✨

デザインツールの使い方以外にも仕事で必要な実践的な内容が勉強できるのはデイトラの良いところだね。

６：情報設計

Web制作の工程6は「情報設計」だよ✨

具体的にはどんなことをするの？

ワイヤーフレームやサイトマップ、テキスト作成をするよ。

Webサイトの骨組みを作るんだね！
でも、いきなりデザインからはじめたら駄目なの？

Webサイトの骨組み、ページの内容、構成を決めずにデザインからはじめちゃうと後から、やり直すことが出てくるものだよ。

Webサイトのテキストも、この段階で入れてしまおう✨
テキストはお客さんに用意してもらうのかヒアリングして自分で書くのかは案件によるよ。

お客さんにテキストを書いてもらうこともあるんだね。
たしかにお客さんの会社のことはお客さんが一番よく分かっているもんね。

お客さんにテキストを用意してもらう場合は締め切りの日程を決めておくのがおすすめ✨
お客さんのテキストが遅れてWebサイトの完成が遅れてしまうこともあるからね。

お客さんからテキストを用意してもらえないと先に進めないもんね。

デザインやコーディングをする前に、やらないといけないことがWebサイトを作る前に沢山あるんだね。

今まで紹介した１から６までの工程はWebディレクターっていう職種が対応することが多いよ✨

エンド営業だとWebディレクターのする仕事も自分でやる必要があるよ！
実際にお客さんの顔を見ながら仕事ができるのはエンド営業やディレクターの面白いところだね✨

７：デザイン

Web制作の工程7はWebデザインだよ✨

やっとWebデザイン！
デザインでは具体的にどんなことをするの？

色々あるけど具体的にはワイヤーフレームをもとにデザインツールを使って色を入れたりフォントを選んだり、あしらいを入れたり、写真を挿入したりするよ✨

ところで、こしば君はデザインとアートの違いって分かる？

デザインとアート？似たようなものじゃないの？

デザインとアートは別物だよ！
デザインは課題解決のための手段。アートは自己表現。あくまでもWebデザインはお客さんの課題解決のためにすることだよ✨

こしば、勘違いしてお客さんのWebサイトで自己表現をしないようにするよ。

【PR】デザインを勉強するならデイトラWebデザインコース！

こしば、Webデザインにも興味があるんだけど、おすすめのツールもデザインの勉強法もよく分からないよ。

それならデイトラのWebデザインコースがおすすめだよ✨

デイトラのWebデザインコースではデザインだけじゃなくヒアリング、提案・企画、受注、契約書、要件定義、情報設計まで幅広く勉強できるカリキュラムになっているんだ✨

WebデザインコースなのにWebデザイン以外の工程も勉強できるの！？

デイトラのWebデザインコースはデザインツールの使い方を勉強するだけでは終わらないんだ。
デザイナーとして仕事ができるようになるために必要な内容を盛りこんでいるんだよ✨

それは頼もしい…!
やっぱりデザインツールの使い方だけ覚えても実際に仕事をするのは難しそうだもんね。

デイトラのWebデザインコースは今、世界的に注目されているデザインツールFigmaをメインに学習するよ！
実際にランディングページ、コーポレートサイト 、ECサイト、アプリのUI/UXデザインを手を動かしながら実践的に学べます✨

８：実装（コーディングとCMSの組みこみ）

Web制作の工程8は実装だよ✨
HTMLやCSS、jQueryを使ってコーディングしたりWordPressのオリジナルテーマを作成するところだね！

HTMLやCSSでコーディングをするのってWeb制作の工程でも後半の方なんだね。

そうだよ！
HTMLやCSS、JQueryを使って実装する前にも本当はWeb制作って沢山のことをしないといけないんだ。

Web制作会社はコーディング以外にも仕事が山ほどあるんだ。だからスキルがしっかりしたコーダーの需要はまだまだあるんだよ✨

実装に特化してコーディングのスキルを磨いて案件が途切れないフリーランスの人もいるよね！

そうだね！
Web制作はデザインやコーディングのように一部の工程に特化して制作会社とパートナーを組む働き方もできるよ。

ヒアリングや契約書の作成、要件定義のような仕事が苦手なら制作会社と一緒に仕事をするのもおすすめだよ✨

実装の部分を職人技のように極めていくのもカッコイイね！

【PR】コーディングを勉強するならデイトラWeb制作コース！

実装（コーディング）を深く勉強したいならWeb制作コースがおすすめ✨
未経験からでもWeb制作会社と一緒に仕事ができるレベルのコーディング力が身につくコースです。

WordPressのブロックエディターを活用したエンド営業にも提案できる制作テクニックも勉強できるよ！

９：検証・デバッグ

Web制作の工程9は検証・デバッグだよ✨
残り少しだから頑張ろう！

検証・デバッグってどんなことをするの？

例えばデザインカンプ通りに実装されているのか？お問い合わせフォームは機能しているのか？スマートフォンやタブレットで見たときに表示が崩れていないか？などチェックするんだよ✨

実装段階でもコーダーがチェックはするんだけど、Webディレクターが責任をもって最終チェックすることも多いんだよ。

デザインが崩れていたりお問い合わせフォームが動いてなかったら大変だもんね…

納品する前にWebサイトの品質はしっかりチェックしないと後からトラブルになりかねないよ。
納品前にチェックシートを用意して一つ一つ確認するのがおすすめ✨

どんなことを確認すればいいの？

最低限これぐらいチェックするべき項目をまとめてみたよ！

• テキストの誤字・脱字
• リンク切れ
• 404ページがあるかどうか
• お問い合わせフォームが正常に動くかどうか
• SNSのシェアボタンが機能するか
• SSL設定はされているか
• OGP設定
• favicon設定
• 適切なマークアップか
• ベーシック認証・noindexは外したか
• レスポンシブ対応できているか
• デザインカンプを再現できているか
• 表示崩れしているブラウザがないかどうか
• 表示速度は遅くないか

最終チェックの項目って沢山あるね！

これでも必要最低限の内容だよ✨
お客さんに納品してから不具合が見つかったら信用問題になることもある。
納品前は検証・デバッグはちゃんとしよう！

例えば納品したWebサイトのお問い合わせフォームが動いてなかったらどうなると思う？。
本来、お問い合わせフォームから受注できるはずだった注文が入らず売上が下がってしまうよね。

お問い合わせフォームが動いてなくて注文が来なかったら大変だね。

場合によっては損害賠償を請求されるかもしれないね…
悪い評判もたって仕事が来なくなっちゃうかも。

こしば、ちゃんと面倒がらずに検証・デバッグをするよ！

10：検収・納品

Web制作の工程10は検収・納品だよ✨
お客さんに最終確認をしてもらって納品するんだ！

やっと納品だね！お疲れ様！

とりあえず一区切りだね。
でも納品して終わりで本当にいいの？またゼロから新しいお客さんを探すの？

また振り出しに戻って新しいお客さんを探すの大変かも。

そんな、こしば君のためにとっておきの良いお話があるんだ✨

11：運用

工程11は運用。Webサイトは作ってからが本番なんだ。
Webサイトは公開した後の運用や集客がうまくいってはじめて効果がでるんだよ✨

多岐に渡るWebサイトの運用の一例

• 集客してWebサイトに来てもらう
• Webサイトの解析と改善をする
• 見込み客のリスト獲得
• 商品販売
• サービス

せっかくWebサイトを作っても誰にも見てもらえなかったり活用されなかったりしたら意味ないもんね。

でも、こしばがWebサイトで運用や集客ができたら何かいいことあるの？

こしば君がWeb制作しかできなければ、ずっと新しい仕事を探さないといけない。でも集客の方法をお客さんに提案できたらWebマーケティング（集客・運用）の仕事で継続案件につながるんだ！

「Webサイトを作ってもらったけど、どう活用すればいいんだろう？」って悩むお客さんも多いからね✨

そっか！
お客さんの代わりに運用をしてあげる仕事ができるようになるね！

そうなんだよ。
だから最近Web制作だけじゃなく集客に有効なWebマーケティングが注目されているんだ✨

デイトラWebマーケティングコースが広告運用に力を入れている理由

Web集客の代表的な方法をまとめてみたよ✨

主なWeb集客の方法

• リスティング広告（Google広告・Yahoo広告）
• Facebook広告・Instagram広告
• LINEマーケティング
• SNS集客
• MEO対策
• SEO対策
• 動画を使ったマーケティング

Webマーケティングの方法もいろいろあるね。
こんなに沢山あると何からはじめればいいのか分かんないよ。

Webマーケティングと一口に言っても範囲が広いから迷っちゃうよね。
デイトラではWebマーケティングの全体像やWeb広告、Webサイトの改善まで勉強できるんだよ✨

Webマーケティングの全体像も勉強できるんだ。
でも実際にはどんなスキルを身につけられるの？

デイトラのWebマーケティングコースでは特に広告運用に力を入れているよ。例えばGoogleのリスティング広告やFacebook広告の出稿の仕方、Webサイトの改善を実践的に勉強できるカリキュラムになっているんだ。

どうしてデイトラのWebマーケティングコースは広告運用に力を入れているの？

広告運用は集客施策の中でも勉強すれば再現性が高いし結果も出しやすい分野だからだよ。
もちろん広告運用以外にも集客施策の概論も勉強するよ✨

SNS集客やSEO対策は取り扱ってないの？

SNS集客もSEO対策も結果を出すのに時間がかかるんだよね。特にSEOは大手と競争しないといけないから難しい。しかも再現性という意味でも高くないからね。
SEO対策はご要望が多いからコンテンツを追加する予定だけどね✨

実はデイトラのWebマーケティングコースはWebデザインコースやWeb制作コースを受講した人がもっと活躍できるように作られているんだ。

Webサイトの分析や改善の方法も勉強できる。つまり自分の作ったWebサイトをより良いものに育てていく方法や活用する方法も勉強できるんだ！

自分が作ったWebサイトを育てていける？

そうだよ！自分の作ったWebサイトをうまく育てていけるし活用もできるんだ。頑張って作ったWebサイトを作りっぱなしにはしたくないよね✨

Webマーケティングを勉強したら自分が作ったWebサイトを育てていけて、お客さんの売上にも貢献できるんだ。

Webマーケティングの勉強をしたらWebをうまく使える人になれる！

WebマーケティングはWebデザインやWeb制作のスキルと掛け合わせると、差別化にもつながるよ！

Webサイトをただ作れる人は増えているよね。今ではノーコードのようにコーディングなしでWebサイトを作れるツールもある。でもWebをうまく使える人はまだまだ少ないんじゃないかな？

Webをうまく使える人は少ない…

Web制作と合わせてWeb集客も分かっていると効果のある企画・提案もしやすくなる。
しかもWeb集客を通してお客さんのビジネスと一緒に成長もできる。新規の顧客を開拓するための営業も無理せずに済むんだ✨

ただWebサイトを作れるだけの人の提案よりWebマーケティングを理解している人の方が良い提案ができそう。

Web制作もデザインも売上を伸ばすことからは逃れないんだよね。
Webマーケティングを勉強して売上に貢献できる人材はとても需要があるんだよ✨

こしば、Webマーケティングの勉強も頑張ってみようかな。

【PR】広告運用を勉強するならデイトラWebマーケティングコース！

マーケティング全般、Google広告・Facebook広告、広告改善まで頭と手を動かして実践的に学べるように作ったのがデイトラのWebマーケティングコースです✨
特にクライアントの売上を伸ばせる力がつくことにこだわっています！

Web制作の案件の流れを理解して自分がどんな役割をするか考えてみよう！

Web制作の案件の流れを見てきました！全体の流れを見ながら、自分はどの工程を中心に仕事したいのか考えてみると良いんじゃないかな？

こしば、どこの仕事を中心にやるのがいいかな。それとも一人で全部やれる方がいいのかな？

デザインや実装の専門分野に特化しても良いし、営業やディレクターの役割をしても良いと思う。Web制作の案件をまるっと引き受けて苦手な部分だけ他の人に任せるっていう方法もあるよ✨

エンド営業だとディレクターの役割をする必要があるよ。あと、運用（マーケティング）の仕事も提案しやすくなるというのは覚えておいた方がいいかもしれないね。

デザインやコーディングに専念したいなら制作会社とパートナーを組むか分業化が進んでいる制作会社に就職するのも手だね！

これだけ選択肢があると、こしば迷っちゃうよ。

僕はこしば君のように迷っている人の相談にいつも乗っているんだ！
僕で良ければ、こしば君の相談に乗ってあげるよ✨

デイトラちゃんが、こしばの相談に乗ってくれるの？？

もちろんだよ！
僕は普段、デイトラ公式LINEに生息しているんだ！こしば君も僕のLINEに遊びにきておくれよ✨

こしば、デイトラの公式LINEに遊びに行っちゃおうかな…!!

まとめ

Web制作全体の流れを解説しました。デザインやコーディングのような手を動かすところから勉強する人も多いため、Web制作の案件全体の流れを理解するのが後回しになってしまうことも多いのではないでしょうか。

Web制作の工程全体を理解していないとエンド営業やWeb制作のディレクションは難しいですよね。全体の流れを理解していないとデザインやコーディング（実装）専門の人もWeb制作全体の流れを理解できず円滑なコミュニケーションにも支障が出てしまうかもしれません。

しかしWeb制作全体の流れを把握できると以下のようなメリットがあります。

• Webディレクターを目指せる
• エンド営業からの案件の進め方が分かる
• 全体の流れを考えながら自分のデザインやコーディングを担当できる

Web制作にはデザイン・コーディング以外にもやらなければいけないことは沢山あります。デザイナーやコーダーがやらない仕事を大体、全部やるのがWebディレクターの仕事です。エンドクライアント向けの仕事の場合、制作会社だとWebディレクターが担当する工程も自分でやる必要がでてきます。

一方、デザインやコーディングの技術を磨いてWeb制作会社や他のフリーランスとパートナーになって一部の工程のスペシャリストになるのもフリーランスの生存戦略の一つです。

そしてWebサイトは作って終わりではありません。むしろ運用してはじめて効果が出る媒体です。Webサイトを作れるだけでなく上手に使える人つまり「Webマーケター」の需要も高まっています。

情報が溢れて迷いやすい時代ですが大事なのはWeb制作全体の流れを理解し、あなた自身で自分の目指す働き方や適性を振り返り自分のキャリアを考えてみることです。

どんなことが得意でどんな仕事をしていきたいのか考えてみましょう！

迷ったら僕のLINEに気軽に遊びに来ておくれよ✨
Webスキル診断や漫画で分かるデイトラのコース紹介もしているんだ。お得なデイトラ限定クーポンを貰えることもあるよ！