ホームページ制作の流れとは？公開に必要な3つのフローを徹底解説【2024年最新版】

「ホームページを作ることになったけど、何から始めればいいのかよくわからない…」

そんな悩みを抱えているWeb担当者の方も多いのではないでしょうか？
私的なホームページを制作するのであれば、特に考えなくてもサクッと作れるかもしれませんが、会社のホームページとなるとさすがにそういうわけにもいかないですよね。

そこで今回は、何から始めればいいのか悩んでしまうあなたに、会社のホームページを制作する流れを大きく３つの手順に分けて紹介します。
制作フローが分かれば計画的に作業に取り掛かれるのはもちろんのこと、前もった準備も可能になるので安心ですよ！

会社のホームページを作るわけですから、無計画のままで作業に取りかかってはいけません。
まずはホームページを制作するうえで必要となる、５つの作業を行います。

ホームページを制作する際に不可欠なのが、「目的」と「ターゲット」の設定です。
会社のホームページを作る以上、「集客を狙いたい」「多くの人に商品を知ってもらいたい」「販売促進に役立てたい」など、ビジネス上で期待する何らかの目的があるはずです。

作業に入る前段階で、「なぜ作るのか」という目的を明確にしておかないと、ユーザーだけでなく、制作にかかわるデザイナーやエンジニア、ディレクターも一体どこを目指してホームページを制作すればいいのか分からなくなってしまいます。
ホームページ制作を円滑に進めるためにまず目的の共有は欠かせないといえるでしょう。

次に、「ターゲット」の設定とは、ホームページを見てもらいたいユーザーを具体的に絞り込むことです。

もちろん、「どんなユーザーにも見てもらえるホームページにしたい！」という気持ちも分かりますが、「20代のOL」と「40代の主婦」とでは当然のことながら興味の対象が異なるため、ホームページの見せ方も大きく変わります。

ビジネスにつながる効果を期待するのであれば、「ターゲット」を絞り込んで、伝えたい内容をしっかり伝え、確実に心をつかむことが大切です。

さらに年齢層や役職などといった「ターゲット」設定から一歩踏み込んで、「ペルソナ」を設定するのも有効な方法です。
たとえば「〇〇会社に勤めている30歳手前の女性で、休日は友達と温泉旅行に出かけるのが趣味のA子さん」というふうに、具体的な人物像を描きます。

「ペルソナ」の設定はユーザー目線でのホームページ制作につながるため、検討してみる価値はあると思います。

ホームページを作る「目的」と「ターゲット」が決まれば、自然とデザインの方向性も見えてくるかと思います。
そのデザインの方向性を具体的な形に落とし込んで行くのがこの工程です。

「目的」を明確にするのはホームページにおけるビジネス上のゴールを共有することで、「コンセプト」を決めるのはデザイン上のイメージを共有することです。

イメージの共有ができていないと、ホームページが完成したときに、制作にかかわったメンバー間で「あれ？ あのとき言っていたイメージと違わない？」といったズレが生じてしまいます。

「やわらかい感じ」「シックな雰囲気」などの抽象的な言葉では、イメージの統一感を図るのは難しいですよね？
それと同じで、デザインのコンセプトも誰もが同じイメージやビジュアルを描けるように、できるだけ明確な言葉で示す必要があります。

抽象的に表現するのではなく、具体的な言葉で定義することで、ホームページ制作にかかわるメンバーの間で共通のイメージを持つことができます。

共通のイメージをもとにそれぞれのメンバーが制作を進めることによって、伝えたい内容がわかりやすいホームページになるでしょう。

デザインのコンセプトが固まったら、ホームページのタイトルも考えましょう。
会社のホームページの場合にはタイトルを決める必要はないかもしれませんが、コーポレートサイトとは別に新規コンテンツを始める場合などには、多くのユーザーに覚えてもらえるようなユニークでインパクトのあるタイトルを考えましょう。

また、一言でホームページを表すキャッチコピーを載せるのもユーザーに知ってもらう手法として効果があります。
キャッチコピーがあると、ホームページの存在意義だけでなく、会社やお店のビジョンやコンセプトがわかるためブランディングにも効果的です。

キャッチコピーをつくる際には「伝えたい内容を一言で表現する」ということを心掛けましょう。
いくつか有名企業のキャッチコピーの例を挙げてみます。

このような優れたキャッチコピーがあると、見ただけでどんな商品を提供しているのか、どんなサービスを行っているのか、イメージすることができます。
ただし、目的やターゲットが明確でないと、ユーザーの心をつかむキャッチコピーをつくるのは難しいでしょう。

また、キャッチコピーを作成するにあたって、注意しなければならないこともあります。
「ホームページを無料で作成できます」「いつでもどこでも映画が見放題」といったサービス名を主張しただけのキャッチコピーは、同じことが競合となるホームページにも当てはまり、差異が生まれません。

ほかにも、ユーザー目線じゃないキャッチコピーや、長くて語呂の悪いキャッチコピーはユーザーの心に届くことはありません。

ポイントはターゲットに未来の自分を想像させることです。
そのためには商品やサービスそのものの特徴・強みを押し付けるのではなく、商品やサービスを利用した際の「ストーリー」を考えてキャッチコピーを考えるといいでしょう。

制作方針とは、「対応ブラウザはどうするのか」「スマホ対応をレスポンシブデザインにするべきか」など、ホームページを制作する際のルール・ポリシーのようなものです。

制作に取り掛かる前にこの方針をしっかりと決めておかないと、後から変更する部分が出てきたり、統合させる際に不具合が起きたりと、作業の手間が発生してしまいます。
ホームページ制作の全体だけでなくコーディングなど個別の工程についての方針も合わせて決めておくと、後の工程がスムーズになります。

また、ホームページ上で個人情報を扱う場合には、この段階で「プライバシーポリシー（個人情報保護方針）」や利用規約などの準備も行っておきましょう。
プライバシーポリシーや利用規約は、インターネット上にテンプレート（ひな形）が配布されているので、イチから作成するのが面倒な場合はそういったものを活用するのも一つの手だと思います。

制作したホームページをインターネット上に公開するためには、サーバーとドメインを用意する必要があります。
「ドメイン」は分かりやすく言うと、ホームページがどこにあるのかを示すネット上の住所です。

無料で取得できるドメインもありますが、会社のホームページとして使う場合にはSEO的に有利な「独自ドメイン」を取得することをおすすめします。
ドメインはタイトル同様にホームページの顔となるものなので、ユニークで記憶に残りやすいものを取得しましょう。

そして「サーバー」はホームページという家を置く土地のことを指します。
土地がないと家が建たないように、サーバーがないとホームページを公開することはできません。

サーバーは購入することもできますが、サーバー会社からレンタルをするのが一般的です。
会社によって料金やサービス内容に違いがあるので、あなたの会社に最適なサーバーを選んで契約してください。

前準備が終われば、いよいよ本格的なホームページの制作です。
ここではホームページ制作に直接関係する工程を説明して行きます。

ホームページ制作でまず初めに取りかかるのが、サイトマップ（設計図）の作成です。
トップページを起点にどういったコンテンツを用意し、どのようにページの導線を引くのかを図に書き起こして行きます。

このときに、前準備で設定したホームページを制作する「目的」と「ターゲット」に合わせて必要なコンテンツを考えます。
また、ホームページを構成する階層をすべて書き出して一覧表にする「ディレクトリマップ」の作成も、ページの作り忘れや配置間違いを防ぐのに有効な方法です。

どのページもトップページから3クリック以内に到達できるように設計するのが理想なので、3〜4階層におさえておくと使いやすいサイトになります。

次に行う工程が、ページレイアウト（ワイヤーフレーム）の決定です。
ナビゲーション・コンテンツ・サイドバーの設計のほか、トップページ・カテゴリーページ・詳細ページをどんな構成にして、どこに画像やテキストを配置するのか決めます。

レスポンシブデザインにするのであれば、スマートフォン、タブレット、PCなど対応するデバイスを想定して設計をします。
このときにユーザーの見やすさだけでなく、ユーザビリティ（使いやすさ）やUX（心地よさ）も考える必要があります。

たとえばホームページ内において、ユーザーが必要とする情報を探しやすいように「初めて利用する方」「会員の方」という形でナビゲーションボタンを設置したり、よく使うと思われるボタンを分かりやすい場所に配置したりするなど、ユーザーがページ上で迷子にならないようなレイアウトを心がけましょう。

できるだけユーザーの労力を減らし、快適に利用できるようにレイアウトを設計するのがポイントです。

なお、ホームページを見るユーザーの視線は、PCの場合には左上から右下へ、Zの形で移動します。
そのことを踏まえて見せたいものの配置を考えると、ユーザーにとって見やすい画面を作ることができます。

スマートフォンの場合には上から下に視線は移動するので、見せたいものほど上の位置に表示させるように配置します。

ページのレイアウトを考える際には、手書きのラフスケッチで済ませてしまう人もいますが、近年ではプロトタイピングツールと呼ばれるデザイン・マネジメントツールを利用する人も増えてきました。

プロトタイピングツールを使うことで、クリックやタップで次の画面に移動できるので、実際に作動している様子が確認できます。
制作にかかわるメンバー間でのイメージの共有に非常に役立つので検討してみてもいいかもしれません。

前準備の段階で決定したデザインコンセプトをもとに、実際に各ページにデザインを施していきます。
具体的には世界観や雰囲気を統一しつつ、ホームページ全体の配色やタイポグラフィを決めます。

配色設定についてですが、落ち着いた印象のホームページをつくる場合には色相やトーンを揃え、インパクトを与える大胆なホームページの場合には明度や彩度を上げたりなどユーザーの心理作用も考慮するといいでしょう。

また、ホームページのコンセプトや提供するサービスに合ったタイポグラフィも選びます。
最後までユーザーに読んでもらうためにも、フォントサイズや文字間、行間、余白など細部までチェックを怠らないようにしましょう。

デザイン設計と並行して、掲載する画像・テキスト・ロゴ・バナーなどの素材を用意します。
社内で画像やテキストを用意できない場合には制作会社に依頼するか、ネット上で配布されているフリー画像を利用するのが一般的です。

最近ではクラウドソーシングサービスでフリーランスのデザイナーに依頼する方法もあり、制作会社よりも安価で作成できるケースもあります。

また、ファビコンの作成は忘れがちなので気をつけてください。
ファビコンとは、ホームページをブックマークした際や、タブを開いた際に表示される小さいアイコンのことです。

なお、ネット上で配布されているフリー画像を利用する場合には、著作権に気を付けなければなりません。
必ず利用規約に目を通し、商用利用は可能か、画像の改変はできるのか、出典先の明記が必要なのかなど、トラブルにならないようにしっかりと確認しましょう。

最近ではWordPressやMovable TypeといったCMS（コンテンツ・マネジメント・システム）を利用して構築されたホームページも増えてきました。
もしCMSを利用する場合には事前に環境設定をしておきましょう。

CMSはテーマ（テンプレート）を利用するだけでおおまかなデザインを変更することができるほか、Web製作者以外の人のアクセスも管理できるので、ページ追加の際などに便利です。

HTMLやCSSといったプログラム言語を使って、「ソースコード（デザインの設計図）」を書いて行きます。
この工程ではホームページのデザインだけでなく、動きを加えたり、システム部分を構築したり、SEO対策を組み込んだりといった作業も行います。

コーディング作業を行う際に使用するテキストエディタのなかにはタグの入力をアシストしてくれる便利なものもあるので、自分に合ったツールを探してみるのもおすすめです。

コーディング作業が終わったら、いよいよホームページの動作確認です。
ホームページの動作確認にはブラウザチェックとテストサーバーでのチェックがあります。

公開したホームページは見るブラウザによってレイアウトが崩れたり動きがおかしかったりする可能性もあるため、いろいろなブラウザを使用して自社のホームページをチェックします。

多くのユーザーに使用されているブラウザ（「Microsoft Edge」、「Internet Explorer」、「Google Chrome」、「Mozilla Firefox」、「Safari」など）は最低限チェックしておきましょう。
また、モバイル対応のホームページを制作した場合には、スマートフォンやタブレットでの動作確認も忘れずに行ってください。

ローカル環境でホームページを構築した場合には一度テスト環境のサーバーにアップロードをして、閲覧できるかどうかや「リンクが変なところに飛んでしまう」などの動作確認をします。
この時点で特に問題がなければ、本番環境に移してホームページの公開です。

「無事にホームページも完成したし、公開作業も終わった…」と胸をなで下ろしているかもしれませんが、ホームページは公開したらそれで終わりというわけではありません。
ここではホームページの公開後にするべき４つの作業を取り上げます。

せっかく苦労して制作し、公開まで進めたホームページですから、「多くのユーザーに見てもらいたい！」と思いますよね？
そこで検索エンジンに登録して、ホームページの情報をクローラー（ネット上のテキストなどを取得し、データベース化するプログラム）に認識してもらいます。

何もしなくてもクローラーはホームページの情報を収集していきますが、こちらから登録することでクローラーの呼び込みを早めることができます。
公開したばかりのホームページは認知度が低いですから、こうしたツールを使って効果的に認知度を上げて行きましょう。

アクセス解析とは、ホームページのアクセス数や滞在時間、どのページがよく読まれているかなど、ホームページを訪れたユーザーのあらゆる動向を解析し、データ化することを言います。

アクセス解析のデータを見ればホームページの課題や問題点などが浮き彫りになるので、データをもとにホームページの改善・更新を行うことができます。
ホームページを確実にビジネスと結び付けたいのであれば、アクセス解析は必須と言っていいでしょう。

公開後も、アクセス解析のデータをもとに、こまめに改善・更新を行うことでホームページの質を高めることができますし、ユーザーにとって有益なホームページだと評価され、検索エンジンでの順位も上がりやすくなります。

ホームページを公開しただけでは、GoogleやBingからの検索流入による集客経路しかありません。
そのため、どのようにユーザーに自社ホームページを認知してもらうかを考えます。

上記のような宣伝方法がありますが、特に活用したいのがTwitter、Facebook、Instagramといった各種SNSです。
SNSは今や国内総人口の５割以上の人が利用しているコミュニケーションツールです。活用すれば間違いなくホームページの宣伝につながります。

さらに、予算に余裕があるのであれば、リスティング広告を打ったり、プレスリリースを出すことで自社ホームページを宣伝することもできます。

リスティング広告とは、Yahoo!やGoogleといった検索エンジンの検索結果の最上部に表示される広告のことです。
ユーザーが検索したキーワードに連動して表示させることができるので、ニーズを考えて出稿すれば効果的に集客することができます。

プレスリリースとは、他のメディアや報道機関に向けて告知する広告手法のことです。
他の媒体に記事として取り上げられれば大きな効果が期待できますが、掲載が確実ではなかったり、掲載内容がコントロールできないなどデメリットも存在するので注意が必要です。

いずれにせよ、ホームページの集客をSEO対策だけに任せてしまうと、Googleの検索アルゴリズムに変更があった場合に検索順位が下がり、アクセス数がガクッと落ちてしまう恐れがあります。

もしあなたが「うちはSEO対策を万全にするから宣伝なんか必要ない」と思っているとしたら、いつか大変な損失を被ってしまうかもしれません。
リスクを回避するためにも、ホームページへ誘導する方法はいくつか用意しておいた方が安心ですよ。

つづいては、ホームページ制作を外注した際にかかる費用相場をご紹介します。ホームページ制作の価格は、依頼する内容やページ数、機能により大きく変わります。具体的な費用目安は以下の通りです。

ホームページ制作の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

この記事ではホームページ制作の流れを、大きく３つの手順に分けて紹介しました。
制作フローが分かれば計画的に作業が進められるだけでなく、「次は何をすればいいんだっけ？」と作業の手を止めて悩む心配もありません。

「ホームページの制作は外注に依頼するから、別に流れなんて知らなくてもいいし…」と思っている人もいるかもしれませんが、それは大きな間違いです。
制作の流れを理解することは自作する場合だけでなく、業者に依頼する場合にも役立ちます。

制作フローに沿って発注準備をしておけば依頼自体がスムーズになりますし、依頼の際にかかる時間も短縮できるため、業者の選択肢を広げることにもつながります。

「でも業者にホームページ制作を依頼すると高いんじゃないの？」「そんなに予算はかけられないんだけど…」という場合には、ぜひ一度日本最大級の業者比較サイト 「アイミツ」までご相談ください。
「アイミツ」ではあなたの会社が希望する条件に応じて、最も適したホームページ制作業者を無料でご紹介させていただきます。