このページの本文へ

MARKETING 清水 誠の「その指標がデザインを決める」 ― 第11回

ログインボタンって本当に必要? UIの常識を検証する

2013年03月04日 11時00分更新

清水 誠

  • この記事をはてなブックマークに追加
本文印刷
その指標がデザインを決める

 会員登録制サイトに欠かせないログインボタン。ヘッダーの右上に設置されていることが多いですが、購入などのアクションを起こした時点でログインフォームを表示するようにしておけば、ユーザーにわざわざ「ログインボタン」をクリックしてもらう必要性は薄れます。

s11-01.png
楽天(上左)、アドビ(上右)、Amazon(下)のログインボタン

 ユーザーが明示的にログアウトしない限り、ログイン状態を維持しておくのも有効です。後日再訪問したときには「ようこそ○○さん」などと表示し、ログイン状態が続いていますが、購入や登録情報の閲覧など高いセキュリティが必要なアクションでは再度認証を求めます。わざわざログインしないでもパーソナライズされた情報が表示されるので、ユーザーにとって利便性が高く、運営側にも「会員の行動履歴を取得しやすい」「ターゲティングによりコンバージョン率が上がる」などのメリットがあります。

 このように、「ログイン」「ログアウト」ボタンはどの程度目立たせればよいのでしょうか? 今回は、ログインボタンに関するUIやデザインのインプットとして、データを活用する方法について検討します。ボタンの単純なクリック数ではなく、認証状態とサイト閲覧行動の関係にまで踏み込み、ユーザー行動の可視化を試みます。

知るべきことを知る

 ログイン機能は、それぞれのユーザーに合わせた利便性を提供することで、サイトの価値を高めるのが目的のはずです。そこで、「なるべく多くのサイト訪問者にログイン状態になってもらう」のをサイト改善のゴールとします。

 ログインといっても、いろいろなシチュエーションが考えられます。サイトを初めて訪問した状態、サイトを何度も再訪問しているのに会員登録のメリットを感じていない状態、会員登録済なのに面倒または必要性がないのでログインしていない状態、ログインしたままの状態など、訪問状況や会員登録の有無も関係してきます。ログイン状態のシチュエーションを以下のように表で整理しました。

s11-02.png
ログイン状態のシチュエーション

 それぞれの分類に対して、ログインを促進するためにどんな改善アクションを実施するのかを考えておくと、レポート自体が目的にならず、具体的な改善につながる分析ができます。

ログイン状態を計測する方法

 全訪問者を「初訪問者」「非会員リピーター」「ログアウト済」「ログイン中」に分類すれば良いことがわかりました。次に、判定ロジックについて考えます。

s11-03.png
ログイン状態の判定ロジック
  1. 現在ログイン中か?
  2. 過去にログインしたことはあるか?
  3. 初訪問なのか?

 という3段階の判定が必要になります。

 ログイン機能があるということは、PHPやJavaなどの動的なプログラムで認証システムを実装しているはずです。システムを改修してログイン状態をカスタム変数にセットするのがもっとも確実な方法ですが、現実には、社外に発注するためコストがかかる、開発リソースの都合ですぐには対応できない、一時的にデータが欲しいだけなので優先度を高められない、などの制約がつきものです。

 そこで今回は、フロントエンド(JavaScriptとCookie)のみで簡易的にログイン状態を計測する方法を考えます。

1.現在ログイン中か?

 ログインした結果として変化するボタンなどの要素の有無をJavaScriptで調べ、ログイン中かどうかを判定します。たとえばAmazonの場合は、非ログイン時には「サインイン」ボタンが、ログイン時には「サインアウト」リンクがあります。

s11-04.png
Amazonの非ログイン時(左)とログイン時(右)の違い

 こうしたログイン状態によって変化する要素のうち、HTMLの構造上、特定しやすい要素を使って判定するとよいでしょう。Amazonの例の場合、「サインアウト」リンクに「nav-item-signout」というid名が付いていますので、この要素の有無をJavaScriptで調べればよいわけです。

2. 過去にログインしたことはあるか?

 1.のログイン判定時に無期限のCookieをセットしておき、再訪問時にそのCookieの有無を調べることで過去のログイン経験を判定します。

3. 初訪問なのか?

 初訪問かどうかの判定はシンプルです。訪問開始時にセットしたCookieの有無で初訪問、再訪問を判定します。再訪問の場合は訪問回数をセットしておくと、何かと便利です。カウンターのように訪問するたびに1を足してインクリメントします。

レポートのデザインを工夫する

 Web解析ツールのレポート画面で数字やグラフを見ても直感的に理解できないので、Excelに落として以下のようなチャートを作成するとよいでしょう。

s11-05.png
ログイン状態をチャートにして理解する

 まず現状を把握した上で目標値を設定し、UI改善後の指標の変化を見ます。

s11-06.png
UI改善の前後のログイン状態を比較する

 このようなデータを常時モニタリングすれば、単なるUIやユーザビリティの改善だけでなく、サイトの価値を高めるためのいろいろな最適化が可能になります。


著者:清水 誠 (しみず・まこと)

著者写真

Webアナリスト。1995年国際基督教大学を卒業後、凸版印刷やScient、Razorfishにて大手企業へのWebコンサルティングとIA設計に従事した後、ウェブクルーでは開発・運用プロセス改善、日本アムウェイでは印刷物のデジタル化とCMS・PIM導入、楽天ではアクセス解析の全社展開、ギルト・グループではKPIの再定義とCRMをリード。2011年9月に渡米、マーケティング製品の品質改善に取り組む傍ら、執筆活動も続けている。サンクトガーレン社外CMO、電通レイザーフィッシュ社外フェローも務める。

■運営サイト

Web Professionalトップへ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング