「せっかくリニューアルしたのに、問い合わせが増えない」。リニューアルの相談で、いちばんよく聞く言葉のひとつです。新しいサイトは見た目が整い、社内の評判もよい。それなのに、数字はほとんど変わりません。
原因の多くは、変えたのが見た目だけだったことにあります。訪問者が検索で見つけ、ページを開き、探しているものにたどり着き、納得して連絡する。この流れを左右するのは、配色や写真よりも、情報の並び、中身、速さ、導線、そしてそれを測る仕組みです。
この記事では、見た目以外の5つの層のどこを変えると成果が動くのかを、公開された調査と公式の案内から整理します。後半では、見た目の変更が本当に効いたのかを確かめる方法(A/Bテストと before/after の比べ方)を、必要な訪問数の計算つきで解説します。
この記事が主に根拠にした情報
- web.dev の速度改善の事例(楽天24、The Economic Times、Vodafone、Deloitte「Milliseconds Make Millions」)と Core Web Vitals の閾値
- Google Search Central の A/B テストの案内、ページエクスペリエンス、SEO スターターガイド
- Nielsen Norman Group のツリーテスト・カードソート・美的ユーザビリティ効果・リデザインの判断の記事
- Baymard Institute のチェックアウト調査(入力項目数、カート放棄の理由)
- Microsoft のオンライン実験の論文(2009年)と、Kohavi・Thomke の Harvard Business Review の論考(2017年)
| この記事で分かること | 答えの要点 |
|---|---|
| なぜデザインだけでは成果が出ないのか | 成果は見た目以外の5つの層で決まる(第1章) |
| どこから直すべきか | 動かしたい数字から逆算して層を選ぶ(第2章) |
| 層ごとに何をするか | 情報設計・コンテンツ・速度・導線・計測(第3〜7章) |
| 見た目の効果はどう測るか | A/Bテストと before/after の比べ方(第8〜9章) |
| 費用と期間はどれくらいか | 層ごとの工数の幅(第10章) |
1. デザインだけのリニューアルで数字が動かない理由
見た目の刷新が無意味だという話ではありません。見た目には見た目の役割があります。問題は、見た目に期待しすぎて、成果を左右するほかの層を旧サイトのまま残してしまうことです。
見た目は一瞬で判断され、信頼の評価にも効く
カナダのカールトン大学の Lindgaard らは2006年、Webページを50ミリ秒だけ見せたときの見た目の評価が、500ミリ秒見せたときの評価と強く相関することを報告しました。見た目の印象は、ほとんど一瞬で決まるということです。
スタンフォード大学の Fogg らが2,684人を対象に行った調査(2002年)では、サイトの信頼性を評価するコメントのうち46.1%が見た目(レイアウト、文字、配色など)に触れていました。EC サイトでは46.2%、金融では54.6%でした。
| 調査 | 分かったこと | 注意点 |
|---|---|---|
| Lindgaard ほか(2006年) | 見た目の印象は50ミリ秒で決まる | 滞在や行動までは測っていない |
| Fogg ほか(2002年) | 信頼の評価コメントの46.1%が見た目 | 人数ではなくコメントの割合 |
| Kurosu・Kashimura(1995年) | 見た目がよいと使いやすく感じる | 実際の使いやすさとは別 |
見た目は第一印象と信頼の入口です。ただし、どの調査も「見た目を変えれば問い合わせが増える」ことまでは示していません。
見た目のよさは、使いにくさを隠すことがある
Nielsen Norman Group(NN/g)は、美的ユーザビリティ効果を解説しています。1995年に日立デザインセンターの黒須正明氏と鹿志村香氏が ATM の画面で調べたもので、見た目が美しいと、人は実際以上に使いやすいと感じる傾向があります。
リニューアルでは、これが落とし穴になります。新しいデザインの社内評価会で「使いやすくなった」という声が出ても、それは見た目の印象かもしれません。NN/g は、ユーザーテストで参加者が操作に苦労しながら、色や写真をほめた例を挙げています。言っていることではなく、やっていることを見る必要があります。
成果は「見つかる→待つ→探す→納得→連絡」の連鎖で決まる
問い合わせや購入は、いくつもの段を通って起きます。どこか1段で詰まれば、その先の見た目がいくらよくても数字は増えません。図1は、それぞれの段で効く層を並べたものです。
見た目が主役になるのは、5段のうち「納得する」の一部だけです。残りの段は、見た目を変えても旧サイトと同じ詰まり方をします。
2. 全体像:成果に効く5つの層と、直す順番
リニューアルの範囲を決める前に、動かしたい数字と層を対応させます。次の表は、5つの層と見た目を、変える中身・効く数字・確かめ方で並べたものです。
| 層 | 何を変えるか | 効きやすい数字 | 確かめ方 |
|---|---|---|---|
| 情報設計 | ページの分け方・並び・名前 | 目的ページへの到達率 | ツリーテスト |
| コンテンツ | 本文・事例・料金・FAQ | 検索流入・読了 | Search Console |
| 速度 | 画像・スクリプト・サーバー | 直帰率・CVR | Core Web Vitals |
| 導線・フォーム | ボタン位置・項目数・手順 | 問い合わせ完了率 | ファネル分析 |
| 計測 | 重要な操作の記録 | 判断の正確さ | テスト送信 |
| 見た目 | 配色・文字・写真 | 第一印象・信頼 | A/Bテスト |
表のとおり、見た目以外の層には、それぞれ確かめる道具があります。道具があるということは、直す前と後を比べられるということです。
小さく直すか、作り直すか
NN/g の Hoa Loranger 氏は2015年の記事で、リデザインの多くは「古く見える」「競合がよさそう」といった理由で始まり、費用に見合わないことが多いと指摘しています。勧めているのは、問題を解決できる最小の変更から試すことです。
一方で、全面的な作り直しが正しい場面もあります。同じ記事が挙げる条件を、判断表にまとめました。
| 状況 | 向いている進め方 | 理由 |
|---|---|---|
| 特定のページで離脱が多い | 部分改修 | 原因の範囲が狭い |
| 数字はそこそこ、見た目が古い | 部分改修+見た目の検証 | 切り替えの負担が大きい |
| 小さな改修の効果が頭打ち | 作り直しを検討 | 構造の限界 |
| CMS や技術が保守期限切れ | 作り直し | 安全に運用できない |
| サイト全体で問い合わせ率が極端に低い | 作り直し+調査 | 根本の設計に問題 |
リニューアルが本当に必要かを判断する材料は、ホームページをリニューアルすべき10のサインにまとめています。この記事では、リニューアルを決めた後に「何を変えれば数字が動くか」に絞ります。
動かしたい数字から逆算する
層を選ぶときは、まず動かしたい数字を1つか2つに絞ります。英国政府のサービスマニュアル(GOV.UK Service Manual)も、サービスが成熟したら3〜4個の主要指標に絞り、旧来の数字を基準値として持つよう勧めています。
| 動かしたい数字 | まず見る層 | 次に見る層 |
|---|---|---|
| 問い合わせ件数 | 導線・フォーム | コンテンツ(事例・料金) |
| 検索からの流入 | コンテンツ | 情報設計・速度 |
| EC の購入率 | 速度・フォーム | 情報設計(商品の探しやすさ) |
| 採用の応募数 | コンテンツ(仕事の中身) | 導線 |
| 電話の件数 | 導線(番号の位置) | 計測(タップの記録) |
数字が決まれば、見た目の議論も「この数字に効くか」で判断できるようになります。
3. 情報設計:探しているものにたどり着ける構造にする
情報設計(IA、インフォメーション・アーキテクチャ)は、ページをどう分け、どう並べ、何という名前を付けるかの設計です。見た目を変えても、メニューの分け方と名前が同じなら、訪問者の迷い方も同じです。
情報設計に問題があるときの兆候
次のような数字や声があれば、情報設計を疑います。どれも Google アナリティクス 4(GA4)やサイト内検索の記録、問い合わせの文面から拾えます。
- サイト内検索で、メニューにある言葉がそのまま検索されている
- サービスのページに来た人が、トップと一覧を何度も行き来している
- 「料金はどこに書いてありますか」という問い合わせが来る
- 社内の部署名や製品の型番がメニューの名前になっている
最後の点は特に多く見られます。社内では通じる言葉でも、訪問者が探すときの言葉とは違うことがよくあります。
カードソートとツリーテストで、構造を先に確かめる
NN/g は、情報設計を確かめる方法としてカードソートとツリーテストを挙げています。カードソートは、ページ名を書いたカードを参加者に分類してもらい、訪問者の頭の中の分け方を知る方法です。ツリーテストは、文字だけのメニュー階層で「○○はどこにありますか」と探してもらい、見つけられるかを測る方法です。
| 方法 | 分かること | 参加者の目安(NN/g) | 使う時期 |
|---|---|---|---|
| オープンカードソート | 訪問者の分け方と名前 | 定性15人以上、定量30〜50人 | 構造を考える前 |
| ツリーテスト | 新しい構造で探せるか | 定性は少人数、定量は多め | 構造を決める前 |
| 旧サイトのツリーテスト | 現状の基準値 | 新構造と同じ条件 | 着手時 |
| ユーザーテスト | 実際の画面での迷い方 | 1回5人前後を複数回 | 試作品ができてから |
NN/g が勧める順番は、旧サイトのユーザーテスト → カードソート → ツリーテストです。ツリーテストは画面のデザインがなくてもスプレッドシートで構造を直せるので、見た目を作り込む前に何度でも試せます。
ツリーテストで見るのは、正しい場所にたどり着いた割合(成功率)と、迷わず一直線に進んだ割合(直接性)です。旧サイトでも同じ課題で測っておけば、新しい構造で何ポイント改善したかを数字で示せます。
情報設計を変えるときの注意
構造を変えると、URL も変わることが多くなります。旧URLから新URLへの転送が漏れると、検索流入が落ちます。手順は検索順位を落とさないリニューアル:301リダイレクトの手順で詳しく解説しています。
Google の SEO スターターガイドは、サイトを論理的に整理すると検索エンジンも利用者もページの関係を理解しやすいとしつつ、今の状態でも検索エンジンは理解できるので、急いで組み替える必要はないとも書いています。構造の変更は、検索のためではなく、訪問者が探せるようにするために行うものです。
4. コンテンツ:問いに答える中身に書き換える
見た目が新しくなっても、本文が旧サイトの文章のままなら、検索での評価も読み手の納得の度合いもほとんど変わりません。リニューアルで成果が動くのは、むしろ中身を書き直したときです。
検索で見つかるかどうかは中身で決まる
Google は、検索結果では関連性の高い内容を、ページエクスペリエンスが多少劣っていても優先して表示すると明言しています。見た目や速度がよいことは、似た内容のページが並んだときの差になるだけです。
さらに Google の SEO スターターガイドは、変更が検索結果に反映されるまで数時間から数か月かかることがあり、効果を判断するまで数週間待つよう勧めています。中身の書き換えは効果が出るまでに時間がかかる分、早めに手を付ける価値があります。
書き直す順番を決める
全ページを書き直す必要はありません。数字の大きいページから順に手を入れます。棚卸しの方法はコンテンツ棚卸しの進め方にまとめているので、ここでは書き直しの優先順位だけを表にします。
| 優先 | 対象のページ | 見る数字 | 書き直す中身 |
|---|---|---|---|
| 1 | 問い合わせ直前によく読まれるページ | 問い合わせへの寄与 | 料金・事例・進め方 |
| 2 | 表示回数は多いがクリックが少ないページ | Search Console の CTR | title と説明文、冒頭 |
| 3 | 11〜30位にいるページ | 平均掲載順位 | 足りない問いへの答え |
| 4 | 古い情報が残るページ | 最終更新日 | 数値・制度・画像 |
| 5 | 似た内容が重なるページ | 同じ検索語での表示 | 統合と転送 |
この順番は、問い合わせに近いページほど少ない書き直しで数字が動きやすい、という考え方にもとづいています。
事業者サイトで足りなくなりやすい中身
問い合わせを考えている人が知りたいのは、たいてい「いくらかかるか」「どう進むか」「自分の場合に当てはまるか」です。リニューアル前のサイトで、これらが抜けていることがよくあります。
| 訪問者の問い | 足りないと起きること | 足すもの |
|---|---|---|
| いくらかかるか | 問い合わせ前に離脱 | 料金の幅と決まり方 |
| どう進むか | 不安で連絡をためらう | 手順と期間 |
| 自分に当てはまるか | 比較サイトに戻る | 業種・規模別の事例 |
| 誰がやるか | 信頼できない | 担当者・所在地域 |
| 何語で対応するか | 欧州の顧客が迷う | 対応言語の明記 |
最後の行は、日本と欧州の両方に顧客がいる会社では特に大事です。日本語版と英語版で書いてある内容が違うと、どちらかの言語の訪問者が納得できなくなります。
5. 速度:Core Web Vitals を合格させ、成果との関係を確かめる
表示速度は、見た目のリニューアルで悪くなりやすい層です。大きな写真、動画の背景、アニメーション、外部タグが重なると、旧サイトより遅くなることも珍しくありません。
合格ラインは3つの指標で決まっている
web.dev は、Core Web Vitals の「良好」の閾値を、実際の利用者の75パーセンタイルで次のように示しています。リニューアルの要件と検収の基準に、この数字をそのまま書くのがおすすめです。
| 指標 | 何を測るか | 良好の閾値 | 2024年にスマホで良好だった割合 |
|---|---|---|---|
| LCP | 主要な内容が表示されるまで | 2.5秒以下 | 59% |
| INP | 操作への反応の速さ | 200ミリ秒以下 | 74% |
| CLS | 表示中のレイアウトのずれ | 0.1以下 | 79% |
| 3指標すべて | ― | ― | 43%(パソコン54%) |
右端の列は、HTTP Archive の「Web Almanac 2024」の数字です。スマホで3つとも合格しているサイトは半分に届きません。速度は、多くのサイトでまだ伸びしろが残っている層です。
速度を変えたら成果が動いた公開事例
web.dev は、速度の改善と成果の関係を調べた事例を公開しています。特に価値が高いのは、見た目と機能を変えずに速度だけを変えた A/B テストです。見た目の影響を切り離して、速度の効果だけを測れるからです。
| 事例 | 何を変えたか | 測り方 | 結果 |
|---|---|---|---|
| 楽天24 | 描画の妨げを除く、画像の遅延読み込みなど | 1か月の A/B テスト(50:50) | CVR +33.13%、訪問あたり売上 +53.37% |
| Vodafone(イタリア) | サーバー側描画、画像の最適化 | A/B テスト(50:50) | LCP 31%改善で売上 +8% |
| The Economic Times | INP を約1,000ミリ秒から257ミリ秒へ | 改善前後の比較 | 直帰率 −50%、PV +43% |
| Deloitte ほか(37ブランド) | スマホの速度0.1秒の改善 | 欧米のデータ分析 | 小売の CVR +8.4%、旅行 +10.1% |
事例の数字をそのまま当てはめない
これらは、訪問数の多い大企業の事例です。同じ割合が中小企業のサイトで出る保証はありません。The Economic Times は前後比較なので、ほかの変化の影響も混ざっています。楽天24の事例でも、トップページの「LCP が良好なら CVR が最大61.13%高い」という数字は相関であって、因果ではないと明記されています。
また Google は、Core Web Vitals はランキングに使われるものの、スコアがよいことが上位表示を保証するわけではないと書いています。速度は、成果の数字を直接動かす層であり、検索順位を押し上げる魔法ではない、と理解しておくのが安全です。監視の仕組みはCore Web Vitals の監視を自動化するで解説しています。
6. 導線とフォーム:連絡までの摩擦を減らす
問い合わせの数にいちばん近い層が、導線とフォームです。見た目を変えても、問い合わせボタンがページの最下部にしかなく、フォームの項目が15個あれば、連絡の手前で人は帰ってしまいます。
Baymard の調査が示す、入力の負担
米国の Baymard Institute は、大手 EC サイトのチェックアウト(購入手続き)を継続して調べています。2024年の調査では、チェックアウトの入力項目は平均11.3個で、多くのサイトは8個で足りるとしています。
カート放棄の理由(2025年9月更新、「見ていただけ」の人を除く)も、導線とフォームの問題が上位に並びます。
| カート放棄の理由 | 割合 | 事業者サイトへの読み替え |
|---|---|---|
| 追加費用が高すぎた | 40% | 料金の総額が最後まで分からない |
| カード情報を預けるのが不安 | 19% | 運営者・所在地が見えない |
| アカウント作成を求められた | 18% | 資料請求に会員登録が要る |
| 手続きが長すぎる・複雑 | 17% | フォームの項目が多すぎる |
Baymard は、記録されたカート放棄の平均を70.22%(50件の調査の平均)とし、手続きの使いにくさを直せば、大手 EC サイトは平均で35.26% CVR を上げられる余地があると見積もっています。B2B の問い合わせフォームでも、入力の負担と不安が離脱の主な原因になる点は同じです。
問い合わせフォームで減らせるもの
事業者サイトの問い合わせフォームには、営業の都合で項目が増えていることがよくあります。次の表は、よくある項目を「最初の連絡で本当に要るか」で分けたものです。
| 項目 | 最初の連絡で要るか | 代わりの方法 |
|---|---|---|
| 名前・メール | 要る | ― |
| 相談内容(自由記述) | 要る | 例文を添える |
| 会社名 | 多くは要る | 任意にする |
| 電話番号 | 場合による | 任意にする |
| 住所・郵便番号 | ほぼ要らない | 見積もり時に聞く |
| 予算・従業員数・業種 | 迷わせやすい | 選択式で任意 |
| 確認画面 | 要らないことが多い | 送信後の控えメール |
項目を減らすときは、営業側と「最初の返信に何が必要か」を決めてから削ります。項目を減らした結果、返信の質が落ちては意味がありません。
導線の点検は上位ページから
導線は、問い合わせの多いページと流入の多いページから点検します。点検の観点を表にしました。
| 点検の観点 | 見る場所 | よくある問題 |
|---|---|---|
| 問い合わせの入口が見えるか | スマホの1画面目と本文の途中 | 最下部にしかない |
| 次の一歩が書いてあるか | 各サービスページの末尾 | 関連ページへのリンクがない |
| 電話番号がタップできるか | スマホ | 画像の中に番号がある |
| 送信後に何が起きるか | 完了画面 | 返信の時期が書いていない |
| 入力の誤りが分かるか | フォーム | 送信後にまとめてエラー |
入力の誤りの伝え方や、ボタンの大きさは、W3C のアクセシビリティ基準 WCAG 2.2 にも具体的な基準があります。欧州向けのサイトでは法令との関係もあるため、欧州アクセシビリティ法を見据えたリニューアルも合わせて確認してください。
7. 計測:測れないものは改善できない
5つの層のうち、最初に手を付けるべきなのが計測です。計測が壊れていると、どの層が効いたのかも、リニューアルが成功したのかも判断できません。
リニューアル前に残しておく数字
旧サイトの数字は、公開すれば取り直せません。少なくとも公開の8〜12週前から、次の数字を書き出して保存します。GA4 の標準の保存期間は短く設定されている場合があるため、画面で見られるうちに書き出しておきます。
| 残す数字 | 取り出し元 | 単位 |
|---|---|---|
| 問い合わせ完了数と率 | GA4(キーイベント) | 週ごと |
| ページ別の流入と完了への寄与 | GA4 | 上位50ページ |
| 検索の表示回数・クリック・順位 | Search Console | 検索語・ページ別 |
| Core Web Vitals | Search Console、PageSpeed Insights | URL グループ別 |
| 電話・メールの件数 | 社内の記録 | 週ごと |
| 問い合わせの質 | 営業の記録 | 商談化の件数 |
最後の「問い合わせの質」は、GA4 には出ません。件数が増えても営業につながらない問い合わせばかりなら、成果とは言えないためです。
キーイベントを決めて、テストで確かめる
GA4 では、成果として数える操作をキーイベント(以前の「コンバージョン」)として指定します。Google のヘルプによると、標準のプロパティでは最大30個まで指定でき、指定した時点から集計され、過去のデータには反映されません。
つまり、新しいサイトの公開日にキーイベントを設定し忘れると、その間のデータは後から取り戻せません。公開前にテスト環境で問い合わせを送り、旧サイトと同じ名前で記録されるかを確かめます。欧州では Cookie の同意によって計測される割合が変わるため、その設定も移行の対象です。詳しくはGA4 は GDPR で使えるかで解説しています。
変更の日付を記録する
見落とされやすいのが、いつ何を変えたかの記録です。公開日、フォームの変更日、広告の開始日、価格の改定日。これがないと、数字が動いたときに原因を特定できません。GA4 の注釈機能や、共有のスプレッドシートに日付と内容を残します。
8. 見た目の変更の効果を確かめる:A/Bテスト
ここからは、見た目の変更が本当に効いたかを確かめる方法です。いちばん確かなのは、旧デザインと新デザインを同じ期間に出し分けて比べる A/B テストです。同じ期間なので、季節や広告の影響が両方に同じようにかかり、差だけが残ります。
多くのアイデアは、数字を改善しない
Microsoft の実験チームは2009年の論文で、社内で試したアイデアのうち、狙った指標を改善したのは約3分の1だったと報告しています。残りは差がないか、逆に悪くしていました。
一方で、Kohavi 氏と Thomke 氏は Harvard Business Review(2017年)で、Bing の広告見出しの小さな変更が売上を12%増やした例を紹介しています。小さな変更でも大きく効くことがあり、大きな変更でもまったく効かないことがある。だから、測らずに判断しないことが大切です。
| 実験で分かったこと | 出典 | リニューアルへの示唆 |
|---|---|---|
| 改善したアイデアは約3分の1 | Microsoft(2009年) | 「よくなったはず」は当てにならない |
| 小さな見出しの変更で売上12%増 | HBR(2017年) | 大きな変更が必要とは限らない |
| 速度だけ変えて CVR 33%増 | web.dev 楽天24 | 見た目以外の層が効くこともある |
必要な訪問数を先に計算する
A/B テストの弱点は、訪問数がたくさん必要なことです。問い合わせ率が低いほど、また見分けたい差が小さいほど、必要な人数は増えます。有意水準5%(両側)・検出力80%という一般的な設定で計算すると、1パターンあたりの必要人数は次のとおりです。
| 元の問い合わせ率 | 10%の改善を見分ける | 20%の改善を見分ける | 30%の改善を見分ける |
|---|---|---|---|
| 1% | 約16万3千人 | 約4万3千人 | 約2万人 |
| 2% | 約8万1千人 | 約2万1千人 | 約9,800人 |
| 5% | 約3万1千人 | 約8,200人 | 約3,800人 |
2つのパターンを比べるので、合計ではこの2倍の訪問が要ります。問い合わせ率2%のページで20%の改善を見分けるなら、合計で約4万2千人です。図3は、そのページに月に何人来るかで、テストに何か月かかるかを示したものです。
月に数千人しか来ない事業者サイトでは、問い合わせ完了を指標にした A/B テストは現実的でないことが多いのです。その場合は、ボタンのクリックやフォームの開始など、件数の多い手前の操作を指標にするか、次章の before/after の比較に切り替えます。
Google が示す、検索に悪影響を出さないための4つの注意
A/B テストで検索の評価を落とさないために、Google Search Central は次の4点を案内しています。
| 注意点 | 具体的にやること | 避けること |
|---|---|---|
| クローキングをしない | 利用者と同じ内容を Googlebot にも見せる | Googlebot だけ元のページに固定 |
| rel=canonical を使う | テスト版のURLから元のURLを指す | テスト版を noindex にする |
| 302 で転送する | 一時的な転送を使う(JavaScript も可) | 301(恒久的な転送)を使う |
| 期間を区切る | 結論が出たらテストを外す | 必要以上に長く続ける |
Google はまた、Googlebot は通常 Cookie を扱わないため、Cookie を受け付けない利用者と同じ版を見ることになる、と説明しています。
ツールと、テストの進め方
Google が無料で提供していた A/B テストツール Google Optimize は、2023年9月30日に終了しました。現在は、GA4 と連携できる他社のツールを使うか、サーバー側で出し分けるのが一般的です。ツールの費用は機能と訪問数で大きく変わるため、各社の料金ページで確かめてください。
テストの進め方は次のとおりです。
- 仮説を1文で書く(「事例を料金の上に置けば、問い合わせ開始が増える」)
- 指標を1つ決め、必要な人数と期間を先に計算する
- 期間を途中で変えない(よい数字が出た日に止めない)
- 終わったら、勝った版に切り替えてテストの仕組みを外す
- 結果と仮説を記録し、負けたテストも残す
3つ目は特に大切です。途中で何度も結果をのぞいて、よい数字が出たときに止めると、本当は差がないのに「勝った」と判断する誤りが増えます。
9. A/Bテストができないときの、before/after の測り方
訪問数が足りない、全ページを一度に入れ替える、出し分けの仕組みを入れられない。こうした場合は、公開前と公開後を比べる before/after の比較になります。ただし、ただ前後を並べるだけでは、季節や広告、景気の影響と区別できません。
比べ方の手順
before/after の比較で誤りを減らすための手順を、順番に並べます。
- 基準期間を決める:公開の8〜12週前の数字を週ごとに残す
- 変更日を固定する:公開日の前後2週間は、広告・価格・フォームを変えない
- 比較対象を用意する:前年同期の数字と、今回手を入れないページの数字
- 評価期間を決める:公開後4〜8週。検索の数字は数週間以上かかる前提で見る
- 分けて見る:流入元(検索・広告・直接)とデバイス(スマホ・パソコン)別に比べる
- 差の差で判断する:変えたページの伸びから、変えないページの伸びを引く
Core Web Vitals の現場データは、Search Console や CrUX では28日間の集計です。速度を改善しても、数字に反映されるまで最大で4週間ほど遅れて見えます。
「差の差」で季節の影響を引く
6つ目の「差の差」は、変えたページと変えなかったページの伸びの差を見る方法です。図4は、架空の数字で考え方を示したものです。
この例では、前後を並べるだけなら「0.6ポイント改善した」と報告したくなります。しかし、手を入れていないページも0.4ポイント伸びているので、リニューアル自体の効果は0.2ポイント程度と見るのが妥当です。
解釈を誤りやすいパターン
before/after の比較で起きやすい誤りをまとめました。
| 誤りのパターン | 何が起きているか | 防ぎ方 |
|---|---|---|
| 繁忙期と比べる | 季節で数字が動いただけ | 前年同期も並べる |
| 公開と同時に広告を増やした | 広告の効果が混ざる | 公開前後は広告を固定 |
| 計測の仕組みが変わった | 数え方が変わっただけ | 同じイベント名で記録 |
| Cookie の同意の設定が変わった | 計測される割合が変わった | 同意率も記録する |
| 公開直後の数日だけで判断 | 物珍しさや検索の揺れ | 4〜8週は待つ |
| 1件の大口案件で判断 | 件数が少なく偶然が大きい | 件数と商談化を分けて見る |
4つ目は、欧州のサイトで特に起きやすい誤りです。Cookie バナーを作り直すと同意率が変わり、GA4 で数えられる人数そのものが増減します。
少人数のユーザーテストで「なぜ」を補う
数字は「何が起きたか」を教えてくれますが、「なぜ」は教えてくれません。NN/g の Jakob Nielsen 氏は、5人程度のユーザーテストで、使いにくさの問題の約85%が見つかるとし、大きな1回より、小さなテストを何度も繰り返すよう勧めています。
訪問数が少なく A/B テストが難しいサイトほど、少人数のユーザーテストの価値は高くなります。旧サイトと新サイトで同じ課題を試してもらえば、数字が少なくても、どこで迷わなくなったかが分かります。
10. 費用と期間の幅
5つの層の改善にかかる工数は、サイトの規模と現状によって大きく変わります。次の表は、従業員数十人規模の事業者サイト(30〜100ページ程度)を想定した目安です。時間単価は、オランダの制作会社の平均(€106、Simplicate の2025年第4四半期の調査)とフリーランスの Web 開発者の目安(€73、Knab)を使いました。円は2026年10月30日の欧州中央銀行の参照レート(1ユーロ=175.68円)で換算しています。
| 作業 | 工数の目安 | 費用の幅(€) | 円換算の目安 |
|---|---|---|---|
| 現状の計測と分析 | 8〜24時間 | €580〜2,540 | 約10万〜45万円 |
| カードソート・ツリーテスト | 16〜40時間 | €1,170〜4,240 | 約21万〜75万円 |
| 上位10ページの書き直し | 20〜60時間 | €1,460〜6,360 | 約26万〜112万円 |
| 速度の改善 | 16〜80時間 | €1,170〜8,480 | 約21万〜149万円 |
| 導線・フォームの改修 | 8〜32時間 | €580〜3,390 | 約10万〜60万円 |
| 計測の設計と実装 | 8〜24時間 | €580〜2,540 | 約10万〜45万円 |
| A/Bテスト1本(設計・分析) | 8〜24時間 | €580〜2,540 | 約10万〜45万円 |
工数は DevNJ の経験にもとづく目安で、参加者への謝礼、テストツールの利用料、写真や翻訳の費用は含みません。すべてを一度に行う必要はなく、動かしたい数字に効く1〜2の層から始めれば、費用は大きく下がります。
全面リニューアルの費用相場や見積書の読み方は、ホームページリニューアルの費用相場と見積もりの読み方で、日本とオランダの調査データをもとに整理しています。
期間の目安
効果を確かめるまでの期間も、計画に入れておきます。
| 段階 | 期間の目安 | 理由 |
|---|---|---|
| 旧サイトの基準値の記録 | 8〜12週 | 週ごとの揺れを見るため |
| 情報設計の調査と試作 | 2〜6週 | テストと修正を繰り返す |
| 実装と公開前テスト | 4〜12週 | 規模による |
| 公開後の評価 | 4〜8週 | 検索と速度の反映待ち |
制作そのものの流れは、リニューアルの流れとスケジュールで7つのフェーズに分けて解説しています。
11. 日本と欧州で違うところ
日本と欧州の両方に顧客がいるサイトでは、同じ層でも気をつける点が少しずつ違います。
| 項目 | 日本向け | 欧州向け |
|---|---|---|
| 計測 | 外部送信規律の公表 | Cookie の事前同意で計測される割合が下がる |
| 法令とアクセシビリティ | 合理的配慮の義務化(2024年) | 欧州アクセシビリティ法(2025年6月から) |
| フォーム | 住所やふりがなの欄が多い | 項目が少ない傾向、言語の選択 |
| 料金の見せ方 | 「お見積もり」で非公開も多い | 時間単価や幅を示す例が多い |
| 言語 | 日本語のみが多い | 英語・現地語の両方が要ることが多い |
欧州では、オンラインでの購入がすでに一般的です。Eurostat によると、2024年に EU のインターネット利用者の77%がオンラインで商品やサービスを購入しました。欧州の訪問者は、比べる相手のサイトも多く見ている、という前提で導線を考える必要があります。
12. ケースで考える(架空の例)
ここからは、説明のための架空の3社で考えます。実在の企業ではありません。
ケースA:見た目を変えたのに問い合わせが横ばいの製造業
月の訪問が約3,000人の部品メーカー。デザインを一新したものの、問い合わせは月10件前後のままでした。調べると、問い合わせボタンはページの最下部だけで、フォームの項目は14個ありました。A/B テストには訪問数が足りないため、フォームを6項目に減らし、各製品ページの途中に問い合わせの入口を置き、before/after を差の差で比べることにしました。
ケースB:検索流入は多いが、読まれて終わるサービス業
ブログ記事で月2万人を集める会計事務所。記事からサービスページへのリンクがなく、料金も書かれていませんでした。記事の末尾に料金の幅と相談の流れを置き、記事からの問い合わせ開始を A/B テストで比べました。訪問数が多いので、件数の多い「フォームを開いた数」を指標にして、約2か月で結論を出す計画にしました。
ケースC:日本と欧州の両方で売る EC
日本語と英語で販売する食品の EC。新デザインの写真が重く、スマホの LCP が4秒を超えていました。見た目を変えずに画像の形式と読み込み順を直し、まず速度だけを改善。その後、見た目の変更を別のテストとして試すことにしました。
| ケース | 詰まっていた層 | 選んだ測り方 | 最初の一手 |
|---|---|---|---|
| A 製造業 | 導線・フォーム | before/after(差の差) | フォームを6項目に |
| B サービス業 | コンテンツ・導線 | A/Bテスト(手前の指標) | 記事末に料金と流れ |
| C EC | 速度 | 速度だけ先に変えて比較 | 画像の最適化 |
3社とも、最初の一手は見た目ではありませんでした。見た目の変更は、ほかの層を整えた後で、効果を測れる形で行っています。
13. やってはいけないこと
見た目中心のリニューアルで、よく起きる判断の誤りを並べます。どれも、後から取り返すのに手間がかかります。
| やってはいけないこと | 理由 |
|---|---|
| 社内の好みで新デザインの成否を決める | 美的ユーザビリティ効果で評価が甘くなる |
| 旧サイトの数字を残さずに公開する | 比べる基準がなくなる |
| 見た目・構造・中身・速度を同時に変えて「効いた」と言う | どれが効いたか分からない |
| A/B テストを途中で止めて勝ちを決める | 偶然の差を効果と誤る |
| テスト版を 301 で転送する | 検索の評価が元のページから移る |
| 公開直後の1週間で成否を判断する | 検索と速度の数字が追いつかない |
| 大企業の事例の伸び率を見積もりに使う | 規模と条件が違う |
3つ目は、全面リニューアルではある程度避けられません。その場合でも、どの層を変えたかを記録し、公開後に層ごとの小さな改善を重ねることで、どこが効いたかを少しずつ切り分けられます。失敗の典型例と立て直し方は、リニューアルで失敗する10の典型例にまとめています。
14. チェックリスト
リニューアルの企画から公開後の評価まで、この記事の内容を確認項目にしました。
企画の段階
- 動かしたい数字を1〜2個に絞った
- その数字に効く層(情報設計・コンテンツ・速度・導線・計測)を選んだ
- 部分改修で足りるか、作り直しが必要かを判断した
- 旧サイトの数字を8〜12週分、書き出して保存した
設計と制作の段階
- 旧サイトと新しい構造でツリーテストをした
- 問い合わせの多いページから中身を書き直した
- LCP 2.5秒・INP 200ミリ秒・CLS 0.1 を要件に書いた
- フォームの項目を「最初の連絡に要るか」で見直した
- キーイベントを旧サイトと同じ名前で記録できるか試した
検証の段階
- A/B テストに必要な人数と期間を先に計算した
- A/B テストは canonical と 302 で設定し、終わったら外す
- 公開日と変更日を記録した
- 前年同期と、手を入れないページの数字を並べた
- 公開後4〜8週は大きな変更を控えて評価した
- 少人数のユーザーテストで「なぜ」を確かめた
まとめ
- 見た目は第一印象と信頼に効くが、問い合わせや売上を動かすのは情報設計・コンテンツ・速度・導線・計測の5つの層
- リニューアルの前に動かしたい数字を決め、その数字に効く層から直す。部分改修で足りることも多い
- 速度だけを変えた A/B テストで CVR が33%伸びた事例もあり、見た目以外の層の効果は測れる
- 最初に直すのは計測。旧サイトの数字は公開前に8〜12週分残す
- 見た目の効果は A/B テストで測る。ただし問い合わせ率2%で20%の改善を見分けるには合計約4万2千人が要る
- 訪問数が足りなければ、差の差を使った before/after 比較と、5人前後のユーザーテストを組み合わせる
参考にした情報源
見た目と使いやすさ
- Attention web designers: You have 50 milliseconds to make a good first impression! — Lindgaard ほか(Behaviour & Information Technology, 2006):見た目の印象は50ミリ秒で決まる
- How Do People Evaluate a Web Site's Credibility? — Consumer Reports WebWatch(Fogg ほか, 2002):信頼の評価コメントの46.1%が見た目
- The Aesthetic-Usability Effect — Nielsen Norman Group:1995年の日立の研究と、ユーザーテストでの注意
- Radical Redesign or Incremental Change? — Nielsen Norman Group:リデザインの理由と、作り直しが妥当な条件
情報設計とユーザーテスト
- Tree Testing — Nielsen Norman Group:成功率と直接性、リデザインでの使いどころ
- Card Sorting — Nielsen Norman Group:定性15人以上・定量30〜50人
- Why You Only Need to Test with 5 Users — Nielsen Norman Group:5人で約85%の問題が見つかる
- How to set performance metrics for your service — GOV.UK Service Manual:3〜4の主要指標と基準値
検索と計測(Google)
- Website testing and Google Search — Google Search Central:A/B テストの4つの注意点
- Understanding page experience — Google Search Central:関連性が優先、スコアは上位を保証しない
- SEO Starter Guide — Google Search Central:サイトの整理、変更の反映にかかる時間
- Mark events as key events — Google アナリティクス ヘルプ:キーイベントの上限と、過去データに反映されないこと
- Google Optimize の終了 — Google アナリティクス ヘルプ:2023年9月30日の提供終了
速度と成果
- Web Vitals — web.dev:LCP・INP・CLS の閾値と75パーセンタイル
- 楽天24の事例 — web.dev:1か月の A/B テストで CVR +33.13%
- Vodafone の事例 — web.dev:LCP 31%改善で売上 +8%
- The Economic Times の事例 — web.dev:INP 改善で直帰率 −50%
- Milliseconds Make Millions — web.dev:0.1秒の改善で小売の CVR +8.4%
- Web Almanac 2024 Performance — HTTP Archive:Core Web Vitals の合格率
導線とフォーム
- Checkout Flow Average Form Fields — Baymard Institute:平均11.3項目、8項目で足りる
- Cart Abandonment Rate — Baymard Institute:放棄率70.22%と理由、35.26%の改善余地
- WCAG 2.2 — W3C:入力エラーの伝え方、ターゲットの大きさ
実験
- Online Experimentation at Microsoft — Kohavi・Crook・Longbotham(2009):改善したアイデアは約3分の1
- The Surprising Power of Online Experiments — Harvard Business Review(2017):Bing の見出しの変更で売上12%増
費用・欧州
- Benchmark report Agencies Q4 2025 — Simplicate:オランダの制作会社の平均時間単価(€106)
- Web developer zzp の時間単価 — Knab:フリーランスの時間単価(€73)
- ユーロの参照レート(円)— 欧州中央銀行:1ユーロ=175.68円(2026年10月30日)
- E-commerce statistics for individuals — Eurostat:2024年に EU のネット利用者の77%がオンラインで購入
- European Accessibility Act — 欧州委員会:対象となる製品とサービス
いずれも2026年10月30日に確認したものです。事例の数値はそれぞれの条件で得られたもので、同じ割合が別のサイトで出るとは限りません。判断の前に、自社の数字で確かめてください。
よくある質問
- ホームページをリニューアルしたのに効果がないのはなぜですか?
- 見た目だけを変え、成果を左右する情報設計・コンテンツ・速度・導線・計測が旧サイトのままだったことが多い原因です。見た目は第一印象と信頼に効きますが、探せるか、読んで納得できるか、迷わず連絡できるかは別の層で決まります。どの数字を動かすかを決め、その数字に効く層から直すのが近道です。
- デザインを変えるだけのリニューアルに意味はありますか?
- あります。訪問者はページの見た目を一瞬で判断し、信頼の評価でも見た目はよく言及されます。ただし、それだけで問い合わせや売上が増える根拠は弱く、見た目のよさが使いにくさを隠すこともあります。見た目の変更は、効果を測る方法とセットで行い、ほかの層の改善と切り分けて評価します。
- リニューアルの効果はどうやって測ればよいですか?
- 公開の8〜12週前から旧サイトの数字を記録し、変更日を残したうえで、公開後4〜8週の数字と比べます。前年同期や、手を入れていないページの動きも並べて、季節や広告の影響を差し引きます。訪問数が十分にあれば、旧デザインと新デザインを同時に出し分けるA/Bテストがいちばん確かな方法です。
- A/Bテストにはどれくらいの訪問数が必要ですか?
- 問い合わせ率2%のページで、20%の改善(2%→2.4%)を見分けるには、有意水準5%・検出力80%の一般的な設定で1パターンあたり約2万1千人、合計で約4万2千人が必要です。月に5,000人が訪れるページなら8か月以上かかります。足りない場合は、before/after の比較とユーザーテストを組み合わせます。
- A/BテストでSEOに悪影響は出ませんか?
- Google の案内に沿えば、通常は問題になりません。Googlebot だけに別の内容を見せない、別URLのテスト版には元のページを指す rel=canonical を付ける、転送するなら301ではなく302を使う、結論が出たら早めにテストをやめる、の4点を守ります。
- リニューアルで最初に直すべきところはどこですか?
- 計測です。問い合わせ完了などの重要な操作が正しく記録されていないと、どこを直すべきかも、直した効果も分かりません。そのうえで、問い合わせが多いページの導線とフォーム、検索流入の多いページの中身、表示速度の順に見るのが、費用に対して効きやすい順番です。
日本と欧州の両方で機能するサイトをお考えですか?
無料で相談する