モバイル UX を考慮した Web サイト設計方法の提案
2010SE032 伏屋 総馬 2010SE260 内海 太祐
指導教員： 青山 幹雄

1

はじめにスマートフォンやタブレットの急速な普及に伴い，モバイルデバイスから Web サイトの利用が増加している．しかし，モバイルデバイスから利用される際のユーザ経験を考慮していない Web サイトは多い．
本研究では，モバイルデバイスに対応した Web サイトを設計する際，ユーザの視点に立ち，ユーザ経験を向上させることを目的とする．

2

研究課題

本研究では上記の背景を踏まえ，以下の 2 点を研究課題とし，モバイルデバイスからの利用を考慮した Webサイトの設計プロセスを提案する．
(1) モバイルデバイスに対応したWebサイトのUXを向上させる手法を提供する．
(2) PC を基準に考えられ，肥大化した Web サイトから，ユーザが真に必要としている機能，コンテンツを選定する．
本研究では，ペルソナシナリオ法，ジャーニーマップを利用し，ユーザが目的を達成するまでの流れにおけるユーザの感情の変化を可視化することで，ユーザの視点に立ち，モバイルデバイスからの利用を考慮した Web サ
イトの設計を可能とする．

ジャーニーマップは以下の 5 つの要素から構成される．
(1) レンズ(The Lens)(2) ジャーニーモデル(Journey Model)(3) 質的インサイト(Qualitative Insights)(4) 量的インサイト(Quantitative Insights)(5) 次に活かすべき要点(Takeaways)

4

アプローチ

ペルソナシナリオ法とジャーニーマップを用いて，モバイルデバイスからの利用を考慮した Web サイトを実現する設計手法を提案する(図 1)．
システムの改良の際にそのシステムのユーザにユーザリサーチをとり，ユーザ経験を収集し，ペルソナを作成する．ペルソナから作成されたシナリオをもとにジャーニーマップを作成し，ユーザの行動に伴う感情や思考の変化を可視化する．時間軸に沿ってユーザの行動をひとつのマップに記述し，シナリオを視覚的に表現することで，問題点の抽出，改善を行い，Web サイトの UX を向上する．

3 関連研究3.1 UX (User Experience)
UX とは，あるサービスやシステムを使用することによって得られる経験や感情のことである[1]．
本研究では，モバイル端末としてスマートフォンやタブ
レット PC を対象とする．モバイル端末は，画面の大きさ，メモリなどのリソースが限られているため，PC 向け Webサイトの機能やコンテンツを全て取り入れることは UX の低下に繋がる．

3.2

人間中心設計システムの使い方に焦点を当て，人間工学やユーザビリティの知識と技術を適用することにより，インタラクティブシステムをより使いやすくすることを目的とする，システムの設計と開発へのアプローチである．

3.3

図 1 アプローチ

5 提案方法5.1 提案プロセス
本研究では，人間中心設計プロセスにおける，要求獲得と要求分析のフェーズを拡張して提案する．提案プロセスは，3 つのアクティビティからなる(図 2)．
(1) ペルソナの設定(2) シナリオの作成(3) ジャーニーマップの作成

ペルソナシナリオ法

ペルソナシナリオ法とは，詳細に定義された仮想ユーザであるペルソナにシナリオを付加することによって理想的なシステムの挙動や機能を明確にする手法である．本
研究では，その表現手法としてジャーニーマップを使用する．

3.4

ジャーニーマップ

ユーザがサービスを利用する上での，その時の感情や行動を時間軸に沿って可視化する手法である．ユーザがサービスを利用する際に感じる満足度や，サービスに対する価値を分析するために用いられる[3]．

図 2 提案プロセス

5.2

ペルソナ設定(1) ユーザ経験の収集，抽出
現状のWebサイトの課題，改善点を含むユーザ経験を収集するために，Webサイトの利用者を対象にアンケートを実施する．
1) 特徴変数の抽出
ユーザの特徴を見出すためにアンケートから得られたデータを基にユーザの特徴を表現する変数を抽出する[2]．
2) パターンのセグメンテーション
複数の行動変数に共通性があるパターンを抽出し，ユーザの特徴を見出す．異なる特徴を持つユーザ群の数が生み出すペルソナの数となる．
(2) ペルソナ設定
アンケートの結果を基に，ペルソナを作成する．名
前，年齢，居住地，性格，趣味などの基本属性を持たせる．これに加えてモバイルデバイスやインターネットの慣れに関する属性を付加することによって，ペルソナのイメージを明確にする．

5.3

シナリオ記述作成したペルソナに行動変数の値を詳細に記す．
ユーザ調査のコンテキストを保ちながら，ユーザがある状況において目的を達成するまでの一連の流れをシナリオとして記述する．シナリオ作成に必要な要素は次の5つである[2]．
(1) シーンの設定(2) ゴールの設定(3) 途中経過(4) ゴールの達成(5) 結果シナリオを記述することによって，Webサイトを利用するユーザの行動を詳細に把握することができる．

5.4

提案方法の適用

本研究では，ユーザ調査が可能な Web サイトとして，南山大学瀬戸キャンパス学生情報ページを対象に提案方法を適用した．

6.1

学生情報ページの利用目的と利用目的ごとの満足度を表2と図3に示す．
表 2 最もよく使うコンテンツ
利用目的割合(%)
News&Topics
6.3
36.3
休講・補講情報35.0
スクールバス
WebClass
12.5
PORTA
10.0

作成されたジャーニーマップをもとに，問題点の抽出を行う．ユーザの UX 満足度の曲線に着目することで，問題が局所的なものなのか，全体に及ぶのかを判断する．
UX 満足度の曲線が下がっている，または値が低くなっている行動に問題があると判断し，その行動における思考から，問題点の発見につながる思考を抽出し，改善策を検討する．

5

ユー

問題点の抽出ユーザ調査(1) アンケートの対象
本研究では，スマートフォンやタブレットPCなどのモバイルデバイスから南山大学瀬戸キャンパス学生
情報ページを利用する学生ユーザが対象で，従来型の携帯端末を利用している学生は対象外とした．
情報理工学部，総合政策学部1年生～4年生の合計80人にアンケートを実施した．アンケートの設問は原則として選択式とし，アンケートの最後に自由記述欄を設け，アンケートの設問でカバーしきれないデータや定性的なデータを収集することが可能となる(2) アンケート結果
アンケート調査の結果，男女の間に学生情報ページに対する満足度の違いは見られなかったが，学年，学部において差が見られた．その結果を表1に示す．
表 1 学部・学年別の満足度
総合政策
情報理工
学年平均
3.2
2.9
3.1
1年生
3.42.5
3.0
2年生
2.4
3.1
2.7
3年生
2.8
2.0
2.5
4年生
3.0
2.6
2.8
学部平均

ジャーニーマップ作成

ジャーニーマップを作成し，問題点を把握する．ペルソナに近いユーザにインタビューをとるなど，ペルソナ作
成後に再度ユーザ調査を行い，思考や感情を補完する．
本研究では，操作ごとの感情的な満足度を 5 段階で定量的に評価し，その値を UX 満足度と定義する．
ジャーニーマップの記述方法を述べる．
(1) シナリオを操作単位で時系列順に記述する(2) 各操作を行う過程での思考，感情を記述する
横軸を時間軸とする．縦軸は Web サイトの特性や,着目するポイントに応じて決定する．

5.5

64
News&Topics
休講・補講情報

ザ 3
ビリ 2
ティ
1

スクールバス
WebClass
PORTA

0
使いやすさ

操作量

到達可能性

満足度

利用目的

図 3 利用目的ごとのユーザビリティ
表2と図3より，最も利用されているコンテンツはス
クールバスであるが，満足度は他のコンテンツよりも低いことが分かる．

6.2

6.5

ペルソナ設定アンケート調査の結果，満足度で差がでた学部・学年ごとにペルソナを設定する．ペルソナは表3に示す4名とする．
表3 ペルソナの分類
ITに対する慣れ

ペルソナ
A

学部

学年

総合政策

3年生

B

情報理工

4年生

成熟している

C

総合政策

2年生

PCがほとんど

D

情報理工

1年生

慣れていない人並み作成した4名のペルソナからプライマリペルソナを選定する．ペルソナBはインターネットに成熟しており，インターネットに成熟したユーザに特化した要求になる可能性がある．これに対して，ペルソナDはインターネットにとどまらず，ITに対して不慣れであるため，十分な要求を期待できない．また，ペルソナCは，モバイルデバイスからの利用がほとんどない．
これらの理由から，ペルソナAをプライマリペルソナとして設定する．

6.3

シナリオ記述ユーザ調査で得られた情報を基に，それぞれのペルソナにシナリオを記述する．
アンケート調査の結果，シナリオのゴールを最も利用されていたスクールバスの時刻表の確認とした．ゴールを達成するまでのページ遷移を状態遷移図として表現し，ペルソナの行動を視覚化することでユーザの行動を明確にする．シナリオ記述の粒度は，一般的には定められておらず，自由な記述が可能である．本研究では，ジャーニーマップにプロットしやすい，ユーザの操作毎とした．

6.4

ジャーニーマップ作成

ペルソナ A～D のそれぞれのシナリオをもとに，ジャーニーマップを作成する．ペルソナに近いユーザ 8 名にシナリオに沿って Web サイトを利用してもらい，インタビューを実施することで，行動に伴う思考と UX 満足度を補完した．
図 4 にペルソナ A のジャーニーマップを示す．

問題点の抽出

ポジティブな思考とネガティブな思考を色分けし，着目すべき思考を明らかにしたジャーニーマップから問題点を抽出する．
4 人のペルソナのジャーニーモデルは，「利用者の皆さんへ」から pdf ファイルの時刻表へ到達するまでの流れと，「スクールバス時刻表モバイル版」から時刻表へ到達するまでの流れの大きく 2 種類に分類され，それぞれグループ 1，グループ 2 として，表 4 に抽出した問題点をまとめる．
この 2 つのジャーニーモデルごとに得られる問題点はほとんど共通していることが分かる．
表 4 問題点の抽出
ペルソナ
問題点グループ 1
グループ 2
A
C
B
D
時刻表までの流れがわかりにくい○
リンクがどこにあるかわかりにくい○○○
ページ遷移の数が多い○○
pdf ファイルは使いにくい○○
情報が見づらく，わかりにくい○○
リンクをタップしにくい○

6.6

改善策の検討アンケート結果とジャーニーマップをもとに問題点の改善策を検討する．プライマリペルソナであるペルソナ A の問題点を最優先する．
グループ1はページ遷移の数が多いと感じ，不満を感じているが，グループ2はページ遷移の数による不満は感じていない．よって，目的達成までのページ遷移の数を「モバイル版スクールバス時刻表」を用いる場合の遷移数以下になるように設定する．
グループ 1 の思考から，pdf ファイルはモバイルデバイスにはあまり適していないことがわかる．しかし，A の思考にもあるように，1 ページに情報が網羅してあることや，ファイルとして保存可能なことは pdf ファイルの利点であり，pdf による時刻表の表示を求めているユーザもいるだ
ろうと判断し，pdf ファイルへのリンクも別に用意しておく．
「情報が見づらくわかりにくい」ことと，「リンクがタップしにくい」という問題点は，文字サイズを大きく，タップ可能範囲を広くし，モバイルデバイスから利用しやすいように設定することで解決できると考えられる．
改善策を表 5 にまとめる．
表 5 改善策の検討
問題点
時刻表までの流れがわかりにくい
リンクがどこにあるかわかりにくい
ページ遷移の数が多い

pdf ファイルは使いにくい
情報が見づらく，わかりにくいリンクをタップしにくい

図 4 ペルソナ A のジャーニーマップ

改善策
時 刻 表 の 表 示 を最 優 先 し ， ス
クールバスページの最上部に時刻表へのリンクを設置する
目的達成までのページ遷移数
を「モバイル版スクールバス時刻表」以下になるようにする．
pdf ファイルを利用せずに時刻表を表示する
文字サイズを大きくし，タップ範囲を広くする

7

プロトタイプ

検討した改善策を基に，プロトタイプを作成する．プロ
トタイプの作成には，モバイルデバイスに特化したUIを作成できるjQuery Mobileを使用した．
学生情報ページは，利用頻度の高いコンテンツへのリンクをアイコンを用いてページ上部に配置することによって，視覚的に分かりやすくした．また，News&Topicsは情報の種類別に色分けをした．
スクールバスページは，時刻表までのページ遷移が多いこと，時刻表のページが複数存在していることが問題であったため，時刻表までのページ遷移を減らし，まとめられるページは1つにまとめた．
図5に改善後のスクールバスページの状態遷移図を示
す．

8.2

図 7 UX 満足度の比較
図 7 より，UX 満足度は全体を通して改善前より向上していることが確認できた．

9

図5 改善後の状態遷移図

8

評価

提案方法の適用により，ユーザがよりよいユーザ経験を得られたかどうかを確認するため，ペルソナに近いユー
ザ 8 名に作成したプロトタイプを利用してもらい，インタビ
ュー調査を実施した．

8.1

アンケート調査の比較

改善後のスクールバスページにおいて，アンケート項目の(12)～(15)の 4 つの項目を評価してもらい，改善前の評価と比較する．

UX 満足度の比較

ジャーニーマップを作成し，プロトタイプに対する UX満足度の平均値を算出し，改善前の Web サイトに対す
る UX 満足度と比較する．

考察

ペルソナシナリオ法とジャーニーマップを組み合わせることで，ジャーニーマップの構成要素のうち，レンズをペルソナ，ジャーニーモデルをシナリオによる表現が可能となった．ペルソナを利用することで，ユーザを絞り込み，ユーザ視点からの Web サイトに対する UX を分析することが可能となる．また，ペルソナからシナリオを作成することにより，ジャーニーモデルの範囲と粒度の設定を支援することが可能である．そうしたレンズとジャーニーモデルを持つジャーニーマップから得られる問題点は，客観的に抽出された問題点であると考えられ，ユーザ視点からシステムを改善することが可能となった．

10 今後の課題
本研究では，提案方法の実践として南山大学瀬戸キャンパス学生情報ページに適用した．しかし，この検証には不十分な点がある．
本研究における課題として，以下に 3 つあげられる．
(1) システムの広範囲に適用する場合のジャーニーモデ
ルの決定(2) モバイル特性全てを考慮可能かどうかの検証(3) 改善策の優先度の決定方法

11 まとめ本研究では，ペルソナシナリオ法，ジャーニーマップを利用することで，Web サイトを利用する際のユーザの思考，感情の変化を可視化でき，開発者がユーザの感情や思考を直感的に把握することが可能となり，よりユーザ視点に近い問題点の抽出が可能となる．抽出された問題点を基に Web サイトが提供するコンテンツや機能の取捨選択を行うことで，モバイルデバイスから利用する際のUX を考慮した Web サイトの設計方法を提案した．
図 6 アンケート調査の比較
図 6 から，(12)～(15)の項目全てにおいて，改善後のページの評価が改善前のページよりも上回る結果となった．特に評価が低く，ユーザの心情が表れる「満足度」に関する項目においても高い評価を得られるようになり，ユーザの感情に着目して改善した効果が表れていることが分かる．

12 参考文献[1] 川西 裕幸，栗山 進，潮田 浩，UX デザイン入門，
日経 BP 社，2012．
[2] S. Mulder and Z. Yaar，Web サイト設計のためのペルソナ手法の教科書，毎日コミュニケーションズ，
2008．
[3] 佐藤 啓太，中谷 多哉子，情報処理学会デジタル
プラクティス, Vol. 4 No. 2, Apr. 2013, pp. 161-167．