webページ制作を始めたい！３つのフェーズと各フローをご紹介

WEBサイトの制作を任されたけど、「どのくらい時間がかかるのか」「どこから始めたらいいの？」「何をしたらいいの？」と不安な方も多いのではないでしょうか？

本記事では、WEB制作が初めての方を対象にWEB制作3つのフェーズと、各フェーズにおけるフローをご紹介します。

WEB制作の大まかな流れ

WEB制作は、外部に発注するのか内部で制作を行うかによって細かい手順は変わってきますが、大きく分けて「企画・設計」「制作・実装」「公開・運用・検証」の3つのフェーズに分けられます。

WEB制作を実際に始める前に、まずはWEBサイトの方向性やターゲットを選定することが必要です。
何も定めないままWEBサイトを作成すると、制作途中で方向性がずれてしまいまとまりのないWEBサイトになってしまいます。

WEBサイト制作の目的、ゴールを決める

WEBサイト制作を行う場合「ただ何となく」WEBサイトを制作する人はおらず、何かしらの目的を持ってサイト制作を行います。
では、「どんな目的で」WEBサイトの制作を行うのかを明確にする必要があります。

商品やサービスの紹介を目的としたWEBサイトであれば「認知度の上昇」「商品の売上増加」コーポレートサイトであれば「会社を知ってもらう」「ブランディング」などの目的が挙げられます。

また、WEBサイトに「ゴール」を設けることも重要です。リード獲得数などの数値目標を設定し、達成率と照らし合わせて改善が必要かの検討ができます。

ペルソナ、ターゲットを決める

WEBサイト制作の目標やゴールが決定したら、次はターゲット・ペルソナの設定です。

まずは年齢や性別といったターゲット層の洗い出しを行います。その次にペルソナの設定を行います。ペルソナ設定では、年齢や性別よりももっと深い詳細な人物像を設定します。

同じ年齢、性別でもこじんによって生活サイクル、家族構成や趣味嗜好などが異なるため、より深い人物像を洗い出すことでWEBサイトの方向性をさらに固めることができます。

競合他社の情報収集、WEBサイトの方向性を決める

ここからは実際に競合他社の情報収集を行います。

類似の商品・サービスのWEBサイトから、ペルソナに設定した人物像が閲覧しそうなWEBサイト、ターゲット層まで幅広くリサーチを行います。また、情報収集を行うことでWEBサイトのテイストや表現なども制作時の参考にすることもできます。

WEB制作を外注する場合

WEBサイト制作を外注する場合、制作会社の比較、検討を行います。

予算やスケジュールだけでなく、制作実績や提案内容を加味して、最適な制作会社を選ぶことが選定の上で重要になります。2、3社を比較して見積もりや対応を比較しても良いでしょう。

WEB制作第2フェーズ：制作・実装

WEB制作前の準備ができたら、次は実際にWEBサイト制作に移ります。
しかし、準備ができたからといってすぐにサイト制作を始めるのではなく、まずは下準備が必要です。

WEBサイトの設計を考える

・コンテンツの企画
ユーザーにどんなコンテンツを提供するのかを企画します。
コンテンツとは、WEBページに掲載されている文章・画像・動画などのことを指します。
ユーザーに伝えたいことや競合がどのようなコンテンツを掲載しているかなどを洗い出し、コンテンツの企画を行います。

・サイト、ディレクトリ構造を決定する

一般に「サイトマップ」といわれる、WEBサイト全体の構造です。
サイトマップを作成することで重複コンテンツがないか再確認することができます。

コーポレートサイトを例にすると、「会社概要」「ニュース」「採用」などの各ページをどこに配置するかなどです。

・ページの構造を設計する（ワイヤーフレーム設計）

サイトマップを作成したら、次はページ内の設計です。
ここでは、どこにどのような情報を掲載するのかを設計し、WEBサイト制作に関わる全員の共通認識を持たせる役割も果たします。

このワイヤーフレームをどこまで作り込むかによりますが、納期が短い場合や複数パターン提出する場合、初期段階では忠実度が低いものを、納期が長いものや最終段階に近いものは忠実度が高いものを作成するケースが多いです。

また、この段階で情報の優先順位をつけておくことがおすすめです。

・システムの仕様について考える
WEBサイトでは、内容によって頻繁に更新が必要なものも存在します。その場合、更新の担当者が必ずしもHTMLなどのコードを触ることができる人であると限りません。

「更新を簡単にできたらいいな」などといった要望に合わせてCMS（=Content Management System：コンテンツ管理システムのこと）を導入するかを考える、といったことも必要になります。

・サーバー、ドメインの設定
新しくWebサイト制作を行う場合は、サーバやドメインの取得を並行して行う必要があります。サーバーはレンタルされているか容量に空きがあるか、希望するドメインは使用されていないかを必要に応じて確認しましょう。

デザインの設計考える

全体の設計が終わったらいよいよデザインの設計です。

・デザインコンセプトの作成
ペルソナ設定や競合の調査を参考に、デザインのコンセプトを設計します。

①メインカラーたアクセントカラー
②画像や動画のテイスト
③フォントや装飾

など、デザインに関係する内容を取り決め、全体で相違がないか確認を行いながら進行します。

具体的なサイトや参考画像を挙げながら進めることで、認識の相違が起きづらくなります。

・素材の準備、作成
デザインのコンセプトが決定したら、実際に素材の準備や、必要に応じて作成を行います。

素材は、商用利用のできる素材サイトや現在使用している写真素材などを活用して準備します。商用利用のできる素材サイト等を使用する場合、利用規約の確認を忘れないようにしましょう。

コーディングを行う

・コーディング
デザインが決定したら、HTMLを用いてコーディングを行います。

WEBサイトは印刷物と異なり、PCやスマートフォン、タブレットなど様々な画面サイズのデバイスで閲覧されるため、ユーザーの画面サイズに応じて表示を最適化をするレスポンシブ化が主流になっています。

ここでバックエンド構築（サーバー設計やドメイン設定、システム作成のプログラミングなど）も行います。

・テストアップ、動作チェック
完成したらリリース前にブラウザ上でテストを行います。

ここでは、誤字脱字はないか、画像や動画は適切か、リンクの遷移先は問題ないかなどのテストを各デバイスで行います。

また、動作を行った際に想定通りの動きになっているか、バグが発生していないか（発生した場合はデバッグを行う）確認することが重要です。「バグやエラーは発生してから直せばいいから早くリリースしたい」と思う方もいるかもしれませんが、バグやエラーが発生してから対処を行うと修正までの機会損失や企業イメージの損失にもなりかねないため、慎重に行う必要のある重要な工程です。

WEB制作第3フェーズ：公開・運用・検証

WEBサイトのテストが終了したら、晴れてWEBサイト公開です。しかし、WEBサイトは公開することがゴールではありません。

WEBサイトをユーザーに見てもらうための設定や、継続的に運用や検証を行い、WEBサイトのアップデートを行っていく必要があります。

サーチコンソールに登録

Google Search Console（グーグルサーチコンソール）を設定し、Webサイトへ流入がある検索キーワードや表示回数、クリック数、クリック率、Webサイトの品質などを無料で知ることができるようにします。

SEO（検索エンジン最適化）を行う上でWEBサイトがどのような状態か確認することができる非常に便利なツールです。

定期的にコンテンツを更新する

検索エンジンにWEBサイトを上位表示させるためには、定期的なコンテンツ更新が必要です。

ユーザーにとって有益な情報を定期的に更新することで、検索エンジンからの良い評価を受け、結果としてキーワード検索時に上位表示されやすくなります。

必要に応じて検証を行う

公開したWEBサイトが本当に良いものか定期的に分析する必要があります。

設定した目標と現状はどのくらい解離しているか、ユーザーはどこで離脱しているのかなど定期的に分析を行い、課題の洗い出しや改善策を練りましょう。

まとめ

WEBサイト制作は手順が多く、時間も労力もかかります。

サイト制作に関わる全員が目的やコンセプトに対して共通認識を持つことがWEBサイト制作を進める上で重要になってきます。
ひとつひとつの工程を踏みながらWEBサイト制作を行ってみてくださいね！