初心者のためのホームページ制作の流れ！企画から公開までの全手順

ホームページ制作を始める前に！初心者が知るべき全体像

ホームページを初めて作る際、「何から手をつけていいのか分からない」、「専門用語が多くて難しそう」と不安に感じる方はとても多いです。しかし、制作のプロセスは家づくりとよく似ており、全体の流れさえ掴んでしまえば決して怖くありません。この章では格的な制作に入る前に知っておくべき「4つの基本フェーズ」や、目的に合わせた「サイトの種類」、そして多くの方が一番気になる「期間と費用の目安」について、ホームページドットコムのスタッフが分かりやすく解説します。まずは全体像を把握して、不安を安心に変えていきましょう。

「設計・開発・検証・公開」の4つの基本フェーズとPDCAサイクル

ホームページ制作は「設計・開発・検証・公開」という4つのステップで進み、公開後も改善を続けることが成功の鍵となります。

制作ときくと、いきなりデザインを描いたりプログラムを書いたりするイメージを持たれるかもしれませんが、実は一番大切なのは最初の「設計」です。家を建てる時にいきなり木材を切り始めるのではなく、まずは設計図を引きますよね。ホームページも同様です。どんな目的で、誰に見てもらいたいのかを決める「設計（企画）」があり、それに基づいて「開発（デザイン・システム構築）」が行われます。
その後、間違いがないか入念にチェックする「検証（テスト）」を経て、いよいよ世の中にお披露目する「公開」へと進みます。さらに重要なのは、公開して終わりではないということです。アクセス状況を見て改善を繰り返す「PDCAサイクル（計画・実行・評価・改善）」を回すことで、ホームページはどんどん成長していきます。
総務省が発表している情報通信白書などでも、企業のデジタル活用において継続的な運用と見直しの重要性が説かれています。公的なデータからも分かるように、作って満足するのではなく、育てていく視点が大切です。

コーポレートサイトや採用サイトなど「目的別」のサイトの種類と役割

誰に何を伝えたいかによって、作るべきホームページの種類と果たすべき役割は大きく異なります。

「ホームページ」と一言で言っても、実は様々な種類が存在します。たとえば、会社の顔として信頼感を与えるための「コーポレートサイト」、求職者に向けて社風や先輩の声を届ける「採用サイト」、商品をインターネット上で直接販売するための「ECサイト（ネットショップ）」などです。
もし「会社案内もしたいし、人も集めたいし、商品も売りたい」とすべてを一つのサイトに詰め込んでしまうと、見ている人は情報が多すぎて迷子になってしまいます。結果として、どの目的も達成できなくなってしまうのです。だからこそ、最初は「このサイトで一番達成したいことは何か」を一つに絞ることが大切です。

初めての依頼で不安にならないための「制作期間と費用の目安」の事前把握

一般的なホームページ制作には約2ヶ月から3ヶ月の期間と、規模に応じた費用がかかることを事前に知っておきましょう。

「いくらかかるの？」、「いつ完成するの？」というのは、初めてのお客様が最も心配されるポイントです。結論から申し上げますと、10ページ程度の一般的なコーポレートサイトの場合、制作期間はおおよそ2ヶ月から3ヶ月、費用は50万円から150万円程度がひとつの相場となります。もちろん、数ページだけのシンプルなものであれば期間も費用も抑えられますし、高度なシステムを組み込む場合はそれ以上かかることもあります。
ここで大切なのは、「なぜその費用になるのか」を納得した上で進めることです。費用には、見えない部分の設計やスマートフォン対応、セキュリティ対策などが含まれています。また、制作費を抑えるために、中小企業庁が実施しているIT導入補助金などの公的な支援制度を活用できる場合もあります。「ホームページドットコム」では、お客様のご予算に合わせた最適なプランをご提案し、不明瞭な追加費用は一切いただきませんのでご安心ください。

STEP1：企画・設計フェーズ（要件定義と目的設定）

ホームページ制作において、最も時間をかけて丁寧に行うべきなのが、この最初の「企画・設計フェーズ」です。どんなにデザインが美しくても、目的がブレていれば誰の心にも響かないサイトになってしまいます。ここでは「なぜホームページを作るのか」という根本的な問いから始まり、どんな人に見てほしいのか（ペルソナ設定）、そして公開した後に誰がどのように更新していくのか（運用体制）までをしっかりと定めていきます。土台作りとなる大切なステップを、一緒に見ていきましょう。

「なぜ作るのか？」目的の明確化（新規顧客獲得・採用強化・ブランディングなど）

ホームページを成功させるための第一歩は、「このサイトを通じてどのような成果を得たいのか」という目的を一つに絞り込むことです。

「名刺代わりに一応持っておきたい」、「ライバル会社がリニューアルしたから」といった曖昧な理由で制作をスタートしてしまうと、完成後に「結局これで売上は上がったの？」と社内で疑問を持たれてしまうことがあります。そうならないためには、ゴール（目的）を明確にすることが必要不可欠です。
たとえば「新規の問い合わせを月に10件獲得する」のか、「来年の新卒採用でエントリーを50名集める」のか、あるいは「企業の信頼感を高めてブランディングを行う」のか。目的が違えば目立たせるべきボタンの位置も、載せるべき情報も全く変わってきます。Googleが提供しているSEOスターターガイドでも、ユーザーが求めているもの（＝目的に合致したコンテンツ）を提供することの重要性が強調されています。まずは社内で「なぜ作るのか」をとことん話し合いましょう。

職業・年収・趣味まで絞り込む「ペルソナ設定」の具体例と作成方法

ターゲットを「30代男性」のように漠然と決めるのではなく、たった一人の理想のお客様（ペルソナ）を具体的に思い描くことが重要です。

目的が決まったら、次はそのホームページを「誰に」見てほしいのかを決めます。ここで使うのが「ペルソナ」という考え方です。たとえば「20代〜40代の女性」といった幅広いターゲット設定では、言葉遣いもデザインも中途半端になってしまいます。
そうではなく、「佐藤花子さん、32歳。都内のIT企業で働く事務職。共働きで小学生の子供が一人。休日はカフェ巡りが好きで、最近は時短家電に興味がある。スマホはiPhoneを利用し、情報収集は主にInstagram。」といったように、まるで実在する人物のように細かく設定を作り込みます。この「佐藤さん」に向けて文章を書き、デザインを考えることで結果的に同じような悩みを持つ多くの人の心に深く刺さるホームページが完成するのです。

更新作業は自社か制作会社か？事前の「運用体制」の決定

ホームページは公開してからが本番だからこそ、誰がどのように更新・管理していくのかを制作前に決めておく必要があります。

「完成したはいいけれど、お知らせ一つ更新するのに毎回制作会社にお金を払って頼まないといけない…」といったトラブルは実はとてもよく耳にします。これを防ぐためには企画の段階で「公開後の運用体制」を話し合っておくことが大切です。
たとえば、最新ニュースやスタッフブログなど、頻繁に変わる情報は自社の担当者が簡単に更新できるシステム（WordPressなどのCMS）を導入しておくのがおすすめです。一方で大規模なデザイン変更や専門的なセキュリティ対策は、プロである制作会社に保守契約として任せるのが安全です。自社でできることと、プロに任せることを明確に切り分けることで、無理のない長期的な運用が可能になります。

STEP2：制作・開発フェーズ（デザインとシステム）

目的やターゲットが決まったら、いよいよ実際に形を作っていく「制作・開発フェーズ」に突入します。ここでは、目に見えない骨組みを作る作業から始まり、皆さんが一番ワクワクするデザインの制作、そしてそれをインターネット上で動かすためのシステム開発へと進んでいきます。専門的な作業は私たち「ホームページドットコム」にお任せいただきますが、お客様にも原稿のご準備やデザインのチェックなど、大切な役割をお願いすることになります。二人三脚で素敵なサイトを創り上げましょう。

サイトの骨組みを決めるディレクションと構成案の作成

デザインに入る前に、「ワイヤーフレーム」と呼ばれる白黒の構成案を作成し、情報の配置や優先順位をしっかりと決定します。

STEP1で決めた目的に沿って、トップページには何を載せるか、会社概要はどこからリンクさせるかといった、サイト全体の構造（サイトマップ）を決めます。次に、各ページの中にどんな文章や写真を配置するのかを示す「ワイヤーフレーム（構成案）」を作成します。これは家づくりでいうところの「間取り図」のようなものです。
この段階では色は一切使わず、あえて白黒の線と文字だけで作ります。「ここにキャッチコピーが入る」、「ここはお問い合わせボタン」といった要素の配置（レイアウト）に集中するためです。お客様にはこの間取り図を見ていただき、「もう少し強みを上の方に持ってきたい」、「この順番だと読みづらい」といったご意見をいただきます。ここでしっかり骨組みを固めることが、後戻りを防ぐ最大のポイントです。

企業ブランドやコンセプトを体現するデザイン制作と確認プロセス

構成案が固まったら企業のイメージカラーやペルソナの好みに合わせて、実際の見た目を作り込んでいくデザイン制作を行います。

ここでようやく、色や写真、フォント（文字の形）を使った本格的なデザイン作業が始まります。デザイナーはSTEP1で設定した「ペルソナ（理想の顧客）」が好むテイストや、企業のブランドイメージ（誠実さ、親しみやすさ、先進性など）を意識しながら画面を作り上げます。
多くの場合、まずはトップページのデザイン案をお出しし、方向性がお客様のイメージと合っているかをすり合わせます。「もう少し明るい雰囲気にしたい」、「文字をもっと大きくしてほしい」といったご要望があれば、この段階で調整を行います。トップページのデザインが決まれば、それを基準にして他のページ（下層ページ）も一貫したトーンでデザインしていきます。

コーディングとシステム開発（WordPressなどCMSの導入やテーマ・プラグイン選定）

完成したデザインをブラウザ上で表示し、インターネットの仕組みの中で正しく動くようにする専門的な開発作業を行います。

デザインの画像データをパソコンやスマートフォンで文字やボタンとして認識できるように翻訳する作業を「コーディング（HTML/CSSなどの記述）」と呼びます。また、お問い合わせフォームの設置や、お客様自身でブログを更新できるようにするためのシステム（CMS＝コンテンツ・マネジメント・システム）の組み込みもここで行います。
特に、世界中で圧倒的なシェアを持つWordPress（ワードプレス）を導入するケースが非常に多いです。WordPressを導入する際は、目的に合ったテーマ（ひな形）を選んだり、セキュリティを高めたり表示速度を速くするためのプラグイン（拡張機能）を慎重に選定します。この工程は完全に裏側の専門作業となるため、お客様はお待ちいただく期間となります。

STEP3：テスト・検証フェーズ

デザインとシステムの開発が終わると、ホームページはほぼ完成の形になります。しかし、そのまま急いで公開してはいけません。実際にインターネット上で正しく表示されるか、スマートフォンで見づらくないか、お問い合わせのメールはきちんと届くかなど、細かな確認作業を行うのが「テスト・検証フェーズ」です。制作会社による専門的なチェックはもちろんですが、お客様の目線での最終確認もお願いする大切な期間です。トラブルなくスムーズな公開を迎えるために、念には念を入れて確認していきましょう。

テスト環境での各種機能の動作確認と表示チェック

本番と同じように動く「テスト専用の非公開URL」を使用して、文章の誤字脱字やリンク切れ、システムのエラーがないかを入念に点検します。

開発が完了したホームページは、一般の人には見えないようパスワードなどがかけられた「テスト環境」にアップロードされます。私たちホームページドットコムでは、まずは社内で厳しいチェックリストに基づき、すべてのボタンが正しいページに飛ぶか（リンク切れがないか）、意図した通りにアニメーションが動くかなどを確認します。
その後、お客様にテスト環境のURLとパスワードをお渡しします。ここでお客様にお願いしたいのは、「自社の専門用語に間違いはないか」、「代表者の挨拶文に誤字脱字はないか」といった、コンテンツ内容の最終チェックです。また、お問い合わせフォームから実際にテストメールを送信してみて、担当者のアドレスに間違いなく届くかどうかも、この段階で必ず確認していただきます。

スマートフォンなど異なるデバイスでの見え方をチェックするモバイル対応確認

パソコンだけでなくスマートフォンやタブレットなど、画面サイズの異なる機器で閲覧しても綺麗に表示されるか（レスポンシブ対応）を厳しくチェックします。

現代のインターネット利用において、ホームページはスマートフォンから見られることが圧倒的に多くなっています。総務省の通信利用動向調査などでも、個人のインターネット利用機器はスマートフォンがパソコンを大きく上回っていることが示されています。
そのため、パソコンの大きな画面で綺麗に見えるのは当たり前で、「スマホの小さな画面で見た時に、文字が小さすぎないか」「ボタンが指で押しやすい大きさになっているか」を確認することが極めて重要です。また、iPhoneやAndroid、さらにはSafariやGoogle Chromeといった閲覧ソフト（ブラウザ）の違いによっても微妙に見え方が変わることがあるため、複数の環境でテストを行います。お客様ご自身のスマートフォンでも、ぜひ実際に操作して使い心地を試してみてください。

発見された問題の修正対応と本番公開に向けた最終調整作業

テストで発見された修正点をすべてクリアにし、本番のサーバー環境で安全に公開するための最終的な準備を整えます。

テスト環境でのチェックが完了し、お客様から指摘された文字の修正や、画像の差し替えなどをすべて反映させます。修正漏れがないかを互いに確認し合い、最終的なOK（検収）をいただきます。ここでのOKが出ると、いよいよ本番公開の準備へと移ります。
ただデータを移すだけでなく、検索エンジン（GoogleやYahoo!）に「新しいサイトができましたよ」と知らせるための設定や、悪意あるアクセスからサイトを守るためのセキュリティ設定などを、目立たない裏側で入念に行います。独立行政法人情報処理推進機構（IPA）が呼びかけているような基本的な情報セキュリティ対策も、この公開前のタイミングで漏れなく適用されているかを最終確認します。

STEP4：公開・運用フェーズ

いよいよホームページが世の中に公開される、プロジェクトの集大成となるフェーズです。しかし、公開はゴールではなく新しいスタートラインに立ったことを意味します。どんなに立派な店舗を構えても、商品を追加したり宣伝をしたりしなければお客様は来てくれませんよね。ホームページも同様で、公開後のデータを見て改善し情報を新しく保つ「運用」こそが、成果を出すための本当の鍵となります。公開当日の作業からその後の育て方について解説します。

ドメインとサーバーの設定完了、そして本番公開

インターネット上の住所（ドメイン）と土地（サーバー）を紐付け、世界中からホームページが見られる状態にする本番公開作業を行います。

事前に決定していた公開日時（例えば金曜日の夕方や、週明けの月曜日の朝など、お客様の業務に影響が少ない時間帯）に合わせて、テスト環境にあったデータを本番のサーバーへと移行します。そして、会社の看板となる「ドメイン（例：homepage296.com）」とサーバーを接続する設定を行います。
この切り替え作業が終わると、いよいよブラウザのアドレスバーにURLを打ち込むことで、誰もが皆さんのホームページにアクセスできるようになります。公開直後は、本番環境でもテスト時と同じように、お問い合わせフォームが機能するかなどの最終の動作確認（公開後チェック）を迅速に行います。問題がなければ、名刺にURLを記載したり、SNSで「ホームページをリニューアルしました！」と告知したりして、積極的に広めていきましょう。

アクセス解析ツールの導入と数値計測を通じた効果測定の開始

何人がサイトを訪れ、どのページがよく見られているかを把握するため、Googleアナリティクスなどのアクセス解析ツールを導入し、データを取り始めます。

ホームページが公開されたら、「STEP1」で定めた目標（問い合わせ件数や採用エントリー数など）が達成できているかを測定しなければなりません。そのために必須となるのが「アクセス解析ツール」です。最も一般的なのが、Googleが無料で提供している「Googleアナリティクス」です。
これを導入することで、「1日に何人が訪れたか」、「スマホとパソコンどちらで見ている人が多いか」、「どのページで離脱してしまったか」といった行動データが手に取るように分かります。最初は数字ばかりで難しく感じるかもしれませんが、制作会社と一緒に定期的にデータを見る習慣をつけることで、「このサービスページはよく見られているから、もっと情報を手厚くしよう」といった、根拠に基づいた前向きな改善策を打てるようになります。

公開後の継続的なコンテンツ更新とPDCAサイクルによる改善

定期的に新しいお知らせやブログを発信し、解析データをもとにサイトを改修していく「PDCAサイクル」を回すことで、ホームページの価値は高まっていきます。

何ヶ月も放置されていて「最新のお知らせ」が3年前のままになっているホームページを見ると、閲覧者は「この会社、今は営業していないのかな？」と不安になってしまいますよね。ホームページの信頼性を保ち、さらにGoogleの検索順位を上げる（SEO対策）ためには期的なコンテンツの追加と更新が欠かせません。
お客様ご自身で（CMSを使って）最新の施工事例や社員ブログを更新していく（実行＝Do）とともに、アクセス解析で結果を確認し（評価＝Check）、もっと良くするためのアイデアを考える（改善＝Action）。そして次の更新計画を立てる（計画＝Plan）。このPDCAサイクルを根気よく回し続けることこそが、ホームページを優秀な営業マンへと育てる唯一にして最大の秘訣です。

初めてのホームページ制作はプロの伴走が不可欠

ここまでホームページ制作の企画から公開、そして運用までの全手順をご覧いただきました。専門用語が飛び交う裏側の作業も多いですが、全体の流れが見えると「自分たちがいつ、何をすればいいのか」が分かり、不安も和らいだのではないでしょうか。ホームページ作りは決して制作会社への「丸投げ」では成功しません。かといって、お客様だけで抱え込む必要もありません。最後に、二人三脚で進める重要性と、公開後の安心についてまとめます。

制作会社と発注者の二人三脚でプロジェクトを進める重要性

成功するホームページは、お客様の「自社に対する熱意」と、制作会社の「Webの専門技術」が掛け合わさることで初めて完成します。

「お金を払うのだから、あとは全部プロにお任せで良いホームページを作ってほしい」というお声をいただくこともあります。しかし、どれほど優秀な制作会社であっても、お客様の業界の専門知識や企業独自の社風、創業者の想いをお客様以上に深く知ることはできません。中身（コンテンツ）の素地を作るのはお客様であり、それを磨き上げて美しい器（デザインとシステム）に盛り付けるのが私たちの仕事です。
STEP1の「目的の決定」からSTEP4の「運用」まで、すべての工程でコミュニケーションを密に取り合い、お互いの役割をしっかり果たす「二人三脚」の姿勢こそが、期待以上の成果を生み出す最大のポイントです。

CMSのセキュリティやアップデートなど公開後の不安への備え

公開後も安全にサイトを運営し続けるために、システムのアップデートや保守管理といった専門的なサポート体制を整えておくことが安心に繋がります。

ホームページを公開して運用していく中で、「突然画面が真っ白になったらどうしよう」、「ウイルスに感染して情報漏洩したら……」といった不安を抱える担当者様は少なくありません。特にWordPressなどのCMSは、世界中で使われているからこそ、常に最新のセキュリティ対策（バージョンアップなど）を行わないと、サイバー攻撃の標的になりやすいという側面があります。
こうした公開後の見えないリスクに対して、社内に専門のエンジニアがいない場合は制作会社と保守契約（サポート契約）を結ぶことを強くお勧めします。バックアップの取得やシステムの更新作業をプロに任せておけば、お客様は「ブログを書く」「アクセスを分析する」といった、本来の売上や採用に直結する前向きな業務に専念することができます。

企画・設計の初期段階から無料で相談できるホームページドットコムへのお問い合わせ

「何から相談すればいいか分からない」という状態でも大歓迎ですので、まずはホームページドットコムの無料相談をお気軽にご利用ください。

ホームページ制作は企業にとって大きな投資であり、大切なプロジェクトです。だからこそ、最初の一歩を踏み出すのには勇気がいりますよね。「まだ予算も決まっていないし、目的もフワッとしているから、制作会社に相談するのは早いかもしれない……」と遠慮される方がいらっしゃいますが、むしろ逆です。
真っ白な状態、モヤモヤした状態の時こそ私たち「ホームページドットコム」にご連絡ください。経験豊富なディレクターが丁寧にヒアリングを行い、皆様の頭の中にあるアイデアを整理して、最適な進め方をご提案いたします。専門用語は使わず、学校の先生のように優しく分かりやすくご説明することをお約束します。まずはお茶を飲むような気軽な気持ちで、無料相談へお越しください。スタッフ一同、心よりお待ちしております！