Webサイト構築

Webサイト構築の手順とポイントを解説!マーケティング~要件定義、リリースまでの全工程を公開

新規事業担当者、マーケティング担当者、そして起業をする方のなかには、Webサイトの構築に携わなければならない方も多いでしょう。

Webサイトの種類は目的に応じて、企業のホームページ(コーポレートサイト)、商品・サービスサイト、広告用のページ、コミュニティサイトなど、さまざまです。

どんなWebサイトを構築するにしても、本来の目的を達成することが重要です。

そして、目的、目標が決まったら、スムーズにスピーディにWebサイトを構築したいですよね。

今回の記事では、初めてWebサイトの構築に携わる方はもちろんのこと、すでに経験されている方にも改めて確認してほしい目的達成のためのWebサイト構築の手順とポイントを解説いたします。

\  今すぐ、マッチングサイト構築をご相談したい方は下記をクリック  /

 

目次
‐ 1.要件定義
 ‐ ①目的を定める
 ‐ ②ターゲットを選定する
 ‐ ③Webでの検索キーワードの内容、検索回数を調査・分析する
 ‐ ④成果のシミュレーションを行う
 ‐ ⑤Webサイトのコンセプトを決定する
‐ 2.予算の決定
‐ 3.サイトの構築
 ‐ ①サイト構造の設計
 ‐ ②ワイヤーフレームを作成する
 ‐ ③デザイン作成
 ‐ ④サーバーの契約、ドメインの取得・設定、SSLの取得・設定
 ‐ ⑤コーディング
 ‐ ⑥システム開発
 ‐ ⑦テストをおこなう
 ‐ ⑧リリース(サイト公開)
‐ 4.リリース後はWebサイトの運用業務へ
‐ まとめ

 

基本的に1ページの広告用ランディングページから数千ページにおよぶ大規模なWebサイトまで、規模の大小はあれど、基本的な流れは変わりません。

各タスクにかける時間、粒度、深堀りが変わるだけです。

 

1.要件定義

Webサイト構築の手順として最初に挙げられるのがこの要件定義ですが、要件定義を定めるためにもやらなければならないことがたくさんあります。

 

①目的を定める

まずは、基本的なことですが、Webサイトを構築して何を実現したいのか、目的をはっきりとさせておきましょう。

Webサイトを構築すること自体は、目標を達成するための手段に過ぎません。

しっかりと、何を実現したいのか定めることで、プロジェクトの成功が何なのかということがはっきりするので、プロジェクト全体の意思決定をスムーズにすすめることができるようになります。

 

②ターゲットを選定する

要件定義において、最も大切なことはターゲットの設定です。

ターゲットの選定というと、ペルソナを活用し具体的なターゲット像を作り出していくことだと考えている方もいらっしゃるでしょう。

もちろん、より具体的にターゲット像を作ることも重要です。

ただ、それだけでなく、ターゲットが市場にどれくらいの数、割合いるのかもしっかりと調べておく必要があります。

また、競合他社がどれくらいのシェアをとっているのか、自分たちがどれくらいのシェアをとりにいけるのか、ありとあらゆるデータを検討しましょう。

 

③Webでの検索キーワードの内容、検索回数を調査・分析する

Web上では、Google広告が提供しているキーワードプランナーというツールで、グーグルでどのようなキーワードがどれくらいの数検索されているのかを調べることができます。

想定される検索キーワードの候補をできるだけ多く、多角的に調査していきましょう。

 

たとえば、

 

  • 売り出そうとしている商品、サービスの商品名による検索回数(指名系)
  • 用途や使用方法
  • 商品、サービスを使用することで解決される悩み

 

これらの検索回数、さらに、Facebook、Twitter、Instagramでどのような話題がどれくらい拡散されているのかなどの数値を合わせたものが、Web上での購買、お問い合わせの数の参考数値となります。

また、どのようなコンテンツを作成するべきかの指標となります。

 

検索回数、SNS上での数値が少ない場合は、そもそもWeb上で訴求するのは向いていない商品・サービスかもしれません。

オフラインも含めたWebサイト構築以外の方法を検討する必要があるでしょう。

 

④成果のシミュレーションを行う

②で、Web上の検索回数、SNS上の数値を算出できたら、実際にどれくらいの成果を得られるのか、数値のシミュレーションをしてみましょう。

シミュレーションは3か月ごとに、半年、年間とたてていくと、シミュレーションの成果をわかりやすくまとめることができます。

 

指標としては、最低でも下記をシミュレーションし、いつ損益分岐点を超え、利益があがっていくのかしっかりとシミュレーションしましょう。

 

<費用>

  • Webサイト構築にかける予算
  • 広告費
  • 人件費(かかわる人数)

など

 

<売上・利益>

・成果によってあがる売上、利益

など

 

⑤Webサイトのコンセプトを決定する

Webサイトのコンセプトを決めましょう。

コンセプトはWebサイトの構築を進めるために、プロジェクトに関わる人たち(上司、ディレクター、デザイナー、エンジニアなど)の意思統一を図るのに必要です。

コンセプトと言うと、なんだか少し抽象的で曖昧です。

「concept」には、概念・発送・構想といった意味がありますが、それでもまだ曖昧ですね。

 

ここでは、Webサイト構築に必要な具体的なアウトプットを明確にしておきましょう。

コツとしては、よくある5W1Hではなく、6W2HのほうがWebサイトの構築プロジェクトでは向いているでしょう。

 

・Webサイトのキャッチコピー

・Webサイトの名前

・Webサイトのベースとなるカラー

・ページの公開日

・6W2Hでまとめる

 -When(いつ):どのタイミングで

 -Where(どこで):サイトを利用するシーン

 -Whom(だれに):ターゲット

 -What(何を):どの商品・サービス、何を訴求するのか?

 -Why(なぜ):意義、Webサイトをターゲットが利用することで何を実現するのか?

 -How(どうやって) :

 -How much(いくらで):実現する予算

 

以上をコンセプトとして、決めておきましょう。

 

2.予算の決定

ここまでの過程では、予算は仮でたてていた予算だと思います。

1-③の成果シミュレーション、④のサイトコンセプトを元に、予算を確定させましょう。

 

3.サイトの構築

①サイト構造の設計

いよいよ、Webサイトを構築・制作するための具体的な作業に入ります。

サイト構造の設計では、どのようなコンテンツをどこに表示させるかを設計します。

Web上でのキーワードの検索回数(1-②の工程)などを参考にしながら、サイトコンセプトに沿って設計しましょう。

サイト設計の主なアウトプットとしては、サイトマップ(サイト構成図)があります。

サイトマップとは、各ページのタイトル、URL、サイトの構造をエクセルなどでまとめた図です。

SMXサイトマップとは別物ですので、ご注意ください。

 

②ワイヤーフレームを作成する

サイトマップを作成したら、ワイヤーフレームを作成しましょう。

ワイヤーフレームとは、各Webページごとに、見出し、テキスト、図を配置するかを決めていく作業です。

Webサイトを訪れるユーザーの動き、何を見て、どのようなアクションをしてほしいのかを想定して作成しましょう。

ワイヤーフレームを作る際には、以下のツールを使用すると便利です。

 

・Adobe XD

(商品ページ:https://www.adobe.com/jp/products/xd.html

Adobe社が提供するUX/UIの共同作業ツールです。

枠を作る、テキストを配置するといったワイヤーフレームを作る際の作業をカンタンな操作でできます。

ツールを使いこなせる人は、デザインやリンク構造まで作りこむことで、モック(試作サイト)まで作ることができます。

 

・Power Point

(商品ページ:https://www.microsoft.com/ja-jp/microsoft-365/powerpoint

言わずと知れたマイクロソフト社が提供するプレゼンテーション資料作成ツール。

パワー・ポイントでもワイヤーフレームを作成することができます。

最新版はカンタンに枠、テキストなど配置することができるので、Adobeなどのツールを使用したことがない人は、パワー・ポイントでワイヤーフレームを作成するのもよいでしょう。

 

③デザイン作成

ワイヤーフレームを作成したら、次はデザインを作成します。

Webサイトのコンセプトに合わせて、ワイヤーフレームを元にデザインを作成しましょう。

デザイナーに依頼する場合などには、ベースカラーのほか、メインカラー、アクセントカラーなどの配色を決めておくと、デザインのイメージも伝わりやすくなります。

また、デザインの参考になるサイトをピックアップし、事前に関係者に共有をしておくものよいでしょう。

デザインでよく使われるツールがAdobe Photoshop、Adobe Illustratorといったツールになります。

 

④サーバーの契約、ドメインの取得・設定、SSLの取得・設定

デザインが終わったらコーディング作業に入るのですが、その前にまずはサーバーを契約しておきましょう。

自前でサーバーを立てる人もいるかと思いますが、ほとんどの企業、個人はレンタルサーバーを契約するでしょう。

さくらインターネットや、Amazonウェブサービスなどが有名です。

そして、同時にドメインの取得・設定、SSLの取得・設定を行いましょう。

 

⑤コーディング

サイト設計、ワイヤーフレームの作成、デザインの作成が終われば、次はいよいよコーディング作業に入ります。

コーディングとはプログラミング言語を使って、デザインした通りにWebページをブラウザに表示させるための作業です。

HTMLなどの言語を使って、ソースコードを書いていきます。

また、Webデザインの装飾をしているのは、CSSという言語になります。サイト上に動きをつける場合にはJava Scriptなどを使います。

 

⑥システム開発

コーディングと同時に平行していくのが、システム開発です。

いわゆるプログラミングという作業になります。

Webサイトに顧客管理システムや、ショッピングカート、決済機能などが必要な場合など、HTMLとCSSだけでは実現できない機能が必要な場合には、システム開発の工程が必要となります。

 

⑦テストをおこなう

コーディング、システム開発が部分的、またはすべて終わったときあとは、テストを行います。

テストでは、表示の崩れ、事前に想定していた動きをしているかを検証していきます。

表示崩れや、想定外の動きをしている場合には、修正作業が入ります。

全体のスケジュールを決める際には、修正作業の時間を想定し、余裕をもって決めましょう。

 

⑧リリース(サイト公開)

テストも終わり、不具合が解消されたら、いよいよサイトリリースです。

契約したサーバーに、各ファイルをすべてアップロードして完了です。

リリース時にはシステムの作業が入る場合もありますので、その時間も考慮して時間を決めておきましょう。

また、リリースした後も、思わぬ不具合が発生することもありますので、リリース日は休日の前日などはやめておきましょう。

 

4.リリース後はWebサイトの運用業務へ

Webサイトをリリースしたら、それで終わりというわけではありません。
むしろ、リリースをしてからが始まりです。

Webサイトを構築した本来の目的は、リードの獲得や、PRなどです。きちんと目的が達成されているか、効果がでているか、効果計測をしながら更新業務をしていく必要があります。

Webサイトの運用業務は、主に以下のような業務です。

 

  • ドメイン、サーバーの管理
  • コンテンツの更新、編集
  • Webサイトの分析、改善
  • お問い合わせの管理

 

Webサイトの種類、目的によって内容は変わりますが、おおむね上記のような業務となります。

特に重要なのは、分析です。
Webサイトはサイト単体では大きな成果を得ることはできません。
分析をおこない、広告の運用、メルマガ、SNSの施策と連動して、目的を達成していきましょう。

 

まとめ

Wサイトの構築の手順と構築のポイント、そして、マーケティングまでを解説いたしました。

今回解説した手順は、Webサイト構築の基本的な手順です。

規模が大きくなっても、今回ご紹介した基本的な手順に沿って柔軟に対応をすることで、慌てずに対応することができます。

Webサイト構築の経験がある方も、今回の記事を読んで再度工程を見直すことで、新しい気づきがあれば幸いです。