企画立案から公開まで！WEBサイト制作のポイントや流れを解説

「WEBサイトを制作したいけれども、何から始めたらいいかわからない」このような方のために、WEBサイト制作の流れを企画から公開まで順を追って解説します。

WEBサイト制作の工程や内容を事前に知っておけば、外注依頼の際にも落ち着いて対応できます。業者選びのポイントについてもまとめていますので、ぜひ最後までご覧ください。

WEBサイト制作 の事前準備

まず、WEBサイト制作を成功させるには、事前準備が欠かせません。

WEBサイトの目的やターゲット、予算を定めずに進めてしまうと予算が足りずに中断してしまったり、企業が意図したWEBサイトができなくなったりする可能性があるためです。

以下の事前準備をしてからWEBサイト制作を進めていきましょう。

では、それぞれ詳しく見ていきます。

自作か外注にするかを決める

はじめにWEBサイト制作を始める前に、自作か外注にするかを決めましょう。どちらを選ぶかは、WEBサイト制作にかけられる予算・時間・専門知識の有無によって左右されます。

まずは、WEBサイト制作を自作する場合と外注する場合を比較してみましょう。

WEBサイト制作の専門知識があり、限られた予算で高品質なサイト制作できる環境が整っているのであれば、自作してもよいでしょう。

しかし、自作の場合は自社の事業が忙しいと、サイト制作が途中でストップしてしまったり、挫折してしまったりしがちなので注意が必要です。

一方、WEB制作が初心者であったり、専門的なWEBデザインが必要であったりする場合は、外注するのがおすすめです。

ただし外注する場合は、業者を慎重に選ぶ必要があります。業者選びに失敗すると、無駄に高額な金額を払わされたり、WEB制作会社が主導でサイト制作が進められたりする可能性があるためです。

目的や方向性を明確にする

WEBサイト制作の成功には、明確な目的や方向性の設定が必要不可欠になります。その理由としてWEBサイトの目的や方向性で制作すべき形態が大きく異なるためです。

まず自作するときはもちろんのこと、WEB制作会社に外注するときも、「なぜWEBサイトを制作するのか」「どのような方向性のサイトにしたいのか」を明確に伝えられるようにしておきましょう。

具体的なターゲット・ペルソナ像を決める

さて、どのようなWEBサイトを制作するかが定まったら、誰に向けて情報を発信するのかを決めましょう。ターゲットユーザーをどうするかにより、WEBサイトデザインやコンテンツの内容が大きく変わるためです。

まずターゲットを決めるときは、「20代の女性社員」や「40代の管理職」など大きなくくりではなく、より具体的な人物像「ペルソナ」を決めます。

ペルソナとは、架空のターゲットユーザーのことです。ペルソナを決めるときは、年齢・性別・職業・趣味・抱えている悩みなどを詳細に設定します。そして、まるでその人物が目の前にいるかのようにイメージします。

例えば、同じ年齢の2人のペルソナを見てみましょう。

同じ年齢・性別であっても、世帯規模や職業によって悩みは大きく異なることがわかります。

具体的なペルソナ設定をすることでサイトの構成やデザイン、コンテンツの方向性がより明確になり、ターゲットに響くWEBサイトを制作できます。

予算・スケジュールを決める

WEBサイト制作において、予算・スケジュールの設定は非常に重要です。まずWEB制作の費用は、サイトの目的によって大きく変わります。

例えば、名刺代わりのコーポレートサイトであれば、基本的なデザインとサイトを更新できるシステムを導入するだけで済むため、比較的低コストで制作できるでしょう。

一方、ECサイトなどはショッピング機能などの特定の機能が必要になります。そうなると、開発にともなうコストがかかり、WEB制作費が高額になりがちです。

短期的に売上を上げるLPや採用を目的としたサイトは、デザインやコンテンツが重視されます。そのため、コンテンツの数やデザインによって制作費が高額になることもあります。

またWEBサイトは制作したら終わりではありません。外注する場合、運用や更新にも費用がかかります。まず予算を決めるときは、運用や更新にかかるランニングコストも忘れずに見積りましょう。

次にスケジュールですが、予算を増額すると短期間で高品質なサイトができあがります。しかし、あまりにも短すぎると費用をかけても意図したサイトができあがらないことも。

上記のように、WEB制作にはさまざまな工程があります。WEBサイトに追加する機能によっては開発に、時間がかかることも予想されます。外注にしても自社にしても、余裕を持ったスケジュールの設定が大事です。

WEBサイト制作 の基本的な流れ

WEBサイト制作の基本的な流れと概要は次のとおりです。

では、それぞれ詳しく見ていきましょう。

調査・分析

まずWEBサイト制作を成功させるには、WEBサイトの目的に応じてターゲットユーザーに対してどのようなアプローチをすればよいか戦略を考える必要があります。はじめに市場調査をおこない、競合他社サイトの調査・分析をしましょう。

WEBサイトの目的はさまざまです。ターゲットユーザーに選ばれるWEBサイトを制作するには、競合他社サイトとの差別化を図る必要があるためです。

まずは競合他社の調査・分析を次のようにおこなうとよいでしょう。

競合サイトのアクセス状況やコンテンツ調査は、競合サイトを確認するだけでは把握できないこともあります。その際は分析ツールを活用しましょう。

コンセプト企画

コのンセプト企画とは、WEBサイトで「ターゲットにどのような価値を提供するのか」「ターゲットに伝えたいメッセージは何か」を明確にし、言語化することです。

こちらはWEBサイト制作における基本指針となり、とても重要な工程です。WEBサイトのコンセプト企画は5W1Hをベースに作成しましょう。

このように、5W1Hを詳細に書き出すことでサイトの全体像が明確になります。書き出した情報を整理し文章化を進めることで、コンセプト企画ができあがります。

要件定義

要件定義とは、WEBサイトの全体的な仕様を決定するための作業を指します。サイトの目的、機能、デザイン、システム要件などを明確にし、文書化する工程です。

要件定義の作業は6つのステップで進められます。

要件定義書は、発注者側とWEBサイト制作会社に起こりがちな認識のズレを最小限にするのが目的です。お互いの認識のズレを最小限にしなければ、発注者側の意図したWEBサイトが制作できません。

WEB制作会社から要件定義書を手渡されたら、内容をしっかりと確認しましょう。そして、お互いの認識のズレがないかすり合わせをしたうえで制作を開始してもらいましょう。

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

WEBサイトの設計とは、階層や階層全体の構造を決めていく工程です。このとき、UI/UXの最適化と導線設計を意識しましょう。

WEB制作のUI（ユーザーインターフェース）とは、「WEBサイトのデザイン・操作画面」を指します。UX（ユーザーエクスペリエンス）とは「WEBサイトでユーザーが得られる体験・経験」を指します。

UI/UXの最適化と導線設計をすることで、WEBサイトを訪れたユーザーがスムーズに目的のページにたどり着き、制作側の意図に沿った行動に移せるようになります。

そして、ECサイトであれば商品の購入。オウンドメディアのコラム記事であれば、記事を最後まで閲覧するなど。ユーザーがサイト上で取るべき行動を促すための設計をしましょう。

そのためには、まずユーザーの行動を理解しユーザーの目線に立って、設計することが重要です。

コンテンツ企画

コンテンツ企画はWEBサイトの設計やWEBサイトコンセプトに基づき、WEBサイトにどのようなコンテンツを提供すべきか考える工程です。

サイトを運営する企業の「伝えたい」とユーザーの「欲しい・知りたい」が合致するよう、企業はユーザー目線に沿ってコンテンツ企画を考えるとよいでしょう。

コンテンツ企画を制作するときには、同業他社などのWEBサイトを参考にするのもおすすめです。また、SEO（検索エンジン最適化）を考慮するのも忘れないようにしましょう。

ターゲットとなるユーザーがどのようなキーワードを検索し、その検索意図を満たすにはどのようなコンテンツが必要になるかという目線でコンテンツ企画を考えます。

SEOについては、WEBマーケティングの基礎を解説した以下の記事が参考になりますのでご覧ください。

参考記事：【初心者向け】WEBマーケティングの基礎知識をわかりやすく解説！

サイトマップを制作する

サイトマップとは、WEBサイトの全体構造を可視化したものです。こちらを見ることで、コンテンツの配置や階層構造を確認できます。

またWEBサイトによっては複数のページで構成されており、全体構造が複雑になるケースもあるため注意が必要です。

その結果、ユーザーが欲しい情報に到達できなかったり、検索エンジンにページを見つけてもらえなかったりする可能性もあります。

サイトマップを作成することで、ユーザーや検索エンジンにサイトの構造をわかりやすく伝えることができます。

デザインの制作

WEBサイトのデザイン制作は、ユーザーの第一印象を大きく左右する重要な工程の1つです。魅力的なデザインは、ユーザーの興味を引きつけ、滞在時間を長くする効果があります。

またデザインはWEBサイトの使いやすさにも左右します。デザインにより直感的に操作しやすいデザインは、ユーザーの満足度を高め、問い合わせや購買につながるためです。

ユーザーにとって魅力的で使いやすいWEBサイトのデザインを制作するのは次の2つの工程が重要です。

では、それぞれ詳しく見ていきましょう。

ワイヤーフレームを制作する

ワイヤーフレームとは、WEBページの設計図のことです。文字通りシンプルな線や図形で構成されており、デザインの下書きとも呼ばれています。

ワイヤーフレームを制作することで、ページレイアウトやコンテンツの配置を可視化できます。ワイヤーフレームは、発注者との認識のズレを予防したり、デザインや開発を依頼するときの情報共有に活用したりするのに役立ちます。

デザインコンセプトを制作する

WEB制作のデザインは、単に見た目を良くするだけではいけません。事前準備で決めたサイトの目的やターゲットの好みからデザインコンセプトを制作し、落とし込む必要があります。

デザインコンセプトを制作することにより、サイト全体に統一感が生まれます。そして、サイトの構成を効果的に表現できるようになるでしょう。

また、ユーザーにとって使いやすいデザインを制作するのにも役立ちます。デザインコンセプト制作で決める内容は次のとおりです。

WEB制作では、複数人のデザイナーがWEBページのデザインを担当します。デザインコンセプトを制作すると、高い精度で共通イメージを持つことができ、スムーズなデザイン制作を実現させることができます。

システム開発・実装

WEBサイトのシステム開発・実装には、大きく分けて2つの種類があります。

それぞれ詳しく見ていきましょう。

フロントエンド開発

フロントエンド開発とは、WEBサイトのデザインやコンテンツをHTMLやCSSなどの言語を用いて、ブラウザで表示可能な形式に変換する作業のことです。

ユーザーがWEBサイトを閲覧する環境はさまざまです。まずはじめにWEBサイト制作をするときには、ユーザーがどのような端末・OS・ブラウザで閲覧しても適切に表示されるよう、HTMLコーディングが重要となります。

HTMLコーディングはWEBページの表示速度やSEOなどに影響を与えます。そのため、慎重におこなう必要があります。コーディングが完了後は、WEB上で見ているのと同じ形でページを確認できます。

この時点で、WEBページ内のテキストに誤字脱字はないか、意図したレイアウト・デザインになっているかをチェックし、適宜修正をしていきましょう。

バックエンド開発

バックエンド開発とは、ユーザーの目に触れないWEBサイトのプログラムを構築する作業です。主にサーバーで動くプログラムの開発・導入をします。

例えば、WordPressのようなCMS（コンテンツ管理システム）やオンラインショップ構築で使用されるEC-CUBEなどパッケージシステムの導入や整備をおこないます。その他、独自システムを構築する場合も、バックエンド開発が作業を担当します。

またWEBサイトを公開するためのサーバー設計や、ドメイン設定などのインフラ準備もバックエンド開発の担当です。

公開前のテストをおこなう

システム開発・実装の作業が完了したら、動作検証（デバック）やブラウザチェックなど公開前のテストをおこないましょう。

まず、公開前のテストで押さえておきたい確認事項は次のとおりです。

テスト後は、見つかったバグ修正を実施します。そのため、制作スケジュールを組むときは、修正期間も含めて設定しておきましょう。

WEBサイトの公開

WEBサイトの公開前テストで動作に問題がなければ、公開作業をおこないます。リリース当日はデザイナー・エンジニアどちらも稼働できるよう手配しておきましょう。

公開前テストで動作に問題がなく、リリース当日に経験豊富なエンジニアが作業をしたとしても、予想外の要因でエラーが発生することがあるためです。

リリース直後には、公開されたサイトでテストを実施しておきます。そして、問題が発生したら即対応できる体制をあらかじめ整えておきましょう。

またサイト公開後には、検索エンジンへの報告と社外への報告を忘れずにおこないます。検索エンジンへの報告とは、Google検索エンジンに公開を知らせる作業です。

Googleサービスの1つである、サーチコンソールを用いてWEBサイトのURLを検索データベースに登録をするとクローラーと呼ばれるロボットがサイトを巡回し、Google検索結果にWEBページやサイトが表示されるようになります。

社外への報告は、プレスリリースやSNS、メルマガなどを用いて、WEBサイト公開を告知することです。ターゲットユーザーにWEBサイトを認知してもらうためにも、積極的に告知しましょう。

公開前のテストで押さえておきたい確認事項は次のとおりです。

WEBサイトの保守・改善

WEBサイトは公開したらゴールというわけではありません。公開はあくまでもスタート地点。WEBサイトの目的を達成するには、公開後の運用が重要になります。

定期的にメンテナンス・更新をする

WEBサイト公開後は、定期的にメンテナンス・更新をしていきましょう。システムの更新やサーバーの更新など、WEBサイトの安定的な発信をサポートします。

アクセス解析・サイト改善をする

サイト公開後は、WEBサイトの目的を達成するため、定期的にアクセス解析やサイト改善をしていきましょう。WEBサイトはアクセス分析やサイト改善を繰り返すことによって、継続的な集客やコンバージョンの向上が期待できるためです。

WEBサイトにアクセスしたユーザーの数や行動などのデータを定期的に取得し、WEBサイトの目的が達成されているかをモニタリングする必要があります。まずはデータを確認しながら、「アクセス数に対してコンバージョンが少ない」「アクセス数が伸びない」などの課題を見つけ、解決策を講じなければなりません。

WEBサイトの1つであるLPの検証・改善の具体的な方法については、以下の記事が参考になりますので、ご覧ください。

参考記事：LP改善のチェックポイントを解説！

WEBサイト制作 を外注依頼する際の業者選びのポイント

WEBサイトは自社で制作もできますが、日常業務の合間にサイト制作をするのは至難の業です。制作会社に相当する技術がないのであれば、外注依頼するのがよいでしょう。

しかしながら、サイト制作を外注するときに業者選びを誤ると、発注側が意図するWEBサイトが公開できなかったり、無駄に高額な費用を請求されたりするため注意が必要です。

ここからは、サイト制作を外注依頼するときの業者選びのポイントをご紹介します。

実績や得意分野を確認する

まずWEBサイト制作の業者を選ぶ際には、業者の実績や得意分野を確認しましょう。

はじめに、業者の実績を確認するときは受注数の数だけでなく、自身の会社と似たような業種や業界のサイト制作の実績も合わせて確認します。

WEBサイト制作会社も、会社によってさまざまな実績があります。受注数の数だけではその制作会社の良し悪しは判断できないためです。

ほかにも、自社と同じ業種・業界の実績があれば、その業界のノウハウがあることが予想されるので安心して任せられるでしょう。また、WEB制作会社によって得意分野が異なることも覚えておきましょう。

例えば、デザインに強い会社、LPに特化している会社、システム開発が得意な会社など、一口にWEB制作会社といっても得意分野はさまざまです。制作依頼したいWEBサイトの目的に応じて、選ぶとよいでしょう。

納期や予算の相場を確認しておく

最後に、WEBサイト制作の業者を選ぶ際には、あらかじめ納期や予算の相場を確認しておきましょう。

納期や予算の相場を知らないまま、WEBサイト制作会社に依頼してしまうと業者のいい値で制作費を請求されたり、業者の都合のよいスケジュールを押し付けられることを避けられます。まずは、複数のWEB制作会社から相見積もりを取り比較すると、ある程度の相場が見えてくるでしょう。

またWEB制作の納期や予算を知らないがゆえに、制作会社に無理難題を押し付けて断られるリスクも減らせます。

まとめ

WEBサイトは自作することも可能ですが、手間や時間がかかるのでWEB制作会社に依頼するのがおすすめです。WEB制作会社に依頼すれば、WEB制作のノウハウをもとに、自社に最適なサイトを提案し制作してくれるでしょう。

しかし、発注者側もWEB制作の流れをある程度把握しておかないと、悪質な業者に言い値で請求されたり、WEB制作業者に無理難題を押し付けて依頼を断られたりする恐れがあります。

この記事でWEB制作の流れを把握し、どの工程でどのようなことを決めなければならないか、事前に確認しておきましょう。

また、WEB制作会社に依頼したとしても「業者と一緒に作り上げる」という意識を持って取り組むと、よいサイトができあがるはずです。業者と協力しながら事業の目的や目標を達成できるようなWEBサイトを制作しましょう。