Web制作の流れと担当者のやるべきこと｜依頼から納品・公開までの全工程

専門知識がない状態で、突然自社Webサイトの制作やリニューアルの担当を任されることは珍しくありません。

このような場合、右も左もわからないまま「とりあえず制作会社に相談すればなんとかなる」と考えてしまいがちですが、実はこれこそが最も危険な落とし穴です。

多くのWeb制作プロジェクトが予算オーバーや公開遅延に陥る原因は、制作会社のスキル不足ではなく、発注側である企業の「準備不足」と「丸投げ」にあります。

実際にプロの世界では「Web制作の成否は発注前の段取りで8割決まる」といわれるほど、発注側の担当者が提案依頼書（RFP）や素材準備の重要性を理解しているかが問われます。

この記事では、Web制作の基本的な流れを5つのステップに分解し、標準的な期間の目安や、発注側が準備すべき具体的なタスクをわかりやすく解説します。

「企画」から「公開後の運用」まで、専門用語を使わずに噛み砕いてお伝えしますので、初めてのプロジェクトを成功に導くための”工程表”としてご活用ください。

Web制作の流れ全体像と期間目安【保存版チャート】

Web制作は、一般的に「企画」「設計」「デザイン」「開発」「公開」という工程に沿ってプロジェクトが進みます。

本セクションでは、全体フローの標準的なステップと、サイト規模別の制作期間の目安を整理します。

制作フローの全体像と担当者の役割

Webサイト制作は「制作会社に丸投げ」では完成しません。

家を建てる際に施主が「間取りの確認」や「表札の準備」をするように、Web制作も発注者（担当者）が判断・承認・素材提供を行うことで初めて次の工程に進める仕組みになっています。

各フェーズで「誰が」「何をするのか」の一般的な役割分担は以下のとおりです。

担当者がWeb制作でつまずきやすい要因の一つが、「今はどの段階で、何を確認しなければならないのか」がわからなくなることです。

実際には、表のとおり、企画段階では担当者が「要望」を出し、設計・デザイン段階では制作会社の提案を「承認（チェック）」し、素材を「提供」するのが基本の動きです。

制作会社任せにせず、現在はどのフェーズにいて、自分がボール（承認や素材）を投げ返さないことで工程を止めていないかを把握しておくことが、プロジェクトを円滑に進めるカギとなります。

規模別の制作期間目安（早見表）

Webサイトの完成までにかかる期間は、作るサイトの規模や種類によって大きく異なります。

標準的な企業サイト（コーポレートサイト）であれば3～4か月程度が一般的ですが、ページ数が多い大規模なサイトでは半年～1年以上かかることも珍しくありません。さらに長期化するリスクも考慮しておくとよいでしょう。

一方で、商品紹介などの縦長な1枚ページ（ランディングページ/LP）であれば、2週間～1か月程度の比較的短期間で制作可能です。

社内では、上司や他部署から「来月中に新しいサイトを公開したい」といった、物理的に困難な相談を受けることも考えられます。

ただし、こうした無理なスケジュールは品質低下やトラブルの原因になるため、上記の目安を参考に、余裕を持った計画を立てるようにしましょう。

具体的には、公開したい日から逆算して、いつまでに制作会社に依頼すべきかを確認し、早めに社内の合意を得るようにします。

発注準備にかかる「見えない時間」

制作期間を考える際に見落としがちなのが、制作会社に依頼する前の「発注フェーズ（準備期間）」です。

実際には、制作会社への問い合わせ・見積もりの比較・社内稟議（りんぎ）・契約締結といった手続きだけで、2〜3週間ほどかかるケースもあります。

制作会社が決まって契約した日がプロジェクトのスタートだと思っていると、公開予定日に間に合わなくなるリスクがあります。

特に社内承認に時間がかかる組織の場合、実際の制作期間に入る前にプラス1か月程度の準備期間を見込んでおく必要があります。

また、スムーズに制作に進むためには、あらかじめ作りたいサイトの要望をまとめた「提案依頼書（RFP）」を準備し、制作会社とのやり取りを効率化する工夫が有効です。

STEP1：企画・要件定義（発注前の最重要フェーズ）

企画・要件定義とは、Webサイトを作る目的やターゲット、予算といった「プロジェクトの核」を決める工程です。

このフェーズでの決定が曖昧だと、あとになって「あれもこれも」と追加要望が出てしまい、最終的な予算オーバーや納期遅延を引き起こす最大の原因になります。

本セクションでは、制作会社に問い合わせる前に社内で固めておくべき「3つの重要事項」と、準備すべき資料について解説します。

制作会社に伝える「目的・ターゲット・予算」

Web制作で失敗しないためには、制作会社を探し始める前に「なぜ作るのか（目的）」「誰に見てもらいたいのか（ターゲット）」「いくらかけるか（予算）」の3点を明確にしておく必要があります。

これらが決まっていない状態で「良い感じのサイトを作ってください」と丸投げすると、制作会社は提案の軸を定められず、「見た目は綺麗だけれど、問い合わせも注文も入らない」という、ビジネス成果の出ないサイトができあがってしまいます。

現場でよくある失敗は、「競合のA社みたいなサイトにして」という上司の鶴の一声で目的がすり替わり、本来のターゲットである顧客層を無視したデザインになってしまうケースです。

こうしたブレを防ぐために、担当者は「問い合わせ数を月20件に増やす」「30代の技術職に見てもらう」といった具体的な目標を数値や言葉で書き出し、社内の合意を得ておくようにします。

必要なページを洗い出す「サイトマップ」

作りたいサイトに「どのようなページがいくつ必要か」をリストアップした構成図のことを、Web制作の現場では「サイトマップ」と呼びます。

制作費用の多くはページ数に比例して決まるため、事前にこのリストを作っておくことで、見積もりの精度が劇的に向上します。

頭の中では「会社案内と商品紹介のページさえあれば十分」と考えていても、実際に書き出してみると「採用情報も必要だ」「よくある質問もあったほうが親切だ」と、必要なページが増えることはよくあります。

エクセルや手書きのメモで十分ですので、「ホーム」「商品一覧」「会社案内」「お問い合わせ」といった項目を階層構造で書き出し、全体像を可視化してみましょう。

要望を整理した「提案依頼書（RFP）」

社内で決めた目的や要件をまとめた資料を「提案依頼書（RFP）」といい、これを制作会社に提示することで、より具体的で質の高い提案を引き出すことができます。

RFPを用意せず口頭だけで要望を伝えると、提案の良し悪しが「担当してくれるWebディレクターのヒアリング能力」に依存してしまい、相手のスキル次第で的外れなサイトになるリスクが高まります。

もちろん、「言った言わない」のトラブルを防ぐためにも、要望を書面化しておくことが不可欠です。

「RFP」と聞くと難しく感じるかもしれませんが、形式にこだわる必要はありません。

A4用紙1〜2枚程度で構いませんので、「リニューアルの背景」「解決したい課題」「参考にしたサイト」「希望納期」などを箇条書きにし、最初の打ち合わせで渡せるように準備しましょう。

「著作権」と「編集可能なデータ」の引き渡し

契約トラブルで最も多いのが、「お金を払ったのだから、成果物はすべて自社のもの」という発注者側の思い込みに起因するものです。

Web制作において、成果物の著作権は原則として「作った人（制作会社）」に帰属するため、契約で「著作権譲渡」を取り決めておかない限り、自由に改変や流用はできません。

注意すべきなのが、「デザインの元データ（PhotoshopやFigmaデータ）」の扱いです。

これらは「完成した料理」に対する「秘伝のレシピ」のようなもので、通常は納品物に含まれません。

ただし、この元データが手元にないと、将来「バナーの文字を自分で直したい」「他社にリニューアルを頼みたい」となった際に、修正が不可能（または作り直し）になってしまいます。

担当者は、RFPや契約の段階で「将来、社内で修正したいので、編集可能な元データも納品してほしい」と伝え、その項目が見積もりに含まれているかを確認しましょう（元データの譲渡は、別途費用がかかるのが一般的です）。

STEP2：設計・構成（ワイヤーフレーム作成）

設計・構成とは、家の建築でいう「間取り図」を決める工程であり、デザインに着手する前段階の確認フェーズです。

この段階で作られるモノクロの設計図を「ワイヤーフレーム（WF）」と呼び、これを用いて画面のレイアウトや情報の配置を完全に確定させます。

本セクションでは、担当者が必ずチェックすべき「ワイヤーフレームの確認ポイント」と、制作進行のボトルネックになりやすい「素材準備」について解説します。

デザインの前のモノクロの設計図「ワイヤーフレーム（WF）」

ワイヤーフレーム（WF）とは、Webページのどこに何を配置するかを示した、色や装飾のないモノクロの設計図（骨組み）のことです。

地味な資料に見えますが、文章の量やボタンの位置、情報の優先順位を決める最も重要な工程であり、ここで決定した骨組みを基にデザイナーが作業を行います。

よくある失敗は、この段階では中身をあまり確認せず、色がついてきれいになったデザインが出てきた段階で「やっぱりこの文章を変えたい」「このボタンを上にしたい」と言い出してしまうことです。

こうした「後出しの修正」は大幅な手戻りを発生させ、追加費用や納期遅延の原因になります。

担当者は「これが最終決定図である」という意識を持ち、WFの段階で記載されているテキストやリンク先を隅々まで確認し、疑問があれば必ず質問しましょう。

スマホ版の表示と動きの確認

PCの大きな画面だけでなく、スマートフォンの小さな画面で情報がどう表示されるかも設計段階で確認することが必須です。

近年はスマホからの閲覧が主流であるため、PC版のデザインだけで判断してしまうと、スマホでは見づらかったり、使いにくかったりするサイトになってしまいます。

PCでは横に並んでいたメニューが、スマホでは「ハンバーガーメニュー（三本線のメニューアイコン）」の中に隠れるなど、画面幅によって情報の見え方や操作方法が変わります。

確認漏れを防ぐため、担当者はワイヤーフレームを受け取ったら、PC版だけでなくスマホ版の構成図があるかも確認しましょう。

もしスマホ版の構成図がない場合は、制作会社と連携して「このデザインはスマホではどう見えますか？」と都度確認することが重要です。

「デザイン」より重要な「使いやすさ（UI）」の設計

Webサイトの成果（コンバージョン）を左右するのは、美しいビジュアルよりも「使いやすさ（UI：ユーザーインターフェース）」です。

どれほどおしゃれなデザインでも、「メニューがわかりにくい」「ボタンが押しにくい」といったストレスがあると、ユーザーはすぐに離脱してしまいます。

特に注意したいのが、「制作実績が多い＝UIが優れている」とは限らない点です。

Webのトレンドやユーザーの行動習慣は年々変化しており、10年前の正解が現在では「使いにくい」と評価されることもあります。

「老舗の制作会社だから安心」と盲信せず、提案された設計が今の時代のユーザーにとって使いやすいかを厳しくチェックする必要があります。

また、優れたUI設計ができるかどうかは、会社の実績よりも、担当するWebディレクターやデザイナー個人のスキルに大きく依存します。

打ち合わせの際に「なぜこのボタンをここに配置したのか？」などと質問し、「なんとなくの感覚」ではなく「ユーザーの視線移動を考慮して」など、理論的な説明が伴うUIになるようブラッシュアップしてもらいましょう。

原稿と写真素材の準備リスト

モノクロの設計図（ワイヤーフレーム）が固まったら、そこに流し込むための「原稿（テキスト）」と「写真素材（画像）」が大量に必要になります。

これらがそろわないとデザイナーやエンジニアは作業を進められず、プロジェクト全体がストップしてしまうため、素材準備の遅れは制作スケジュールの最大の敵といえます。

「写真はありもの（スマホで撮った社内イベントの様子や、過去の資料に使った画像など）でいい」と思っていても、実際にワイヤーフレームに当てはめてみると、解像度が低すぎる、サイズが合わないということが頻繁に起こります。

担当者はワイヤーフレームが承認されたらすぐに必要な素材をリスト化し、社内のパンフレットから文章を転用したり、プロのカメラマンや社員に撮影を依頼したりして、提出期限（デッドライン）を厳守することが重要です。

STEP3：デザイン制作と素材準備

デザイン制作とは、モノクロの設計図（ワイヤーフレーム）に色や写真を加え、ユーザーが実際に目にするWebサイトの見た目を完成させる工程です。

このステップでは、デザイナーが作成したトップページや下層ページのデザイン案を確認し、ブラウザで表示される状態へと仕上げていきます。

本セクションでは、担当者が陥りがちな「感覚的な修正指示」を防ぐ方法と、制作進行を止めないための「素材提出の期限管理」について解説します。

「好き嫌い」ではなく「ターゲット」で判断する

デザインを確認する際、担当者が最も注意すべき点は、自分や上司の「個人的な好み」で良し悪しを判断しないことです。

Webサイトの目的はあくまで「ターゲット顧客に行動してもらうこと」であり、社内の満足度と実際の成果はイコールではありません。重要なのは「自分たちが好きか」ではなく「顧客に響くか」だからです。

現場では、決裁者が「なんとなく地味だから、もっと派手にしてほしい」といった抽象的な指示を出し、本来のターゲットである「信頼性を重視する企業担当者」向けの意図が崩れてしまうことがよくあります。

修正を依頼する際は、「ターゲットが40代の専門職なので、ポップさよりも落ち着きを優先したい」といったように、企画段階で決めたペルソナ（顧客像）を基準に理由を添えることが重要です。

「素材待ち」によるスケジュールの遅延

デザインが確定し、次のコーディング（開発）工程に進むためには、各ページに掲載するすべての写真と最終原稿がそろっている必要があります。

多くのプロジェクトにおいて、この「素材提出」が予定通りに行われず、制作スケジュールが数週間単位で遅れる事態が発生しています。

「写真はあとで差し替えればいい」と安易に考えがちですが、画像の縦横比や解像度が変わるとレイアウト全体が崩れるため、開発工程に進んでからの差し替えは大きな手戻りを生みます。

担当者は、デザイン確認と並行して社内の広報素材を集めたり、撮影スケジュールを調整したりして、デザイン校了日までにすべてのデータを制作会社に渡せるよう手配しましょう。

修正指示は「具体的」かつ「まとめて」出す

デザイナーへの修正依頼は、思いつくたびにメールするのではなく、チーム内の意見を集約してから一度にまとめて送るのが鉄則です。

さみだれ式の連絡は情報の行き違いや修正漏れの原因となり、制作会社の作業効率を著しく低下させます。場合によっては追加費用を請求されることもあるでしょう。

修正指示を出す際は、「もう少しカッコよく」といった感覚的な言葉ではなく、「見出しの文字サイズを120%にして目立たせる」「背景色をロゴと同じ青色（#0000FF）にする」など、誰が読んでも同じ認識になる具体的な表現を心がけます。

PowerPointやPDFのコメント機能を使い、画面キャプチャ上の修正箇所に直接指示を書き込んで渡すと、意図が正確に伝わります。

STEP4：開発・コーディングと納品前の最終テスト

開発・コーディングとは、完成したデザイン画をプログラム言語（HTMLやCSS）で記述し、Webブラウザ上で実際に動くWebサイトに変換する工程です。

このステップでは、制作会社のエンジニアが作業を進めます。

そのため担当者からは進捗が見えにくくなりますが、公開前の最終チェックを行うための重要な期間でもあります。

本セクションでは、開発期間中の過ごし方と、公開直前に行う「テスト環境」での確認ポイントについて解説します。

デザインをWebサイトにする「コーディング」

デザインデータはあくまで「絵」であり、そのままではインターネット上で見ることができません。

これを、クリックしたらページが遷移したり、スマホではレイアウトが変わったりするように、プログラミング言語を使って構築する作業を「コーディング」または「実装」と呼びます。

この作業が始まると、デザインや文章の変更は原則としてできなくなります。

建築現場において基礎工事が始まったあとに間取りを変えるのが難しいのと同じで、コーディング開始後に修正を依頼するとコードを書き直すことになるため、多額の追加費用がかかる可能性があります。

担当者は、この期間中に公開後の運用マニュアルを確認したり、社内向けの告知文を作成したりして、公開に向けた準備を進めます。

企業の信頼を守る「常時SSL化（https）」

コーポレートサイトにおいて、デザインと同じくらい重要なのが「セキュリティ対策（SSL化）」です。

SSL化とは、Webサイト上の通信を暗号化する技術のことで、これが導入されているサイトはURLが「https://」である一方、導入されていないサイトはURLが「http://」のままとなり、ブラウザのアドレスバーに「保護されていない通信」という警告が表示されてしまいます。

企業の公式サイトでこの警告が出ると、訪問者に「この会社はセキュリティ意識が低い」「情報を盗まれるかもしれない」という不信感を与え、問い合わせを躊躇させる原因になります。

担当者は、サーバー契約や開発の段階で「常時SSL化（https）対応になっていますか？」と必ず確認し、公開時に安全な状態で表示されるように手配します。

本番公開前の「テスト環境」でのチェック

コーディングが完了すると、制作会社から「テスト環境（テストサイト）」のURLが送られてきます。

これは一般の人がアクセスできない、パスワードのかかった確認専用の場所であり、ここで実際の動きや表示に問題がないかを最終確認します。

この際、制作会社からの報告を鵜呑みにせず、必ず個人や自社のパソコンやスマートフォンでURLを開いて操作することが大切です。

セキュリティソフトの影響で見られないページがないか、問い合わせフォームから送信したメールがきちんと社内に届くかなど、実際の運用環境と同じ条件でテストを行い、不具合がないかを入念にチェックします。

異なる機種・ブラウザでの表示崩れ

Webサイトは、見る人の環境（iPhone・Android・Windows・Mac）やブラウザ（Chrome・Safari・Edge）によって、表示が微妙にズレたり、レイアウトが崩れたりすることがあります。

特定の環境だけで発生する不具合を見逃さないよう、できるだけ多くの種類の端末で表示確認を行う必要があります。

「会社のPCではきれいに見えていたのに、上司のiPadで見たら文字が重なっていた」というトラブルはよく起こります。

担当者は、社内にある複数の端末を使って実際にサイトを表示し、文字化けや画像の表示崩れがないかを確認します。

崩れを見つけた場合は、「iPhone17のSafariで見ると、トップページのボタンが重なっています」のように、機種とブラウザ名を添えて制作会社に報告すると、スムーズに修正してもらえます。

STEP5：公開・運用開始

公開・運用開始とは、テスト環境での確認を終えたWebサイトを本番環境にアップロードし、一般ユーザーが閲覧できる状態にする最終工程です。

多くの企業が「公開＝ゴール」と捉えがちですが、実際にはここが「成果を出すためのスタート」であり、日々の更新や保守管理が始まります。

本セクションでは、公開時に必ず行うべき「契約情報の管理」と、担当者が自力でサイトを更新するための「マニュアル整備」について解説します。

ドメインとサーバーの契約更新漏れ

Webサイトを表示するために必要な「ドメイン（住所）」と「サーバー（土地）」は、定期的な契約更新が必要です。

契約期間は「1年」が一般的ですが、サービスによっては「3年」や「5年」といった長期プランも選択でき、長く契約するほど料金が割安になるケースもあります。

これらは制作会社が管理を代行する場合もありますが、自社契約の場合、更新手続きを忘れると、ある日突然サイトが消滅してメールも使えなくなる大事故につながります。

よくある失敗は、契約時のメールアドレスが退職した前任者のままになっており、更新通知メールに気づかず期限切れになるケースです。

担当者は、契約情報を「個人のメール」ではなく「総務や広報のメーリングリスト」に設定し、支払いに使うクレジットカードの有効期限も合わせて管理台帳に記録します。

自分たちで更新するための「操作レクチャー」

「お知らせ」や「ブログ」など、頻繁に更新する部分は社内で作業できるように、WordPressなどの更新システム（CMS）を導入するのが一般的です。

ただし、納品時に操作方法を習得しておかないと、「使い方がわからず放置状態になっている」「間違った操作でレイアウトが崩れる」といった問題が発生します。

公開直後のタイミングで、制作会社にお願いして操作レクチャー会を開いてもらい、実際の画面を見ながら記事の投稿手順を教わるのが確実です。

その際、口頭の説明だけでなく、手順をまとめた「更新マニュアル」を作成してもらい、担当者が代わっても業務を引き継げる状態にしておきましょう。

成果を知るための「計測ツール（GA4）」の設定

Webサイトを公開したあとは、「どれくらいの人が見に来たか」「どのページが人気か」を知るために、Googleアナリティクス（GA4）やサーチコンソールといった計測ツールの設定も検討しましょう。

これらは標準で付いてくると思われがちですが、実際には追加オプションであったり、こちらから依頼しないと設定してくれなかったりするケースが少なくありません。

公開してからデータが取れていなかったことが判明すると、最も重要な初動の成果を検証できなくなってしまいます。

担当者は開発段階（コーディング中）で、「GA4とサーチコンソールのタグ設置もお願いします」と依頼し、公開日からデータが計測されるように準備しておきましょう。

公開後の不具合と「瑕疵（かし）担保期間」

Webサイト公開後に、「文字が間違っている」「ボタンが動かない」といった不具合（バグ）が見つかることは珍しくありません。

多くの制作契約には、こうした不具合を無償で修正する「瑕疵担保期間（または契約不適合責任）」が設定されていますが、具体的な期間は「納品後1か月〜6か月」と限定的であることが多いです。

不具合を見つけたのが1年後の場合、保証期間が過ぎていれば追加費用が発生してしまいます。

担当者は、公開から1週間〜2週間のうちに改めてサイト全体を入念にチェックし、気になる点があれば期間内にすべて報告して修正してもらうようにしましょう。

よくある失敗原因と対策チェックリスト

Web制作プロジェクトで発生するトラブルの多くは、実は「確認不足」と「準備不足」という2つの原因に集約されます。

本セクションでは、ここまでの工程を振り返り、担当者が特に注意すべき「物理的な落とし穴」をチェックリスト形式でまとめます。

「知らなかった」を防ぐための最終チェック

プロジェクトの各段階で、担当者が「やっておくべきだった」と後悔しやすい項目をリストアップしました。

これらは精神論ではなく、物理的に手配・確認することで回避できるリスクばかりです。制作会社に丸投げせず、自社でコントロールすべきリスクとしてご活用ください。

Web制作は「段取り」が成功のカギ

Web制作は専門用語が多く、プロジェクトの期間も長いため難しく感じられますが、成功の秘訣は「適切なタイミングで、適切な確認を行うこと」に尽きます。

どんなに優秀な制作会社であっても、発注者であるあなたの「目的」や「意思決定」がなければ、良いサイトを作ることはできません。

本記事で解説した以下の流れを常に手元に置き、現在地を確認しながらプロジェクトを進めてください。

• 企画：目的とターゲットを決め、社内合意を取る。
• 設計：ワイヤーフレームで「構成」を確定させる。
• 制作：素材を期限内にそろえ、デザインをターゲット視点で確認する。
• 開発：テスト環境を自社の複数端末（PC・スマホ）で確認する。
• 公開：実機テストを行い、更新体制を整える。

準備と確認を徹底すれば、手戻りやトラブルは確実に防げます。焦らず一つひとつの工程を着実にクリアして、成果につながるWebサイトを完成させてください。

無料相談を予約する

料金プランを見る