Webサイトリニューアルのタイミングは？準備や手順、注意すべきポイントを解説

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

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

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

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

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

Webサイトリニューアルの判断にお困りの際は、以下のポイントを参考にしてみてください。
 

掲載している情報を整理する必要性が出てきた

Webサイトの運営期間が長くなるほど、掲載している情報は増えていくものです。しかし、ページ内の掲載情報が多くなると、どこになんの情報があるのかが煩雑になってしまいます。

ページ内が煩雑になるとユーザーは必要な情報を得るまでに時間を要するため、ユーザビリティの低下と離脱を招きかねません。

こうしたリスクを軽減するためにも、定期的にサイトリニューアルを行い、掲載している情報を整理しましょう。
 

デザインが時代にそぐわなく感じてきた

Webサイトのデザインが時代にそぐわないと感じたら、サイトリニューアルのタイミングです。とはいえ、人によっては判断がしづらいこともあるでしょう。

その場合は、サイトデザインのトレンド周期を参考にリニューアルを検討してみてはいかがでしょうか。一般的なトレンド周期は2〜3年ほどとされていますが、Webサイトのジャンルによって変わります。

• B2B向けサイト：5〜6年
• B2C向けサイト：3〜4年
• 求人サイト：1年

サイトデザインに変化がないと、情報が古いと思われてしまうかもしれません。逆に、時代にあわせて適宜リニューアルを行っているWebサイトは、ユーザーからの信頼度も高まります。

必ず流行を反映しなくてはならない決まりはありませんが、定期的にWebサイトのトレンドをチェックし、サイトリニューアルに活かす工夫は大切です。
 

ターゲット層が変化した

「Webサイトを制作したときとターゲット層が変わった」という場合は、サイトリニューアルを検討してみましょう。

例えば、Webサイトを制作したときのメインターゲットが25歳前後の女性だった場合、5年後には当時のターゲットは30歳前後になっています。

年齢はもちろん仕事や結婚、出産などのライフステージの変化があると、どうしても初期のターゲット層からは逸れてしまいます。

企業とともに年齢を重ねた方々をそのままメインターゲットとする場合、今の年齢に適した内容やサイトデザインに変更する必要があるでしょう。

また「現在25歳前後の女性」をメインターゲットにする場合も、今の時代に合わせてデザインを変えていく必要があります。

ターゲット層が変化したと感じたら、ぜひWebサイトの見直しを行ってみてください。
 

スマートフォンに対応していない

スマートフォンに対応していないWebサイトは、不便さや見づらさからユーザーの離脱を招くおそれがあります。

いまや、多くのユーザーがスマートフォンを情報収集の手段として利用しており、Webサイトの閲覧もスマートフォンから行うケースが増えています。また、2018年にGoogle から「モバイルファーストインデックス（MFI）」への移行（※）が発表されたこともあり、スマートフォン対応は必須と言えるのです。

Webサイトリニューアルを行う際は、モバイルページが便利で見やすくなるよう工夫しましょう。

※これまでPC用ページの内容をもとに実施されていた評価（検索結果の順位付け）がモバイルページに変わる
 

SSL化されていない

SSL（Secure Sockets Layer）とは、インターネット上の通信を暗号化する仕組みです。SSL化されていないWebサイトは、セキュリティが甘いと見なされ、Googleから良い評価を得られません。

SSL化されていないWebサイト：「http://」

SSL化がされているWebサイト：「https://」

ユーザーがアクセスしようとした場合、例えばGoogle Chromeブラウザでは「保護されていない通信」といった警告が表示されるため、ユーザーの離脱を促す結果に。再アクセスの可能性も低くなるため、順位にも大きく影響してしまいます。

こういった場合は、早急にSSL化を行うことが重要です。

SSL化自体は現状のWebサイトのままで可能ですが、この機会にここまでご紹介したその他のポイントもチェックしてみましょう。

Webサイト制作に必須のツール「HTMLエディタ」と、HTMLの書き方については以下のリンクからご覧ください。

こちらでは、Webサイトリニューアルを成功させるためのポイントを解説します。
 

目的を明確にする

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

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

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

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

設定した目標が高すぎると、達成自体が困難になります。また、達成のために時間や労力を割いた結果、リソース不足に陥る可能性もあるため賢明とは言い難いでしょう。

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

目標が高すぎても低すぎても、メンバーのモチベーションは下がっていきます。こうした状況を防ぐためにも、頑張れば達成できるギリギリのラインを見極めて目標を設定するようにしましょう。
 

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

サイトリニューアルというと、「カッコいい」「オシャレで今風な」などといった“ガワ”だけに意識が向いてしまうことも少なくありません。

もちろん時代に即した外側のデザインは大事ですが、それ以上にユーザーが使いやすいサイト構造にすることが大切です。

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

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

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

「デザインばかりに注力した結果、肝心のコンテンツの質が前より落ちた」

「リニューアルに満足してコンテンツ改善に取り組まなかった」

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

自社商品やサービスについてはもちろん、関連した事柄の記事コンテンツを制作する際は以下の記事をご参考ください。

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

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

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

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

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

リニューアルを具体的にどう進めるのかなど、プロジェクトの要件定義をするときや、仕様書の作成時にもご紹介する手順が参考になります。ぜひ、ご覧ください。
 

①目的の明確化

リニューアルの目的を定めることは、プロジェクトの進む方向を決める重要なポイントです。

例えば、旅行をするとき真っ先に目的地を決めますよね。どこに行くかによって準備すべきものや行動、時間、使用する交通機関などは変わりますが、これはWebサイト制作にも同じことが言えます。

するべきことを具体化するためにも、真っ先に目的を考えましょう。

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

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

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

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

これらはリニューアル作業の一部であり、あくまでも目的を達成するための手段です。「サイトで何を実現したいのか」が重要なので、手段と目的は混同しないように注意しましょう。
 

目標・KPI設定

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

目標達成を示すラインは数字で定めましょう。他事業やマーケティング全体の数値も把握しつつ、目的に見合った目標値を設定してください。

目標値が決まったら、それを元にKPIを出します。

• CV数、CV率
• 問い合わせ数
• 予約数
• ユニークユーザー数
• CVページの離脱率
• 重要検索KWからの流入数

これらはよくKPIに設定される項目です。

また、採用目的なら応募者数、業務効率化なら削減できた時間も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
• プレスリリース

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

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

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

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

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

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

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

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

CVが伸び悩んでいることから、Webサイトリニューアルを検討している方もいるでしょう。

しかし、Webサイト全体をリニューアルするのは、時間も費用もかかります。もしもスケジュールや予算の関係上、今すぐのリニューアルは難しいとお考えなら、「CTA（Call To Action）」の見直しから始めてみてはいかがでしょうか。

CTAは、Webサイトを訪問したユーザーに購入や予約などのアクションを起こしてもらうことを指します。例えば、Webページ内に「購入する」「予約する」「資料を請求する」などのボタンを設置し、ユーザーの興味を引きつけるのもCTAの一貫です。

PV数は悪くないのにCVが伸びないという場合、CTAがうまく作用していない可能性があります。サイトリニューアルに踏み切る前にCTAの見直しを行い、CV数がどう変化するかを確認してみましょう。

以下にて、CTA改善の具体的な施策についてご紹介します。
 

テキストの見直し

CTAボタンなどに使用しているテキスト（文言）を、今一度見直してみましょう。

例えば、「簡単」や「お得」といった言葉はユーザーの行動を促しやすいですが、あからさますぎると却って不安や不信感を煽る結果になりかねません。ユーザーの心理的抵抗を少しでも和らげるためにも、言葉選びに工夫しましょう。

例）

「購入」→「購入する」

「登録」→「○○秒で登録完了」

「お問い合わせ」→「無料で相談してみる」

「ダウンロード」→「ダウンロードしてみる」

また、CTAボタンに使用する言葉は名詞ではなく動詞がおすすめです。動詞にすることでユーザーの行動心理が働きやすくなるため、CVにつながりやすくなります。

さらに、誰が見ても意味が理解できる言葉を選ぶことも大切です。聞き慣れないカタカナ語や英語は伝わりにくいため、なるべく避けたほうが良いでしょう。
 

デザインを変更する

色を工夫したり、CTAボタンに影をつけたりと、デザインを変更するのもCV獲得に効果的です。

例えば、赤色やオレンジなどの暖色系は、ユーザーの行動を促す効果が期待できます。また、CTAボタンを立体的に表現すれば「押したくなる」心理に訴えかけることもできるかもしれません。
 

ただし、あまりに極端なデザインはユーザーの心理的抵抗を生むため注意が必要です。A/Bテストによってユーザーの反応を見つつ、最適な案を採用しましょう。
 

CTAへの動線を見直す

CTAへのスムーズな動線確保も重要な見直しポイントです。

Webサイトを訪問したユーザーが商品を購入したいと思っても、CTAボタンが見つからなければ購入を保留にしたり、諦めたりするかもしれません。

せっかくのCV獲得のチャンスを失ってしまうのは勿体ないため、ページ内のどこにいてもCTAボタンが見つけられる工夫をしましょう。
 

バナータイプとテキストタイプのCTAを使い分ける

CTAにボタンやバナーなどを使用するケースは多いですが、テキストリンクのほうがCVにつながりやすいというケースもあります。どちらかに偏るのではなく、バナータイプもテキストタイプも臨機応変に使い分けましょう。
 

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

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