- デザインが時代遅れになってきた
- 時代変化とともにターゲット層が変わってきた
- サイト構造をすっきりさせたい
- 運営業務の効率を上げたい
【無料ガイド】Webサイトを”マーケティング”視点で考える
Webサイトリニューアルに必要なポイントをまとめた無料ガイドを準備しました。このガイドを使用して24時間見込み客を獲得し続けるWebサイトを構築ください。
など、Webサイトをリニューアルしたいと考えるタイミングはさまざまです。しかし、本当にこのようなタイミングでリニューアルを行ってもいいのか、悩んでいる方も多いのではないでしょうか。
もちろん、リニューアルしてサイトが綺麗になっても、必ず成果が出るわけではないため、目的を持って確実に進める必要があります。
本記事では、Webサイトリニューアルを考えるタイミングの是非や手順、進め方、重要なポイントについて解説します。
Webサイトをリニューアルするには?
〜ユーザーが使いやすいWebサイトを構築するための必要事項を完全網羅〜
- Webサイトリニューアルの戦略
- Webサイトリニューアルの最適化
- Webサイトリニューアルの分析方法
- Webサイトリニューアルの公開
今すぐダウンロードする
全てのフィールドが必須です。
Webサイトリニューアルのタイミング
Webサイトリニューアルの判断にお困りの際は、以下のポイントを参考にしてみてください。
スマートフォンに対応していない
スマートフォンに対応していないWebサイトは、不便さや見づらさからユーザーの離脱を招くおそれがあります。
いまや、多くのユーザーがスマートフォンを情報収集の手段として利用しており、Webサイトの閲覧もスマートフォンから行うケースが増えています。また、2018年にGoogle から「モバイルファーストインデックス(MFI)」への移行(※)が発表されたこともあり、スマートフォン対応は必須と言えるのです。
なお、モバイル表示に対応していないWebサイトはユーザビリティを大きく落としているため、リニューアルの緊急性としてはかなり上位になります。具体的には、ディスプレイの幅にあわせてコンテンツの幅を調整するレスポンシブデザインへの切り替えが必須になるでしょう。
スマホサイトのデザインについては、以下コラムをご覧ください。
※これまでPC用ページの内容をもとに実施されていた評価(検索結果の順位付け)がモバイルページに変わる
掲載している情報を整理する必要性が出てきた
Webサイトの運営期間が長くなるほど、掲載している情報は増えていくものです。しかし、ページ内の掲載情報が多くなると、どこになんの情報があるのかが煩雑になってしまいます。
ページ内が煩雑になるとユーザーは必要な情報を得るまでに時間を要するため、ユーザビリティの低下と離脱を招きかねません。
こうしたリスクを軽減するためにも、定期的にサイトリニューアルを行い、掲載している情報を整理しましょう。
デザインが時代にそぐわなく感じてきた
Webサイトのデザインが時代にそぐわないと感じたら、サイトリニューアルのタイミングです。とはいえ、人によっては判断がしづらいこともあるでしょう。
その場合は、サイトデザインのトレンド周期を参考にリニューアルを検討してみてはいかがでしょうか。一般的なトレンド周期は2〜3年ほどとされていますが、Webサイトのジャンルによって変わります。
- BtoB向けサイト:5〜6年
- BtoC向けサイト:3〜4年
- 求人サイト:1年
サイトデザインに変化がないと、情報が古いと思われてしまうかもしれません。逆に、時代にあわせて適宜リニューアルを行っているWebサイトは、ユーザーからの信頼度も高まります。
必ず流行を反映しなくてはならない決まりはありませんが、定期的にWebサイトのトレンドをチェックし、サイトリニューアルに活かす工夫は大切です。
ターゲット層が変化した
「Webサイトを制作したときとターゲット層が変わった」という場合は、サイトリニューアルを検討してみましょう。
例えば、Webサイトを制作したときのメインターゲットが25歳前後の女性だった場合、5年後には当時のターゲットは30歳前後になっています。
年齢はもちろん仕事や結婚、出産などのライフステージの変化があると、どうしても初期のターゲット層からは逸れてしまいます。
企業とともに年齢を重ねた方々をそのままメインターゲットとする場合、今の年齢に適した内容やサイトデザインに変更する必要があるでしょう。
また「現在25歳前後の女性」をメインターゲットにする場合も、今の時代に合わせてデザインを変えていく必要があります。
ターゲット層が変化したと感じたら、ぜひWebサイトの見直しを行ってみてください。
コンテンツの更新頻度を上げたい
Webサイトを作成した時点では、ひとまずWeb上に情報があること、問い合わせページがあることを優先し、コンテンツの更新はあまり考えていなかったかもしれません。しかし、今やスマートフォンでの情報収集は顧客との重要な接点であり、コンテンツを更新しないことはWebにおいて不利ともいえます。更新のないWebサイトは、ユーザーから信頼されにくいためです。
コンテンツマーケティングの観点では、良質なコンテンツを更新し続けることはブランド価値の向上やコンバージョン率の改善に効果的です。
このように更新頻度を上げたいと考えた場合、リニューアルを行って更新しやすいサイト、コンテンツを見やすいサイトにする意義があります。
SSL化されていない
SSL(Secure Sockets Layer)とは、インターネット上の通信を暗号化する仕組みです。SSL化されていないWebサイトは、セキュリティが甘いと見なされ、Google から良い評価を得られません。
- SSL化されていないWebサイト:「http://」
- SSL化がされているWebサイト:「https://」
ユーザーがアクセスしようとした場合、例えばGoogle Chromeブラウザでは「保護されていない通信」といった警告が表示されるため、ユーザーの離脱を促す結果に。再アクセスの可能性も低くなるため、順位にも大きく影響してしまいます。
こういった場合は、早急にSSL化を行うことが重要です。
SSL化自体は現状のWebサイトのままで可能ですが、この機会にここまでご紹介したその他のポイントもチェックしてみましょう。
Webサイト制作に必須のツール「HTMLエディタ」と、HTMLの書き方については以下のリンクからご覧ください。
Webサイトリニューアルの手順やポイント
まずはWebサイトリニューアルの手順やポイントについて、7フェーズに分けて解説します。
リニューアルを具体的にどう進めるのかなど、プロジェクトの要件定義をするときや、仕様書の作成時にもご紹介する手順が参考になります。ぜひ、ご覧ください。
①目的の明確化
リニューアルの目的を定めることは、プロジェクトの進む方向を決める重要なポイントです。
目的がなくリニューアルを進めてしまうと、企業の独りよがりのWebサイトになったり、集客につながらなかったりするかもしれません。プロジェクトチーム内で目的を共有することで、どうするべきか迷ったときにも同じ方向を向き、軌道修正を行えるようにすることが重要です。
するべきことを具体化するためにも、真っ先に目的を考えましょう。
- 掲載している情報を整理したい
- デザインを時代に合ったものにしたい
- 変化したターゲット層に合わせたものにしたい
- コンテンツの更新頻度を上げたい
記事冒頭でも挙げましたが、このような目的が考えられるでしょう。
注意すべきは、手段を目的に据えないことです。
- 追加
- CMS導入
- デザインの刷新
- サイト構造の簡略化
これらはリニューアル作業の一部であり、あくまでも目的を達成するための手段です。「サイトで何を実現したいのか」が重要なので、手段と目的は混同しないように注意しましょう。
②目標・KPI設定
目的が決まったら、それを達成するための目標と、目標達成度を図るためのKPIを設定します。
目標達成を示すラインは数字で定めましょう。他事業やマーケティング全体の数値も把握しつつ、目的に見合った目標値を設定してください。
例えば、Webサイトのデザインを時代に合ったものにしたい場合、ターゲット層の変化のようにマーケティングにおいて大きな変化を想定するものではありません。そのため、これまで追っていたKPIがそのままリニューアルのKPIとなるでしょう。リニューアル前より数値が改善されれば、リニューアル成功といえます。
また、時代に合ったデザインにすることでブランド価値を高めたい目的があれば、LTVや定性調査であるユーザビリティテストがKPIとなりえます。
他には、コンテンツの更新頻度を増やす場合、自然検索からの流入やアクセス数、問い合わせ数などがKPIとなるでしょう。
なお、目標とKPIを決める際は日程やプロジェクトの役割分担、責任の範囲なども決めておくと現場の動きがスムーズです。
③自社と競合の調査から課題を精査
次は課題の精査です。
目的達成のボトルネックになっている課題はを洗い出す際は、自社(Company)・競合(Competitor)・ターゲット顧客(Customer)、すなわち「3C分析」を踏まえるべきです。
以下、それぞれの観点での精査例をあげます。
自社
- Google アナリティクスを使った定量分析
リニューアル前である現在のWebサイトを、厳しい目でしっかりと把握・評価しましょう。
サイト滞在時間、バウンス率、コンバージョン率といった主要指標を分析し、どこが課題なのかを明確にしていきます。 - 自分で使ってみる
数値情報だけを見れば良いかというとそれだけでは不十分です。実際にサイトを訪問した際の「手ざわり」や「使用感」も大切なポイントになります。
一度、自分でもケースシナリオを用意し、その内容に基づいてサイトを使ってみましょう。より具体的なユーザーの悩みが見つかるかもしれません。 - 社内でサイトの使用感をヒアリング
自分一人だとどうしても主観的な意見になりがちです。なので、社内メンバーにも既存サイトの使用感をヒアリングしましょう。思わぬ観点での指摘が見つかるかもしれません。 - 顧客に実際に聞いてみる
ユーザーヒアリングは、自社の課題をあぶり出す上で非常に有効的な方法です。
顧客リストの中からアンケートや簡易レビューシート、必要に応じて個別インタビューの機会を設け、生の声をヒアリングしましょう。
競合
- 会社名を直接入力して調査
自社の競合にあたる企業やサービスのWebサイトを検索し、良い点と悪い点をそれぞれリストアップした上で、良い点をリニューアルプランに反映するようにしましょう。
悪い点については、リニューアル後に同じ轍を踏まないための「反面教師」として活用します。 - Webサイトのギャラリー集から調べる
Webサイトのギャラリー集は、手っ取り早くサイトのデザイン案や構成イメージを把握するのに最適です。
そのまま活用するために参照するというよりかは、どんな企業のどんなサービスがどんな思想設計の元で現在のサイト構成になっているか、という分析データ収集の一手段として活用してみてください。
ターゲット顧客
ターゲットのペルソナ像をサイトリニューアルの機会に改めて見直すのも、非常に重要なステップです。
Webサイトの大きな役割は、ユーザーを目的箇所へスムーズに導いてあげること。最適な導線を設計するには、軸となるペルソナが明確に定まっている必要があります。
これが充分にできていない場合は、リニューアルプロジェクトを進める前に、必ず完了させておくようにしましょう。
④サイトマップ整理・ワイヤーフレーム作成
目的・目標・課題の明確化が終わったら、実際にサイト構造の設計に進みます。
ここではサイトマップの整理と、ワイヤーフレームの作成の二段階に分けて解説します。
サイトマップ整理
まずはサイトマップの整理です。
既存サイトをチェックし、
- 残すもの
- 修正するもの
- 追加するもの
- 切り捨てるもの
を見極め、リニューアル後に掲載するコンテンツリストを作ります。
その上で、これらコンテンツをWebページライクに整理した「サイトマップ」を作成しましょう。サイトマップではコンテンツをとりまとめる「カテゴリー」を整理し、サイト上部に表示させるメニューに沿って、コンテンツを配置していきます。
この作業を進めるのに便利なのが「目的マップ」です。以下は、プロダクトセールス目的のサイト構築のために作成された目的マップです。
先ほど設定したペルソナをベースに、購買プロセス上の顧客の位置付けを表現したライフサイクルステージおよびその目標を横軸に設定し、それぞれにページ案を追加・削除していくことで、Webサイトにおけるユーザージャーニーを完成させていきます。
目的マップ完成後、そのままサイトマップに反映させれば完成です。
ワイヤーフレーム作成
ワイヤーフレーム例
サイトマップが完成したら、いよいよサイトの“ガワ”を作っていきます。
各ページのレイアウトを定める際に使うのが「ワイヤーフレーム」です。いきなり写真や画像イメージなどを入れ込めて進めるよりも構成の調整をしやすく、各デザイン要素をあちこち動かさずに済みます。
「Cacoo(カクー)」や「wireframe.cc」など、無料で簡単にワイヤーフレームを作成できるツールがあるので、ぜひ使ってみてください。
⑤デザイン制作・コンテンツ制作
ワイヤーフレーム作成まで完了したら、次はデザイン制作です。具体的な写真や画像イメージ、サイトに合ったフォントなど、実際のリニューアル後のWebサイトデザインを作り進めます。
また並行して、リニューアル後に必要となるコンテンツ制作も進めます。画像などの素材も本当にアップするものを使い、実際の見え方をチェックしましょう。
デザイナーとコミュニケーションを取りながらの作業になるので、数週間の工数期間を見積もっておいたほうが良いでしょう。
⑥コーディング
デザインイメージが完成した段階で、いよいよコーディングへ移ります。
もちろん、既存サイトの運用中のコードを直接いじるのではなく、テスト環境を用意して進めていくことになります。
テストで問題がなければ最後にリニューアルのタイミングを設定し、所定の日時に既存サイトデザインとリニューアル後デザインを切り替えましょう。
公開後は全てのページが意図通りに表示されているかを、必ず確認してください。大事なページでエラーなどが発生していたら目も当てられません。
ここまでが、リニューアルまでのTODO事項になります。
⑦運用と改善
サイトをリニューアルしたら、それでおしまいではありません。
自社の目的と目標に対して、定量および定性での分析を継続的に行い、改善のためのアクションを日々続けていきましょう。
以下は、定量・定性分析のためのいくつかの施策をご紹介します。
定量分析:Google アナリティクス分析
定量分析の中でも、Webサイトのアクセス分析は欠かせません。最も知られているツールはGoogle アナリティクスであり、すでに導入している方も多いでしょう。
Google アナリティクスでは、セッション数(アクセス数)、滞在時間、クリックスルー率、エンゲージメント、コンバージョン率などが見るべき指標になります。
定量分析:ヒートマップ分析
ユーザーがWebサイトのどの位置をよく見ているのか、あるいはマウスカーソルがどこを通っているのかを分析できるのがヒートマップツールです。ヒートマップを分析することで、CTAを置くべき場所やコピーの改善点などが見えてきます。
定量分析:A/Bテスト
A/Bテストとは、例えばブログ記事のタイトルを2種類用意し、どちらのタイトルがよりアクセスを集めるかを測るテストのことです。A/Bテスト用のツールを導入することで出し分けが可能になります。
定性分析:ユーザビリティテスト
実際にユーザーにWebサイトを触ってもらい、使いやすいかどうかを試してもらうユーザビリティテストは定性分析の定番です。定量分析だけでは出てこない課題がユーザビリティテストから出てくることがあります。
定性分析:ユーザーアンケート・インタビュー
アンケートやインタビューも、重要な定性分析のひとつです。ユーザビリティテストも含め、通常はテストを実施する専門会社に依頼します。
定性分析:各ステークホルダーへのヒアリング
社内の別部署やよく話すクライアントなど、各ステークホルダーにヒアリングを行うのも定性分析のひとつです。自チームだけでは見えにくい課題を見つけてもらえる可能性があります。
Webサイト分析のさらに詳しいことは、以下コラムをご覧ください。
⑧Webサイトのリニューアルを社外に告知しよう!
Webサイトをリニューアルしたら、必ず社外への告知も積極的に実施しましょう。
具体的には以下のリソースを使います。
- 新サイトのお知らせ欄
- 各種SNS
- プレスリリース
この際にポイントとなるのが「集客のため」という自社目線の理由ではなく、顧客目線の理由を語ること。
今の時代、ストーリーによる共感が非常に大事なポイントになります。
- なぜこのタイミングでリニューアルをしたのか
- 何のためにリニューアルが必要だったのか
- どんな理由からどこをリニューアルしたのか
- 自社のみならず社会にどのような影響を与えたいからなのか
このような観点で発信物を作っていきましょう。
しっかりと告知・発表をすると、既存ユーザーに対して精力的に活動しているとアピールできます。何も知らないまま訪問した顧客が、「前と違うぞ」と不信感を抱いて離脱するのも防げますね。
また、以前少し話したクライアント候補の方が、リニューアルを機に改めて興味を持って見てくれるかもしれません。
さらにリニューアルプロジェクトがソーシャルグッドの観点で訴求できるようであれば、テレビや新聞をはじめ、関連メディアが取材してくれる可能性すらあります。
色々な人が見ている可能性があるからこそ、社外への告知を怠らないことが大切です。
Webサイトリニューアルの注意点
こちらでは、Webサイトリニューアルを成功させるためのポイントを解説します。
目的を曖昧にしたまま進めない
リニューアル手順の項目でも解説したように、Webサイトリニューアルの際には目的を明確にすることが重要です。
目的を曖昧にしたまま進めてしまうと、リニューアルすること自体が目的になってしまったり、企業目線のユーザー置き去りのリニューアルになったりします。
高すぎず低すぎずの目標を立てる
リニューアル後の目標は「高すぎず低すぎず」が良いです。
設定した目標が高すぎると、達成自体が困難になります。また、達成のために時間や労力を割いた結果、リソース不足に陥る可能性もあるため賢明とは言い難いでしょう。
一方で、達成が容易すぎるとメンバーの成長につながりません。
目標が高すぎても低すぎても、メンバーのモチベーションは下がっていきます。こうした状況を防ぐためにも、頑張れば達成できるギリギリのラインを見極めて目標を設定するようにしましょう。
ユーザーが使いやすいサイト構造にする
サイトリニューアルというと、「カッコいい」「オシャレで今風な」などといった“ガワ”だけに意識が向いてしまうことも少なくありません。
もちろん時代に即した外側のデザインは大事ですが、それ以上にユーザーが使いやすいサイト構造にすることが大切です。
そのためにも、ペルソナはどのようなUI/UXに慣れ親しんでいるのかをきちんと調査した上で、サイト設計を進めるようにしましょう。
コンテンツの質を落とさない
サイトリニューアルばかりではなく、コンテンツの質を落とさないよう配慮することも大切です。
「デザインばかりに注力した結果、肝心のコンテンツの質が前より落ちた」
「リニューアルに満足してコンテンツ改善に取り組まなかった」
こういうことになっては本末転倒です。ユーザーの満足度が下がり、目的を達成できなくなってしまいます。
自社商品やサービスについてはもちろん、関連した事柄の記事コンテンツを制作する際は以下の記事をご参考ください。
リダイレクト漏れをなくす
ドメインや各種コンテンツページなどが新しいURLになった場合は、旧ページから新ページへのリダイレクト設定に漏れがないよう気をつけてください。
しっかりとリダイレクトがなされないと、新ページはないものと検索エンジンに判断されてしまいます。またユーザーにとってもコンテンツがメンテナンスされずに古いままだと、欲しい情報が手に入らないので満足度が下がってしまいます。
リダイレクト漏れによる「もったいない」損失は、なくすようにしましょう。
SEOへの影響に注意する
Webサイトをリニューアルする際、もしドメインごと新規から作り直す場合、SEOへの影響に注意が必要です。
独自ドメインは自社・ブランドのアイデンティティを示す上で重要ですが、独自ドメインを取得したばかりだとドメインパワーがなく、検索にて上位に上がりにくい状態となっています。ドメインパワーがゼロからスタートになることを見越したうえで、目標を立てるといいでしょう。
また、ドメインをそのままにリニューアルする場合も、検索エンジンからはコンテンツが変わったと認識されるためSEOへの影響が出る可能性があります。
リニューアル以外の選択肢も検討する
本記事ではリニューアルに焦点を絞って解説してきましたが、目的によってはリニューアル以外にも「CTA(Call To Action)の改善」や「リプレイス」の選択肢があります。
リニューアルには一定のコストがかかりますが、それだけのコストをかけられない、費用対効果が見込めない場合には、CTAを改善して現サイトのパフォーマンスを上げる方法もあります。
また、今のデザインはそのままにCMSを移行する「リプレイス」も有効な手段です。CMSの移行にも一定のコストはかかりますが、更新しやすいCMS、マーケティング施策を実施しやすいCMSへ移行することでアクセス数やコンバージョン率の改善が期待できます。
当社HubSpotでは、独自のCMSを含むマーケティングソフトウェア「Content Hub」を提供しています。
Content Hubに含まれるCMSはマーケティング機能に特化しており、HubSpotの各マーケティングツールと連携してリードジェネレーションやコンバージョン率改善を支援します。
また、Content Hubではフリープランから生成AIによるブログ作成機能が利用可能です。トピックとプロンプト(指示文)を入力するだけでアウトラインの作成が可能なため、短時間で魅力的な記事を完成させることができます。
Content Hubで作成したコンテンツは、WordPressで構築したサイトへ埋め込むことも可能です。
CTAの見直しも重要
CVが伸び悩んでいることから、Webサイトリニューアルを検討している方もいるでしょう。
しかし、Webサイト全体をリニューアルするのは、時間も費用もかかります。もしもスケジュールや予算の関係上、今すぐのリニューアルは難しいとお考えなら、「CTA(Call To Action)」の見直しから始めてみてはいかがでしょうか。
CTAは、Webサイトを訪問したユーザーに購入や予約などのアクションを起こしてもらうことを指します。例えば、Webページ内に「購入する」「予約する」「資料を請求する」などのボタンを設置し、ユーザーの興味を引きつけるのもCTAの一貫です。
PV数は悪くないのにCVが伸びないという場合、CTAがうまく作用していない可能性があります。サイトリニューアルに踏み切る前にCTAの見直しを行い、CV数がどう変化するかを確認してみましょう。
以下にて、CTA改善の具体的な施策についてご紹介します。
テキストの見直し
CTAボタンなどに使用しているテキスト(文言)を、今一度見直してみましょう。
例えば、「簡単」や「お得」といった言葉はユーザーの行動を促しやすいですが、あからさますぎると却って不安や不信感を煽る結果になりかねません。
ユーザーの心理的抵抗を少しでも和らげるためにも、言葉選びに工夫しましょう。
例)
- 「購入」→「購入する」
- 「登録」→「○○秒で登録完了」
- 「お問い合わせ」→「無料で相談してみる」
- 「ダウンロード」→「ダウンロードしてみる」
また、CTAボタンに使用する言葉は名詞ではなく動詞がおすすめです。動詞にすることでユーザーの行動心理が働きやすくなるため、CVにつながりやすくなります。
さらに、誰が見ても意味が理解できる言葉を選ぶことも大切です。聞き慣れないカタカナ語や英語は伝わりにくいため、なるべく避けたほうが良いでしょう。
デザイン・配置を変更する
色を工夫したり、CTAボタンに影をつけたりと、デザインを変更するのもCV獲得に効果的です。
例えば、赤色やオレンジなどの暖色系は、ユーザーの行動を促す効果が期待できます。また、CTAボタンを立体的に表現すれば「押したくなる」心理に訴えかけることもできるかもしれません。
また、CTAの配置を変えることも有効です。ヒートマップツールを使用すると、ユーザーの目線がどこに集まっているかがわかります。CTAはよく見られる場所に置くと、クリックされやすくなります。
ただし、あまりに極端なデザインはユーザーの心理的抵抗を生むため注意が必要です。A/Bテストによってユーザーの反応を見つつ、最適な案を採用しましょう。
CTAへの動線を見直す
CTAへのスムーズな動線確保も重要な見直しポイントです。
Webサイトを訪問したユーザーが商品を購入したいと思っても、CTAボタンが見つからなければ購入を保留にしたり、諦めたりするかもしれません。
せっかくのCV獲得のチャンスを失ってしまうのは勿体ないため、ページ内のどこにいてもCTAボタンが見つけられる工夫をしましょう。
バナータイプとテキストタイプのCTAを使い分ける
CTAにボタンやバナーなどを使用するケースは多いですが、テキストリンクのほうがCVにつながりやすいというケースもあります。どちらかに偏るのではなく、バナータイプもテキストタイプも臨機応変に使い分けましょう。
CTA改善については、以下コラムにて詳しく解説しています。
Webサイトリニューアルの目的を忘れずに
今回はWebサイトリニューアルの進め方・手順や、注意すべきポイントなどを解説しました。一通りの流れは理解できたでしょうか。
Webサイトのリニューアルにはかなりの工数を取られると思います。リニューアルが完了すると一旦気が抜けそうになりますが、そこからようやく新しいスタート地点に立てるのです。目的が達成できる状態になっているか、しっかり効果検証を行い、細かな改善を重ねていきましょう。