失敗しないためのWebサイト制作プロセス

2020.01.27  株式会社エクサ

マーケティング戦略の一部として、自社の製品やサービスの価値訴求を行う上で、欠かせないのがWebサイトです。インターネット黎明期には一部の会社でしか活用されていなかったWebサイトは、今や9割以上の会社が何らかの形でWebサイトを保有し運営しています。

しかし、テクノロジーやビジネス環境の変化が著しく、いかにして集客し、いかに最適な形で情報を提供すれば、ビジネスに貢献するWebサイトを制作することができるのか?ということは誰もが抱えている悩みではないでしょうか。そこで本稿では、改めてWebサイトの制作に必要なプロセスを確認しつつ、考慮すべきポイントについてご紹介します。

企画・設計

Webサイトの目的を決める

Webサイト制作で最初に行うことが、Webサイトの目的を決めることです。「何のためのWebサイトなのか?」が定まっていないと、制作するWebサイトのコンセプトがブレてしまい、本来の効果が得られなくなってしまいます。 中でも以下の点は企画・設計の基本構想を固める上で重要な情報となります。

  • 誰にみてもらいたいのか?=ターゲットペルソナ

  • どのようにWebを活用してもらうのか?=カスタマージャーニー

  • どう言った価値訴求ができるのか?=オファー(Call To Action)

個別最適をはかり複数のWebサイトを運営すべきか?包括的に情報を取りまとめることで1つのサイトで全てをまかなうべきか?など、サイトの位置付け(メディア戦略)についても基本構想段階で決めておく必要があります。

Webサイトに必要な情報を書き出す

Webサイトの目的が決まれば、それに必要な情報も自然と決まっていきます。伝えるべき情報を体系的に整理してメニュー化し、かつ、利用者がストレスなく利用できるように整理することが重要になります。

企画・設計段階で整理したカスタマージャーニーを意識し、利用者の状態や検討段階で整理したメニュー体系やコンテンツの配置を意識することで、必要となる情報が整理しやすくなります。

Webサイトの構成図を作る

Webサイトに必要な情報をすべて書き出したら、それらの情報を構造的に整理していく作業を行います。まず、必要な情報をカテゴリーごとに分けて、不足している情報や重複している情報がないか確認していきます。

多くのWebサイトは、ツリー構造をとるのが一般的で、トップから下層に向かって枝分かれしていく樹木状の構造になっています。そのため、Webサイトの構成図を作る際は、階層構造を整えつつ、上下や左右の関係性に矛盾がないか不明瞭な構造となっていないか、絶えず確認しながら最終的な構成を作成していきます。

ここで定めた構成は、Webサイトのディレクトリ(URL)としても利用されるため、後から変更が起きないよう、きちんと吟味して決定していきます。

要件定義

Webサイトに必要な機能を決める

「要件定義」では、Webサイト制作へ着手する前に色々なことを決めていきます。最初に決めるのはWebサイトに必要な機能です。一口にWebサイトといっても実にさまざまなものがありますし、目的によって制作するWebサイトが違ってきます。Webサイトに備える機能も異なりますので、これを定義することが重要となります。

企画・設計のプロセスでまとめた情報をもとに機能要件を定義していきます。この際、Webサイト自体で実装する機能や、外部システムと連携する機能などを整理し、必要な業務要件が満たされているかを確認していく必要があります。

この段階で、マーケティングオートメーションやメール配信サービス、ソーシャル連携、購買サイトであれば、決済システムやポイント連携と言った外部のシステムとの連携についても正しく定義し、Webサイト開発で対応する部分を明確に定義します。

特に重要になるのは、商品情報管理システムなど社内の関連システムとの連携です。Webサイト上で配信する製品やサービスの情報は、社内の関連部署が持っているシステムとの連携により効率的に活用することができ、データの完全性もより高い次元で担保することができます。

Webサイトのデザインを決める

ここからWebサイトの顔とも言えるデザインを決定する作業に移行していきます。Webサイト制作プロジェクトでは、Webサイト制作の全体を管理するディレクターと、デザイン担当のWebデザイナーが異なる会社の要員で構成されることが多く、ここで初めてプロジェクトメンバーが顔を合わせるということも多いかもしれません。

Webサイトに必要な情報と機能要件からWebサイトの大まかな構成を決めて、依頼企業側の意向を組みながらページごとのデザインを決めていきます。一般的にはいくつかデザイン案が作成され、その中からイメージにピッタリなデザインを決めていきます。

ここで重要になるのが、単にデザイン本意に進めるのではなく、適切に情報を届けるために必要な機能としてデザインを捉えることです。特に商品情報などは定期的に更新されたり、表形式が適しているものや図版を使用した方がわかりやすいものが多く、考慮が必要となります。また、より詳細な情報を含むものはPDFファイルのようなダウンロードコンテンツとして提供した方がユーザの利便性が高い場合もあります。このように、機能とデザインは密接な関係にあることを踏まえてレビューしていき、デザインを決めていくことが大切です。

Webサイトのテストを計画する

Webサイト制作では、制作途中のWebサイトがしっかりと機能しているか、最終的なデザインはイメージに合ったものか、ブラウザごとに表示したときにレイアウトの崩れはないかなどの確認を行うテスト作業が欠かせません。特にスマートフォンなどのマルチデバイス対応については、利用者の利便性のみならず、検索エンジンが決定する評価にも直結するため、正しく機能し、構造的なエラーがないかなどをテストできるよう計画を立てる必要があります。

Webサイトの質はいかにテストに時間をかけられるかによって決まると言っても過言ではないので、早い段階でのテスト計画作成は非常に重要です。また、セキュリティ面でも安全性を高める役割もあるので、可能であればテストに多くの時間をかけるよう計画します。

制作

必要なWebテンプレートを確定させる

「要件定義」プロセスが完了すると、いよいよWeb制作に入ります。まず必要なのは、Webサイトを構成するのに欠かせないフレーム(テンプレート)の確定です。画像や説明文などのテキストコンテンツは差し替えが簡単ですが、レイアウトやページの構造は一度作成すると修正に時間がかかるため、Webサイト構成図で決定したページ構造を意識しながら各ページで利用されるテンプレートを確定させます。

制作会社によってはテンプレートを使わずに完全にページ毎にコーディングする場合もありますが、メンテナンス性やコンテンツの更新作業など運用面も意識して、固定ページの部品化や投稿型のページ利用などを織り交ぜて制作すると効率的です。

商品情報管理システムを利用する

Webサイトで利用するコンテンツを全てhtmlやCSSで用意するのでは、情報の更新や変更があるたびに制作会社に依頼しなければなりません。そこで、情報自体が種類や量が多く、更新頻度も高い製品情報などは、商品情報管理システムを利用すると便利です。

商品情報管理の特長は、Webで公開する前段階の情報整理に利用できる点です。製造業などにおける製品毎に関連する情報の組み合わせが必要となる場合でも、Webサイトでその制御をするのでなく、商品情報管理システム内で関連性を定義して制御することができるようになります。そのため、Webサイトでは、単に必要な情報を呼び出すだけで適切なコンテンツを表示することが可能となります。

各種データを取得し改善する

Webサイトが制作できたら、公開(切り替え)前に、分析・解析用に各種データ取得のためのツール設定を行います。代表例は以下となりますが、それぞれ必要に応じてツール設定情報を登録することで、データ採取と可視化、活用が行えるように準備できます。

  • アクセス解析ツール

  • ヒートマップツール

  • マーケティングオートメーションやメール配信サービス

  • DMPや行動解析ツール

いずれもWebサイト内にトラッキングコードを設定することで、アクセスしてくるコンタクトの行動を補足したり、アクションの支援を行います。

ただし、Webサイト内でのCookie利用については年々規制強化が進む流れになっていますので、正しく情報管理を行うための体制を構築しておくことも重要になります。

まとめ

いかがでしょうか。Webサイト制作の大まかな流れと、考慮すべきポイントを整理しました。

Webサイトは一度作成したら完了するものではなく、改善・修正の繰り返しになります。そのため、適切にデータを活用することは当然ですが、柔軟に改修できる形でWebサイトを維持管理できるように考慮しておくことで、機動的なメディアとしてビジネスに貢献させることができます。

Webサイトの活用は企業のビジネストランスフォーメーションの第一歩になります。単にデザインを新しくすることを目的とせず、適切な環境を整えることから検討を初めてはいかがでしょうか。

当社では、製造業のお客様を中心に多くのBtoB企業様に求められる各種サービスを提供することで、デジタルトランスフォーメーションをご支援しています。是非、お気軽にご相談ください。

[Blog][Footer]Contentservご紹介資料

RECENT POST「市場動向」


失敗しないためのWebサイト制作プロセス