【フロー図あり】Webサイト制作の流れをくわしく解説！

Web制作は、「作って公開して終わり」ではありません。

何のためのサイトか（集客、採用、問い合わせ増など）を整理し、Webサイトを訪れたユーザーが迷わずに行動できるように設計し、公開後も改善していくまでを含めて、はじめて成果につながるWebサイトになります。

ただし、Web制作の流れはいつも同じではありません。

要望や、予算、サイトの種類（コーポレートサイト、LP、採用サイト、ECサイトなど）、新規かリニューアルか、制作依頼先の体制（制作会社・フリーランス・自社制作など）によって、必要な工程や進め方は変わります。

本記事ではWebサイトをこれから新規で作りたい方向けに、Web制作の全体の流れをプロの視点で解説します。

自社の状況や方針に合わせて「どこを丁寧にやるべきか」「どこを簡略化できるか」を判断するための参考にしてください。

Webサイト制作の流れ

まずはWebサイト制作の大きな流れを抑えましょう。

新規のWebサイト制作を行う場合、次のような流れで進めていくのが一般的です。

1. 依頼先を決める
2. 目的やKPIを決める
3. 設計する
4. デザインする
5. コーディングする
6. 確認する
7. 公開する
8. 育てる

それぞれの項目について、どのような作業が発生するかを見ていきましょう。

＜1＞依頼先を決める

Webサイト制作は、最初に「誰が作るか」を決めるところから始まります。

選択肢は大きく次の3つです。

• 制作会社に依頼する
• フリーランスに依頼する
• 自社で内製する

どこに依頼するかによって、費用だけでなく、品質の安定感や進めやすさ、どこまで任せられるかが変わります。

どこに依頼するのか判断する際には、まず次の4つを整理しておきましょう。

• 制作の目的（ブランディング重視なのか、問い合わせや採用など成果を狙うのか）
• サイト規模（LPなのか、企業サイトなのか、ページ数が多いサイトなのか）
• 予算（どこまで投資できるか）
• 社内リソース（担当者の有無、原稿・写真の準備、更新や運用に割ける時間）

制作会社に依頼が向いているケース

企業対企業の安定した納品品質と連絡のやりとり、運用後の長期間のフォロー対応などを求めるなら、制作会社への依頼が向いています。

企業でチームとして制作を行なっている場合が多いため、実績数が多く、また1人でさまざまな案件の対応を行なっているフリーランスと比べると、品質や連絡のやりとりやフォローなどが安定しているのが特徴。

一方で、体制がしっかりしている分、費用はフリーランスなどに比べると高めな傾向があります。

※もちろん、Webサイト制作会社の中でも「この業界のホームページに特化している、得意、実績が豊富」「テンプレート型で費用が安く、短納期」など色々な強みを持った会社があるため、費用感が制作会社だから一様に高いかというと、一概には言えません。

フリーランスに依頼が向いているケース

フリーランスの場合、基本的に窓口が1人なので、スピード感が出やすく、費用も制作会社に比べると安めな傾向があります。

「1ヶ月で何としても作りたい」「特急で作りたい」「この低予算で作りたい」などの要望は制作会社によっては断られたり、特急料金での対応になってしまう可能性がありますが、フリーランスへの依頼であれば人によっては柔軟に対応してもらえる可能性があります。

ただし、対応範囲や得意分野、納品品質、連絡対応は人によって大きく違う点や、企業対企業ではない分、途中で飛ばれてしまったり、納期が遅れてしまったり、そういったトラブルなどが起きるリスクも制作会社に比べると高くなる点には注意しましょう。

依頼前に ポートフォリオや、対応できる範囲（デザインのみ、実装まで、CMSまで）、修正対応の考え方、連絡の頻度などは必ず確認して、「どの人に依頼するか」をしっかりと見極め、選定することが重要です。

自社での内製が向いているケース

「まずは最低限の情報発信ができればOK」「更新を自分たちで頻繁にしたい」なら、Webサイトを自社で内製することも選択肢の1つです。

Jimdoやペライチ、wix、studioなどノーコードツールや、有料のWebサイトのテンプレートを使えば、専門知識がなくてもWebサイトが制作できてしまいます。

ただし、Webサイトを内製化した場合、作ることよりも、作ったあとに維持管理や更新していくことが意外と大変です。

「こういうページを新設したい」「こういう内容に更新したい」など担当者の知識を超えた要望が出てきたり、表示崩れの修正対応、セキュリティ強化やバックアップの取得など、Webサイト運用面の負担が積み上がってきます。

社内にWebサイト制作に詳しい人がいない場合は、Webサイトの更新が途中で止まったり、品質が不安定になったり、かえって企業のブランド毀損につながってきてしまいます。

自社での内製はずっと続けるというよりは、ある程度のWebサイトが必要になった段階でリニューアルを見越して一定期間「最低限作る」という目的で選ぶのがおすすめです。

もちろん、Webサイト制作に詳しい方が社内にいて、しっかりと更新や運用が行えるのであれば、自社の内製はコスパよくWebサイトを制作できる選択肢の1つと言えます。

＜2＞目的やKPIを決める

Webサイト制作で一番大事なのが、Webサイトの制作目的とKPIです。

ここが曖昧だと、見た目は整っていても「何を見せたいサイトなのか分からない」「問い合わせにつながらない」といった状態になりやすく、あとから直す量も増えます。

まずは、最初の段階で誰に向けて（ターゲット）、何を伝えて、最終的にどう動いてもらうか（KPI）を決めることが大切です。

制作会社やフリーランスに依頼した場合、こういった内容のヒアリングから始めることが多いので、あらかじめ自社でまとめておくのがおすすめです。

目的を決める

「とりあえずWebサイトが必要」「他社もやっているから」だけだと、ページ構成も導線も決まりません。

まずは目的を1つか2つに絞ります。

たとえば 問い合わせを増やす、採用応募を増やす、サービス理解を深めて検討を後押しする、信頼感を高める、などです。

目的が決まると、トップページのファーストビューで何を押し出すか、どのページの内容を厚くするか、ボタン（問い合わせ・資料請求など）をどこに置くかが自然に決まります。

作った後のゴールを決める

Webサイトは作って終わりではなく、その後しっかりと育てていくものです。

自社が予期した方向に進んでいるかどうかを定期的にチェックできるように、指標となる数字を決めておきましょう。

難しく考えなくてもOKです。

最初は 問い合わせ数、資料請求数、採用エントリー数、予約数 など、Webサイトを制作した目的に直結するものを選べば十分です。

こういったゴールが決まっていないと、公開後に効果が出ているのか、改善が必要なのかの方向性がぶれてしまいます。

ターゲットを設定する

Webサイトは「誰にでも分かりやすく」ではなく、「このターゲットに刺さるように」を狙って分かりやすく設計した方が成果につながりやすくなります。

そのため、どのような方に見てもらいたいサイトなのか、ターゲットを年齢や職種だけで終わらせず、何に困っていて、どんな情報があると安心して、どういう流れで検討するのかまで具体化しましょう。

ターゲットがはっきりすると、使う言葉のレベル感、見せる順番、ページの温度感（硬め、柔らかめなど）が決まりやすく、デザインと原稿のブレなども減ります。

競合調査・分析を行う

競合調査は「他社のいいところを真似する」ためだけではなく、ユーザーが比較するときの基準を知るためにもしっかりと行いましょう。

見るべきポイントは、上部メニューや導線、よく出てくる見出し（料金、事例、FAQなど）、訴求の順番、写真や色のトーンなどです。

こういった視点で競合分析することで、業界で最低限求められる情報と、自社が他社に比べて差を出せるポイントが見えます。

結果として、サイトに入れるべきページやコンテンツの抜け漏れも防げます。

コンセプトを決める

最後に、サイト全体の軸を一言で言語化しましょう。

コンセプトは、何を強みとして、どんな価値を、どんな雰囲気で伝えるかの基準です。

この言語化したコンセプトを基準に、デザインのトーン、文章の言い回し、事例の選び方、ボタンの文言を制作していくと、一貫性が出てブランディングにつながります。

逆にコンセプトが曖昧だと、ページごとに印象がバラバラになって、「結局何を伝えたいのか？」

という一貫性が薄れ、伝えたいことが伝わらなくなります。

また、コンセプトは「デザインやWeb制作のため」だけでなく、ページの構成やその後のWebサイト運用で迷ったときの判断軸にもなるので、Webサイト制作のコンセプトをぜひ明言化しておきましょう。

＜3＞設計する

Webサイト設計は、決めた目的やKPIをもとに、「どんな順番で情報を見せて、どこで行動してもらうか」を組み立てる工程です。

ここがしっかりしていると、デザインも実装も迷いにくく、公開後の成果にもつながりやすくなります。

逆に設計がふわっとしたままだと、後からWebサイト構造を変えることになって大きな手戻りが出やすいので、時間をかけてしっかりと設計しましょう。

必要なページを決める

Webサイトに入れるページを洗い出します。

目的によって必要なページは変わるので、まずは「ユーザーが検討するときに欲しい情報」を基準に考えます。

たとえば企業サイトなら、次のようなページが最低限必要になります。

・事業紹介（サービス紹介）

・会社概要

・導入事例、導入実績

・料金

・よくある質問

・問い合わせ

・プライバシーポリシー

また、採用が目的なら、「採用ページ」も追加、定期的に情報発信をしていきたいのであれば「ブログやコラム」なども追加します。

サイト構造を設計する

サイト全体の地図になるのがサイトマップです。

トップページからどこへ行けるか、ページ同士がどうつながるかを整理して、ユーザーが迷わず目的の情報にたどり着ける形にします。

ページ数が増えるほど、カテゴリー分けなどが必要になったり、「探しやすさ」という観点でサイトマップを作っていく必要があります。

サイト構造が適当になってしまうと、ユーザーも情報を取りづらくなってしまい、離脱につながってしまうので、「分かりやすく、探しやすい」サイト構造にしましょう。

GoogleやAIなどもシンプルで分かりやすいサイト構成のサイトを高評価する、優先的に紹介する傾向がありますので、ここはしっかりと時間をかけて行うべき工程です。

ページ構造を設計し、ワイヤーフレームを作成する

ワイヤーフレームは、各ページの骨組み、下書きのことです。

色や写真などの見た目はまだ考えず、どの情報をどの順番で置くか、見出しはどう切るか、ボタンはどこに置くかを決めます。

ワイヤーフレームで合意が取れていると、デザイン段階での「やっぱり構成を変えたい」などの手戻りが少なく、結果的にスピードも品質も上がります。

システム設計をする

最後に、Webサイトの裏側の仕組みを決めます。

たとえば、CMSで更新したいか、問い合わせフォームの項目はどうするか、会員・予約・決済などの機能が必要か、外部ツールと連携するか といった部分です。

ここが曖昧なまま実装に入ると、途中で「やっぱり必要だった」となることが多く、追加費用がかかってしまったり、一度行なった設計を再度やり直すことになってしまいやすいので、必要な機能は先に洗い出して「どこまで作るか」を決めておきましょう。

＜4＞デザインする

Webサイトの設計段階で作ったワイヤーフレームをもとに、サイトの見た目をデザインしていく工程です。

デザインは飾りではなく、サイトを開いた瞬間に「何の会社か」「信頼できそうか」「自分に関係あるか」を伝える役割があります。

だからこそ、Webサイト設計と同じくらい重要で、しっかりと作り込む必要のある工程と言えます。

デザインコンセプトを設計する

まず、サイト全体の方向性（トーン）を決めます。

決めたコンセプトやブランドカラー、ロゴ、使用する写真に合わせつつ、色・フォント・余白・写真の雰囲気を揃えて「この会社らしさ」を作ります。

ここが曖昧だと、ページごとに雰囲気がブレてしまい、まとまりがない印象になりがちです。

PCだけでなくスマホの見え方まで含めて、最初に基準を作っておきましょう。

画像やイラスト、テキストなどの素材を準備する

デザインは素材が揃わないと完成しません。

写真、ロゴデータ、アイコン、図、各ページの原稿など、必要なものを早めに洗い出して準備しておきましょう。

素材待ちが発生するとデザインが止まり、そのまま全体のスケジュールもずれやすいので、撮影や原稿作成がある場合は特に余裕を持って進めます。

デザインカンプを作成する

素材とコンセプトが固まったら、完成イメージとしてのデザインカンプを作ります。

トップページだけでなく、サービス詳細や事例、料金、問い合わせなど主要ページも作り、統一感と導線（ボタンの位置、情報の順番）を確認します。

PC版だけでなくスマホ版も合わせて作ってもらい確認しましょう。

＜5＞コーディングする

決まった設計とデザインをもとに、実際にブラウザで動くWebサイトを作る工程です。

見た目を再現するだけでなく、スマホでも快適に使えるように調整したり、更新できる仕組み（CMS）やフォームなどの裏側も整えて、「公開して運用できる状態」に仕上げていきます。

フロントエンドを開発する

まず、デザインカンプをHTML・CSS・JavaScriptで組み立てます。

ポイントは「同じ見た目にする」だけではなく、崩れない・押しやすい・読みやすいをちゃんと作ることです。

PCやスマホ、タブレットで表示が崩れないようにレスポンシブ対応を行い、必要があればアニメーションやUIの動きも実装していきます。

画像が重すぎて表示が遅い、ボタンの反応が悪い、といったユーザーにとってのストレスとならないように意識して積み上げていきます。

バックエンドを構築する

次に、ユーザーからは見えない「裏側」を作ります。

たとえば CMSでお知らせを更新できるようにする、フォーム送信を受け取る、予約や決済、会員機能を動かす、外部ツールと連携するなどです。

ここができていないと、「更新しづらい」「問い合わせが届かない」「運用中にトラブルが起きる」などちゃんとしたサイトができていても、このような致命的なトラブルにつながってしまいます。

権限設定やセキュリティ機能の導入などもこの段階でしっかり入れます。

テストを行う

作り終わったら、公開前に必ずテスト環境で動作を確認しましょう。

確認するのは、見た目の崩れやリンク切れだけではありません。

フォーム送信・自動返信、管理画面の更新、スマホでの表示や操作性、主要ブラウザでの表示、表示速度、誤字脱字まで、ひと通りチェックして不具合をつぶします。

特にお問合せフォーム周りは「動いているつもり」であっても止まっていることがあるので、テスト送信まで含めて確認しておくと安心です。

＜6＞公開する

コーディングし、テスト環境で確認や不具合の潰し込みが終わったら、Webサイトを本番サーバーに移して、誰でもアクセスできる状態にします。

ここでのポイントは「公開して終わり」ではなく、公開後にトラブルが起きないように、設定と最終チェックをきっちり済ませることです。

まだ最終チェックが残っているので、Webサイトにベーシック認証をかけたり、Webサイトがインデックスされないようにnoindexを入れておくなどの処理をしておきましょう。

まず、本番サーバーへデータを反映し、独自ドメインをつないでサイトが表示される状態にします。

あわせて、SSL（HTTPS）を設定して、通信が暗号化された状態にします。

セキュリティ面の基本になる部分なので、公開前に必ず確認しましょう。

次に、検索で見つけてもらうための最低限の設定を整えます。

たとえば、各ページのタイトル・ディスクリプションが意図どおりになっているか、表示が重くなりすぎていないかなどです。

サイトマップの設置や送信もこのタイミングで行います。

最後に、公開直前の総点検をします。

チェックしたいのは、テスト環境でのチェックと同じで、主要導線（ボタンやメニュー）、リンク切れ、誤字脱字、フォーム送信と自動返信、計測タグの動作などです。

特にフォームは「送れたつもり」で止まっていると致命的なので、テスト送信まで含めて確認します。

問題がなければ、正式に公開して運用をスタートしましょう。

Webサイトがインデックスされないようにnoindexを入れた場合は、このタイミングで外すのを忘れずに。

＜7＞運用・改善

Webサイトは、公開して終わりではありません。

むしろ公開してからがスタートです。

決めたKPIの数字を定期的に測定し、効果がでているかどうかを定期的に見ながら改善を繰り返していくことで、成果につながります。

まずはGoogleアナリティクス（アクセス解析）、Googleサーチコンソールを入れて、どのページがよく見られているか、どこで離脱が多いか、どんな検索ワードで来ているかを測定しましょう。

（※制作会社などがWebサイト制作とセットで設定してくれることも多いです）

これが分かると、「読まれているページを強化する」「離脱が多いページの導線や内容を直す」「検索から来た人の疑問に答えるページを増やす」など、次の打ち手が決めやすくなります。

改善は、大きなリニューアルをするのではなく、小さく直して検証していくのが効果的です。

たとえば、ボタンの位置や文言を調整する、問い合わせまでの導線を短くする、見出しの順番を入れ替える、事例やFAQを追加する、といったちょっとした修正でも成果が変わることがあります。

あわせて、情報を定期的に更新して「今も動いているサイト」にしておくのも大事です。

サービス内容や実績、採用情報などが古いままだと、閲覧するユーザーにとってはそれだけで不安要素になります。

コラム記事や事例など、ユーザーの検討に役立つコンテンツを追加・更新していくと、検索経由の入口も増やしやすくなります。

集客を伸ばしたい場合は、状況に応じてSEOの強化や広告運用なども検討しましょう。

運用していく中で「この機能があると問い合わせが増えそう」「ここは作り直した方が早い」と見えてくるので、必要なら機能追加や部分リニューアルを重ねて、Webサイトを育てていきましょう。

Webサイト制作の流れに関するよくある質問

Webサイト制作の流れは、作るサイトや依頼する制作先によって異なります。

今回一般的な流れを紹介しましたが、流れについてよくいただく質問をまとめました。

途中で内容や仕様を変えることはできますか？

可能です。

ただし、変更するタイミングによって影響の大きさが次のように変わります。

スムーズに進めるコツは、変更自体をゼロにすることよりも、「どこまでが当初の範囲で、どこからが追加（別対応）か」をその都度はっきりさせることです。

変更が出そうなときは、まず「目的に直結する変更か」「公開後の改善で対応できるか」を整理し、必要なら優先順位をつけて対応すると、無駄な手戻りを減らせます。

文章（原稿）や写真が決まっていなくても進められますか？

ある程度は進められますが、どこかで必ず止まります。

進められる範囲と、詰まるポイントを知っておくとスムーズです。

どうしても間に合わない場合は、仮の原稿・仮の写真で進めて後から差し替える方法もあります。

ただしこの場合は、次の①〜③を先に決めておくのがおすすめです。

①仮で進める範囲（どのページまで）
②差し替えの締切
③差し替え後に発生するレイアウト調整の扱い（修正回数・費用）

制作会社側の意見として、早めに用意できると助かるのは、完成原稿ではなく、既存の会社案内資料、サービス説明資料、採用資料、商品パンフなど「元になる情報」です。

これがあるだけでも、設計とデザインのブレをかなり減らせます。

Webサイト制作を行うなら、全体の流れを理解しておこう！

Webサイト制作は、依頼先を選んで終わりではなく、企画・設計からデザイン、実装、公開、運用までの流れがつながってはじめて成果が出ます。

だからこそ、全体のフローを理解しておくと「今どこを決めるべきか」「何を準備すべきか」が見えやすくなり、無駄な手戻りも減らせます。

エージェントワークは、Web制作に特化したマッチングサービスで、登録する1000名のクリエイターに直接依頼するか、エージェントワークの制作会社に相談するかを選べる、新しいクラウドソーシングサイトです。

企業に依頼したい、または企画から運用までまとめて任せたい場合は制作会社としてワンストップで相談でき、特定のクリエイターに頼みたい場合はポートフォリオを見て直接相談することもできます。

Webサイト制作を検討されているのであれば、ぜひ一度ご検討ください。

エージェントワークの詳細はこちら