ホームページリニューアルで失敗しないためのコツ！成功例つき 市川莉緒 2021.10.29 2023/1/19 CROUI/UXWEBデザイン実例 CROUIUXWEBデザインサイト改善 ホームページリニューアルの流れ ホームページリニューアルは事前の現状分析が決め手 作って終わりじゃない！公開後の効果測定が2つ目の肝 ホームページリニューアル公開前のチェックポイント ホームページリニューアルでよくある失敗例 「ホームページが古いので新しくしたい」、「お問い合わせがもっと増えるようなホームページにしたい」など、ホームページのデザインで悩みを抱えていませんか？今回はホームページリニューアルを検討している方に向けて、進め方や注意すべきポイントを成功例、失敗談と併せてご紹介します。 ホームページリニューアルの流れ ホームページリニューアルの手順は大まかに以下の通りです。 1. リニューアルする理由と目標の決定 2. 課題分析 3. 要件定義 4. ワイヤーフレーム作成～実装 5. 公開後の効果測定 今回は、ホームページリニューアルを進める上で特に大事なステップ1，2，5について詳しく解説します。4のワイヤーフレームの作成についてはこちらの記事をご覧ください。 ホームページリニューアルの理由と目標を固めよう まずは「なぜホームページをリニューアルするのか？」という理由と、「リニューアル後どんな成果を出したいか？」という目標をしっかり固めましょう。 理由と目標を定めることで、公開後の効果測定の段階でも改善施策が立てやすくなります。また、デザイナーやコーダーが作業を行いやすくなり、ホームページリニューアルがよりスムーズに進みます。 ＜ホームページリニューアルの理由例＞ ・ECサイトで商品カテゴリを整理したい ・お問い合わせページ／フォームにもっと誘導したい ・ログイン後のマイページを使いやすくしたい ホームページを書庫だとイメージしてみてください。初期のころは書類やファイルなどしっかり整理されていても、月日の経過ともに乱雑になりどこに収納したか分からないことがよくありませんか？ ホームページにおいても、商材やサービスの変更を繰り返すうちに、カテゴリの構造や階層が乱雑になって使いづらくなってしまうことがよくあります。また、ホームページの仕様や機能が古くて、レスポンシブデザイン*に対応していないサイトも多く見られます。 *レスポンシブデザインとは、パソコンやスマートフォンなど、デバイスの画角に応じて、最適なサイズでWebサイトを表示させること。 また、ホームページリニューアルの目標を決めるときは事業の目標から逆算することが多くあります。たとえば、月の目標問い合わせ件数が50件であれば、足りていない件数をリニューアル後のホームページで補うといった具合です。 コロナの影響からも、Web集客に力を入れる企業が増えてきており、実際に弊社でもそのようなご相談をよく頂きます。 Web経由の問い合わせや購入件数を増やしたいときは、事業目標から逆算して目標を決めましょう。 ホームページリニューアルは事前の現状分析が決め手 ホームページリニューアルの理由と目標が固まれば、次はホームページの現状分析を行いましょう。 現在の状態を知ることで、どのように改善するかといった施策が立てやすくなり、ホームページリニューアルの成功に近づきます。 簡単でオススメな分析方法は以下の2つです。 ・ヒートマップでユーザー行動を分析 ・ユーザーの声を集めて分析 それぞれ詳しく解説します。 ホームページの現状分析を行う最も簡単な方法がヒートマップ ホームページの訪問数や離脱率のデータは、Google AnalyticsやGoogle Search Consoleで分析できますが、ユーザーが熟読した箇所や読み飛ばした箇所など、ページ内部の現状は分かりません。そこで便利なツールは、無料のヒートマップです。 ヒートマップでは、ページ内の読まれている箇所や離脱が起きている箇所、クリックされている箇所が分かるので、ページの「良い部分」と「悪い部分」の両方が分かります。 よく読まれている部分など、ユーザーが興味を示している内容はリニューアル時も取り入れながら、ページの上部に置いたり、詳細を加えることでより目立たせます。また離脱が多発している部分など、ユーザーが興味を示していない内容を削ることで、ユーザーは欲しい情報を探しやすくなり、UXを考慮したサイトに近づけることができます。 無料のヒートマップを使う ヒートマップを用いて現状分析を行った例その１ ヒートマップを活用してブログページの離脱率とコンバージョン数を改善した事例を紹介します。 離脱状況が分かるスクロールヒートマップを用いたところ、ページの冒頭での離脱が顕著なことが分かりました。加えて、離脱が多いのは特定のページに限らず、ブログ内のほぼ全てのページで発生していることが判明しました。そこで、離脱の原因はブログの共通部分のデザインにあるのではないか？と仮説を立てました。 そこで、共通部分である「宣伝バナー」を取り除いてリニューアルしたところ、ファーストビューの離脱は50ポイント改善し、コンバージョン数を2倍に増やすことができました。 ここから、ページの冒頭にはユーザーが必要としている情報だけを配置することで、ユーザー目線なページ、いわゆるUXの改善になると言えます。 ヒートマップを活用しユーザー行動を可視化することで、課題を簡単に特定できます。 無料のヒートマップを使う ヒートマップを用いて現状分析を行った例その２ リニューアル時にヒートマップを使って分析したことでCVRの改善に成功した事例を紹介します。以下のLPでは、ページの冒頭で約半分の離脱が発生しておりました。そこでページの冒頭にフォームを追加したところ、CVRが1.23倍になりました。 指名検索からの流入が多い場合は、すでにサービスを検討しているユーザーである可能性が考えられます。ページの冒頭にフォームを設置することで、離脱を防いでCVRアップに繋がりました。 無料のヒートマップを使う ユーザーの声を集めて分析する ホームページの課題を知るうえで、ユーザーの「生の声」は重要なヒントになります。次の方法で積極的にユーザーの声を集めましょう。 ・ユーザーにアンケートを実施する ・被験者を募りユーザーテストを行う ・営業担当などお客様と接点のあるスタッフへヒアリングする ユーザーが操作方法を悩んだり、指摘されたりした箇所を集めましょう。 たとえば、「お問い合わせフォームがどこか分からなくて電話した」という声があれば、フォームの配置に課題があるかもしれません。適切な位置にフォームを入れて、迷わせずに誘導できる適切な文言とリンクを配置しましょう。 また、「サービスの料金形態」のお問い合わせが多い場合は、料金表が見づらいことが原因かもしれません。デザインや表現を工夫しましょう。 ユーザーの声は、ホームページの運営者側が気づけない課題を知る貴重な機会です。積極的に集めて分析することで、UXを考慮したホームページに近づきます。 作って終わりじゃない！公開後の効果測定が2つ目の肝 ホームページリニューアル直後の段階は、まだ慣らし運転にすぎません。仮説と反して効果が出なかったといった場合もあります。リニューアル後の効果測定をもとにブラッシュアップすることが重要です。Google AnalyticsやGoogle Search Console、ヒートマップを用いて効果測定を必ず行いましょう。 ヒートマップは、ユーザー行動を可視化して計測するためのツールです。リニューアル前後におけるページ内部の効果を測るために用います。以降、ヒートマップを用いて効果測定を行う方法を詳しく解説します。 ヒートマップを使って効果測定を行う方法 ヒートマップを用いて、ユーザー行動の変化を必ず計測しましょう。ミエルカヒートマップでは、リニューアル前後のヒートマップデータを比較することが可能です。たとえば、CVが増えた、もしくはCVが落ちた場合に、その理由を探れるため、失敗してもリカバリー（改善）がしやすくなります。 無料のヒートマップはこちら 効果測定を行う頻度 効果測定の頻度はリニューアル後のタイミングによって分けられます。効果測定は次の3段階で行うのがオススメです。 1. リニューアル直後…毎日行う 2. リニューアルから2週目以降…週2回ほど 3. リニューアルから1か月…修正すべき点があるか見極める リニューアル直後は、想定どおりの成果が出ないこともよくあります。明らかに悪化した時は、すぐに元の状態に戻す必要があるため、公開直後は毎日測定しましょう。 リニューアルから2週目以降は、週に2回程度測定し、リニューアル前と比較して大きな変動がないか確認しましょう。成果が深刻な場合は元に戻す必要があります。軽度の場合は、ユーザーが想定どおりの導線をたどっているかヒートマップで確認を行い、必要に応じて微修正します。 リニューアルから1ヶ月経過した段階では、リニューアル後の効果がほぼ確定します。そのままの仕様で運用を続けるか、改修点などがあれば優先順位をつけてPDCAを回しましょう。 ホームページリニューアル公開前のチェックポイント リニューアル後のホームページを公開する前にチェックするべき項目は、主に次のとおりです。 ・デザイン・コンテンツ（誤字脱字、表示速度など） ・フォーム（正常に動作するか） ・コーディング（リンク切れ、デバイス別の表示など） ・SEO（パンくずリストの設定、メタタグの設定など） ・セキュリティ（SSL認証、プライバシーポリシーなど） ・アクセス解析タグ（Google Analytics, Google Search Consoleなど） アクセス解析タグにおいては、旧ホームページで入れていたタグが外れていることがよくありますので、必ず確認しておきましょう。なお、タグをチェックする際は「BuiltWith」を使うと便利です。 ホームページリニューアルでよくある失敗例 よくある失敗は、「リニューアルの目的が不明確なために成果が分からない」や「開発者目線で設計されてしまいユーザーにとって使いづらい」といった、根本的なUI/UX設計の問題が多く見られます。ただし、これらの失敗は上述の課題分析をしっかり行えば多くの場合はあらかじめ回避できます。 そのためにも、ヒートマップを用いて現在のホームページでのユーザー行動を知ることから始めましょう。 「CVが落ちた」、「トラフィック（流入数）が下がった」などのケースは、特に注意しましょう。同じくUI/UX設計の問題が原因に挙げられますが、すぐにリカバリーすることが最も大切です。 まずは元の状態に戻し、原因を調査した後、徐々に改善を実装していくことが理想です。 また、現在のホームページにて既に一定数CVが出ている場合や、順位が付いている場合においては特に、一気にホームページの全体をリニューアルせず、徐々に実装していくことをオススメします。 以下の方法を取って徐々にリニューアルすることで、失敗を最小限に抑えられます。 ・ファーストビューで数パターンのABテストをする ・広告出稿している場合はLPで試す ホームページリニューアルまとめ UXを考慮したホームページリニューアルを成功させるには、事前の課題分析の良し悪しで決まると言っても過言ではありません。どのようなユーザーに、どのようなコンテンツを提供して、どのような行動を起こしてほしいかの要件定義をしっかり定めることが大切です。 ホームページリニューアルが初めてのサイト担当者であっても、継続して分析と改善を行うことでUXの高いホームページが作れます。 まずは無料のヒートマップを使ってホームページの現状分析から始めてみませんか？ 無料のヒートマップを使う 編集者情報 市川莉緒 大阪大学卒。新卒でFaber Companyに入社後、 300近くの企業のヒートマップ分析に従事。 現在はミエルカヒートマップのマーケティングを担当。 大学時代1年休学し1人で世界を放浪。 グレートバリアリーフでのダイビングが最高の思い出。 監修者情報 玉飼 真一 この記事をシェアする
