コラム

UX改善の進め方|順番・指標・実例で失敗しない

この記事の対象: 自社サイトのUXを改善したい担当者、クライアントにUX改善を提案する制作者
読了時間: 約9分

「UX改善」で検索するとき、多くの人が知りたいのはUXデザインの定義ではありません。すでに動いているサイトで何かが上手くいっていない。だから直したい。けれど、どこから手を付ければいいのか分からない。この記事はその「どこから」に、最初の数行で答えます。

結論を先に言います。UX改善は「測る→絞る→直す→また測る」の順で進めるとほぼ失敗しません。逆に、この順番を飛ばして「とりあえずデザインを直す」から始めると、高い確率で空振りします。以下、それぞれの中身と、Soreiine!!のギャラリーに載っているサイトに共通する設計の考え方を見ていきます。

UXの基本的な考え方や改善パターンのカタログを先に押さえたい方は、こちらをどうぞ。


結論:改善の順番は「測る→絞る→直す→また測る」

UX改善の基本サイクル
測る改修前の数字を記録して基準を作る
絞る影響の大きい1〜2箇所に的を決める
直す変えた箇所と日付を残しながら実装
また測る同じ指標で前後を比べて判定する

この4つには順番の意味があります。最初の「測る」を飛ばすと、最後の「また測る」が成立せず、結局何も分からないまま終わります。一度に何箇所も直すと、どの変更が効いたのか切り分けられなくなる点も同じ理由です。

測る:最初に押さえる指標はサイトの種類で変わる

見るべき指標はそれほど多くありません。サイトの種類によって主役が変わるだけです。

サイトの種類 主に見る指標 補助的に見るもの
コーポレート 問い合わせ到達率、問い合わせページの離脱率 会社概要・実績ページの閲覧経路
EC カート投入率、カート離脱率、商品ページ滞在 検索窓の使用率、絞り込みの利用
採用 エントリー到達率、募集要項の読了 社員紹介ページからの遷移
メディア 回遊率、記事内リンクのクリック 検索流入キーワードとページの一致度

重要なのは改修前の値を必ず控えておくことです。改修後に「前はどうだったっけ」と探すと、期間の条件が揃わず比較になりません。改修の当日に、直前28日分の数字をスクリーンショットでもいいので残してください。

計測ツールの組み合わせに迷う場合はこちらを参考にしてください。

絞る:影響が大きいのは流れの「前のほう」

改善対象を絞る原則はひとつ。ユーザーの流れの上流ほど影響が大きいということです。商品ページのボタンをどれだけ改善しても、そこに到達する人が少なければ効果には上限があります。一覧ページから商品ページへの遷移率を上げれば、その下流すべてに効きます。

実務では次の順で見るのが現実的です。

  1. 到達率がゼロに近い導線がないか — 押されていないメニュー、誰も使っていない検索窓
  2. 離脱が集中しているページはどこか — 特定の1ページに離脱が集まるなら、そこに原因がある
  3. フォームの入力途中で落ちていないか — 入力開始と送信完了の差が大きいなら、項目数か入力形式に問題がある

直す:変えた記録を残す

「いつ」「どこを」「なぜ」変えたのかを1行ずつ残すだけで、後の判定が格段に楽になります。ECサイトでは、アプリの追加も立派な「変更」です。追加したアプリが表示速度を落とし、UX改善のつもりが逆効果になるのはよくある失敗パターンです。

また測る:判定の期限を先に決める

「効果が出るまで見守る」は、実質的に判定しないのと同じです。改修前に「4週間後の同じ指標で比べる」と決めておくと結論が出ます。季節変動のあるビジネスでは、前月比ではなく前年同月比で見る必要がある点にも注意してください。


着手前に必要な準備:症状を数字に変換する

「UXを改善したい」という相談で最初に確認するのは「何が起きているか」です。返ってくる答えは、だいたい次の3つに分かれます。

  1. 数字が悪い(問い合わせが減った、カゴ落ちが増えた)
  2. 見た目が古い(社長に言われた、競合と比べて見劣りする)
  3. 具体的な苦情がある(「電話番号が見つからない」と言われた)

このうち、そのまま改善に着手していいのは3番だけです。1番と2番はまだ症状の段階で、原因の特定が済んでいません。ここを飛ばして「ファーストビューを作り直す」「ボタンの色を変える」と手を動かすと、効果判定の基準を持たないまま始めることになります。

UX改善が空振りする分かれ道

成果につながる進め方

  • 症状を数字で特定してから着手する
  • 直す前の値を記録しておく
  • 1回の改修で変える箇所を絞る
  • 判定の期限を先に決めておく

空振りする進め方

  • 「なんとなく使いづらい」から始める
  • 改修前の数字を残していない
  • デザインを全面刷新して原因が分からなくなる
  • 効果測定の話が後回しになる

【制作者目線】「使いにくい」を5つに分解して受け取る

クライアントから「使いにくいので直してほしい」と言われたとき、そのまま受け取らないことが最初の仕事です。使いにくさは次のどこかに必ず落ちます。

分類 症状の出方 見る場所
見つからない 目的のページに到達できない 検索窓の使用率、階層の深さ、離脱ページ
分からない 読んでも判断できない 滞在時間、スクロール到達率
押せない 押したいのに押せない・気づかない CTAの位置、コントラスト、タップ領域
待てない 表示が遅くて離れる LCP、画像サイズ、スクリプトの量
迷う 選択肢が多すぎて決められない 商品数、比較要素の有無、絞り込み機能

この5分類に当てはめると、漠然とした不満が「どこを測ればいいか」に変換されます。ヒアリング項目を整理しておくと見積の精度も上がります。

【発注者目線】「全面リニューアル」を安易に選ばない

UXが悪いという判断から、いきなり全面リニューアルに舵を切るケースをよく見ます。ただし全面リニューアルには、どの変更が効いたのか分からなくなるという副作用があります。デザイン・情報設計・文言・実装が同時に変わるので、コンバージョンが下がったときに原因を切り分けられません。

次のどれかに当てはまるならリニューアル、当てはまらないなら部分改修から始めるのが無難です。

  • スマートフォン表示が崩れている、または専用の表示になっていない
  • 更新のたびに制作会社への依頼が必要で、社内で直せない
  • 表示速度が明確に遅く、画像やスクリプトの整理では追いつかない
  • サイトの目的自体が変わった(採用強化、EC開始など)

UX改善の実例とそこから見える効く順番は、こちらでも具体的にまとめています。


Soreiine!!ギャラリーの実例から読む、UX設計の考え方

抽象論よりも実物を見たほうが早いので、Soreiine!!のギャラリーに掲載されているサイトに共通して見られる、評価の高いUX設計の判断を見ていきます。個々のサイトを見比べるときは、見た目の印象よりも「何をどの順番で見せているか」に注目してください。

共通点1:ファーストビューで「誰のためのサイトか」を確定させている

評価の高いサイトは、スクロールする前の段階で訪問者に「これは自分向けか」を判断させています。業種名・対象者・提供価値のいずれかが一目で分かる構成になっており、たとえばBtoBサイトなら「どの業界の、どんな課題を持つ会社向けか」がキャッチコピーの1行目に入っているケースが目立ちます。逆にキャッチコピーが抽象的で画像だけが美しいサイトは、判断を先送りさせるぶん離脱が増えやすいと考えられます。

【制作者目線】ファーストビューのコピーは、デザインの後に流し込むのではなく、デザインより先に確定させるのが実務的です。コピーが決まらないままレイアウトを組むと、文字数が合わずに後から破綻します。

【発注者目線】ファーストビューの1行は社内で最も意見が割れる場所です。制作会社に渡す前に社内で合意しておくと、制作期間が明確に縮みます。

共通点2:情報量の多さを、レイアウトで殺していない

掲載サイトのなかには扱う情報量がかなり多いものもあります。読みやすさを保てている理由は情報を削ったからではなく、カラム構成と余白で読む順番を作っているからです。見出しの直下に要点を1〜2行でまとめ、詳細は折りたたみやタブで下層に逃がす構成がよく使われています。製品情報が多い業種では、一覧を「写真+型番+一言の特徴」まで絞り、仕様の全項目は個別ページに回す構成が典型です。

3カラム構成は「古い」と言われがちですが、情報量が多いサイトでは今も現役です。

【制作者目線】余白は「空けた」のではなく「そこに何も置かないと決めた」結果です。余白の量そのものより、余白が一定のルールで刻まれているかのほうが読みやすさに効きます。

【発注者目線】ページ数を増やすより、1ページの中を整理するほうが安く効く場面が多くあります。「情報が多くて読みにくい」は、必ずしもページ分割で解決する問題ではありません。

共通点3:次の行動が、常に画面のどこかに置かれている

評価の高いサイトの多くは、スクロールのどの位置でも次にできることが視界に入ります。追従ボタンとは限らず、セクションの終わりごとに「問い合わせる」「詳しく見る」といった導線が自然に置かれている場合もあります。

【制作者目線】追従CTAは有効ですが、スマートフォンでは画面占有率に注意が要ります。本文の可読領域を削りすぎると、読了率が下がってCTAのクリック率も落ちるという逆転が起きます。

【発注者目線】CTAは数を増やせば増えるものではありません。同じ画面に「問い合わせる」「資料請求」「電話する」が並ぶと、選べずに何もしない人が出ます。主役を1つに決めて、残りは格下げするのが定石です。

このあたりの導線設計は、CVが止まる場所の特定にも直結します。


業種によって「最初に見る場所」が変わる

同じ「UX改善」でも、業種によって最初に手を付ける場所が変わります。ここを揃えないまま一般論を当てはめると、効かない改修になります。

業種別・最初に見るべき箇所

EC

  • 商品検索と絞り込み
  • 送料・配送日の表示位置
  • カート〜決済の項目数

BtoB・製造業

  • 技術情報への到達経路
  • 問い合わせフォームの項目数
  • 実績・導入事例の探しやすさ

採用サイト

  • 募集要項への最短経路
  • スマートフォンでの閲覧前提
  • エントリー導線の途切れ

店舗・飲食

  • 営業時間と地図の即時性
  • 電話タップの動作
  • メニューの価格表示

この図で言いたいのは、改善の打ち手より前に、業種ごとの「ユーザーが急いでいること」を特定するということです。店舗サイトで訪問者が最も急いでいるのは「今日やっているか」であり、デザインの洗練ではありません。

ECの場合、送料の条件表示はUXに直結します。カート画面に入ってから送料を知ると離脱の引き金になります。


UX改善を依頼するときに、発注側が用意しておくもの

制作会社にUX改善を依頼する場合、次の4つを用意しておくと見積の精度と改善の速度が変わります。

用意するもの なぜ必要か
現状の数字(直近3ヶ月分) 改善前の基準がないと効果を判定できない
実際に届いた苦情・質問の文言 推測より強い一次情報になる
改善したいことの優先順位 全部やると予算が合わず、結局薄く広くなる
判定の期限と指標 いつ何を見て成否を決めるかを共有する

とくに2つ目の「実際に届いた文言」は強力です。営業や問い合わせ窓口に届いている「これはどこに書いてありますか」という質問は、UXの欠陥をそのまま指しています。社内にすでにある情報なので、コストもかかりません。

依頼先をフリーランスにするか制作会社にするかでも、UX改善の進め方は変わります。


よくある質問

UX改善は、どのくらいの期間で効果が出ますか?

改修の内容によりますが、判定に使うデータが溜まるまでに最低4週間は見る必要があります。アクセス数が少ないサイトほど、差が誤差に埋もれるため期間が長くなります。改修前に「いつの時点で、どの指標で判定するか」を決めてから着手してください。

UX改善とリニューアルは何が違いますか?

UX改善は既存のサイトを維持したまま特定の箇所を直す取り組みで、リニューアルは基盤ごと作り直す取り組みです。どの変更が効いたのかを知りたいなら、改善を小さく回すほうが適しています。ただしスマートフォン対応ができていない、社内で更新できないなど基盤側に問題がある場合はリニューアルが先です。

小規模サイトでも数字を見る意味はありますか?

あります。ただし見る指標を変えてください。アクセス数が少ない場合、コンバージョン率のような比率は誤差が大きく判定に使えません。実際の問い合わせ内容や、電話でよく聞かれる質問といった一次情報を主軸に据えるほうが確実です。

どこから手を付けるか決められないときは?

ユーザーの流れの上流から見てください。トップページ、一覧ページ、詳細ページの順で、離脱が集中している箇所を探します。それでも分からない場合は、社内の誰か(できればサイトを作っていない人)に具体的な課題を出して、実際に操作してもらうのが最も早い方法です。

改修したのに数字が悪化した場合はどうしますか?

まず、変えた箇所を1つずつ戻して切り分けます。このとき「いつ・どこを変えたか」の記録がないと切り分けられないため、改修時の記録が効いてきます。悪化したという結果自体は失敗ではありません。何が効かないかが分かった状態は、着手前より確実に前進しています。


まとめ

UX改善で成果を出すために必要なのは、目新しい手法ではなく順番を守ることです。

  • 測る — 改修前の数字を残す。ここを飛ばすと判定できない
  • 絞る — 一度に変える箇所を1〜2に。上流ほど効くが影響範囲も広い
  • 直す — いつ・どこを・なぜ変えたかを記録する
  • また測る — 判定の期限と指標を先に決めておく

そして、業種によって「最初に見る場所」が違うこと。ECと店舗サイトと採用サイトでは、訪問者が急いでいることが根本的に異なります。一般論としてのUX原則を当てはめる前に、自社の訪問者が何を急いでいるかを特定してください。

実際のサイトがどう設計されているかは、言葉で説明するより見たほうが早い部分もあります。Soreiine!!のギャラリーには業種別に実物が並んでいます。自社と近い業種のサイトを3つほど開いて、「どの順番で情報が出てくるか」だけを見ると、自社サイトに足りないものが見えてきます。