「WEBサイト制作って、結局どこから始めればいいの？」「外注する場合と自社で作る場合、何が違うの？」そんな疑問を持つ方は少なくありません。WEBサイト制作の成否は「とりあえずデザインから着手する」のではなく、企画・要件定義・設計・実装・公開・運用改善という正しい順序で進めることで決まります。本記事では、WEBサイト制作の全7フェーズを工程マップとともに解説し、費用相場やCMS選定、LP制作、リニューアルの判断基準まで網羅しました。自社制作でも外注でも使える実践的な内容です。ぜひ最後まで読んで、次のアクションに進んでください。
目次
WEBサイト制作の全体像｜7つのフェーズと工程マップ
WEBサイト制作は、大きく7つのフェーズに分けて進めるのが成功の鉄則です。「企画」「要件定義」「設計（ワイヤーフレーム）」「デザイン」「実装（CMS構築・コーディング）」「公開」「運用改善」の順で進行し、各工程の成果物が次の工程の土台になります。いきなりデザインやコーディングから始めると、制作途中でコンセプトのブレや手戻りが発生し、費用・期間ともに大幅に超過するリスクが高まります。
まずは全体像を把握し、それぞれのフェーズで何をすべきかを理解することが、プロジェクト成功への第一歩です。以下の表で、各フェーズの所要期間目安と主な成果物を確認してください。
| フェーズ | 主な作業内容 | 所要期間目安 | 主な成果物 |
|---|---|---|---|
| 1. 企画 | 目的設定・ターゲット決定・競合調査 | 2〜3週間 | 企画書・プロジェクト憲章 |
| 2. 要件定義 | 機能要件・システム要件・予算策定 | 2〜3週間 | 要件定義書 |
| 3. 設計 | サイトマップ・ワイヤーフレーム作成 | 2〜4週間 | サイトマップ・ワイヤーフレーム |
| 4. デザイン | デザインコンセプト・デザインカンプ | 2〜4週間 | デザインカンプ・スタイルガイド |
| 5. 実装 | コーディング・CMS構築・システム開発 | 4〜8週間 | 実装済みサイト（テスト環境） |
| 6. 公開 | テスト・修正・本番環境リリース | 1〜2週間 | 公開サイト |
| 7. 運用改善 | GA4設定・アクセス解析・コンテンツ更新 | 継続的 | 分析レポート・改善施策 |
一般的なコーポレートサイトの制作では、企画から公開まで約3〜5ヶ月が目安です。ECサイトや大規模サイトの場合は6ヶ月〜1年かかるケースもあります。スケジュールに余裕を持たせることで、テスト期間を十分に確保でき、品質の高いサイトを公開できます。
フェーズ1｜目的設定と要件定義
WEBサイト制作で最初にやるべきことは、サイトを作る目的と具体的なゴールの明確化です。「なぜサイトを作るのか」「サイトを通じてどのような成果を得たいのか」が曖昧なままでは、デザインもコンテンツも軸がぶれてしまいます。
サイトの目的を明確にする
WEBサイト制作の目的は、企業によって大きく異なります。主な目的としては「リード獲得（問い合わせ・資料請求）」「ブランディング（企業の信頼性向上）」「EC（商品販売）」「採用（求職者への訴求）」などが挙げられます。目的が異なれば、サイトの構成や必要な機能、ターゲットとなるユーザー層もすべて変わります。目的を決める際には、経営層やマーケティング担当者、営業担当者など関係部署を巻き込み、共通認識を持つことが重要です。
要件定義で決めるべき項目
要件定義は、WEBサイト制作の「設計図を作るための設計図」にあたる工程です。ここで決定した内容がプロジェクト全体の基盤になるため、時間をかけて丁寧に取り組む必要があります。決めるべき主な項目には、サイトの目的・KPI、ターゲットユーザーとペルソナ、必要なページ数と機能、技術要件（CMS・サーバー・セキュリティ）、対応デバイスとブラウザ、スケジュールと予算があります。ペルソナは「30代女性」のような大まかなターゲットではなく、職業、年収、休日の過ごし方、情報収集の手段まで具体的に設定することで、コンテンツやデザインの判断基準が明確になります。
要件定義の詳しい進め方やテンプレートについては、以下の記事で解説しています。
関連記事： Webサイト制作を成功させる要件定義の完全ガイド
フェーズ2｜ワイヤーフレーム設計
ワイヤーフレームは、WEBサイトの「設計図」です。色やビジュアルを排除し、「どのページに」「どの情報を」「どの優先順位で」配置するかを線と枠だけで表現します。この工程を飛ばしていきなりデザインに入ると、「必要な情報が抜けている」「導線が使いにくい」といった致命的な手戻りが発生しやすくなります。
ワイヤーフレームの役割と作り方
ワイヤーフレームの最大の役割は、制作に関わるすべての関係者が「同じ完成イメージを共有する」ことです。発注者、ディレクター、デザイナー、エンジニアがそれぞれ異なるイメージを持ったまま制作を進めると、完成後に「想定と違う」というトラブルが頻発します。ワイヤーフレームの作成手順は、掲載する情報の洗い出し、情報の優先順位付け、ページ内のレイアウト決定、ツールで清書という流れで進めます。
ワイヤーフレーム作成のツール選び
ワイヤーフレームの作成には、FigmaやAdobe XDなどのデザインツールが定番です。チームでのリアルタイム共同編集が可能なFigmaは、特に制作会社との共有に適しています。テンプレートを活用すれば、初心者でも短時間でプロ品質のワイヤーフレームを作成できます。近年はAIを活用したワイヤーフレーム生成ツールも登場しており、テキスト入力だけでたたき台を自動生成できるサービスも増えています。
関連記事：
フェーズ3｜CMS選定とWordPress構築
CMS（コンテンツ管理システム）を導入すれば、HTMLやCSSの専門知識がなくても、管理画面からテキストや画像を更新できます。公開後の運用を考えたとき、CMSの有無はサイトの更新頻度や鮮度を大きく左右するため、制作段階で適切なCMSを選定することが重要です。
CMS選定の判断軸
CMSを選ぶ際の主な判断軸は「サイト規模」「EC機能の有無」「運用体制」「予算」の4つです。小〜中規模のコーポレートサイトやオウンドメディアにはWordPressが最有力候補です。世界シェア60%超の圧倒的な利用実績があり、テーマやプラグインのエコシステムが充実しています。一方、大規模サイトで複数部署がコンテンツを管理する場合や、高度なセキュリティ要件がある場合には、Movable TypeやmicroCMSなどのヘッドレスCMSも検討対象になります。ECサイトの場合は、ShopifyやEC-CUBEなど専用プラットフォームとの比較検討が必要です。
WordPressを選ぶ場合の構築ポイント
WordPressでサイトを構築する際には、テーマ選び（既存テーマ or オリジナルテーマ）、サーバー環境の選定、セキュリティ対策の3つが重要なポイントです。オリジナルテーマは自社のブランドに最適化したデザインを実現できますが、開発コストが高くなります。既存テーマをカスタマイズする方法は、コストを抑えつつ高品質なサイトを構築でき、中小企業には特におすすめです。サーバーは表示速度に直結するため、WordPress専用のレンタルサーバー（エックスサーバー、ConoHa WINGなど）を選ぶと安心です。
関連記事：
フェーズ4｜WordPress拡張（プラグイン・フォーム・CTA）
WordPressの大きな強みは、プラグインによる機能拡張の柔軟性です。ただし、プラグインを闇雲に入れすぎると、サイトの表示速度低下やセキュリティリスクの原因になります。サイトの目的に応じて本当に必要なプラグインだけを厳選することが大切です。
目的別プラグインの選び方
プラグインは「必須系」と「目的別」に分けて考えると整理しやすくなります。必須系には、SEO対策（Rank Math SEO / Yoast SEO）、セキュリティ（Wordfence / SiteGuard WP Plugin）、バックアップ（UpdraftPlus）、キャッシュ・高速化（WP Super Cache / W3 Total Cache）があります。目的別では、問い合わせフォーム（Contact Form 7 / WPForms）、CTA設置（Bloom / OptinMonster）、FAQ構造化データ対応（Yoast SEO / Rank Math）などが挙げられます。
フォームとCTAの最適化
WEBサイトの成果を左右する最重要要素が「お問い合わせフォーム」と「CTA（行動喚起ボタン）」です。フォームは入力項目を必要最低限に絞り、ステップ表示にすることで離脱率を下げられます。CTAは、ファーストビュー、コンテンツの中間地点、ページ末尾の3箇所に設置するのがベストプラクティスです。ボタンのテキストは「お問い合わせ」よりも「無料で相談する」「3分で完了する資料請求」のように具体的なベネフィットを示す文言が効果的です。
関連記事：
- WordPressプラグインおすすめ40選
- WordPress必須プラグイン8選＋目的別12選
- WordPressフォームプラグイン7選
- WordPress CTAプラグイン15選
- WordPressセキュリティプラグイン10選
フェーズ5｜LP（ランディングページ）制作
LP（ランディングページ）は、1ページで訪問者を特定のコンバージョン（資料請求・購入・問い合わせなど）に導くためのページです。コーポレートサイトが「企業の総合案内所」だとすれば、LPは「特定商品のセールス担当者」のような役割を果たします。
LPとコーポレートサイトの違い
コーポレートサイトは、企業情報、サービス紹介、採用情報、ニュースなど、さまざまな目的のコンテンツが集約された複数ページ構成のサイトです。一方LPは、1つのCVアクション（購入・問い合わせ・登録など）に特化した1ページ構成が基本です。ナビゲーションメニューを極力排除し、ユーザーの注意をCVに集中させるのがLPの設計思想です。
CVに特化した構成の考え方
成果の出るLPは、「ファーストビュー（キャッチコピー＋メインビジュアル）→課題提起→解決策の提示→商品・サービスの特徴→導入実績・お客様の声→FAQ→CTA」という流れで構成します。特にファーストビューでユーザーの離脱を防ぐために、訪問者が抱える課題に直接訴えかけるコピーと、3秒で内容が伝わるビジュアルが不可欠です。広告経由でLPに流入するケースが多いため、広告文とLPのメッセージに一貫性を持たせることもコンバージョン率向上のポイントです。
関連記事： LP制作の作り方完全ガイド
フェーズ6｜ECサイト構築
ECサイトの構築方法は、「ASP・SaaS型（Shopify、BASEなど）」「オープンソース型（EC-CUBE、WooCommerceなど）」「パッケージ・フルスクラッチ型」の3つに大別されます。どの方法を選ぶかは、商品数、年間売上目標、社内の技術リソース、予算によって判断します。
構築方法の比較
| 構築方法 | 初期費用目安 | 月額費用目安 | 向いている規模 | 特徴 |
|---|---|---|---|---|
| ASP・SaaS型 | 0〜50万円 | 数千円〜数万円 | 小〜中規模 | 構築が早く、運用が簡単 |
| オープンソース型 | 100〜500万円 | サーバー費用のみ | 中〜大規模 | カスタマイズ性が高い |
| パッケージ・フルスクラッチ型 | 500万円〜数千万円 | 保守費用別途 | 大規模 | 完全オリジナル、自由度最大 |
費用感の概要
ECサイトの費用は、決済システムの導入、商品データベースの設計、物流システムとの連携など、通常のコーポレートサイトにはない項目が加わるため、コーポレートサイトよりも高額になる傾向があります。特に、複数の決済手段への対応、在庫管理システムとのAPI連携、セキュリティ対策（PCI DSS準拠）はコストが増加しやすいポイントです。補助金（IT導入補助金、小規模事業者持続化補助金など）を活用すれば、初期費用を大幅に抑えられる場合もあります。
関連記事：
WEB制作の費用相場と見積もりの見方
WEB制作の費用は「何にいくらかかるか」が見えにくいため、事前に相場を知っておくことが適正な発注の第一歩です。費用は、サイトの規模（ページ数・機能）と依頼先（フリーランス・制作会社・大手代理店）の組み合わせで大きく変動します。
規模別・依頼先別の費用比較
| サイト規模 | フリーランス | 中小制作会社 | 大手代理店 |
|---|---|---|---|
| 小規模（5〜10ページ） | 10〜50万円 | 50〜150万円 | 150〜300万円 |
| 中規模（10〜30ページ） | 50〜150万円 | 150〜400万円 | 300〜800万円 |
| 大規模（30ページ以上） | 150〜300万円 | 400〜1,000万円 | 800万円〜 |
見積もりを見るときのチェックポイント
見積書を受け取ったら、以下の項目が含まれているかを確認してください。ディレクション費、デザイン費、コーディング費、CMS構築費、サーバー・ドメイン費用、テスト・品質管理費、公開後の保守・運用費用が主な項目です。特に「修正回数の上限」「公開後の保守範囲」「素材（写真・テキスト）の制作費用」は見落としやすいポイントです。これらが見積もりに含まれていない場合は、追加費用が発生する可能性が高いため、事前に確認しておきましょう。複数社から見積もりを取り、同じ条件で比較することをおすすめします。
関連記事：
サイトリニューアルの判断基準と進め方
既存のWEBサイトが成果を出していない場合、部分的な改善で対応できるのか、全面リニューアルが必要なのかを見極めることが重要です。リニューアルは費用も期間もかかるため、「なんとなく古いから」ではなく、データに基づいた判断基準を持つことが失敗を防ぐ鍵です。
リニューアルすべきタイミングの判断軸
リニューアルを検討すべき代表的なサインは5つあります。
1つ目は、スマートフォン対応（レスポンシブ）ができていない場合です。現在、WEBサイトへのアクセスの7割以上がスマートフォン経由であり、スマホ非対応はユーザー離脱とSEO評価の低下に直結します。2つ目は、CMSが未導入で更新に専門知識が必要な場合です。情報の鮮度が落ち、検索エンジンからの評価も下がります。3つ目は、直帰率やCV率が悪化し続けている場合です。4つ目は、デザインが5年以上更新されていない場合です。5つ目は、検索順位が継続的に低下している場合です。これらのサインが複数当てはまるなら、リニューアルの検討を開始するタイミングです。
SEO順位を落とさない進め方
リニューアルで最も気をつけるべきリスクが、SEO順位の低下です。URL構造の変更、リダイレクト漏れ、コンテンツの大幅削減はいずれも検索順位に悪影響を与えます。既存URLから新URLへの301リダイレクト設定は必須です。また、既存ページのうちアクセスが多いページやCV貢献度が高いページは、コンテンツの質を維持したまま移行することが重要です。リニューアル前後でGoogle Search Consoleのインデックス状況やGA4のデータを比較し、問題が発生した場合は速やかに対処できる体制を整えておきましょう。
関連記事：
公開後の運用改善｜分析ツールとAI活用
WEBサイトは「公開したら終わり」ではなく「公開してからがスタート」です。アクセスデータをもとに改善を繰り返すことで、初めてサイトがビジネス成果を生み出す資産に育ちます。
公開後にやるべきGA4設定
サイト公開と同時に、GA4（Googleアナリティクス4）の設定を完了させましょう。GA4は、ユーザーの行動をイベント単位で計測できるため、従来のページビュー中心の分析よりも深いユーザー理解が可能です。最低限設定すべき項目は、コンバージョン（キーイベント）の設定、内部トラフィックの除外、クロスドメイン測定（複数ドメインがある場合）、Search Consoleとの連携の4つです。GTM（Googleタグマネージャー）を使ってタグを管理すれば、GA4だけでなくGoogle広告やMeta広告のタグも一元管理でき、運用効率が大幅に向上します。
Chrome拡張機能による競合分析
競合サイトの分析には、Chrome拡張機能が手軽で効果的です。Lighthouse（表示速度やSEO評価のスコアリング）、Wappalyzer（競合サイトの使用技術・CMSを判別）、SimilarWeb（推定トラフィック・流入元分析）、MozBar（ドメインオーソリティの簡易チェック）など、無料ツールだけでも競合の技術構成やトラフィック傾向を把握できます。
AIツールによる運用効率化
2026年現在、AIツールの活用はWEB制作・運用の効率化に欠かせない要素になっています。ChatGPTやClaudeによるコンテンツ草案の作成、Midjourney・DALL-Eによるイメージ画像の生成、GitHub CopilotによるコーディングのAI支援など、制作工程のほぼすべてにAIを組み込めるようになりました。ただし、AIが生成した成果物をそのまま使うのではなく、人間がファクトチェックと品質確認を行うことが品質担保の前提条件です。
関連記事：
よくある質問
WEBサイト制作にかかる期間はどのくらいですか？
一般的なコーポレートサイト（10〜30ページ程度）の場合、企画から公開まで約3〜5ヶ月が目安です。ただし、期間はサイトの規模・機能・制作体制によって大きく変わります。小規模サイト（5〜10ページ、名刺代わり程度）であれば1〜2ヶ月で完成するケースもあります。一方、ECサイトや会員機能付きの大規模サイトでは6ヶ月〜1年以上かかることもあります。スケジュールを短縮したい場合は、要件定義の精度を上げてから発注すること、素材（写真・テキスト）を事前に準備しておくこと、意思決定者を明確にし社内承認を迅速化することの3点が効果的です。逆に、スケジュールを無理に圧縮すると、テスト期間が不足してバグが残るリスクが高まるため注意が必要です。
WEB制作を外注する場合の費用相場はいくらですか？
WEB制作の外注費用は、小規模サイト（5〜10ページ）で50万〜150万円、中規模サイト（10〜30ページ）で150万〜400万円、大規模サイト（30ページ以上）で400万〜1,000万円以上が中小制作会社への発注相場です。フリーランスに依頼する場合はこの3分の1〜2分の1程度に抑えられますが、品質やサポート範囲にばらつきがある点に注意が必要です。大手代理店に依頼すると、中小制作会社の1.5〜3倍程度の費用がかかる傾向があります。費用を構成する主な項目はディレクション費、デザイン費、コーディング費、CMS構築費、テスト・品質管理費です。見積もりを比較する際には、修正回数の上限、素材制作費の有無、公開後の保守費用が含まれているかを必ず確認してください。
WordPressとそれ以外のCMS、どちらを選ぶべきですか？
結論から言うと、小〜中規模のコーポレートサイトやオウンドメディアにはWordPressが最もバランスの良い選択肢です。世界のWEBサイトの約60%以上がWordPressで構築されており、テーマ・プラグインの選択肢が圧倒的に豊富で、制作・運用のノウハウを持つ人材も多い点が強みです。一方、WordPressが向かないケースもあります。大量の商品を扱うECサイトの場合はShopifyやEC-CUBEの方が適しています。複数部門が独立してコンテンツを管理する大規模サイトでは、microCMSやContentfulなどのヘッドレスCMSも有力な選択肢です。高いセキュリティ要件がある場合は、Movable Typeのように静的ファイルを生成するCMSが向いているケースもあります。
サイトリニューアルでSEO順位を落とさないためにはどうすればいいですか？
サイトリニューアルによるSEO順位の低下を防ぐために最も重要なのは、301リダイレクトの設定と既存コンテンツの適切な移行です。具体的には、リニューアル前に全URLの一覧を作成し、新URLとの対応表（リダイレクトマップ）を作ることから始めます。URL構造が変わるページには必ず301リダイレクトを設定し、検索エンジンに「このページは恒久的に移動しました」と伝えます。アクセス数やCV貢献度が高いページのコンテンツは、品質を維持または向上させた状態で移行します。また、リニューアル公開後すぐにGoogle Search Consoleでインデックス状況を確認し、クロールエラーが発生していないかをチェックすることも必須です。リニューアルの前後でGA4のオーガニック流入数を比較し、異常があれば即座に原因を特定して対処する体制を作っておきましょう。
WEBサイト制作を自社で行うか外注するか、判断基準は？
判断基準は「社内リソース」「求める品質」「スピード」の3つです。社内にWEBデザイナーやエンジニアがいて、制作に十分な工数を割ける場合は内製が選択肢に入ります。内製のメリットは、自社のビジネスを深く理解した上で制作できること、修正・更新が即座にできること、長期的にはコスト削減につながることです。一方、社内にWEB制作の専門人材がいない場合や、高品質なデザイン・複雑なシステム開発が必要な場合は外注が適しています。外注のメリットは、専門家の知見を活用できること、社内リソースを本業に集中できること、最新の技術やデザイントレンドを取り入れやすいことです。中間的な選択肢として「戦略とディレクションは自社で行い、デザインとコーディングを外注する」ハイブリッド型も増えています。予算が限られている場合は、まず外注でベースサイトを構築し、公開後のコンテンツ更新は社内で内製化する方法がコストパフォーマンスに優れています。
まとめ｜目的別の制作ロードマップとご相談窓口
WEBサイト制作は、目的によって読むべき記事も、進め方も異なります。以下の表で、4つの代表的な制作パターンごとに参考になる記事を整理しました。自社の状況に合わせてご活用ください。
| 制作パターン | まず読むべき記事 | 次に読む記事 |
|---|---|---|
| コーポレートサイト新規制作 | 要件定義の完全ガイド、ワイヤーフレームの作り方 | CMS比較ランキング、WEB制作の費用相場 |
| ECサイト構築 | ECサイト構築の費用相場と方法 | ECサイト向けCMS比較12選、ECサイトSEO対策ガイド |
| サイトリニューアル | リニューアルのタイミング、チェックリスト40項目 | WEB制作の費用相場 |
| LP制作 | LP制作完全ガイド | WordPress CTAプラグイン15選、フォームプラグイン7選 |
WEBサイト制作は、企画から運用改善まで多くの工程があり、専門知識を要する場面も少なくありません。「自社の課題に合った制作プランを知りたい」「現在のサイトを診断してほしい」といったご要望がございましたら、お気軽にご相談ください。
InnoMarkのWEBサイト制作・UI/UX改善サービスを見る →
関連記事
InnoMark関連ページ：