Webサイト構築の手順ガイド！サイト設計から公開まで徹底解説

制作会社への発注が初めてだと、要件定義やサイト設計といった言葉自体が抽象的に見えて、どこまで自分たちで決めるべきなのか判断がつきにくいものです。

この記事では、Webサイト構築の意味と、マーケティング視点での目的設定・要件定義からサイト設計、制作、リリースまでの実務の順序を整理します。サイトの向きと、自作・ツール・制作会社・パッケージの違いも表で置きます。期間と費用の目安もあわせて置くので、無理のない予算とスケジュールを組み立てる材料としても使っていただけます。

これから初めてWebサイト構築を担当する方、制作会社とのやり取りに不安がある方に向けた内容です。

⇒　900件以上の構築実績から生まれた『型』でリスクを抑える。AI駆動セルフ開発ツール『S-MASE』の詳細を見る

Webサイト構築とは？

Webサイト構築とは、Webサイトの企画・要件定義・設計・制作を行い、インターネット上に公開するまでの一連のプロセスのことです。

Webサイト構築では、「要件定義」が土台となり、内容が固まって初めて「サイト設計」「デザイン」「コーディング」といった具体的な作業に進みます。この土台となる部分を飛ばして見た目から作り始めると、後の工程で手戻りが発生しやすくなります。

同じ「構築」でも、目的で増える論点が変わる

Webサイトを作りたいと一口に言っても、会社の顔を置くのか、1枚で申し込みを取るのか、購入まで完結させるのかで、サイト設計も実装も変わります。

向き	主な目的	向く成果物の目安	構築で増えやすい論点
コーポレートサイト	信頼、会社概要、問い合わせ	トップ、事業、実績、採用、フォーム	誰向けの導線を上位に置くか、更新担当
ブランドサイト	世界観、ファン化	ストーリー、ビジュアル、コンテンツ	トーンの統一、数値目標の置き方
サービスサイト	機能・導入効果の説明	機能、料金、事例、比較、資料請求	検討中の人が持ち帰る情報の設計
プロモーションサイト	期間限定の認知・応募	特設ページ、キャンペーンLP	公開終了後の扱い、計測の期限
LP（ランディングページ）	1つの行動に絞る	1〜数ページ、フォーム	広告との接続、ファーストビュー
採用サイト	応募の質と数	職種、人、制度、エントリー	コーポレートとの役割分担
ECサイト	閲覧から決済まで	商品、カート、会員、注文管理	決済、在庫、手数料、法令表示
マッチング／ポータル	人と情報をつなぐ	検索、掲載、会員、取引	両面の導線、運営ルール、拡張

複数の向きが1つのドメインに同居することも多いです。その場合に起きやすいのは、全部をトップページの同じボタンで処理しようとすることです。採用と製品の資料請求は、フォーム項目も成功の定義も別、と考えた方が扱いやすいです。

金額の階層は向きと規模で変わるため、詳細は【種類・規模別】サイト構築費用の相場と失敗しない依頼先の選び方を見てください。

手順は先に全体像を見る

「まずデザイン案が欲しい」と感じるのは自然なことだと思います。ただ、実務では要件定義とサイト設計が先に来ます。ここを飛ばすと、途中で「そもそも誰向けのページだったか」が揺れやすくなります。

少し整理してみましょう。一般的なWebサイト構築の手順は、次の8つです。

順番	工程	担当者が先に決めること	主な成果物
1	企画・要件定義	目的、ターゲット、成功の定義、予算の上限	要件定義メモ、KPIの仮説
2	RFP作成・発注先選定	依頼範囲、希望納期、比較の観点	RFP（提案依頼書）、見積比較表
3	サイト設計	必要なページ、導線、更新の単位	サイトマップ、ワイヤーフレーム
4	デザイン	ブランドのトーン、参考サイト、NG表現	デザインカンプ、スタイルの指針
5	インフラ準備	ドメイン、サーバー、SSLの契約主体	本番／テスト環境
6	実装	CMSで更新する範囲、必要な機能	HTML/CSS/JS、CMS、システム
7	テスト・公開	確認観点、公開日時、障害時の連絡先	チェックリスト、公開サイト
8	運用開始	誰が・何を・どの頻度で見るか	解析設定、更新ルール

LP（ランディングページ）のようにページ数が少ない場合は、3〜6を短く圧縮できます。会員機能や決済、マッチングのようなシステムが入ると、1と6の比重が上がります。

総務省の令和7年通信利用動向調査では、2025年のインターネット利用率（個人）は85.7%、端末別ではスマートフォン（74.3%）がパソコン（45.6%）を28.7ポイント上回っています。情報通信白書でも同じ数値が示されています。

要件定義の段階でスマートフォンでの閲覧を前提にコンセプトを置くことは、もはや選択肢ではなく前提に近い、と言えるかもしれません。

要件定義で固めておきたいこと

Webサイト構築の最初のつまずきどころは、実はこの要件定義ではないでしょうか。「とりあえずデザインを決めたい」という気持ちはよくわかります。ただ、要件定義を丁寧に行うかどうかで、プロジェクトの迷走リスクはかなり変わってきます。

マーケティング視点では、最低限次の項目を文章にしておくことをおすすめします。完璧な資料である必要はなく、「関係者が同じ紙を見て話せる状態」が目安です。

項目	決めておく内容
目的	サイトで何を実現したいか（リード獲得、採用、ブランディング、販売など）
ターゲット	具体的なペルソナと、その人が今どこで情報を探しているか
検索の言葉	指名系・悩み解決系で、どんな言葉がどれくらい検索されているか
成果の仮説	構築費・広告費・人件費に対して、どのタイミングで元が取れそうか
コンセプト	6W2H（When／Where／Whom／What／Why／How／How much）で認識をそろえる
更新の主体	公開後、誰が原稿を書き、誰が公開ボタンを押すか

目的は「作ること」ではなく「達成すること」

構築自体は手段です。「新しいサイトがある状態」を成功と定義してしまうと、デザインの好みで議論が止まりやすくなります。問い合わせ件数、資料請求、採用エントリー、来店予約——何件を、いつの時点で目指すかを一文で書いておくと、後工程の判断が安定しやすいです。

目的が複数あること自体は問題ではありません。問題になりやすいのは、採用も製品紹介もIRも、同じトップページと同じCTAで処理しようとすることです。

ターゲットは「ペルソナの似顔絵」だけで終わらせない

「30代の決裁者」まで書けていても、その人が市場にどれくらいいるのか、競合がどこを押さえているのかまで見ていないと、コンテンツの優先順位が決まりません。社内の営業が実際に会っている相手と、サイト上で想定している相手がズレていないか、一度確認してみるとよいかもしれません。

検索キーワードは、作るページの根拠になる

Googleキーワードプランナーなどで、次の3層を見ると、サイトマップに載せべきページが見えてきます。

• 商品名・会社名（指名系）
• 用途や比較の言葉（検討系）
• 悩みや失敗を表す言葉（課題系）

検索回数が極端に少ないテーマだけを並べると、公開後に「誰もたどり着かない」状態になりがちです。逆に、検索は多いのに自社で答えられないテーマを無理に置くと、期待と中身がずれます。X（旧Twitter）やInstagramで話題になっている言葉も、検索回数とあわせて見る材料になります。

成果シミュレーションは粗くてよい

3か月・半年・1年の3点で、費用と想定成果を並べてみましょう。精度より「赤字が何カ月続く想定か」を共有できることの方が、予算会議では使いやすいのではないでしょうか。

• 費用：構築費、広告費、関わる人の工数
• 成果：問い合わせ単価、受注率、採用一人あたりのコストなど、事業側の数字

数字が全く立たない場合は、Webで訴求するより展示会や既存顧客への案内が先、という判断もあり得ます。その判断ができること自体が、要件定義の役割です。

コンセプトは6W2Hで一文ずつ書く

よく使われる5W1Hより、Webサイト構築では How much（いくらの予算で実現するか）を足した6W2Hの方が、関係者の認識はそろいやすいです。

• When：いつ公開し、いつ成果を見るか
• Where：通勤中のスマホか、社内のデスクトップか
• Whom：誰に読んでほしいか
• What：何を訴求するか
• Why：その人がサイトを使うと、何が変わるか
• How：情報の出し方、導線、更新の仕方
• How much：構築と運用に使える予算

キャッチコピー、サイト名、ベースカラー、公開希望日も、このタイミングで仮置きしておくと、デザイン工程での「思っていたのと違う」は減りやすいです。

予算の上限が見えたら、次はRFP（提案依頼書）です。書き方に迷う場合は、０から分かる！RFP（提案依頼書）の書き方解説もあわせてご覧ください。

サイト設計は「どこに何を置くか」を先に決める作業

サイト設計とは、どのコンテンツをどの階層に置き、ユーザーが迷わず目的のページへたどり着けるようにする作業です。

ここで作るサイトマップは、検索エンジン向けのXMLサイトマップとは別物です。人間が読む「サイト構成図」を指します。Excelやスプレッドシートで、ページ名、想定URL、親ページ、担当、優先度を並べるだけでも十分機能します。

要件定義で調べた検索キーワードのボリュームを、ページの優先順位に使うと、感覚だけの構成より説得力が出ます。「会社概要を厚くしたい」という社内の希望と、「今探されている言葉」が食い違うときは、後者を上位に置く判断もあり得ます。

ワイヤーフレームで、先に動きを決める

サイトマップが固まったら、主要ページのワイヤーフレームを作ります。ワイヤーフレームとは、見出し・本文・画像・ボタンをどこに置くかを図式化したものです。色や写真はまだ入れません。

ユーザーがそのページで「何を見て、どのボタンを押してほしいか」を先に決めるための図、と考えると扱いやすいです。色の好みで議論が始まる前に、情報の順番だけを確認できます。

現場に多いツールは、次のようなものです。

• Figma：デザイン会社との共同作業の標準になりやすい
• PowerPoint / Googleスライド：社内確認用なら、これで足りることも多い
• Adobe XD：過去資産として残っている場合がありますが、新規案件の第一候補にはなりにくい

ポイントはツールの上手さより、「このブロックは何のためにあるか」を一言で説明できることです。説明できないブロックは、削る候補になります。

デザインからリリースまでの制作工程

サイト設計が終わると、制作フェーズに入ります。ここからは成果物が見えるので進んでいる実感は出やすい半面、上流で曖昧だった論点が表面化しやすい工程でもあります。

1. デザイン作成
   ワイヤーフレームをもとに、配色・トーン・写真の方向を決める。ベースカラー、メインカラー、アクセントカラーと、参考サイト／NGサイトを先に共有しておくと、修正の往復は減りやすいです。
2. サーバー・ドメイン・SSLの準備
   レンタルサーバーの契約、ドメイン取得、常時SSL化。個人情報を扱うページに限らず、サイト全体をHTTPSにするのが2026年の標準です。契約名義は自社にしておくと、将来の乗り換えが楽になります。
3. コーディング
   HTML / CSS / JavaScriptで、デザインをブラウザ上に再現する。レスポンシブ対応（スマートフォン表示）は、今はオプションというより前提です。
4. システム開発
   問い合わせフォームを超えて、会員、決済、予約、マッチングなどが必要な場合に入る工程です。コーディングと並行することが多いです。
5. テスト
   表示崩れ、フォーム送信、メール到達、計測タグ、複数ブラウザ・複数端末。修正用の日数を最初からスケジュールに入れておくと、公開日がずれにくいです。
6. リリース：本番サーバーへアップロードし、DNSを切り替える。公開直後の不具合に備え、金曜日や連休前のリリースは避けておくと安心です。

セキュリティは、後回しにされがちな部分ではないでしょうか。IPA「安全なウェブサイトの作り方」は、届出の多かった脆弱性をもとに対策を整理した資料です。フォームや会員機能があるサイトでは、コーディングに入る前に「どの項目を実装時のチェックに含めるか」を制作会社と共有しておくことをおすすめします。運用面の点検項目は、同機構の安全なウェブサイトの運用管理に向けての20ヶ条も参照できます。

原稿と写真の用意が遅れると、デザインも実装も止まります。社内確認に時間がかかる会社ほど、素材の締め切りを工程表の前倒しに置いた方がよいかもしれません。

期間と費用は「ページ数」より「決める量」で伸びる

「コーポレートサイトなら3か月」と聞いても、自社のケースに当てはまるかは分かりにくいものです。期間を左右しやすいのは、ページ数そのものより、次の3つです。

• 関係者の人数（決裁が何段階あるか）
• 原稿と写真を誰が用意するか
• 会員・決済・他システム連携の有無

目安として置くなら、次の表です。
※数字は現時点での相場感であり、条件で前後します

規模の目安	期間の目安	費用の目安	向いているケース
LP（1〜数ページ）	数日〜数週間	30万〜80万円	キャンペーン、検証
小規模（おおよそ10〜30ページ）	1〜3か月	30万〜80万円	会社案内＋採用＋問い合わせ
中規模コーポレート	3〜5か月	100万〜300万円	CMS、事例、サービス複数
大規模・システム搭載	半年以上	500万円〜	EC、会員、マッチング、ポータル

同じ「小規模」でも、テンプレート寄りの実装とオリジナルデザインでは幅が出ます。ECやマッチングは種類によって300万円台から1,000万円超まで分かれることがあり、桁が変わるのは機能が事業の核になるかどうか、という見方です。

種類別の階層は【種類・規模別】サイト構築費用の相場と失敗しない依頼先の選び方側にまとめています。見積書を開いたときは、金額そのものより内訳の分解が先になります。

構築費用に入りやすい項目は、次のとおりです。

• 企画・ディレクション、デザイン、コーディング、CMS構築
• サーバー、ドメイン、SSL
• 公開後の保守（監視、バックアップ、脆弱性対応）
• 更新・改善（お知らせ追加と、成果を増やす改修は別物になりやすい）

「制作一式」とだけ書かれた見積もりは、保守と改善のどちらが入っているかが分かりません。複数社から内訳付きで取り、同じ行項目で並べると、安さの理由が見えてきます。公開後の月額は、Webサイトの運用費用はいくらかかる？で内訳を整理しています。

自分で決める範囲と、制作会社に任せる範囲

要件定義はこちらでやるべきか、制作会社に任せるべきか。発注が初めてだと、この境界が一番見えにくいところだと思います。

領域	発注側が持っておいた方がよいもの	制作会社に任せやすいもの
目的とKPI	事業として何件取れれば成功か	指標の計測設計、GA4の設定
ターゲット	営業が実際に会っている相手	ペルソナの言語化、導線案
コンテンツ	事実、数字、事例、許諾の取れた写真	構成案、原稿の下書き、見出し
サイト設計	「この情報は必須／不要」の判断	サイトマップ、ワイヤーフレーム
デザイン	ブランドのNG、既存のトーン	配色、コンポーネント、カンプ
機能	今すぐ必要か、半年後でよいか	実装方法、CMSの選定
インフラ	契約名義、更新担当	サーバー設定、SSL、移行
公開後	更新の頻度と担当者	監視、バックアップ、改修提案

全部を社内で決めきってから相談する必要はありません。逆に、全部を「お任せします」にすると、出来上がりを見てから初めて意見が出て、手戻りになります。

判断の目安は、「自社にしか分からないこと」と「作り方の専門性」の切り分けです。前者は発注側、後者は制作側。会議で迷ったら、「これは事業の話か、作り方の話か」と一度問い直すと、議論の場所が戻りやすいです。

自作・ツール・制作会社・パッケージ、どれで作るか

自分で作るか、会社に頼むかの2択に見えがちですが、現在では手段はもう少し分かれます。費用の安さだけで選ぶと、公開後に「直したい箇所が直せない」が先に来ることがあります。

手段	向いているケース	抑えやすい点	後から重くなりやすい点
自作（HTMLやCMSを内製）	更新担当が社内にいる、ページ数が少ない	外注費、修正の速さ	設計・セキュリティ・引き継ぎの属人化
ツール・AI（ノーコード等）	名刺代わり、検証、キャンペーン	初期費用、公開までの日数	独自機能、データの持ち出し、デザインの枠
制作会社への依頼	設計から伴走してほしい、品質を揃えたい	要件の言語化、デザインと実装の分担	要件が曖昧なままだと手戻りと追加費用
パッケージ基盤	会員、マッチング、コミュニティなど機能が事業の核	ゼロからの開発期間、よく使う機能の再発明	要件に合わない製品を選ぶと、改修が積み上がる

コーポレートの案内程度なら、ツールや自作でも足りることがあります。一方で、会員や取引、投稿のように「人と人がつながったあと」までサイトで扱うなら、最初から「借りる／持つ」を含めて比較した方が、作り直しは減るかもしれません。

公開前に見ておきたい注意点

注意点を工程と切り離して並べると、読んだ瞬間は分かった気になって、現場では使われないことがあります。公開前の確認として、次だけは見ておくとよいかもしれません。

• 目的と数値が残っているか
  キックオフ資料の一文が、公開直前のページにも残っているか
• スマートフォンで読めるか
  ファーストビューの見出しとボタンが、親指の位置で届くか
• 著作権と肖像
  素材サイトの「商用利用可」でも、クレジット条件や枚数制限があることがあります。無断利用は著作権法上の問題になり得るため、出典と許諾は一覧にして残しておきましょう
• 常時SSLとフォーム
  入力内容がHTTPSで送られているか、完了メールが届くか
• 計測が生きているか
  問い合わせ完了をコンバージョンとして拾えるか
• 公開日
  平日の午前など、担当者がすぐ動ける時間帯か

地道に改善するは正しいのですが、改善の中身が決まっていないと、お知らせの更新だけで1年が過ぎます。公開時点で最初の30日に見る数字を3つだけ決めておくと、運用に入りやすいです。

よくある質問（FAQ）

まとめ：手順を知るより先に、「誰の何を達成するか」を一文にしませんか

Webサイト構築の失敗談でよく聞くのは、デザインの好みが割れ続けたプロジェクトです。見た目の話が長引くとき、その下では目的の一文が共有されていないことが多いのではないでしょうか。

手順そのものは、企画 → サイト設計 → デザイン → 実装 → テスト → 公開、とどの会社でも大きくは変わりません。差が出るのは、各工程の入口で「これは事業の判断か、作り方の判断か」を分けられるかどうかです。サイト設計は間取り、デザインは内装、公開は引き渡し。住み始めてから使い勝手を直すのが運用、という順番で捉えると、発注範囲も見積もりの読み方も変わります。

まず現状を、目的・ターゲット・公開後の担当、の3点だけでも書き出してみませんか。カスタメディアでは、その整理からサイト構築と公開後の改善までを一つの流れとして考えることができます。

⇒　900件以上の構築実績から生まれた『型』でリスクを抑える。AI駆動セルフ開発ツール『S-MASE』の詳細を見る