ホームページ制作の流れとは?依頼から公開までの全工程をわかりやすく解説
ホームページ制作は、「デザインを作って公開する」だけではありません。ヒアリングから事業理解、設計、デザイン、コーディング、公開後の運用まで、多くの工程を経て完成します。
この記事では、制作実績500件以上のWeb制作会社ENVY DESIGNが、依頼から公開までの全工程をわかりやすく解説します。「何から始めればいいかわからない」「何を準備すればいいかわからない」という方に向けた内容です。この記事を読めば、制作の全体像と、制作会社選びで失敗しないためのポイントがわかります。
制作会社によって異なるポイント|分業型と一貫対応型の違い
ホームページ制作の流れは、どの制作会社でもおおむね似ています。しかし、各工程の進め方には大きな差があります。
| 工程 | 分業型の制作体制 | 一貫対応型(ENVY DESIGN) |
|---|---|---|
| ヒアリング | 営業担当やディレクターが対応し、制作チームに共有 | デザイナーとディレクターが直接対応。その場で提案も可能 |
| 見積もり | ヒアリング後、社内で検討して後日回答 | ヒアリング時に概算をお伝えすることも可能。その後検討して詳細なお見積もりを作成 |
| 制作中のやり取り | 担当者を通じてやり取り。丁寧だが間に人が入る分、時間がかかることも | 制作者と直接やり取りするため、認識のズレが起きにくい |
| 進め方 | 工程ごとに確認・承認を経て進行 | プロトタイプを活用するなど柔軟に進行。手戻りが少ない |
| 公開後の保守 | 保守プランを用意している会社が多い。契約が必須の場合もある | 保守契約は提案するが、必須ではない。他社や自社での対応もOK |
分業体制は大規模案件や専門性の高い領域に強みがあります。一方で、小規模〜中規模の案件では一貫対応の方がスムーズに進むケースも多いです。ENVY DESIGNでは制作者が最初から最後まで一貫して対応する体制をとっており、営業を介さず直接やり取りするため、認識のズレが起きにくく、結果として手戻りが少なくなります。
実際にご依頼いただいたお客様からも、こうした声をいただいています。
「業務の特殊性を踏まえ、密度の濃いコミュニケーションをいただき、求めていたイメージを希望納期で実現できました。ちょっとした質問にも丁寧に答えていただき、安心してお任せできました」
株式会社文化財保存計画協会 木本様(お客様の声より)
ホームページ制作の流れ ― 依頼から公開までの10ステップ
一般的なホームページ制作の流れは以下の通りです。お客様のご要望や要件によって工程は増減しますが、基本的にはこの順番で進みます。
Step 1. ヒアリング
制作の最初のステップは、お客様の事業内容・課題・ホームページの目的をお聞きするヒアリングです。
ENVY DESIGNでは、制作を熟知したデザイナーやディレクターが直接ヒアリングを行います。営業担当を介さないため、その場で「こうした方が良いですよ」という提案も可能です。「まだ何も決まっていない」「資料がない」という状態でも問題ありません。また、制作者がヒアリングを行うため、その場で概算の見積もりをお伝えすることも可能です。「まず費用感だけ知りたい」という方にも対応できます。
初めてホームページを作る方の中には、ドメインやサーバーの仕組みが分からない方も多いです。WordPressなどの更新システムについてもピンとこないという声をよくいただきます。こうした基本的なことからていねいにご説明しますので、安心してご相談ください。
Step 2. 事業理解・競合調査
ヒアリングで伺った内容をもとに、お客様の事業をより深く理解し、競合サイトの調査を行います。
同業他社のサイトがどのような構成・デザイン・訴求をしているかを分析し、差別化のポイントを整理します。この工程があるからこそ、「なんとなくきれいなサイト」ではなく、事業課題を解決するサイトが作れます。
Step 3. ペルソナ設計
ホームページを「誰に向けて作るか」を明確にするために、ターゲットとなるユーザー像(ペルソナ)を設計します。
年齢・職業・課題・情報収集の方法などを具体化することで、デザインやコンテンツの方向性がブレなくなります。
Step 4. サイト設計
サイト全体の構成(サイトマップ)を設計します。どんなページが必要で、それぞれのページでどんな情報を伝えるかを決めます。
お客様の側で既に構成を想定されている場合は、それをベースに進めることもあります。ただし、ユーザビリティやSEOの観点からおかしい点があれば、弊社から提案・調整させていただきます。
どんなページが必要かわからない方は、ホームページ制作で必要なページの考え方もご覧ください。
Step 5. ワイヤーフレーム作成
ワイヤーフレームとは、ページのレイアウトや情報の配置を決める「設計図」です。デザインに入る前に、何をどこに配置するかを視覚的に確認できます。
この段階でお客様と認識をすり合わせることで、デザイン段階での大きな手戻りを防ぎます。
Step 6. ライティング
ホームページに掲載するテキストの作成です。キャッチコピー、サービス説明、会社紹介文などが含まれます。
ENVY DESIGNでは、素材や資料が揃っていなくても少しずつ形にしていくスタイルで進めます。ヒアリングの内容からたたき台を作成し、打ち合わせを重ねてブラッシュアップしていくことが多いです。
また、SEOを意識したライティングを行うことで、独自性の高いコンテンツに仕上げます。お客様ご自身で文章を書いていただくことで、商品やサービスへの深い理解が反映された、より説得力のあるコンテンツになることもあります。
Step 7. デザイン
ワイヤーフレームとテキストをもとに、実際のビジュアルデザインを制作します。色、フォント、写真の選定、レイアウトの細かな調整を行います。
ENVY DESIGNではデザインにAIは一切使用せず、すべて人の手で制作しています。また、修正回数に制限はありませんので、納得いただけるまで調整します。制作会社によっては工程管理の都合で回数制限を設けているケースもありますので、依頼前に確認しておくと安心です。
Step 8. コーディング
完成したデザインを、HTML・CSS・JavaScriptなどを用いてWebブラウザで表示できる形にする工程です。
レスポンシブ対応(スマートフォン・タブレットへの最適化)も、この工程で行います。追加費用はかからず、標準で対応しています。
Step 9. CMS構築
お知らせやブログなど、お客様自身で更新したいページがある場合は、WordPressなどのCMS(コンテンツ管理システム)を導入します。
Web知識がなくても操作しやすいよう、カスタムフィールドを活用して入力画面をわかりやすく設計します。更新が不要な場合は、CMSを導入せず費用を抑えることも可能です。
Step 10. 公開・運用支援
テスト環境での確認を経て、本番環境に公開します。公開後は、Google Analyticsの設定やSearch Consoleの登録など、アクセス解析の準備も行います。
公開して終わりではなく、運用サポートとして、コンテンツ更新・SEO対策・アクセス解析による改善まで対応可能です。SEOの基本についてはGoogle公式SEOスターターガイドも参考になります。最近ではAIO(AI検索最適化)対策にも取り組んでおり、AI検索からの流入増加にも実績があります。
「着実にアクセス数・問い合わせ数が増え、しっかりと利益に結びついています」
WESTFIELD Design Partners様/synchlogo(お客様の声より)
制作会社選びで起きがちな失敗とは?
ENVY DESIGNには、他社で制作を進めたものの途中で乗り換えてこられるお客様もいらっしゃいます。実際にお聞きした「前の制作会社で困ったこと」をご紹介します。
デザインの修正に応じてもらえなかった
「修正回数に制限があり、3回目以降は追加費用がかかると言われた」「修正を依頼したら、デザイナーに言いくるめられてそのまま進んでしまった」という声があります。
ENVY DESIGNでは修正回数に制限を設けていません。お客様が納得するまで調整を続けます。また、制作者が直接対応するため「なぜこのデザインにしたか」をその場でご説明でき、一方的に押し通すことはありません。
「かなり細かい要望や頻繁な修正依頼をしましたが、丁寧に対応いただきました。断然コスパは良かったです」
株式会社朝明商事 NF様(お客様の声より)
更新作業の納期を守ってもらえなかった
「お知らせの更新を依頼したのに、いつまで経っても反映されない」「キャンペーンの開始日に間に合わなかった」という相談もあります。公開後の運用フェーズでのトラブルは、ビジネスに直結するだけに深刻です。
ENVY DESIGNでは、更新依頼にはスピーディに対応する体制を整えています。営業を通さず制作者に直接連絡できるため、伝達の遅れが起きにくい構造です。
失敗を避けるためのチェックポイント
制作会社を選ぶ際は、制作の流れだけでなく以下の点も確認しておくと安心です。
- デザインの修正回数に制限はあるか
- 打ち合わせに制作者が同席するか
- 見積もりに含まれる範囲は明確か(追加費用の発生条件)
- 公開後の更新対応のスピード感
- 担当者が途中で変わらないか
制作の流れは必ずしもこの通りではない
上記の10ステップは一般的な流れですが、お客様の状況によって工程は柔軟に変わります。
- 構成がすでに決まっている場合:設計・ワイヤーフレームを省略し、デザインから着手
- デザインだけ依頼したい場合:コーディングやCMS構築は別の会社や社内で対応
- 急ぎで公開したい場合:仮ページを先行公開し、CMS組み込みを後回しにする
「どの工程が必要で、どの工程は省けるのか」はヒアリングの段階で一緒に整理しますので、最初から全てを把握している必要はありません。
ホームページ制作を依頼する前に準備するものは?
結論として、何も準備しなくても大丈夫です。
もちろん、以下のような素材があればスムーズに進みます。
- 会社案内やパンフレット
- ロゴデータ
- 掲載したい写真
- 参考にしたいサイトのURL
ただ、実際にはこれらが揃っていない状態でご相談いただくケースも多いです。ヒアリングの内容からたたき台を作成し、打ち合わせを重ねて形にしていくのがENVY DESIGNのスタイルです。詳しくはホームページ制作を依頼する前に必要な素材・準備物もご覧ください。
制作期間と費用の目安
制作の流れを理解した上で気になるのが、期間と費用です。
| 種類 | 制作期間の目安 | 費用の目安(税込) |
|---|---|---|
| LP(ランディングページ) | 3週間〜2ヶ月 | 33万円〜 |
| コーポレートサイト | 2〜6ヶ月 | 66万円〜 |
| 採用サイト | 3〜6ヶ月 | 77万円〜 |
詳しい費用についてはホームページ制作の費用、制作期間についてはホームページ制作の期間・納期をご覧ください。
まとめ ― まずはヒアリングから
ホームページ制作の流れを10ステップで解説しました。
- ヒアリング
- 事業理解・競合調査
- ペルソナ設計
- サイト設計
- ワイヤーフレーム作成
- ライティング
- デザイン
- コーディング
- CMS構築
- 公開・運用支援
大切なのは、全ての工程を最初から理解している必要はないということです。何を準備すればいいか、どんなサイトにすればいいか、わからないことが多くて当然です。ENVY DESIGNでは制作者が直接ヒアリングし、一緒に考えながら形にしていきます。
お問い合わせいただければ、まずはオンラインでのヒアリングからスタートします。具体的な予定がない段階でのご相談も承っていますので、お気軽にどうぞ。
よくある質問(FAQ)
Q. ホームページ制作の依頼から公開まで、最短でどれくらいですか?
A. LPであれば最短3週間程度、コーポレートサイトであれば2ヶ月程度が目安です。仮ページを先行公開するなど、急ぎの場合の対応方法もあります。
Q. 素材や原稿が何もなくても依頼できますか?
A. はい、可能です。ヒアリング内容からたたき台を作成し、打ち合わせを重ねて形にしていきます。写真撮影やイラスト制作にも対応しています。
Q. 制作途中で内容を変更することはできますか?
A. できます。ワイヤーフレームやデザインの段階でお客様と確認しながら進めるため、途中での変更にも柔軟に対応します。修正回数に制限はありません。