「そろそろ自社のホームページを作りたい」「今あるサイトをリニューアルしたい」――そう思ったとき、まず気になるのは「ホームページってどうやって作るの？」ということではないでしょうか。WEBサイト制作には、企画・設計・デザイン・コーディング・公開といったいくつもの工程があり、それぞれの工程で何が行われているかを知っておくことは、制作会社との打ち合わせをスムーズに進めるうえでとても大切です。
この記事では、WEBサイト制作の全体像を「はじめてホームページを作る方」に向けてわかりやすく解説します。各工程のポイントや制作期間の目安、よくある失敗例もあわせてご紹介しますので、ぜひ参考にしてください。
WEBサイト制作の全体像を把握しよう
WEBサイト制作は、大きく分けて以下の5つの工程で進みます。
- 企画・ヒアリング：目的やターゲットを明確にする
- 設計（構成案・ワイヤーフレーム作成）：サイトの骨組みを作る
- デザイン：見た目を形にする
- コーディング・開発：デザインをWEB上で動くように組み立てる
- テスト・公開：確認・修正を経て、いよいよ世の中へ
家を建てることにたとえるなら、企画は「どんな家に住みたいかを考える段階」、設計は「設計図を引く段階」、デザインは「外観や内装を決める段階」、コーディングは「実際に組み立てる段階」、公開は「引き渡しと入居」にあたります。
ホームページ制作は「作ること」だけではなく、「企画」と「設計」が成果を大きく左右します。いきなりデザインに入るのではなく、最初の段階にしっかり時間をかけることが成功の秘訣です。
工程1：企画・ヒアリング
WEBサイト制作のスタート地点は「企画」です。ここでは、ホームページを作る目的、ターゲットとなるお客さま像、競合他社の状況、盛り込みたいコンテンツなどを整理します。
この工程で決めること
- ホームページの目的：問い合わせを増やしたい、採用を強化したい、ブランドイメージを伝えたいなど
- ターゲット：どんな人に見てもらいたいか（年齢層、地域、職業、悩みなど）
- 競合分析：同業他社のホームページはどんな内容か、差別化できるポイントはどこか
- 必要なページ：トップページ、サービス紹介、会社概要、お問い合わせなど
- 予算と納期：使える予算の上限と、いつまでに公開したいか
制作会社に依頼する場合のポイント
制作会社に相談する際は、「どんなデザインがいい」という見た目の話よりも先に、「ホームページで何を達成したいか」を伝えることが大切です。目的が明確であればあるほど、制作会社は的確な提案をしやすくなります。
逆に、「とりあえずおしゃれなサイトにしてほしい」という依頼だと、制作会社も手探り状態になってしまいます。「おしゃれ」の定義は人それぞれですし、見た目がきれいでも成果につながらないサイトになってしまう可能性があるのです。
用語メモ
「ペルソナ」とは、ターゲットとなるお客さまの具体的な人物像のことです。「群馬県在住・40代・製造業の経営者・ITにはあまり詳しくない」といった形で、年齢や職業、悩みなどを具体的に設定します。ペルソナを明確にすると、サイトのデザインや文章の方向性がぶれにくくなります。
工程2：設計（構成案・ワイヤーフレーム作成）
企画で方向性が固まったら、次はサイトの「設計図」を作る段階です。ここで作成するのが「サイトマップ」と「ワイヤーフレーム」と呼ばれるものです。
サイトマップとは
サイトマップとは、ホームページ全体のページ構成を図で表したものです。「トップページの下にサービス紹介があって、その中に各サービスの詳細ページがある」といったように、ページ同士の関係性がひと目でわかるようになっています。
ワイヤーフレームとは
ワイヤーフレームとは、各ページの中で「どこに何を配置するか」を示した設計図のことです。色やデザインは入っていない白黒の簡素な図面ですが、ページの骨格を決める非常に重要な工程です。
ワイヤーフレームの段階で「この情報は本当に必要か」「ユーザーがスムーズに問い合わせまでたどり着けるか」といったことを検討しておくことで、後の工程でのやり直しを大幅に減らすことができます。ワイヤーフレームの重要性については別の記事で詳しく解説していますので、ぜひあわせてご覧ください。
ワイヤーフレームの段階でクライアント（依頼主）がしっかり確認・フィードバックすることが、完成度の高いホームページにつながります。「デザインが出来上がってから修正」では遅いケースも多いのです。
工程3：デザイン
ワイヤーフレームが固まったら、いよいよビジュアルデザインに入ります。ここでは、配色、フォント（文字の書体）、写真やイラストの選定、ボタンのデザインなど、サイトの見た目を具体的に作り上げていきます。
デザインの進め方
多くの制作会社では、まずトップページのデザイン案を1〜3パターン作成し、クライアントに確認してもらいます。方向性が決まったら、下層ページ（サービス紹介ページや会社概要ページなど）のデザインに展開していきます。
デザイン確認時のチェックポイント
- 自社のブランドイメージに合っているか
- ターゲット層に受け入れられそうなデザインか
- 文字は読みやすいサイズ・色になっているか
- 問い合わせや電話のボタンは目立つ位置にあるか
- 写真やイラストは自社の雰囲気を正しく伝えているか
デザインは「好み」で判断してしまいがちですが、大切なのは「ターゲットであるお客さまにとって使いやすく、伝わりやすいかどうか」という視点です。経営者ご自身の好みとターゲットの好みが異なることは珍しくありませんので、迷ったときは制作会社のプロとしての意見を聞いてみることをおすすめします。
工程4：コーディング・開発
デザインが確定したら、次は「コーディング」の工程に入ります。コーディングとは、デザインデータをHTML・CSS・JavaScriptなどのプログラミング言語を使って、実際にWEBブラウザで表示できる形に変換する作業のことです。
コーディングで行われること
- HTML（エイチティーエムエル）：ページの構造や文章、見出しなどを記述する
- CSS（シーエスエス）：色、レイアウト、文字サイズなど見た目を整える
- JavaScript（ジャバスクリプト）：アニメーションやスライドショーなどの動きを付ける
- CMS構築：WordPress（ワードプレス）などの更新システムを組み込む
用語メモ
「CMS（シーエムエス）」とは、Content Management System（コンテンツ・マネジメント・システム）の略で、専門知識がなくてもホームページの文章や画像を更新できる仕組みのことです。WordPress（ワードプレス）が世界中で最も多く使われているCMSです。ブログの更新やお知らせの投稿などを自社で行いたい場合は、CMS付きのホームページにしてもらうと便利です。
コーディングの品質は、見た目ではわかりにくい部分ですが、SEO（検索エンジン対策）や表示速度、スマートフォンでの見え方に大きく影響します。コーディングとデザインの違いについては、別の記事でわかりやすく解説していますので、気になる方はぜひご覧ください。
レスポンシブ対応は必須
現在、ホームページへのアクセスの6〜7割はスマートフォンからと言われています。パソコンだけでなく、スマートフォンやタブレットでも見やすいデザインに自動的に切り替わる「レスポンシブ対応」は、今やほぼ必須です。制作会社に依頼する際は、レスポンシブ対応が含まれているか必ず確認しましょう。
工程5：テスト・公開
コーディングが完了すると、まずは「テスト環境」と呼ばれる確認用の場所にサイトをアップロードして、クライアントに最終チェックをしてもらいます。
テストアップで確認すべきこと
- 文章に誤字脱字がないか
- 電話番号やメールアドレスが正しいか
- お問い合わせフォームが正しく動作するか
- スマートフォンで見たときにレイアウトが崩れていないか
- リンク切れ（クリックしてもページが表示されない状態）がないか
- 画像が適切に表示されているか
テストアップから公開までの詳しい流れや、クライアントが確認すべきチェックリストについては、別の記事でまとめていますので、公開前にはぜひ参考にしてください。
公開作業
テストで問題がなければ、いよいよ本番環境にサイトを公開します。ドメイン（ホームページのアドレス）の設定や、SSL（通信の暗号化）の設定、Googleアナリティクス（アクセス解析ツール）の導入なども、この段階で行われます。
公開はゴールではなくスタートです。公開後のアクセス解析やコンテンツの更新・改善を継続的に行うことで、ホームページは初めてビジネスの成果につながる「営業ツール」になります。
制作期間の目安
「ホームページを作るのにどれくらい時間がかかるの？」という質問はよくいただきます。サイトの規模や内容によって大きく変わりますが、おおよその目安は以下のとおりです。
規模別の制作期間
- 小規模サイト（5〜10ページ程度）：約1.5〜2.5ヶ月
- 中規模サイト（10〜30ページ程度）：約2.5〜4ヶ月
- 大規模サイト（30ページ以上、ECサイトなど）：約4〜6ヶ月以上
ただし、これはあくまで制作会社側の作業期間です。実際にはクライアント側での確認・フィードバックの時間も加わります。「写真や原稿の準備に時間がかかった」「社内の承認プロセスに想定以上の時間がかかった」といった理由でスケジュールが延びることはよくあります。
スケジュールを守るためのコツ
- 写真素材や会社の基本情報は早めに準備しておく
- 社内の確認フローと意思決定者を事前に決めておく
- 確認依頼が来たら、できるだけ早く（3営業日以内を目安に）返答する
- 修正の要望はまとめて一度に伝える（小出しにすると工数が増える）
はじめてのホームページ制作でよくある失敗例
最後に、はじめてホームページを作る方が陥りがちな失敗例をいくつかご紹介します。事前に知っておくことで、同じ失敗を防ぐことができます。
失敗例1：目的を決めずに制作を始めてしまう
「とりあえずホームページが欲しい」という状態で制作を始めると、途中で方向性がぶれてしまい、修正の繰り返しで時間もコストも膨らんでしまいます。「何のために作るのか」「誰に見てもらいたいのか」を最初にしっかり定めることが大切です。
失敗例2：デザインの「好み」にこだわりすぎる
「社長の好きな色にしたい」「かっこいい動きをたくさん入れたい」といった見た目へのこだわりが強すぎると、ターゲットにとって使いにくいサイトになってしまうことがあります。デザインはあくまで「目的を達成するための手段」であることを忘れないようにしましょう。
失敗例3：原稿や写真の準備を軽く見てしまう
ホームページの良し悪しを決めるのは、実はデザインよりも「中身」です。会社の強みを伝える文章、サービスの魅力が伝わる写真など、コンテンツの質がホームページの成果を大きく左右します。原稿は「いつか書こう」と先延ばしにしがちですが、早めの準備を心がけましょう。
失敗例4：公開後の運用を考えていない
「ホームページは作ったら終わり」と思っていると、公開後に更新が止まり、次第に古びたサイトになってしまいます。更新の体制や担当者を事前に決めておき、制作会社にも公開後のサポート内容を確認しておくことが重要です。
失敗例5：価格だけで制作会社を選んでしまう
複数社から見積もりを取ったとき、一番安い会社に決めてしまうのは危険です。価格が安い分、対応範囲が限られていたり、品質が伴わなかったりすることがあります。安さにはかならず理由がありますので、価格だけで判断しないことが大切です。WEB制作会社の選び方については別の記事で詳しく解説していますので、制作会社を探し始める前にぜひチェックしてみてください。
用語メモ
「SSL（エスエスエル）」とは、ホームページとユーザーの間の通信を暗号化する仕組みのことです。SSL対応されたサイトは、URLが「https://」から始まり、ブラウザに鍵マークが表示されます。個人情報の保護だけでなく、Googleの検索順位にも影響するため、現在はほぼすべてのサイトでSSL対応が必要です。
まとめ
WEBサイト制作は、企画・設計・デザイン・コーディング・公開という5つの工程で進みます。それぞれの工程で何が行われているかを理解しておくと、制作会社との意思疎通がスムーズになり、完成度の高いホームページに仕上がります。
特に大切なのは、以下の3つのポイントです。
- 最初に「目的」と「ターゲット」を明確にすること
- 設計（ワイヤーフレーム）の段階でしっかり内容を確認すること
- 公開後の運用まで見据えて計画を立てること
はじめてのホームページ制作は不安なことも多いかもしれませんが、信頼できる制作会社と一緒に進めれば、きっと御社のビジネスを力強くサポートしてくれるホームページが出来上がるはずです。わからないことは遠慮なく質問して、二人三脚で理想のサイトを目指しましょう。
