「ホームページを作りたいけど、何から始めればいいかわからない」
「制作会社に依頼したら、公開まで何ヶ月かかるの？」
初めてホームページを作るお客様から、こうしたご質問をよくいただきます。
正直に言うと、ホームページ制作は「依頼したら待っていれば完成する」ものではありません。お客様と制作者が一緒に進めるプロジェクトです。だからこそ、全体の流れを事前に把握しておくことが、スムーズな制作と満足のいく仕上がりにつながります。
この記事では、現役のWeb制作エンジニアとして、発注から公開までの流れを6つのステップでわかりやすく解説します。各ステップで「制作者がやること」と「お客様にお願いすること」を分けて説明しますので、制作開始前の説明資料としてもお使いいただけます。
ホームページ制作の全体像｜発注から公開まで何ヶ月かかる？
全体フロー（6ステップ）
ホームページ制作は、大きく分けて以下の6ステップで進みます。
| ステップ | 内容 | 期間の目安 |
|---|---|---|
| 準備 | 目的・予算・素材の整理 | 依頼前に実施 |
| STEP1 | 問い合わせ〜ヒアリング | 1〜2週間 |
| STEP2 | 見積もり・提案〜契約 | 1〜2週間 |
| STEP3 | サイト設計・構成の決定 | 1〜2週間 |
| STEP4 | デザイン制作 | 2〜4週間 |
| STEP5 | コーディング・開発 | 2〜4週間 |
| STEP6 | テスト・修正〜公開 | 1〜2週間 |
STEP1からSTEP6までの合計で、おおよそ2〜4ヶ月が一般的な制作期間です。
ただし、これはあくまで目安です。サイトの規模、デザインのこだわり度、お客様側の確認スピードによって前後します。
規模別の制作期間一覧表
「うちの場合はどのくらいかかる？」という疑問に、もう少し具体的にお答えします。
| サイトの規模 | ページ数 | 制作期間の目安 | 費用感 |
|---|---|---|---|
| ランディングページ（LP） | 1ページ | 2週間〜1ヶ月 | 10万〜60万円 |
| 小規模コーポレートサイト | 5ページ程度 | 1〜2ヶ月 | 10万〜50万円 |
| 中規模コーポレートサイト | 10〜20ページ | 2〜4ヶ月 | 50万〜200万円 |
| 大規模サイト | 30ページ以上 | 4〜6ヶ月 | 100万〜300万円以上 |
中小企業で最も多いのは、5〜15ページ程度のコーポレートサイトです。この規模であれば、2〜3ヶ月で公開できるケースがほとんどです。
【準備】制作を依頼する前にやるべきこと
制作の依頼前に以下の3つを整理しておくと、ヒアリングから見積もりまでがスムーズに進みます。「完璧に決まっていなくても大丈夫」です。ざっくりでも方向性があれば、制作者は具体的な提案がしやすくなります。
目的・ターゲット・予算の3点を決める
最低限、以下の3つを考えておいてください。
① ホームページの目的
- 問い合わせを増やしたい
- 会社の信頼感を高めたい
- 採用を強化したい
- 既存のサイトをリニューアルしたい
「何のためにホームページを作るのか」が明確だと、制作者は目的に合った提案ができます。逆に、目的が曖昧なまま制作を始めると、「なんとなくきれいだけど成果が出ないサイト」になりがちです。
② ターゲット（誰に見てほしいか）
- 地域の個人客（例：横浜市の30〜40代女性）
- 取引先の企業担当者
- 求職者
ターゲットによって、デザインの方向性やコンテンツの書き方が大きく変わります。
③ 予算感
「30万円以内」「50万円くらいまで」など、ざっくりで構いません。予算に合わせて最適なプランを提案できます。
参考サイトを3〜5つ集める
デザインのイメージを言葉で伝えるのは、プロ同士でも難しいものです。
「こんな雰囲気のサイトにしたい」という参考サイトを3〜5つピックアップしておくと、制作者はかなり正確にイメージを掴めます。同業他社のサイトでも、異業種のサイトでも構いません。
「このサイトの色使いが好き」「このサイトのレイアウトが見やすい」「ここのフォントの雰囲気がいい」など、何が気に入ったかも一言添えると、さらに精度が上がります。
素材（写真・テキスト・ロゴ）の棚卸し
制作が始まってから「写真がない」「ロゴデータがない」と気づくケースは非常に多いです。事前に以下を確認しておくとスムーズです。
- 会社のロゴデータ：あるか／ないか。ある場合はデータ形式（AI、PNG、SVGなど）
- 使いたい写真：社屋、スタッフ、商品、施工事例など。スマホ撮影でもOK
- 掲載するテキスト：会社概要、サービス内容、代表挨拶など。箇条書きでも可
- サーバー・ドメインの契約情報：すでにサイトがある場合
素材の準備が難しい場合も心配いりません。プロのカメラマンの手配や、原稿の作成サポートに対応している制作者もいます。
依頼〜契約フェーズ（STEP1〜2）
【STEP1】問い合わせ〜ヒアリング（1〜2週間）
制作者がやること
- お問い合わせ内容の確認と初回のご連絡
- ヒアリング（オンラインまたは対面）の実施
- お客様の課題・要望・ビジネスの理解
お客様にやっていただくこと
- お問い合わせフォームやメールでの連絡
- ヒアリングへの参加（30分〜1時間程度）
- 準備段階で整理した内容の共有
ヒアリングで聞かれること一覧
初回のヒアリングでは、主に以下のことをお伺いします。事前にすべて決まっている必要はありません。一緒に考えていきましょう。
| カテゴリ | 聞かれること |
|---|---|
| ビジネスについて | 事業内容、強み、ターゲット顧客、競合他社 |
| サイトの目的 | 何を達成したいか（問い合わせ、採用、ブランディング等） |
| 現状 | 既存サイトの有無、不満点、改善したいポイント |
| ご要望 | 必要なページ、欲しい機能（ブログ、フォーム、予約等） |
| デザイン | 好みのテイスト、参考サイト、ブランドカラー |
| 条件 | 予算、希望納期、素材の準備状況 |
正直に言うと、ヒアリングの質が制作の成果を大きく左右します。制作者がお客様のビジネスを深く理解できるかどうかが、「問い合わせが来るサイト」と「見た目だけのサイト」を分ける最大のポイントです。
【STEP2】見積もり・提案〜契約（1〜2週間）
制作者がやること
- ヒアリング内容をもとに提案書を作成
- 見積書の作成
- 制作スケジュール案の提示
- 契約書の準備
お客様にやっていただくこと
- 提案内容の確認とフィードバック
- 社内での検討・意思決定
- 契約の締結
見積書で確認すべきポイント
見積書を受け取ったら、以下の5点を必ず確認してください。
- 内訳が項目別に分かれているか（「一式○○万円」は要注意）
- スマホ対応（レスポンシブ）が含まれているか
- 修正回数の上限が明記されているか
- 公開後のサポート範囲と期間
- サーバー・ドメインの管理者が誰になるか
「一式○○万円」とだけ書かれた見積書は、後から「それは含まれていません」というトラブルの原因になります。不明点があれば、遠慮なく制作者に質問してください。
制作会社とフリーランスの見積もりの違い
依頼先によって、見積もりの構造が異なります。
| 項目 | 制作会社 | フリーランス |
|---|---|---|
| ディレクション費 | 総額の10〜30%が加算 | 別途請求しないケースが多い |
| 人件費の構造 | 複数名が関与（営業・ディレクター・デザイナー・エンジニア） | 1人で複数工程を担当 |
| 費用相場（10ページ） | 50万〜200万円 | 30万〜80万円 |
| 見積もり回答の速さ | 1〜2週間 | 数日〜1週間 |
フリーランスの方が費用を抑えやすい理由は、中間マージンがなく、打ち合わせから制作、納品まで同じ人間が担当するからです。ただし、大規模なサイトや複雑な機能が必要な場合は、チーム体制のある制作会社の方が安心です。
設計〜デザインフェーズ（STEP3〜4）
【STEP3】サイト設計・構成の決定（1〜2週間）
サイトマップとワイヤーフレームとは
契約後、まず取りかかるのがサイトの設計です。この段階で作るのは、主に2つの資料です。
サイトマップ（サイト構成図）
サイト全体のページ構成を図にしたものです。「どんなページが必要か」「ページ同士の階層関係はどうなるか」を整理します。
“`
トップページ
├── サービス紹介
│ ├── サービスA
│ └── サービスB
├── 制作実績
├── 会社概要
├── お知らせ（ブログ）
└── お問い合わせ
“`
ワイヤーフレーム（画面設計図）
各ページのレイアウト（配置）を決める設計図です。色やデザインは入れず、「どこに何を置くか」だけを決めます。
ワイヤーフレームは家づくりで言う「間取り図」にあたります。この段階でページの構成や情報の優先順位を決めておくことで、デザイン段階でのやり直しを防げます。
この段階でのお客様確認ポイント
サイトマップとワイヤーフレームの確認は、制作全体の中で最も重要な確認作業です。
なぜなら、この段階で構成が固まった後にページの追加や大幅な変更があると、デザインもコーディングもやり直しになるからです。費用の追加や納期の延長につながることもあります。
確認のポイントは以下の3つです。
- 必要なページがすべて含まれているか
- 各ページに掲載する情報の優先順位は合っているか
- ユーザー（お客様のお客様）がスムーズに問い合わせまでたどり着ける構成か
「まだイメージが湧かない」という場合は、遠慮なく制作者に質問してください。この段階で疑問を解消しておくことが、後工程をスムーズに進める鍵です。
【STEP4】デザイン制作（2〜4週間）
デザインカンプとは
サイト設計が固まったら、次はデザインカンプ（デザインの完成見本）の制作に入ります。
デザインカンプとは、実際のホームページと同じ見た目で作られた画像のことです。色、フォント、画像、ボタンの形──完成後のサイトとほぼ同じ見た目になります。
一般的には、まずトップページのデザインを作成し、お客様の承認を得てから下層ページに進むという流れです。
| 工程 | 制作者の作業 | お客様の作業 |
|---|---|---|
| トップページデザイン | デザイン案の作成（1〜2週間） | デザイン案の確認・フィードバック |
| 修正対応 | フィードバックを反映（数日） | 修正結果の確認 |
| 下層ページデザイン | 承認済みデザインに合わせて展開（1〜2週間） | 下層ページの確認 |
フィードバックの出し方のコツ
デザインを確認いただく際、フィードバックの出し方が制作のスムーズさを大きく左右します。
伝わりやすいフィードバックの例
- 「ヘッダーの青色をもう少し濃くしたい」→ 具体的な箇所＋方向性がわかる
- 「この写真を別の写真に差し替えたい」→ 差し替えたい写真を添付
伝わりにくいフィードバックの例
- 「なんかイメージと違う」→ 何がどう違うのかわからない
- 「もっとかっこよくして」→ 人によって「かっこいい」の定義が違う
コツは、「どこを」「どうしたいか」をセットで伝えることです。言語化が難しい場合は、参考サイトのスクリーンショットを送っていただくだけでも十分伝わります。
また、社内で複数名が確認する場合は、フィードバックを1人にまとめてから制作者に送るのがおすすめです。Aさんは「青がいい」、Bさんは「緑がいい」と別々に連絡が来ると、制作者は判断できません。
開発〜公開フェーズ（STEP5〜6）
【STEP5】コーディング・開発（2〜4週間）
デザインが確定したら、いよいよ実際にホームページとして動く形にする工程です。この工程を「コーディング」や「実装」と呼びます。
WordPressで作る場合の工程
中小企業のコーポレートサイトで最も多いのが、WordPress（ワードプレス）を使った制作です。WordPressは世界中のWebサイトの約40%以上で使われているCMS（コンテンツ管理システム）で、公開後にお客様自身でブログの更新やお知らせの追加ができるのが最大のメリットです。
私の場合、WordPressで制作する際はSwell（スウェル）というテーマをベースに、お客様のデザインに合わせてカスタマイズしています。Swellは表示速度・SEO・使いやすさのバランスに優れた国産テーマです。
WordPressの場合の主な工程は以下の通りです。
- サーバー環境の構築・WordPress本体のインストール
- テーマのカスタマイズ（デザインの反映）
- 各ページの作成・コンテンツの流し込み
- お問い合わせフォームの設置
- SEOの初期設定（SEO SIMPLE PACKなど）
- スマホ・タブレット表示の最適化
- テスト環境でのお客様確認
モダン技術（Next.jsなど）で作る場合の工程
「表示速度を極限まで速くしたい」「将来的にWebアプリケーションへの拡張を見据えている」といったケースでは、Next.js（ネクストジェイエス）などのモダンな技術を使って制作することもあります。
WordPressとの主な違いは以下の通りです。
| 項目 | WordPress | Next.js |
|---|---|---|
| 更新のしやすさ | 管理画面から誰でも更新可能 | 更新はヘッドレスCMSと連携 |
| 表示速度 | テーマやプラグインに依存 | 非常に高速（静的サイト生成） |
| セキュリティ | プラグインの管理が必要 | 攻撃面が少なく堅牢 |
| 制作期間 | 2〜3ヶ月（テーマ活用で効率的） | 3〜4ヶ月（フルカスタム開発） |
| 適したケース | 自社更新が多い、ブログ重視 | 速度重視、大量ページ、拡張性重視 |
中小企業のコーポレートサイトであれば、多くの場合WordPressが最適です。ただし、サイトの目的や将来の展開によってはNext.jsの方が適しているケースもあります。
私は両方の技術で制作ができるので、お客様のビジネスに合わせて最適な技術をご提案しています。「どちらが合っているかわからない」という場合も、お気軽にご相談ください。
テスト環境での確認
コーディングがある程度進んだ段階で、テスト環境（本番公開前の確認用サイト）をお客様に共有します。
テスト環境では、実際のサイトと同じ画面を触りながら確認できます。
- ページの表示は正しいか
- リンクは正しく動くか
- スマホで見た時のレイアウトは問題ないか
- お問い合わせフォームは動作するか
- テキストや画像に間違いはないか
【STEP6】テスト・修正〜公開（1〜2週間）
公開前の最終チェック項目
テスト環境での確認・修正が完了したら、公開前の最終チェックに入ります。制作者側では、以下の項目を確認します。
| チェック項目 | 内容 |
|---|---|
| クロスブラウザチェック | Chrome、Safari、Edge、Firefoxでの表示確認 |
| スマホ・タブレット表示 | 主要な端末での表示・操作確認 |
| リンクチェック | すべてのリンクが正しいページに遷移するか |
| フォーム動作確認 | 送信テスト、自動返信メールの確認 |
| 表示速度 | PageSpeed Insightsでのスコア確認 |
| SEO設定 | title、description、OGP画像の設定確認 |
| SSL（https）対応 | 全ページがhttpsで表示されるか |
| ファビコン | ブラウザのタブに表示される小さなアイコン |
公開日当日の流れ
公開作業自体は、通常数時間で完了します。
- テスト環境から本番環境へのデータ移行
- ドメイン（URL）の設定・反映確認
- SSL証明書の設定確認
- 全ページの最終表示確認
- お客様への公開完了のご報告
公開直後はDNS（ドメインの設定情報）の反映に数時間〜最大48時間程度かかる場合があります。その間、一時的にサイトが表示されないことがありますが、正常な動作ですのでご安心ください。
公開後にやるべきこと・よくあるトラブルと対策
ホームページは「公開して終わり」ではなく、公開後の運用で成果が決まります。最低限、以下の3つは公開直後に対応しましょう。
Googleへのインデックス登録
公開しただけでは、Googleの検索結果にすぐには表示されません。Google Search Console（サーチコンソール）というツールを使って、Googleに「新しいサイトを公開しました」と知らせる必要があります。
この設定は制作者が対応しますので、お客様側での操作は不要です。通常、登録から数日〜2週間程度で検索結果に表示されるようになります。
アクセス解析の初期設定
Google Analytics（GA4）を設置して、サイトへのアクセスデータを計測できるようにします。
- 何人がサイトを訪問しているか
- どのページがよく見られているか
- どこからアクセスが来ているか（検索、SNS、直接アクセスなど）
データが溜まるまでに1〜3ヶ月ほどかかるため、公開直後から設置しておくことが大切です。
初期コンテンツの投稿
ブログやお知らせ機能を搭載している場合は、公開直後から定期的なコンテンツ投稿を始めましょう。
最初の1ヶ月で2〜3本の記事を投稿するだけでも、Googleからの評価が変わります。「何を書けばいいかわからない」という場合は、制作者に相談してみてください。
制作が遅れる5つの原因と防ぎ方
ここからは、実際の現場でよくある「制作が遅れるパターン」を5つご紹介します。事前に知っておくだけで、多くの遅延は防げます。
① 素材提供の遅れ
最も多い遅延原因がこれです。 特に、写真とテキスト原稿の提供が遅れるケースが頻発します。
制作者はデザインやコーディングを進めたくても、写真や原稿がなければ手が止まります。「後から差し替えればいいか」と思いがちですが、写真のサイズや文章量によってレイアウトが変わるため、仮素材での作業は手戻りの原因になります。
防ぎ方: 制作開始前に素材のリストを作成し、STEP3（設計段階）までに揃えるのが理想です。
② 社内の意思決定に時間がかかる
デザインの確認や修正方針の決定に、社内で複数人の承認が必要なケースです。「上長に確認します」「来週の会議で決めます」が繰り返されると、制作は大幅に遅れます。
防ぎ方: プロジェクト開始時に意思決定者（最終判断をする人）を1人決めておくことが重要です。確認事項はその方に集約しましょう。
③ 途中での仕様追加（スコープクリープ）
「やっぱりこのページも追加したい」「こんな機能もつけてほしい」──制作途中での追加要望は、制作現場では「スコープクリープ」と呼ばれ、スケジュール遅延の大きな原因です。
追加自体は対応可能ですが、費用と納期が変わることをご理解ください。
防ぎ方: STEP3（設計段階）でサイトマップを確定し、追加要望は公開後のフェーズ2として計画するのがおすすめです。まずは最小構成で公開し、効果を見ながら改善していく方が、結果的にコストパフォーマンスも高くなります。
④ フィードバックの分散
部署ごとに別々のフィードバックが送られてくるケースです。営業部は「もっと製品情報を目立たせて」、人事部は「採用情報を充実させて」、社長は「シンプルにして」──方向性がバラバラだと、制作者はどれを優先すべきか判断できません。
防ぎ方: フィードバックは1人の窓口担当者がまとめてから送るルールを社内で決めてください。矛盾する意見は社内で調整した上で、1つの方向性にまとめていただけると助かります。
⑤ 技術的な課題の発覚
「既存サイトからのデータ移行が想定より複雑だった」「連携させたい外部サービスのAPIに制限があった」など、制作を進める中で技術的な課題が見つかるケースです。
防ぎ方: これは制作者側の責任領域です。経験豊富な制作者であれば、ヒアリング段階で技術的なリスクを洗い出し、事前にスケジュールに余裕を持たせます。見積もり段階で「技術的に不明な点はありますか？」と確認してみてください。
よくある質問
制作途中でデザインを変更できますか？
STEP4（デザイン制作）の段階であれば、修正は可能です。ただし、多くの場合デザイン修正は2〜3回までという上限が設けられています。コーディング（STEP5）に入った後の大幅なデザイン変更は、追加費用が発生するのが一般的です。
素材（写真・テキスト）を用意できない場合は？
制作者が対応できるケースも多いです。写真はフリー素材（商用利用可能な無料写真）や有料素材を活用し、テキストはヒアリング内容をもとにライティングを代行できます。ただし、自社のオリジナル写真や、経営者自身の言葉で書かれた文章の方が、サイトの信頼性は格段に上がります。
制作期間を短縮する方法は？
以下の3つが効果的です。
- 素材を事前に揃えておく（最大2週間短縮）
- 確認・フィードバックを即日〜翌日で返す（最大2週間短縮）
- 意思決定者を1人に絞る（確認フローの短縮）
お客様側の対応スピードが速いプロジェクトは、驚くほどスムーズに進みます。
公開後の修正は別料金ですか？
制作者によって対応が異なります。一般的には、公開後1ヶ月〜3ヶ月間の軽微な修正は無料対応としているケースが多いです。それ以降の修正や、大幅な変更は別途費用が発生します。
保守契約を結んでいる場合は、契約範囲内での修正に対応してもらえます。保守の費用相場は月額5,000円〜30,000円です。
自分で更新できるようにしてもらえますか？
WordPressで制作すれば、お客様自身でブログの投稿やお知らせの更新が可能です。公開時に操作方法のレクチャーを行いますので、パソコンの基本操作ができれば問題ありません。
まとめ｜スムーズな制作のために大切なこと
| ステップ | 期間 | お客様の主な役割 |
|---|---|---|
| 準備 | 依頼前 | 目的・予算・参考サイト・素材を整理 |
| STEP1 ヒアリング | 1〜2週間 | 制作者との打ち合わせに参加 |
| STEP2 見積もり〜契約 | 1〜2週間 | 見積もり確認・意思決定・契約締結 |
| STEP3 サイト設計 | 1〜2週間 | サイトマップ・ワイヤーフレームの確認 |
| STEP4 デザイン | 2〜4週間 | デザイン案の確認・フィードバック |
| STEP5 開発 | 2〜4週間 | テスト環境での確認 |
| STEP6 テスト〜公開 | 1〜2週間 | 最終確認 |
スムーズなホームページ制作のために、最も大切なのは以下の3つです。
- 事前準備をしっかりする（目的、素材、参考サイト）
- 確認・フィードバックは早めに返す
- 窓口担当者を1人に決める
この3つを意識していただくだけで、制作の進行は驚くほど変わります。逆に言えば、制作が長引くプロジェクトの原因の多くは、技術的な問題ではなくコミュニケーションの問題です。
ホームページ制作は、お客様と制作者の共同作業です。お互いの役割を理解し、協力して進めることで、ビジネスに本当に貢献するホームページが完成します。
First CHでは、初めてホームページを作るお客様にも安心していただけるよう、制作の流れを丁寧にご説明した上でプロジェクトを進めています。
「まず何を準備すればいいの？」──そんな段階からでも、お気軽にご相談ください。
