【フロー図あり】ホームページ制作の流れ・手順を7ステップで徹底解説

「ホームページ制作って、どんな流れで進むの？」
「ホームページを作りたいけど、何から始めればよいのか分からない」
と疑問に思っている方も多いのではないでしょうか。

ホームページ制作は、企画から運用まで大きく分けて7つのステップで進みます。制作前に流れを把握することで、スムーズに準備を進められるでしょう。

この記事では、ホームページ制作の流れを7つの工程に分けて解説します。制作前に準備すべきことや、失敗しないためのポイントも説明しているので、ぜひ最後までご覧ください。

ホームページ制作の手段

ホームページ制作の手段は「自作」と「外注」の2つに分けられます。

自作では外注費がかからないため、コストを抑えられます。対して、ホームページ制作にかかる時間や手間を削減できる点が、外注するメリットです。

それぞれの特徴を把握した上で、どちらが自社に適しているのかを考えましょう。

自作する場合

ホームページを自作する場合のメリット・デメリットを、表にまとめました。

メリット	デメリット
・コストを削減できる ・自由にサイトを更新・修正できる ・自社の魅力をサイトに反映しやすい	・機能・デザインが低クオリティになりやすい ・学習や制作、運用には時間と手間がかかる ・トラブル対応が難しい ・Webに詳しい担当者が必要となる

近年では、専門知識がない方でも扱いやすいホームページ作成ツールが豊富です。そのため「Webやデザインの知識がなくても大丈夫」と考える方は多いでしょう。

テンプレートにもとづいたシンプルな構成であれば、専門的な知識がなくてもホームページ制作は可能です。しかし「会社の魅力が伝わるサイトにしたい」「ユーザーニーズを満たせる機能を実装したい」「競合他社と差別化したい」という場合は、Webにまつわる知識が必要となります。

自社でトラブルに対応できるか、作りたいサイトを実現できるか、という点も考慮して制作方法を検討してみてください。

外注する場合

ホームページを外注する場合のメリット・デメリットは、次のとおりです。

メリット	デメリット
・高品質なサイトを作れる ・自社社員が本業に集中できる ・オリジナルのデザインや機能を実装できる	・自作よりもコストが高くなる ・制作会社の見極めが難しい ・制作会社によって対応範囲が異なる

Webの専門家が知識と経験にもとづいて担当するので、自社の魅力が伝わる・ユーザーにとって使いやすいサイトになる可能性が高いです。

「外注＝丸投げ」をイメージするかもしれません。ただ、高品質なホームページに仕上げるには、自社側が的確に要望を伝えることが大切です。詳しい注意点については「ホームページ制作で失敗しないためのポイント」にて解説します。

ホームページ制作の流れ【フロー図】

具体的なホームページの流れを知る前に、まずはフロー図で全体像をチェックしましょう。物事の流れや手順を図式化したものを「フロー図」といいます。

上記の全体像を把握しておくことで、スムーズに制作を進められます。

ホームページ制作で事前に準備すること3つ

ホームページ制作を開始する前に、以下の3つを事前に準備しておきます。

• 予算
• スケジュール
• 目的・方向性

ひとつずつ説明していきましょう。

①：予算

事前に費用目安を決めることで予算オーバーを防ぎ、プロジェクトを円滑に進められます。

ホームページ制作にかかる費用は、依頼先や制作方法によって異なります。小規模なサイトならば数十万円程度、大規模なサイトになると数百万円程度かかることも。また、大手制作会社よりも、フリーランスや中小制作会社のほうが低予算で外注しやすいです。

さらに、予算を考える際は制作費用だけでなく、運用・保守費用も考慮しましょう。ホームページは作って終わりではありません。公開してから内容を修正したり、コンテンツを追加したりする際にも費用がかかります。

②：スケジュール

ホームページの公開希望日があるならば、スケジュールに余裕を持って制作に取りかかりましょう。

サイトの規模によりますが、事前準備から公開までには5〜6ヵ月ほど要します。最終納期のほかにも、いつまでにデザインを決定するのか、いつテストを実施するのか、などを段階的に決めておきます。

サイト制作を外注する際は、制作会社と定期的に打ち合わせをして、進捗状況を共有することが大事です。連携が不足していると、認識違いに気付けず、修正作業に時間がかかる恐れがあります。

③：目的・方向性

ホームページ制作で準備すべきものとして、目的・方向性が挙げられます。目的や方向性が定まっていないと、制作中に計画が迷走する可能性が高いです。

会社の認知度向上・商品の販売促進・採用活動など、目的によってホームページのデザインや構成は大きく変わります。

たとえば、企業理念や価値観を発信すると、会社のブランディング向上に効果的です。ロゴや文字フォントにこだわり、視覚的にブランドイメージをアピールするのもよいでしょう。

【外注のみ】ホームページ制作の流れ①｜発注

ホームページ制作を発注する流れは、以下のとおりです。

• 制作会社の選定・問い合わせ
• ヒアリング
• 提案・見積もり

サイトを自作する場合は「ホームページ制作の流れ②｜企画」から参照してみてください。

制作会社の選定・問い合わせ

外注する場合は、まず制作会社を選定し、各社に問い合わせていきます。

制作会社のウェブサイトやポートフォリオなどを参考に、過去の実績や得意なデザインスタイルなどをチェックします。気になる制作会社が見つかったら、実際に問い合わせましょう。

問い合わせる際は、以下の内容を具体的に伝えておくと、その後のやり取りがスムーズに進みます。

• 予算
• スケジュール（納期）
• ホームページの目的
• 制作会社への要望

なお、選定段階では制作会社を一社に絞り込まないほうが、費用感やサービス内容を比較できます。比較対象が多すぎても検討が難しいため、選定する数としては3〜5社程度が目安です。

ヒアリング

外注先選びにおいてヒアリングは、制作会社との相性や担当者の人柄を確認するために重要です。ホームページの目的や要望などを伝え、制作会社からサービス内容を説明してもらいます。

企業によっては、オンラインのみで打ち合わせ可能なケースも増えています。なお、オンラインでも問題なくヒアリングできますが、相手の雰囲気を知りたいならば対面打ち合わせがおすすめ。対面での対応を求めるときは、依頼先を決める前に、打ち合わせ形式をチェックしておきましょう。

ヒアリングでは、疑問や不安を質問することがポイント。自社の要望を正確に理解してくれて、コミュニケーションがスムーズに取れる担当者ならば、安心して業務を依頼できます。

提案・見積もり

ヒアリング内容をもとに、制作会社から提案と見積もりが提示されます。そして、提案内容や見積もり金額に納得できた企業と、契約を結びましょう。

提案内容に不明な点がある場合は、契約前に問い合わせてください。特に注意すべきポイントは、追加費用の有無や条件、修正回数、納期です。

理解が曖昧なまま発注すると

上記のようなトラブルが起こり得ます。

ホームページ制作の流れ②｜企画

企画では、ホームページの土台となる以下の3点を決めます。

• ターゲット設定
• 競合の分析・リサーチ
• ホームページのコンセプト決定

それぞれ解説していきましょう。

ターゲット設定

ホームページの企画段階で、ユーザー像を具体的に設定します。ターゲット設定で考えるべき項目は、次のとおりです。

• 年齢
• 性別
• 職業
• 居住地
• 年収
• 家族構成
• 趣味
• 価値観
• ライフスタイル
• 情報収集の方法
• 抱えている悩みや課題

ユーザー像が明確になることで、サイトで発信すべき情報や必要となる機能のアイデアを得られます。

競合の分析・リサーチ

他社との差別化をはかるならば、競合の分析・リサーチが有効です。

競合他社のホームページを見て、以下の情報を整理します。

• デザイン
• コンテンツの質や量
• SEO対策
• 強み・弱み
• ターゲット層
• キーワード選び
• SNSの活用状況

競合のよい点を参考にすると、自社サイトの質を高められるでしょう。ただし、ほかのサイトのコンテンツを、そのまま真似するのはNGです。

また、競合サイトの分析は、市場のトレンド・ニーズの把握に役立ちます。

ホームページのコンセプト決定

ターゲット設定や競合分析の結果をもとに、ホームページのコンセプトを決定します。

なお、コンセプトとは、全体の方向性を定めるための基本的な考え方やテーマのこと。制作に関わるすべての人が共有すべき「軸」となるものです。

コンセプトが決まると、デザインやコンテンツに一貫性が生まれます。

ホームページ制作の流れ③｜設計

ホームページの企画が完了したら、ホームページの構成や機能を決めていきます。

• 要件定義
• サイト設計（UI/UX設計）
• コンテンツ設計
• システム設計

以下で詳しく説明していきましょう。

要件定義

要件定義とは、発注者の要望を明らかにして、開発側がその要件を実現するために必要となる機能・性能を定義するプロセスです。

関係者間で認識のズレがないように、定義した内容は「要件定義書」として記録します。

要件定義書にまとめる内容は

などが挙げられます。

サイト設計（UI/UX設計）

サイト設計では全体の構造を設計し、各ページの内容や役割を定義しましょう。UI（ユーザーインターフェース）・UX（ユーザーエクスペリエンス）の設計も、サイト設計の業務に含まれます。

UI・UX設計について、以下の表にまとめました。

	UI設計	UX設計
目的	直感的かつ効率的な操作	満足度の高い体験
重視するポイント	・見やすさ ・使いやすさ ・操作性	・ユーザーのニーズや感情 ・ユーザーの行動
要素の例	・レイアウト ・配色 ・フォント ・アイコン ・アニメーション	・ユーザー調査 ・ペルソナ設計 ・ユーザーによるテスト ・ユーザーの感情分析

各ページの内容以外に、ページ間のリンクも検討します。ユーザーにとって使いやすく、目的を達成しやすいサイト設計を心がけましょう。

コンテンツ設計

サイトの全体像が見えてきたら、具体的なコンテンツの内容を考えます。

コンテンツ設計で決める主な要素は、次のとおりです。

• テキストコンテンツ：会社概要、商品・サービス紹介、ブログ記事
• 画像コンテンツ：商品写真、会社案内写真
• 動画コンテンツ：商品・サービス紹介動画、インタビュー動画、会社紹介動画
• 音声コンテンツ：インタビュー音声、音楽
• ダウンロードコンテンツ：PDF資料、カタログ

ホームページのコンテンツは、SEO対策において重要な役割を果たします。SEO対策とは「Search Engine Optimization（検索エンジン最適化）」の略称です。GoogleやYahoo!などの検索エンジンで、Webサイトを上位表示させるための施策を指します。

SEO対策を行うことで、Webサイトへのアクセス数を増やし、ビジネスの成果向上が期待できます。

システム設計

ECサイトや会員制サイトなど、複雑な機能を持つホームページでは、綿密なシステム設計が不可欠です。小規模サイトでも、開発前にシステムを設計すると、最終的にセキュリティやパフォーマンスの高いホームページを作れます。

システム設計では、セキュリティ対策やデータベース設計、サーバー構成を考慮します。Webにまつわる専門知識が求められる業務のため、自社対応が難しい場合はプロに依頼するほうが安心です。

ホームページ制作の流れ④｜デザイン

デザインでは、ホームページの見た目や雰囲気を決めていきます。考えていく流れは、以下の3工程です。

• デザインコンセプトの策定
• ワイヤーフレームの作成
• デザインカンプの作成

それぞれ具体的に説明していきます。

デザインコンセプトの策定

こまかなデザインを決定する前に、デザインコンセプトを策定します。ブランドイメージやホームページの目的を踏まえて、デザインコンセプトを考えましょう。

イメージが難しいときは、自社にまつわるキーワードを書き出してみてください。「親しみやすさ」「スタイリッシュ」「シンプル」「機能的」「先進的」など。たとえば、温かい雰囲気ならば曲線的なデザイン、洗練された雰囲気ならば直線的なデザインと相性がよいです。

デザインにおける基準を設けることで、サイト全体に統一感が生まれます。

ワイヤーフレームの作成

ホームページにおける、レイアウトや構成の設計図を「ワイヤーフレーム」と呼びます。

ワイヤーフレームで考える項目は、主に6つです。

• ページの構成
• ページのレイアウト
• 要素の配置（ボタン、リンク、検索ボックスなど）
• コンテンツの配置
• サイトのページ遷移
• デバイスごとのレイアウト

実際にデザインを進める前に、ページの構成やレイアウトを確認することで、ホームページ制作の効率が高まります。

デザインカンプの作成

デザインカンプとは、完成イメージに近いデザイン案のこと。デザインカンプでは色使いやフォント、レイアウト、アニメーションなどを具体的に決めます。

デザインカンプの時点で、レスポンシブデザインを意識しておくと開発がスムーズに進みやすいです。パソコンやスマートフォン、タブレットなど、どのようなデバイスからアクセスしても、最適な表示になるように設計する方法を「レスポンシブデザイン」といいます。

近年では、さまざまなデバイスからホームページを閲覧するユーザーが増えています。ユーザーの見やすさ・使いやすさを向上するには、レスポンシブデザインへの対応が重要です。

ホームページ制作の流れ⑤｜制作・実装

ホームページを制作・実装する流れは、次のとおりです。

• 素材の準備
• 開発環境の準備
• コーディング・システム開発
• テスト・修正

Webに詳しくない方でも理解しやすいように解説するので、ぜひ参考にしてみてください。

素材の準備

ホームページに必要な文章や画像、動画などの素材を準備します。例としては、企業・商品のイメージ写真やロゴマーク、会社案内やパンフレットのデータなどが挙げられます。

外注する際は、制作で使用する素材を早めに提出しましょう。「素材がないので制作を進められない」という事態になると、スケジュールが遅れる恐れがあります。

また、素材が不足している場合、新たに作成するか外部から素材を調達しなければいけません。他者の作成物を素材とするときは、著作権への配慮が求められます。フリー素材を使うとしても、商用利用・加工・複製の可否を確認してください。

開発環境の準備

サイト作りでは、テキストエディタや画像編集ソフト、サーバーといった開発環境を用意します。機能や使いやすさ、費用に注目して、自社の目的や要件に合った開発環境を選びましょう。

CMS（コンテンツマネジメントシステム）を利用すると、ホームページを制作・管理しやすいです。CMSとは、Webサイトのコンテンツを管理するためのシステムのこと。代表的なCMSとしては、WordPressやDrupalなどが挙げられます。

コーディング・システム開発

HTMLやCSS、JavaScriptなどを使ってコーディングを行います。HTML・CSS・JavaScriptは、それぞれ以下のように役割が異なります。

JavaScriptでは、カウントダウンタイマーを表示させたり、ボタンクリックで画像の表示を切り替えたりする機能を実装可能です。

加えて、お問い合わせフォームやECサイトなどを導入する場合は、システム開発も行います。コーディングやシステム開発では、Webに関する幅広い専門知識が必須です。自社で開発するならば、Webに関する高いスキルを持つ人材を、確保する必要があります。

テスト・修正

ホームページ制作でテストを怠ると、以下のような不具合が起こり得ます。

• リンク切れ
• ページの表示崩れ
• フォームが正常に動作しない
• 不正アクセスを受ける
• 情報が漏えいする
• ページの表示速度が遅い
• サーバーの負荷が高い

パソコンやスマートフォン、タブレットなど、さまざまなデバイス・バージョンでテストを実施することが大切です。「パソコンではキレイに表示されるけれど、タブレットでは表示が崩れている」というトラブルは珍しくありません。

動作に問題がないことはもちろん、ユーザーにとって使いやすいサイトに仕上がっているかもチェックしましょう。

ホームページ制作の流れ⑥｜公開

完成したホームページをインターネット上に公開する手順は、以下の2ステップです。

• ドメイン・サーバーの設定
• ホームページリリース

それぞれ見ていきます。

ドメイン・サーバーの設定

ホームページを公開するには、ドメインとサーバーが必要です。

サイトのデータを保管する場所を「サーバー」、ホームページにアクセスするためのURLを「ドメイン」といいます。サーバーが土地、ドメインが住所、ホームページが家……とイメージすれば、分かりやすいでしょう。

ドメイン登録サービスやレンタルサーバーサービスが存在するので、各社の特徴を理解した上で契約を結びます。レンタルサーバーの容量が不足すると、表示速度が低下したりセキュリティリスクが増えたりします。そのため、自社のホームページ規模に適したサーバーを選ぶことがポイントです。

ホームページリリース

ドメインとサーバーの設定が完了したら、ホームページをインターネット上に公開します。公開前には、リンク切れや誤字脱字、表示崩れがないかを最終チェックしてください。

そして、FTPソフトを使用して、サイトのデータをサーバーにアップロードします。

ホームページ制作の流れ⑦｜運用・保守

ホームページを公開した後は、定期的に運用・保守を行いましょう。サイトの運用・保守業務は、大きく分けて以下の2つに分類できます。

• アクセス解析する
• 追加・修正の検討

各工程について、具体的に説明していきます。

アクセス解析する

アクセス解析ツールを使って、ホームページのアクセス状況を分析します。アクセス解析で取得するデータ内容は、次のとおりです。

• 訪問数
• ページビュー
• 滞在時間
• 流入経路
• クリック数
• 訪問者の属性

主なアクセス解析ツールとしては、Google Search ConsoleやGoogle Analyticsなどが存在します。アクセス解析の結果をもとに、ホームページの改善点を見つけ、対策を実行しましょう。

追加・修正の検討

公開したホームページを放置しておくと、効果的に活用できません。アクセス分析の結果を踏まえて、定期的に追加・修正を続け、よりよいホームページを目指していきましょう。

たとえば、サービス紹介記事の滞在時間が短いならば、ユーザーの興味を高めるような修正が求められます。「記事の質を上げる」または「ユーザーが関心のある内容を再検討する」といった方法を実践するとよいですね。

古い情報を更新して、サイトを常に最新の状態に保つことも、運用・保守において重要です。

ホームページ制作で失敗しないためのポイント

最後に、ホームページ制作で失敗しないためのポイントを4つ紹介します。

• 外注する前に自社で準備しておく
• 外注先に制作・運用を丸投げしない
• ホームページ制作の費用相場を把握しておく
• 信頼できる外注先に依頼する

各ポイントについて、解説していきます。

外注する前に自社で準備しておく

外注する場合でも、自社で対応できることは事前に準備しておきましょう。

制作会社は、あくまでも「自社の要望をホームページに反映する」ことが目的です。自社の要望や目的が曖昧なままでは、どのようなサイトに仕上げればよいのか、外注先は判断できません。

「ホームページ制作で事前に準備すること3つ」で紹介したように、予算・スケジュール・目的や方向性を明確にしておくと、制作がスムーズに進みやすいです。また、参考にしたいサイトのURLや、デザインのイメージを伝えることも有効です。

外注先に制作・運用を丸投げしない

外注先に制作や運用を、すべて任せきりにするのは避けてください。外注先とのコミュニケーションが不足すると、次のようなリスクが生じます。

• イメージや要望が正確に伝わらず、期待と異なるデザインや機能が実装される
• 仕様の確認や修正に時間がかかり、制作スケジュールが遅れる
• 後から大幅な仕様変更や修正が発生し、追加費用がかかる
• 十分な確認やテストが行われず、不具合やバグが残ったまま納品される

つまり、定期的に進捗状況を共有し、必要に応じて意見を伝える姿勢が大切です。

ホームページ制作の費用相場を把握しておく

ホームページ制作の費用感を知らなければ、相場よりも高い価格で外注してしまう恐れがあります。

注意点として、制作費用はホームページの規模や機能、デザインの複雑さなどによって異なります。一概に「〇ページのサイトは×円」や「〇〇システムのあるサイトは△円」とは言い切れません。

費用相場を把握するには、複数の制作会社から見積もりを取り、比較検討することをおすすめします。複数の見積もりを確認する中で、自社が実装したいサイトの費用感が見えてきます。サービス内容や費用を比較し、見積もり金額が適正かどうかを判断しましょう。

信頼できる外注先に依頼する

ホームページのクオリティは、制作会社のスキル次第で変化します。知識や経験が豊富で、信頼できる外注先に依頼することが、サイト制作で成功するコツ。

外注先選びで注目すべきなのは、次の8点です。

• 実績とポートフォリオ
• Webの専門知識と技術力
• コミュニケーション能力
• 提案力と企画力
• 費用
• 納期
• アフターサポート
• 口コミや評判

とくに、自社と同業種・同規模の担当経験がある会社は信頼性が高いです。業種ならではの事情を理解しているため、効率的なサイト制作が期待できます。

まとめ：ホームページ制作の流れを理解しておきましょう

ホームページ制作は、自作と外注の2つの手段があります。自作はコストを抑えられますが、専門知識と時間が必要です。外注は高品質なサイトを制作できますが、費用がかかります。どちらを選ぶかは、自社の目的や予算、リソースによって異なります。

ホームページ制作の流れは、企画から運用までの7ステップ。各工程でサイト全体の目的や方向性、ターゲットを意識することがポイントです。

この記事で解説した流れやポイントを参考に、自社に最適な方法でホームページ制作を進めましょう！