【レポート】デジタルマーケターズサミット2023 Summer

Web担イベントページのフルリニューアルの裏側を大公開! UXリサーチで見えた真の課題と改善策とは

10年にわたり増改築を繰り返してきたWeb担のイベントサイトがついにリニューアル! Webサイト改善のリアルな舞台裏を語った。

10年にわたり増改築を繰り返し、まるで秘伝のタレのようになっていたWeb担のイベントページがついに改修!? UXリサーチの専門家の力を借りてユーザビリティテストを行い、イベントページをフルリニューアルした。

デジタルマーケターズサミット 2023 Summer」では、日本ウェブデザインの代表取締役CEOである羽山祥樹氏、同社のCXO/UXデザイナーのタグチマリコ氏、そしてWeb担当者Forum編集長の四谷志穂が登壇。Webサイト改善の一部始終を“リアルに”全公開した。

(左から)インプレス Web担当者Forum編集長 四谷 志穂/日本ウェブデザイン 代表取締役CEO 羽山祥樹氏/日本ウェブデザイン CXO/UXデザイナー タグチマリコ氏

Web担イベントサイトの改修、最初は3ページのみのはずが……?

ある日、羽山氏のFacebookメッセンジャーに1通のメッセージが届いた。

始まりは1通のFacebookメッセージだった

それは「Web担のイベントサイトを3ページほどリニューアルしたい」という四谷からの依頼だった。四谷はこの経緯について、次のように語る。

Web担のイベントページは10年近く増改築をしながら使っています。課題はあるものの、問題なく運用できているので、社内的には“このままで問題ない”という認識でした。とはいえ、Web界隈の高い知識を有する人が利用する媒体ということもあり、『申し込みにくい』『改善の余地がある』という意見はいただいていました。

また、イベントは複数の部署が関わるプロジェクトなので、イベントページの明確な責任者は決まっておらず、改善するのは一筋縄ではいかないと思っていました(四谷)

社内には『なんでリニューアルするの?』という雰囲気が漂っており、四谷が1人で進めていくのは難しいと判断。「まずは3ページだけ」と外部の羽山氏に依頼し、ミニマムな予算で成功体験を積んで、全体のリニューアルにつなげたいと考えていた。

課題が特定できない! 急遽ユーザビリティテストを実施することに

ワイヤーフロー(画面遷移図)を書いてみたら、「これ全然3ページじゃなくない!?」と気づく

気軽に依頼を受けた羽山氏はさっそくWebサイトの中身を見て、ワイヤーフロー(画面遷移図)を書いてみたという。すると、ランディングページ、講演申し込みページ、マイページの3セクションがあり、到底3ページではおさまらないボリュームであることがわかった。

課題を特定するためには「ユーザビリティテスト」をするしかない

問題は、この膨大なページ数から、どうやって課題を特定するか。「確かにごちゃごちゃしてはいるが、一見ユーザーが脱落するほどではないように見えた」と羽山氏は語る。

ヒューリスティック評価※で課題を特定しきるのは無理だと考えた羽山氏は、「ユーザビリティテスト」の実施を提案した。つまり、実際にユーザーがWebサイトを使う様子を見て、問題点を洗い出そうということだ。

※ヒューリスティック評価:UI/UXの専門家がその知識や経験則にもとづいて、Webサイトやアプリなどをレビューし、問題点を発見する手法。

ユーザビリティテストを行うときのポイントは、リニューアルプロジェクトにかかわる社内のステークホルダーをなるべくたくさん集めて傍聴してもらうこと。プロジェクトに関わる人全員で困っているユーザーの様子を見ることで、課題の合意形成をすることが目的です(羽山氏)

ユーザビリティテストの実施を提案された四谷は、編集部のみで予算を賄うのではなく、イベントチームで予算承認を得て取り組むことを決めた。

予算の確保にあたっては、イベント単体の売り上げからWebサイトの価値を測り、そこにかけてもよい額を出して説得しました。Web担のイベントはWebでしか申し込みができません。つまり、Webサイトがイベントの一丁目一番地だよねと。また、成果物単位で月々の支払いとすることで、予算確保を短期間で調整するようにしました(四谷)

ユーザビリティテストで聞こえてきたのは、ユーザーの苦しみの声

ユーザビリティテストには、営業部、イベントチーム、編集部、統括など10人弱が参加し、オンラインで視聴した。調査を実施する前の仮説としては以下の通りだ。

  • 申込みのステップが多いのが課題?(協賛型イベントのため減らせない)
  • 講演数が多くて選びづらい?(講演は減らせないので対処できない)
  • 申し込み時のアンケートの設問が多くてストレスなのでは?(協賛型イベントのため減らせない)

なお、リニューアル前のイベントサイトでは、ランディングページに講演のタイムテーブルが並んでおり、申し込みボタンを押すと「申し込み専用のタイムテーブル」が表示される。そこから参加したい講演にチェックを入れ、申し込みを完了するという流れだった。

羽山氏の協力のもとWeb制作者を数名集め、実際にユーザビリティテストを行ったところ、ユーザー操作は“想定外の行動だらけ”だったという。

実例:スマートフォンを使ったAさんの場合

  1. ランディングページで申し込みたい講演を選び、講演番号を紙にメモする
  2. 選ぶ時に、自分のスケジュールを開いて確認する
  3. 申し込みページで選んだ講演をチェックしていくが、複数チェックするうちに先に選んだ講演のチェックが外れてしまうことに悩む
  4. 何度か繰り返し、同時間帯の講演を選ぶと、先にチェックしたものが自動的に外れる仕組みだと気づく
  5. 申し込みを完了する

Aさんの場合、ランディングページのタイムテーブルを見て、参加したいセッションを紙にメモしていました。横にスケジュールを開いて見比べつつ、次の申し込み画面で講演をチェックをしていくけれど、上手くいかない。これはユーザビリティテストをしないとわからない行動です(マリコ氏)

ランディングページのタイムテーブルで気になるセッションを選ぶ
申し込みボタンを押すと「またタイムテーブルが出てきた!?」「しかもさっきと内容が違う……」

約4名のテストをした結果、見つかった最大の課題は、「ランディングページと申し込みページでタイムテーブルが異なるため、ユーザーはセッションをもう一度選び直していた」ということだった。

LPから申し込みページに移ると、同日開催のネット担当者フォーラムのイベントの講演も加わったタイムテーブルが表示され、『さっきと内容が違う』となる。LPで選んだ講演がどれだかわからなくなり、結局そこでセッションを選び直していました(マリコ氏)

なお、仮説にあったような「アンケートフォームの長さ」が理由で離脱する人はおらず、そこは大きな障害ではないことがわかった。

実際に困っているユーザーを見ることで、リニューアルの合意形成へ

イベント担当者は「今回の被験者がWeb制作者だったからじゃ?」と反論

しかし、この結果を見たイベント担当者は「今回の被験者はWeb制作者。Web担当者の場合、スマホではなくPCから申し込むので、このようなことにはならないのでは?」と納得しなかった。

羽山氏はこれについて、「被験者のリクルーティングにミスがあった」と振り返る。担当者は基本的に「自サイトが使いづらいことを認めたくない」という心理が働くもの。ターゲットユーザーと被験者が異なる場合、「参考にならない」と思考の逃げ道を与えてしまうのだ。

そこで、Web担当者のみを被験者とし、再度ユーザビリティテストを実施。だがお察しの通り、Web制作者でもWeb担当者でも、課題は大きく変わらなかった。あるユーザーは、カレンダーを別タブで表示してスケジュールを確認するものの、「どの講演が見られるかわからないがとりあえず申し込みだけしておこう」と困った様子を見せていたという。

実際のユーザー行動を観察して……
ようやく社内の理解が得られる

自分に合う講演がわからず、迷ったり不安になったりしながら申し込みをしている様子を見て、関係者一同感謝と申し訳ない気持ちでいっぱいになりました。そこでようやく課題感を共有できて、リニューアルの合意形成につながりました。内部だけではなかなか進みませんでしたが、外部の方が入ることで推進力が大きくなったと感じています。(四谷)

この結果、リニューアルの目的は「不快な体験をなくす」ということで全員が一致。CVRを上げることよりも、申し込む流れをスムーズにすることを目的として、ランディングページと申込みページを統合することになった。

ショッピングカート⾵のUIで、選んだ講演がわかるような仕組みに変更

ランディングページと申込みページのタイムテーブルは⼀体化
セッションのわかりやすい⼀覧機能やショッピングカート⾵のUIを導⼊

こちらがリニューアル後のイベントページのデザインだ。サイト設計を担当したタグチ氏は、新デザインについて次のように説明する。

改善点① ショッピングカート⾵のUIを導⼊

まず、自分がどの講演を選んだのかをわかりやすくするために、視聴リストを作成。ECサイトで商品をショッピングカートに入れていく感覚でセッションを選べるようにした。

改善点② 講演にカテゴリタグをつけて絞り込めるように

「そもそも自分に合う講演がわからない」という問題を解決するため、講演にカテゴリタグを付けて、カテゴリから絞り込んで探せるようにした。

改善点③ 講演の詳細ページは別タブで

講演をクリックしたときに、同画面で遷移するのではなく、別タブで表示するようにした。ECサイトで商品を見比べるのと同じように講演を比較できる。

改善点④ トップに「ログイン」の導線を用意

イベントページのトップに「ログインボタン」を置いた。これまでは、マイページへのログイン方法はメールでしか案内されていなかったが、より手軽にマイページを見られるようになった。

Web担当者Forum ミーティング 2023 春」はこうしてリニューアルオープンした。しかし、その後四谷から羽山氏に驚きの報告があったという。

サイト改善後「ユーザーからの評判はいいけれど、CVRが過去最低水準!?」

「ユーザーからの評判はいいものの、CVRが過去最低水準」との連絡を受けた羽山氏。驚きつつも編集部でアクセス解析を行ったところ、「新デザインでは全てをランディングページに集約したため、関係ないアクセスまで集中してPV数が通常の倍以上になり、正しいCVRが算出されなかった」ことが原因だとわかった。

そこで、後日改めてユーザビリティテストを実施することを提案しました。繰り返し見直すのはUX改善の基本ですし、本来であればリニューアル後にやるのがセオリーですが、今回は時間がなくてできていなかったので……(羽山氏)

Webサイト改善は終わらない! まだまだ続くリニューアルの取り組み

ここまで読んで「あれ?」と思った方も多いかもしれない。リニューアル後に開催しているイベントの申し込みページは、新デザインになっていないのだ。

というのも、Web担イベントページのバックエンドが、季節ごとに別システムの構成になっていると判明したからだった。

Web担イベントページのバックエンドはそれぞれの季節で独立していた……

よって、春のイベントサイトのみリニューアルできたが、他のイベントはシステム会社とのスケジュール調整中となっている。今後順次更新していく予定だ。

とはいえ、目的だった『不快な体験をなくす』ということはある程度達成できましたし、使い勝手がよくなったとの声もいただいています。定量的な評価としてCVRが正しくとれなかった点は残念ですが……(四谷)

講演の様子

今回のリニューアルプロジェクトについて、四谷は次のように振り返る。

Web担イベントページのリニューアルを振り返って

今回のプロジェクトを通して、社内を巻き込む大変さや、外部パートナーが入ることによる推進力を実感しました。Web担にもよく『予算承認を得るのに苦労している』という声が寄せられますが、担当者は『予算を持っている部門やその部門との関係、サイトの価値』などを考えて、改善の必要性を伝えることが大切だと思います。

また、課題を感じていない人には、“リアルなユーザーの声”を聞かせることが、現状認識を改めてもらえる近道です。ユーザビリティテストは、自分たちだけで実施するのは大変ですが、専門家に任せれば案外スムーズにできます。想定外のことは発生しますが、そこで折れずに粛々と進めること。そして、一度作ったら終わりではなく、改善を続けていくことも大事です(四谷)

Web担イベントページのリニューアルの裏側について、赤裸々にお伝えした本セッション。Webサイト改善を推進する上で、何らかのヒントになれば幸いである。

Web担主催イベント【Web担当者Forum ミーティング 2024 春】5/30・5/31開催。全20講演超の無料セミナー

Web担主催イベント

ソフトバンク、ANA、博報堂などが語るセミナーイベントをリアル(渋谷)+オンラインで実施!

「誰も本当のことを教えてくれないSEOネタ」「マーケティング業務における生成AI」「GA4でパフォーマンス改善を行う難しさの本質」「不確実性をマネジメントして、目標達成するための心得」など20以上の講演を5/30・31にハイブリッドで実施!
用語集
CVR / Facebook / LP / PV / UX / アクセス解析 / ステークホルダー / スマートフォン / セッション / ユーザビリティテスト / ランディングページ
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

今日の用語

キャッシュ
一度利用したデータなどを、その後また使う場合に高速にアクセスできるような形で保存 ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]