一般的なホームページ制作に要する期間は、制作期間だけを考えると2～3ヶ月とされています。しかし、より質の高いサイトのために綿密な事前調査や設計を行うと半年以上かかることもあります。当然、制作するページのボリュームによっても期間は異なります。
長期間にわたる制作をスムーズに進めるには、前もって制作フローをプランニングすることが重要となります。
今回はサイト制作の流れと、押さえておくべきポイントについて解説していきます。
目次
１．サイト制作フロー
まずは、一般的なサイト制作の流れを5つのステップに分けてご紹介します。
- 背景、目的、課題を整理する
- サイトの構造を決める
- ワイヤーフレームを作る
- デザイン・コーディングを行う
- 公開し最終チェック
２．背景、目的、課題を整理する
サイト制作のファーストステップは、サイトを取り巻く背景と目的、そして課題の設定です。
背景をまとめる
まずは、Webサイトを制作もしくはリニューアルする際に、現状の背景をまとめめます。
ユーザー層の変化、ユーザーの使用するデバイスの変化、コンバージョン率などの変化など、どうしてWebサイトを制作するのかもしくはリニューアルしなければならないのかをまとめます。
目的を定める
そして、その背景をベースに、Webサイトに訪れたユーザーに何をして欲しいのかというサイトの目的を明確に決めていきます。
資料請求や問い合わせ、購入、特定の情報の閲覧など、Webサイトを通じてどういった成果を期待しているのか、ユーザーにどういうアクションを起こして欲しいのかを検討し、決定します。
もしサイトの目的が複数存在する場合は、優先順位と重要度も整理しておきましょう。
課題を抽出する
目的が決まったら、現状のWebサイトに不足している課題をピックアップします。部分的にモバイルファーストインデックスになっていなかったり、Webサイトの部分的な改修を重ねたことでページごとの構成がバラバラだったり、よく見ると課題は数多く見つかるはずです。
Webサイトを新たに制作する場合は、Webサイトがなかったことでの課題を抽出するといいでしょう。
ペルソナの設定
背景、目的、課題を整理したら、次はWebサイトに訪れるユーザーを定め、ペルソナを作成します。
ペルソナ設定では、性別・年齢・職業といった基本的なステータスだけでなく、利用媒体、社会的な立場、業界・サービスに対するリテラシーなどを考慮し、より具体的なユーザー像を形成していきます。
ペルソナを作成するとユーザーへの理解が深まり、チームでWebサイト設計を行う場合でも同じ方向性を持って進められます。
ペルソナの詳細については、当コラムの「ペルソナ設定のやり方と注意したいポイント」をご覧ください。
要件定義を行う
ペルソナを設定したら、Webサイト制作のための要件定義を行いましょう。
要件定義とは、制作会社に依頼するためにサイト機能や予算などを言語化したもので、必ず作成する必要があります。
できる限り、予算や使用したいシステム、開発スケジュールなどの条件を詳細に抽出していきます。
３．サイトの構造を決める
具体的にWebサイトの目的やペルソナ、要件定義が固まったところで、次の段階としてWebサイト構造を組み立てます。
必要な情報を書き出す
Webサイト制作の背景、目的、課題とペルソナを定めると、そのWebサイトに必要な情報を整理できます。
事業内容やお客様の声、事例、初めての方へなど、Webサイトの目的達成に必要な項目やペルソナが入手したい情報を洗い出していきます。
ツリー構造に整理する
必要な情報をまとめ終えたら、実際のWebサイトの構造を設計します。
Webサイトのトップページから下層ページまで、Webサイト全体を整理し、構成を組み立てます。このとき、階層構造で大カテゴリーから小カテゴリーへ整理していったものを「サイトマップ」と呼びます。
サイトマップを作成し、各ページの情報と到達経路を示した全体図を確認します。
４．ワイヤーフレームを作る
Webサイトの構造が決まったら、次はページごとの構成をまとめた設計書であるWF（ワイヤーフレーム）を作成します。
WFとはレイアウトを示した設計図のことで、手書きでも作成できますが、WF専用のツールやMicrosoft PowerPoint、Microsoft Excelなどを使用するケースもあります。
WF制作では、トップページ以外からの導線で流入してくるユーザーも意識して、タイトル、コンテンツ、リンク構造などを固めていきます。
５．デザイン・コーディングを行う
ページのイメージが固まったところで、いよいよコーディングで実際にWebサイトをデザインしていきます。
一貫性のあるコーディングを行うためには、WFの作成段階であらかじめイメージカラーや文字のフォント、オブジェクトの配置などを詳細に決めておくと良いでしょう。デザイン経験が少ない場合は、参考サイトや色を決めておくと失敗しづらくなります。
またコーディング時にはデザインだけでなく、可能であればTDタグや構造化データなどのSEO設計を考慮できると理想的です。
６．サイト公開
Webサイトを公開する段階です。最後まで気を抜かず、次の項目もチェックしましょう。
まずはテスト環境で公開する
コーディングを行いWebサイトが完成したらいよいよ公開段階です。本番環境（ユーザーの目に触れる環境）で公開する前に、一度テスト環境で公開してリンク切れや誤字などがないかを確認します。
特にプログラムの挙動やフォームでのメール送信が実際にできているかなど、大きなエラーを中心に確認していきます。デザインや細かなエラーについては、最悪、本番環境でも修正できますが、問い合わせが受け付けられないといった大きな不具合は致命的になるため、何度もチェックしておきましょう。
本番環境で確認する
テスト環境では問題がなかったのに、本番環境へ移した際にエラーが発生するというケースは少なくありません。
本番環境に移行したら新しく発生したエラーの確認を行い、合わせて各ページの挙動もチェックしていきます。すべてのページを見ていくのが望ましいですが、ページ数が数百と膨大な場合は、抜きうちでのエラー確認が現実的です。
公開がはじまり
長いステップを経てWebサイトの公開に至りますが、Webサイトは公開して終わりではなく、公開してからがスタートになります。
公開後は、SEO対策やWeb広告を使った集客、サイト分析による課題の洗い出し、微調整など、運用しながらするべきことは数多くあります。Webサイトの目的を見失わず、継続的に運用していくことが大切です。
７．ECマーケティングでは事前調査と設計をより大切にする
ECマーケティングでは、これまで800社以上のWebサイト制作・改善実績があります。その中で、お客様のWebサイトの目的が達成されるように、今回ご紹介したステップの中でも事前調査と設計を重要視して制作を行うため、通常よりも時間をかけてWebサイトを制作します。
事前調査では、達成したいKPIをヒアリングした上、すでにお持ちの自社サイトや競合他社サイトの分析を行い、課題や問題点を洗い出していきます。
綿密な準備を含めて、弊社では通常の1.5倍以上の時間をかけてWebサイトを制作いたします。長いフローとなりますが、そのぶん質の高いKPIを達成しやすいWebサイトになります。
８．まとめ
Webサイト制作では、まずWebサイトの制作に関する背景、目的、課題を抽出して、ペルソナを設定、必要な情報を洗い出していきます。そして、Webサイトのツリー構造を組み立て、ワイヤーフレームを作成し、デザイン・コーディングを行います。
Webサイトが完成しても、公開前にテスト環境でエラーを確認しましょう。その後ようやくWebサイト公開に至りますが、Webサイトの目的達成のためには継続的に運用をしていくことが大切です。
事前調査や設計を行わずにWebサイトを制作するケースもすくなくありませんが、逆に事前調査や設計に時間をかけることで、効果的なWebサイトを構築することができます。
