まったく新しいWEBサイトのユーザビリティ調査ツール – GhostRec.jp

登録~利用開始までは若干時間がかかります

登録は、メールアドレスを検証したいサイトを入力して、届いたメールを確認します。メールマガジンの登録のような気軽さですが、登録しても瞬時にメールが届くわけではありません。

「あれ?来ない?」とちょっと焦りますが、数分で「アカウント作成リクエストを承りました。」というメールが到着します。お申し込み受付フォームへと案内されますが、ここで入力する項目が結構多い。

会社名、部署名、担当者名、メール、電話番号、FAX番号、住所、有料オプション(使わなくてもOK)、備考欄・・・と、利用規約(PDF) を確認してサービスを申し込みます。

すると、「内容を確認するからちょっと待っててね、もしかしたら使えないかもしれないよ」的な申込受理のメールが自動返信されます。

だいぶ時間かかるのかなあ…と思っていたら、5分後くらいに「アカウントを有効化してください」というメールが届きました。画面に従ってアカウントの有効化を行なうと、ようこそメールが届きます。これで使えるようになりました。やったね!

一度登録すると、アカウントとログインIDを無制限に設定できます

(5)アカウント
本サービス利用契約者であるカスタマーは、管理画面にログインし自社の社員等に任意で本サービスの利用権限を付与したアカウントを発行できます。アカウント所有者は、自身の持つアカウント権限において、不特定手数のテスターにログインIDを設定することができます。

(6)ログインID
ログインIDとは、リモート型のユーザビリティ調査を実施する一人ひとりのテスターの登録IDのことで、本サービスカスタマーは、無制限にログインIDを設定できます。

以上、利用規約より抜粋。

ghostrec

アカウントは、主に上記で登録した担当者が管理するものです。GhostRec のプロジェクトを管理したり、ログイン ID を発行してテスター(被験者)を登録したり、追加 RecPV を購入したりすることができます。

ログイン ID は、アカウント所有者、プロジェクト管理、閲覧者の各アクセス権限を有します。このアクセス権限によってできることが異なってくるわけですね。ログイン ID の発行は、メールアドレスとパスワード、アクセス権限の設定のみです。

初回登録時に 100RecPV 分を無料で使えます

GhostRec は訪問者のマウスポインタの移動(追跡)とページのスクロール、ページ遷移の状況を録画して動画で確認できるツールです。1人の訪問者の1ページ分の録画= 1RecPV となります。ある訪問者が2ページ閲覧したものを録画したら 2RecPV になります。訪問者数に限らず、録画したページで計算されるわけですね。

実際にアクセスした画面を録画しているので、スマートフォンや高解像度のモニタなど、環境による表示の違いが見て取れます。Youtube のような動画ではなくて、HTML ベースでキャッシュを取ったところにポインタの動きを再現しているようですね。

ただし、5秒以内で終わってしまう動画が非常に多く、また録画時間が長くてもマウスポインタが動かない時間もある(タブとして開いていた時間が長かっただけ?)ので、わかりやすいデータが取れるのは半分以下となるでしょう。いかにも直帰、というものが無駄になってしまいます。これはこれで有効なデータとして考えたほうがいいのかは、GAなどと組み合わせて検証する必要がありそうです。

2種類のユーザビリティ調査を簡単に行うことができます

まずはプロジェクトを作成するため、プロジェクトタイプを選択します。

クイックユーザビリティ調査

玉石混交の情報ですが、不特定多数の一般的な利用状況を知りたい時に有効です。

発行された Javascript を埋め込むと、アクセスしてきた訪問者が実際に使っている様子を自動的に録画して、あとから確認できます。録画されるのはマウスカーソルとページのスクロール、ページ遷移のみなので、基本的に個人情報は入りません。また、マウストラッキングの情報が集まったページについては、ヒートマップも確認できます。

注意したいのは、すべてのページに対して javascript を埋め込んでしまうと、取得されるページがバラけてしまう上、わかりやすいデータが取れるのはごくわずかになってしまう(=ヒートマップも生成できない)ので、最初は特定のページ(トップページ等)に絞ることをオススメします。

ちなみにこのブログの場合、全ページに埋め込んだら、5時間で 100RecPV を使い果たしてしまいました・・・。

タスク型ユーザビリティ調査

被験者(テスター)を募る必要がありますが、確実に動線を検証したい時に有効です。

テスターとなる人にログイン ID を発行し、たとえば「本社の電話番号を見つけてください」とか「○日の宿泊予約を完了してください」「商品を見つけてお問い合わせしてください」など、想定する動線に基づくタスクを与え、それを遂行してもらう方法です。
ターゲットユーザー層をテスターにすることで「どこで迷うのかな?」という改善ポイントを見つけることができます。

クイックユーザビリティ調査と異なり被験者を集める必要はありますが、 テスターのログインID付与は簡単な上に無制限なので、それほど敷居は高くないでしょう。

最初の 100RecPV を有効活用したいなら、こちらをオススメします。やはり何のために追跡するのか?が大事ですよね。ご利用は計画的に。

有料で使うならいくらかかる?

1 RecPV あたりの金額は、まとめ買いで割り引きされます。

  • 5,000 RecPV まで 20円
  • 15,000 RecPV まで 16円
  • 15,001 RecPV 以上 12円

例えばタスク型で5ページ程度の回遊を想定して、10人のユーザーに依頼するとしたら、

5ページ × 10人 = 50RecPV = 1,000円 となります。

想定外の操作をすることも考慮すると、想定アクセスページ数から予算と人数を調整したほうが良いですね。

実際どんな動画を見れるの?

動画は個別に共有用リンクを生成することができます。わかりやすいサンプルをご紹介。

録画日時:12/27 15:42 録画開始URL:mekemoke.jp/tag/jqm
録画時間:0 分 35 秒(3 ページ) 環境:Japan/FF17.0/Windows
http://play.ghostrec.jp/share/19216-bd1a163442ccc455c26efb0011da59ca04dd1107

録画日時:12/27 14:17 録画開始URL:mekemoke.jp/2012/12/733.html
録画時間:1 分 8 秒(5 ページ) 環境:Japan/FF17.0/Apple
http://play.ghostrec.jp/share/19183-1c1741b8d24155950d6e20164e3feca418b04ebe

録画日時:12/27 14:53 録画開始URL:mekemoke.jp/
録画時間:279 分 37 秒(2 ページ) 環境:Japan/iPhone6.0
http://play.ghostrec.jp/share/19197-bc920a23baa9058564fff26ec3f4d32e136c754b

これらから何がわかるかというと。

  • たくさんのページを読んでくれてありがとう!(・∀・)
  • jQuery Mobile の記事人気だな、ソースをコピペできるようにしとくのはいいな。
  • iPhoneで読まれるとこういう画面になるんだな〜

・・・くらいしかないのですorz
今回の場合、残念な使い方の典型です。目的なく「使ってみた」はやめようというお話。
ユーザビリティ調査ツールは、仮説を立てた上で検証するために利用しましょう。ご利用は計画的に。(二度目)

WordPress LOGOはい、ごめんください。

wp_is_mobile は 3.4 移行から使える、モバイルからのアクセスを判別する便利な関数です。
例えばスマホ用に見せたい物がある場合や、表示を変更したい場合に、下記のように使えます。

wp_is_mobile のモバイル判別方法

wp-includes/vars.php の 101 行目で、下記のようなコードがあります。

つまり、ユーザーエージェントに下記の文言が含まれていると、モバイルと判断されます。

Mobile, Android, Silk/, Kindle, BlackBerry, Opera Mini, Opera Mobi

WP Super Cache のモバイル判別方法

そしてキャッシュ機能として有名なプラグイン、WP Super Cache 。
これはモバイルにも対応していて、モバイルからのアクセスがあった場合にはキャッシュしないという機能があります。

下記がモバイルと判断されるユーザーエージェントのリスト。これらが含まれていると「モバイルからのアクセスだ」と判断されます。(2013.2.15 ver1.2)

2.0 MMP, 240×320, 400X240, AvantGo, BlackBerry, Blazer, Cellphone, Danger, DoCoMo, Elaine/3.0, EudoraWeb, Googlebot-Mobile, hiptop, IEMobile, KYOCERA/WX310K, LG/U990, MIDP-2., MMEF20, MOT-V, NetFront, Newt, Nintendo Wii, Nitro, Nokia, Opera Mini, Palm, PlayStation Portable, portalmmm, Proxinet, ProxiNet, SHARP-TQ-GX10, SHG-i900, Small, SonyEricsson, Symbian OS, SymbianOS, TS21i-10, UP.Browser, UP.Link, webOS, Windows CE, WinWAP, YahooSeeker/M1A1-R2D2, iPhone, iPod, Android, BlackBerry9530, LG-TU915 Obigo, LGE VX, webOS, Nokia5800

同じく下記も設定されていますが、接続ネットワークでも見てるのかな?

w3c , w3c-, acs-, alav, alca, amoi, audi, avan, benq, bird, blac, blaz, brew, cell, cldc, cmd-, dang, doco, eric, hipt, htc_, inno, ipaq, ipod, jigs, kddi, keji, leno, lg-c, lg-d, lg-g, lge-, lg/u, maui, maxo, midp, mits, mmef, mobi, mot-, moto, mwbp, nec-, newt, noki, palm, pana, pant, phil, play, port, prox, qwap, sage, sams, sany, sch-, sec-, send, seri, sgh-, shar, sie-, siem, smal, smar, sony, sph-, symb, t-mo, teli, tim-, tosh, tsm-, upg1, upsi, vk-v, voda, wap-, wapa, wapi, wapp, wapr, webc, winw, winw, xda , xda-

モバイルとパソコンの表示を変えたい時、管理画面の「詳細」タブから、「詳細」項目の Mobile device support. (External plugin or theme required. See the FAQ for further details.) という部分から設定を確認できます。

チェックが入っていれば、モバイルからのアクセス時にはキャッシュを生成しません。
これによって、「モバイルとパソコンの画面デザインを分けている」かつ「キャッシュ機能を有効にしている」場合でも、キャッシュを作るのはパソコン用画面のみとして対応しているわけです。(モバイル用のキャッシュも作れればいいんだろうけどなあ…)

iPad はパソコン?モバイル?

さて、タブレット端末の場合、私はパソコン用の画面を見せるのが一番良いと思っています(今のところ)。
そのため、iPad での表示はパソコンと同じ物を想定していました。

iPad のユーザーエージェントは下記のようになっています。(Chrome で iOS5 のエミュレートした場合)

Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

wp_is_mobile では、Mobile が引っかかるので モバイルと判断されます。
WP Super Cache では、該当するものがないので パソコンと判断されます。

ただ違うのね、で終わりではありません。

wp_is_mobile でモバイルと判断されるということは、モバイル用の画面を表示する
WP Super Cache でパソコンと判断されるということは、キャッシュを生成する

モバイル用の画面がキャッシュされ、パソコンでアクセスしても有効期限までモバイル用の画面が表示されてしまう。

という状況になります。逆なら、iPad でアクセスしたらパソコン用の画面だけどキャッシュされない、ってなるのですが。

じゃあ、どうしたらいいの?

キャッシュプラグインの内容のほうが複雑なので、

(1) wp_is_mobile をカスタマイズする
(2) 使わないで別の関数を使う

という 2 つの選択肢があります。ただし、(1) はコアファイルの修正なのでお勧めしません。必然的に (2) の選択肢となります。functions.php に is_mobile という関数を作って使うのが一番。

参考:【WordPress】User-agentを判定してモバイル用コンテンツを切り分け、検証する方法

上記コードを functions.php に書いて使います(少し修正しています)。
これでも willcom や google phone に対応できてないのですが、アクセス解析のユーザーエージェントを確認して追加していくくらいでいいのかなあと。

参考:スマートフォンUSERAGENT一覧+モバイル版クローラ | カグア!Googleアナリティクス解説Blog
参考:serbanghita/Mobile-Detect · GitHub

タブレット端末での検証もお忘れなく!

Mindy Mouseはい、ごめんください。ひじり@雪国のウェブ解析士です。

ウェブ解析を行なうと「ここらへんを改善するとこれだけ良くなりそう」という仮説を立てることになるわけですが、「どのように改善すれば良いのか?」という方法を模索することになります。

Google Analytics の解析データだけでは見えてこない部分もあります。その定量的なデータからはわかりにくいのが、ユーザビリティ。製品やサービスには自信があるのに、どうにもコンバージョンにつながらない、という場合は、ユーザビリティの改善を行なうと一気に改善できる可能性があります。逆に、闇雲にデザインリニューアルを行なっても費用がかかるばかりですね。ポイントを押さえて改善していきましょう。(だからニッチなサービスを扱っている、金銭的体力の少ない中小企業にウェブ解析はオススメなのです)

ユーザビリティってなんだろう?

ユーザビリティ (Usability) はそもそもウェブに限ったものではなく、端的に言えば「使いやすさ」です。ISO 9241-11 に言葉の定義があるのですが、私は、期待する目的を達成するため、ユーザが気持ちよく使えるかどうか と考えています。どれだけストレスを減らせるか、ですね。

ユーザビリティについては下記が詳しいので、ちゃんと知っておきたい方は一読しておくことをお勧めします。

参考サイト:ユーザビリティとは – U-Site

上記サイトからちょっと引用。下記5つのポイントがわかりやすいです。

学習しやすさ
システムは、ユーザがそれをすぐ使い始められるよう、簡単に学習できるようにしなければならない
効率性
一度学習すれば、あとは高い生産性を上げられるよう、効率的に使用できるものでなければならない
記憶しやすさ
ユーザがしばらくつかわなくても、また使うときにすぐ使えるよう覚えやすくしなければならない
エラー
エラーの発生率を低くし、エラーが起こっても回復できるようにし、かつ致命的なエラーは起こってはならない
主観的満足度
ユーザが個人的に満足できるよう、また好きになるよう、楽しく利用できなければならない

じゃあ、これらをどうやって評価すれば良いのか?GA の場合は直帰率の高いページや、重要なページの滞在時間が極端に短い、長いというような部分を確認する方法もあります。が、近年、無料で始められるツールが出てきているのでそれを利用しない手はありません。

ユーザビリティをチェックするためのツール

ユーザビリティを確認するためには、アンケートやモニターによるユーザテストが主流でしたが、これは時間も費用もかかって大変でした。しかし、ウェブにおけるユーザビリティチェックは、無料から始められるツールが色々出てきて、手軽に確認できるようになりました。すごい時代ですね。

主にはヒートマップ(どこが見られているかがサーモグラフィーのようにわかる)やマウストラッキング(マウスがどんな動きをしたのかがわかる)などが主流で、おそらく他にもあるのだろうとは思いますが、個人的に面白そうだと思ったツールをご紹介します。

User Heat(ユーザーヒート)

ヒートマップの無料ツール User Heat :どこが読まれているかを可視化

1アカウント(メールアドレス)につき1つのタグが発行され、タグを含んだページのデータを蓄積していきます。

ここがすごい
どこがよく見られているのか、どこにクリックが集中しているのか、などがヒートマップとして現れるので、直感的に知ることができます。

例えば、バナーのつもりではない画像がクリックされていたり、バナーとして作った画像が完全にスルーされていたり。力を入れたフッタが思ったほど見られていなかったり・・・。結構衝撃的な事実がわかります。

注意したい点
URLごとにデータが蓄積されるので、同じURLでも期間によって内容が変わると、正しい結果を得られない場合があります。例えば、先月まであったメニューがなくなって1つずれると、「あれ?なんだ、このページ結構クリックされてるじゃん?」ということが起こりかねません。

そのような期間設定を踏まえたり、もっと詳細なデータがわかる有料版は下記、ユーザーインサイト。

アクセス解析ツール ユーザーインサイト : どんな読者が、どうサイトを見たかが分かるアクセス解析

GhostRec(ゴーストレック)

まったく新しいWEBサイトのユーザビリティ調査ツール – GhostRec.jp

ユーザ登録し、簡単な手順で発行された javascript のタグを解析したいサイトのページに埋め込みます。最初は無料で始められ、続けたいと思ったら課金する形になります。最初にクレカ登録などはなく、有料版への押し売りもないので、辞めたい場合はすぐに辞められます。

ここがすごい

タグを埋め込んだページにアクセスした人の行動が全部録画されているという、監視カメラのような驚愕のツールです。そのデータを元にヒートマップも生成されます。

監視カメラって言うとすごく気持ち悪い感じを受けるかもしれませんが、個人情報はまったくわかりません。そんなゴーストレックの使用レビューはまた後日。

注意したい点

最初は 100RecPv(録画100回分)が無料でもらえるので、とりあえず全部のページに仕込んでみました。そしたら、2日かからずにでもう使い切ってしまったんですね。
そのくらいのPVはわかっていたので、「おー、すごーい!どんな動きをしてるのかなあ?ワクワク」と覗いてみたら、0秒とか1秒とかのオンパレード。しかもページがバラけているのでデータが蓄積されにくく、ヒートマップがとれたのはたった1ページ。(それでも取れただけすごいのかも)
「とりあえず」でやってはいけない典型的な失敗となりました。というのも、ここまで短時間のデータばかりになるとは思っていなかったので。やるなら目的を持ってページを2~3に絞ったほうがいいです。も、もったいなさすぐる…。

ユーザビリティチェックツール

ユーザビリティチェックツール | ユーザーサイド 株式会社アーティス ユーザビリティ研究プロジェクト

汎用的なチェック項目をすべて網羅しています。ユーザ視点というよりは、提供側として心得ておきたいという項目がズラリ。登録の必要はないので簡単に使えますね。

ここがすごい

各カテゴリーごとに設問があり全部で55項目もあるので、「サイトのユーザビリティチェック結果です」とか言って顧客に出せる資料になりかねないくらい網羅されています。

注意したい点

ユーザビリティは時代によって変わってくる部分もあるため、これらの項目がすべてではありませんし、型にはまらない動きをするのが人間です。
どんなところに着目していればいいか、というのを自分のものにしておきたいですね。

FiveSecondTest(英語のみ)

FiveSecondTest

最後は英語版しかないのですが、スクリーンショットを5秒間見て、設問に答えてもらい、その結果を反映するというもの。タスク型の簡単なアンケート調査ツールですね。

ここがすごい

簡単な登録、簡単な手順でデータが溜まっていくのが面白い。このサイト自体のユーザビリティが秀逸(笑) 有料版もあります。

注意したい点

言語が違うとよくわからないしどう答えたらいいのかわからない、という状況になるので、海外向けのサイトには適していますが日本語サイトは難しいですね。日本語版があればいいのに。(余裕ができたら似た感じのものを作ってみたいなあ)

というわけで、今度はゴーストレックの使用レビューを行いまっす。