Webサイトも設備の一部なので、いつかはリニューアルする日が来ます。

  • デザインが時代遅れになってきた
  • 時代変化とともにターゲット層が変わってきた
  • サイト構造をすっきりさせたい
  • 運営業務の効率を上げたい

などなど、サイト改築を考えるきっかけは少なくありません。すでに上司からリニューアル決定を伝えられた人もいるのではないでしょうか。

あらかじめ述べておくと、サイトが綺麗になった・使いやすくなったからといって、必ずしも成果が出るわけではありません。他の要因も影響するからです。

本記事ではWebサイトリニューアルの手順・進め方について、重要ポイントとともに解説します。実際にどうやるかイメージしながら読み進めてください。

→ダウンロード: Webサイトのデザインリニューアル完全無料ガイド

Webサイトリニューアルの手順・進め方とポイント

まずはWebサイトリニューアルの手順・進め方とポイントについて、7フェーズに分けて解説します。
 

①目的の明確化

「何のためにリニューアルするのか?」

目的を定めることは、プロジェクトの進む方向を決める最重要ポイントです。

現実世界でも、目的地を北海道にするか大阪にするかで、家を出る時間や使う交通機関(KPIや設計)などが変わるでしょう。目的地を定めなかったら、どこにも行けませんよね。

これは、Webサイト制作にも同じことが言えます。真っ先に目的を考えましょう。

  • サイトの集客力を上げたい
  • 採用応募者を増やしたい
  • 業務を効率化したい
  • (節税したい)

大まかに、このあたりが考えられるのではないでしょうか。

注意すべきは、手段を目的に据えないことです。

  • 追加
  • CMS導入
  • デザインの刷新
  • サイト構造の簡略化

これらはリニューアル作業の一部であり、あくまでも目的を達成するための手段。「それを実行して、結局はサイトで何を実現したいのか?」ということをよく検討しましょう。
 

②目標・KPI設定

目的が決まったら、それを数値化した目標と目標達成度を図るためのKPIを設定します。

「具体的にどうなったら目標達成なのか?」

これはしっかりと数字で決めておきましょう。そのためにはWebサイトだけでなく、事業やマーケティング全体の数値も把握しなければならなりませんね。

そして、固まった目標値を元にKPIを出します。

CV数・CV率や問い合わせ数、予約数、ユニークユーザー数、CVページの離脱率、重要検索KWからの流入数などはよく設定されます。採用目的ならば応募者数、業務効率化なら削減できた時間もKPIに入るでしょう。

あとは目標とKPIを決める際、日程やプロジェクトの役割分担、責任の範囲なども決めておくと具体的な指針ができあがるはずです。
 

③自社と競合の調査から課題を精査

次は課題の精査です。目的達成のボトルネックになっている課題は、自社(Company)・競合(Competitor)・ターゲット顧客(Customer)、すなわち「3C分析」を踏まえるべきです。

以下、それぞれの観点での精査例をあげます。
 

自社

  • Googleアナリティクスを使った定量分析
    リニューアル前である現在のWebサイトを、厳しい目でしっかりと把握・評価しましょう。サイト滞在時間、バウンス率、コンバージョン率といった主要指標を分析し、どこが課題なのかを明確にしていきます。
     
  • 自分で使ってみる
    数値情報だけを見れば良いかというとそれだけでは不十分です。実際にサイトを訪問した際の「手ざわり」や「使用感」も大切なポイントになります。

    一度、自分でもケースシナリオを用意し、その内容に基づいてサイトを使ってみましょう。より具体的なユーザーの悩みが見つかるかもしれません。
     
  • 社内でサイトの使用感をヒアリング
    自分一人だとどうしても主観的な意見になりがちです。なので、社内メンバーにも既存サイトの使用感をヒアリングしましょう。思わぬ観点での指摘が見つかるかもしれません。
     
  • 顧客に実際に聞いてみる
    ユーザーヒアリングは、自社の課題をあぶり出す上で非常に有効的な方法です。顧客リストの中からアンケートや簡易レビューシート、必要に応じて個別インタビューの機会を設け、生の声をヒアリングしましょう。
     

競合

  • 会社名を直接入力して調査
    自社の競合にあたる企業やサービスのWebサイトを検索し、良い点と悪い点をそれぞれリストアップした上で、良い点をリニューアルプランに反映するようにしましょう。悪い点については、リニューアル後に同じ轍を踏まないための「反面教師」として活用します。
     
  • Webサイトのギャラリー集から調べる
    Webサイトのギャラリー集は、手っ取り早くサイトのデザイン案や構成イメージを把握するのに最適です。

    そのまま活用するために参照するというよりかは、どんな企業のどんなサービスがどんな思想設計の元で現在のサイト構成になっているか、という分析データ収集の一手段として活用してみてください。
     

ターゲット顧客

ターゲットのペルソナ像をサイトリニューアルの機会に改めて見直すのも、非常に重要なステップです。

Webサイトの大きな役割は、ユーザーを目的箇所へスムーズに導いてあげること。最適な導線を設計するには、軸となるペルソナが明確に定まっている必要があります。

これが充分にできていない場合は、リニューアルプロジェクトを進める前に、必ず完了させておくようにしましょう。
 

④サイトマップ整理・ワイヤーフレーム作成

目的・目標・課題の明確化が終わったら、実際にサイト構造の設計に進みます。

ここではサイトマップの整理と、ワイヤーフレームの作成の二段階に分けて解説します。
 

サイトマップ整理

まずはサイトマップの整理です。

既存サイトをチェックし、

  • 残すもの
  • 修正するもの
  • 追加するもの
  • 切り捨てるもの

を見極め、リニューアル後に掲載するコンテンツリストを作ります。

その上で、これらコンテンツをWebページライクに整理した「サイトマップ」を作成しましょう。サイトマップではコンテンツをとりまとめる「カテゴリー」を整理し、サイト上部に表示させるメニューに沿って、コンテンツを配置していきます。

この作業を進めるのに便利なのが「目的マップ」です。以下は、プロダクトセールス目的のサイト構築のために作成された目的マップです。

先ほど設定したペルソナをベースに、購買プロセス上の顧客の位置付けを表現したライフサイクルステージおよびその目標を横軸に設定し、それぞれにページ案を追加・削除していくことで、Webサイトにおけるユーザージャーニーを完成させていきます。

目的マップ完成後、そのままサイトマップに反映させれば完成です。 
 

ワイヤーフレーム作成

ワイヤーフレーム例

サイトマップが完成したら、いよいよサイトの“ガワ”を作っていきます。各ページのレイアウトを定める際に使うのが「ワイヤーフレーム」です。いきなり写真や画像イメージなどを入れ込めて進めるよりも構成の調整をしやすく、各デザイン要素をあちこち動かさずに済みます。

「Cacoo(カクー)」や「wireframe.cc」など、無料で簡単にワイヤーフレームを作成できるツールがあるので、ぜひ使ってみてください。
 

⑤デザイン制作・コンテンツ制作

ワイヤーフレーム作成まで完了したら、次はデザイン制作です。具体的な写真や画像イメージ、サイトに合ったフォントなど、実際のリニューアル後のWebサイトデザインを作り進めます。

また並行して、リニューアル後に必要となるコンテンツ制作も進めます。画像などの素材も本当にアップするものを使い、実際の見え方をチェックしましょう。

デザイナーとコミュニケーションを取りながらの作業になるので、数週間の工数期間を見積もっておいたほうが良いでしょう。
 

⑥コーディング

デザインイメージが完成した段階で、いよいよコーディングへ移ります。

もちろん、既存サイトの運用中のコードを直接いじるのではなく、テスト環境を用意して進めていくことになります。

テストで問題がなければ最後にリニューアルのタイミングを設定し、所定の日時に既存サイトデザインとリニューアル後デザインを切り替えましょう。

公開後は全てのページが意図通りに表示されているかを、必ず確認してください。大事なページでエラーなどが発生していたら目も当てられません。

ここまでが、リニューアルまでのTODO事項になります。
 

⑦運用と改善

サイトをリニューアルしたら、それでおしまいではありません。むしろ、ここからがスタートです。

自社の目的と目標に対して、定量および定性での分析を継続的に行い、改善のためのアクションを日々続けていきましょう。

以下、定量・定性分析のための施策の一例をあげておきます。
 

定量分析

  • Googleアナリティクス分析(サイト内滞在時間、バウンス率、クリックスルー率、コンバージョン率、トラフィックソース、トップランキング、ページ合計ページビュー等)
  • ヒートマップ分析
  • A/Bテスト実施
     

定性分析

  • ユーザーテスト
  • ユーザーアンケート/インタビュー
  • 自社内各ステークホルダーへのヒアリング
     

Webサイトのリニューアルを社外に告知しよう!

Webサイトをリニューアルしたら、必ず社外への告知も積極的に実施しましょう。

具体的には以下のリソースを使います。

  • 新サイトのお知らせ欄
  • 各種SNS
  • プレスリリース

この際にポイントとなるのが「集客のため」と自社目線の理由ではなく、顧客目線の理由を語ること。

今の時代、ストーリーによる共感が非常に大事なポイントになります。

  • なぜこのタイミングでリニューアルをしたのか
  • 何のためにリニューアルが必要だったのか
  • どんな理由からどこをリニューアルしたのか
  • 自社のみならず社会にどのような影響を与えたいからなのか

このような観点で発信物を作っていきましょう。

しっかりと告知・発表をすると、既存ユーザーに対して精力的に活動しているとアピールできます。何も知らないまま訪問した顧客が、「前と違うぞ」と不信感を抱いて離脱するのも防げますね。

また、以前少し話したクライアント候補の方が、リニューアルを機に改めて興味を持って見てくれるかもしれません。

さらにリニューアルプロジェクトがソーシャルグッドの観点で訴求できるようであれば、テレビや新聞をはじめ、関連メディアが取材してくれる可能性すらあります。

色々な人が見ている可能性があるからこそ、社外への告知を怠らないことが大切です。
 

Webサイトリニューアルの注意点

最後にWebサイトリニューアルを成功させるためのポイントを解説します。進め方の章と被る内容もありますが、それだけ重要ということなので全て押さえるようにしましょう。
 

目的を明確にする

前述のとおりリニューアルプロジェクトを始める前に、「目的を明確化」することが大変重要です。

目的が明確になるからこそ「目標」が明確になり、目標が明確になるからこそ「解決したい課題」が明確になり、課題が明確になるからこそターゲットとなる「顧客」が明確になります。
 

高すぎず低すぎずの目標を立てる

リニューアル後の目標は「高すぎず低すぎず」が良いです。

設定した目標が高すぎると、そもそも達成不可能になり、どうしようもありません。また、高すぎる目標を目指した結果リソース不足になっても本末転倒です。

一方で、達成が容易すぎるとメンバーの成長につながりません。

さらに、高すぎても低すぎても、メンバーのモチベーションは下がっていきます。よって、高すぎでなく低すぎでもない、ストレッチレベルの目標を設定するようにしましょう。
 

ユーザーが使いやすいサイト構造にする

サイトリニューアルというと、「単純にカッコいい」とか「オシャレで今風な」といった、“ガワ”だけに意識が向いてしまうケースがあります。
もちろん時代に即した外側のデザインは大事ですが、それ以上にユーザーが使いやすいサイト構造にすることが一番大切です。

そのためにも、ペルソナはどのようなUI/UXに慣れ親しんでいるのかをきちんと調査した上で、サイト設計を進めるようにしましょう。
 

コンテンツの質を落とさない

サイトリニューアルばかりではなく、コンテンツの質を落とさないことへの意識も大切です。

「デザインばかり頑張った結果、肝心のコンテンツの質が前より落ちた」
「リニューアルに満足してコンテンツ改善に取り組まない」

こういうことになっては本末転倒。ユーザーの満足度も下がり、目的を達成できなくなってしまいます。
 

リダイレクト漏れをなくす

ドメインや各種コンテンツページなどが新しいURLになった場合は、旧ページから新ページへのリダイレクト設定に漏れがないよう気をつけてください。

しっかりとリダイレクトがなされないと、新ページはないものとして検索エンジンに判断されてしまいます。またユーザーにとってもコンテンツがメンテナンスされずに古いままだと、欲しい情報が手に入らないので満足度が下がってしまいます。

リダイレクト漏れによる「もったいない」損失は、一切なくすようにしましょう。
 

今回はWebサイトリニューアルの進め方・手順や、注意すべきポイントなどを解説しました。一通りの流れは理解できたでしょうか。

Webサイトのリニューアルにはかなりの工数を取られると思います。リニューアルが完了すると一旦気が抜けそうになりますが、そこからようやく新しいスタート地点に立てるのです。目的が達成できる状態になっているか、しっかり効果検証を行い、細かな改善を重ねていきましょう。

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

Webサイトのデザインリニューアル完全ガイド

元記事発行日: 2019年3月18日、最終更新日: 2020年6月04日

トピック::

WEBサイト