ユーザ経験（UX）に基づく Web サイト再構築設計方法の提案
2009SE087 伊藤 まどか

2009SE172 桃山 みなみ

指導教員： 青山 幹雄

1

はじめに

近年，Web サイトは私たちの生活に深く関わっており，欠かすことのできないものになってきている．Web サイトは飛躍的に進化し，多様化，高機能化している．しかし，それらの多くは機能を満たすことに主眼が置かれ，ユーザビリティ，ユーザの楽しさや面白さなどのプラスの感情を考慮した Web サイトはあまり普及していない．
本研究では，ユーザの経験を利用することで，ユーザビリティとプラスの感情を考慮した Web サイトを実現する設計方法を提案する．

2

研究の課題

本研究では前述を踏まえ，以下 2 点を研究課題とし，UX（User Experience）を考慮した Web サイト再構築の設計プロセスを提案する．
(1) 既存の Web サイトを利用する際に，ユーザにプラスの感情を提供する．
(2) UX を向上させる Web サイト再構築の改善方法のプロセスを提供する．
従来の方法であるペルソナ/シナリオ法ではユーザの行動全体の把握をしつつユーザの要求を特定することが困難であった．そこで，ペルソナにストーリを付与することによって，開発者にユーザへの共感を与え，その後それらを利用し，マッピングを行うことでユーザの行動全体を把握し問題点の特定が可能であると考える．

使って伝える方法である．利点として，人々の共感を引き出すことができる[4]．
(5) ユーザストーリマッピング
ユーザのアクティビティに基づいて，ユーザストーリを時間と優先度に着目し 2 次元でマッピングをすることで，システムの全体像を開発者側で共有できる方法である．開発者のユーザ理解が進み，より多くのユーザ満足が得られるようになる．

4

アプローチ

ペルソナとストーリテリング，ユーザストーリマッピングを組み合わせることで，ユーザビリティ，プラスの感情を考慮した Web サイトを実現する設計方法を提案する(図 1)．
システムの改良の際にそのシステムのユーザにユーザリサーチを行い，ユーザ経験を収集する．
ペルソナを作りユーザの環境を現実的に理解し，ペルソナにユーザ経験のリサーチ結果を活用し作成したユー
ザストーリを組み合わせる．そのユーザストーリを組み合わせたペルソナを使いユーザストーリマッピングを行うことで改善点を抽出する．抽出された改善点に基づいて，Webサイトの UX を向上する．
提案プロセス
ユーザ群

現状
WebサイトUXがあまり考慮されていない

改善後経験の収集ストーリテリング
ペルソナ

UXを向上したWeb
サイトを実現

ユーザストーリ

3

関連研究(1) UX(User Experience)
UX とは，ユーザがある製品やシステムの利用時に得られる経験や満足のことである．良い UX をもたらす三つの条件を以下に示す[3]．
1) 機能：目標達成のために必要な機能を備えている．
2) ユーザビリティ：特定の利用状況において，ある製品が指定された目標を達成する際に用いられる有効さ，効率，利用者の満足度の度合い．
3) プラスの感情：嬉しい，楽しい，安心，楽観，信頼，愛情，感謝，自信，やる気，くつろぎなどの感情．
(2) ユーザ中心設計プロセス
ユーザ中心設計プロセスは，ユーザとインタラクションを行

マッピング
マップ

図 1 アプローチ

5提案方法

5.1
提案方法の枠組み
ユーザ中心設計プロセスに基づいた，Web サイトの再構築のための提案プロセスを図 2 に示す．
(2)利用の状況の把握と明示(3)ユーザと組織の要求事項の明示

既存プロセス

提案プロセス

う機械や Web サイトの開発に当たり，ユーザの視点に立って設計し改善を行うプロセスのことである．

要求獲得

ペルソナ設定

要求分析

ストーリテリング(3) ペルソナ
ペルソナとは詳細に定義づけられた仮想ユーザである．
ペルソナの属性には，一般的に最低限必要な六つのキーといわれる｢写真，名前，年齢，居住地，職業，略歴」がある[3]．
(4) ストーリテリング
ストーリテリングとは出来事や経験を言葉やイメージをプロトタイピング

ストーリの作成
ストーリマッピング記述

ユーザ評価
YESNO

改善点の抽出(4)設計による解決案の作成

図 2 提案プロセス
ユーザ中心設計プロセスはユーザ中心設計の必要性

の特定，利用状況の把握と明示，ユーザと組織の要求事項の明示，設計による解決案の作成，要求事項に対する設計評価の 5 つのプロセスからなる．ユーザ中心設計プロセスにおける，要求獲得と要求分析の段階を詳細化し提案する．提案プロセスは，ペルソナの設定，ストーリ作成，課題の抽出の 3 段階からなる．

要素の「キャラクタ」を作る際にストーリを与えたペルソナを意識して作成する．
2.2) 構造とプロットを作る：「タイトル，前提，そして，いつ，それから，さらに」という項目に沿ってストーリを作成する．ストーリをペルソナに付属させる．これによって，Webサイトのユーザをより深く理解できるペルソナを作成できる．
(4) 問題点抽出
5.2
詳細プロセス1) ペルソナの優先順位付け
改善したい Web サイトを決定した上で，既存システム 2) ストーリマッピングの実施の確認を行う．既存システムの開発プロセスを Web サイト
ストーリマッピングを行い問題点を得る．本研究ではこの改善者が確認する．なぜそれが利用されているのか， の方法を問題点の抽出に利用する．ストーリの付けられた何をしているのか，関心があるのは誰かなども認識する． ペルソナごとに次の五つのプロセスを実行する．
これらを確認することで，改善者が対象 Web サイトの開発
2.1) ストーリに含まれる問題点を洗い出す．
プロセスを認識できる．
2.2) ストーリから抽出した問題点を類似しているものは縦(1) アンケート収集方法に並べ，問題が出てくる順に時間軸に合わせて配置す問題点などを含んだユーザ経験を基に，共感を生み出る．
すストーリを作成するためにアンケートを取る[2]．
2.3) 問題点を動詞で表現する．
1) スケジュールの決定
2.4) 重複する問題点をマージする．
アンケート調査のスケジュールを計画する．
2.5) 問題点に優先順位を付ける．
2) アンケートの作成
ペルソナに「利用頻度，利用する立場，主な利用する作成したスケジュールに沿ってアンケート調査を行う．
内容」などの対象の Web サイトに合わせた項目を参考に(2.1) 質問の作成：知りたいことを書き出し，それらを特徴， 優先順位を付ける．ペルソナごとのストーリマッピングを並行動，意識などのカテゴリに分けする．カテゴリが偏ったア べ替え，マップを作製する．優先度の高いペルソナから順
ンケートにならないように質問を選択しアンケートを作成す に，優先度が 1 位の問題点を問題点として抽出し，3 位まる．
で繰り返す．
(2.2) 作成したアンケートのレビュー：改善者のチームでレ 3) 問題点を抽出する．
ビューを行う．共感の生まれるストーリが書けそうなユーザ (5) 改善策
経験が集められそうにないなどの結果になれば質問作り
1) 抽出した問題点を基にした Web サイトの改善のプロセス 2)からやり直す．
先ほどでてきた問題点を実際の Web サイトに適用し，(2.3) ユーザのモデルへの事前調査：調査を行うユーザ
改善後のサイトを作成する．の一部に作成したアンケートを事前に回答してもらい，有2) 改善の効果を評価する．
効かどうかを確認する．(2.2)と同様に納得のいかない結果になれば質問作りのプロセス 2)からやり直す．
6 提案方法の適用
3) アンケートの実施
本研究ではユーザが限定されている身近な Web サイト
回答数は多いほど詳細で平均的な経験を収集できるの として「南山大学ポータルシステム PORTA」を例とした．
で，できるだけ多くの回答者を用意する．
「初回登録」の機能を対象に提案プロセスを適用した．
4) アンケートの分析
分析完了レポートの作成：収集したユーザ経験の分析 6.1
アンケート調査を行う．本研究では計数法を用いて分析をする．
(1) アンケートの対象(2) ペルソナの設定
本研究では，南山大学ポータルシステム PORTA を使
ペルソナの作成に必要な六つの属性である「写真，名 用する学生ユーザが対象である．南山大学学生のイン前，年齢，居住地，職業，略歴」を用意する．これらの項目 ターネット環境が同様である理系と文系の学部１学部ずつに加えて対象の Web サイトに合わせて項目をいくつか追 を対象とし，情報理工学部，総合政策学部の学生にアン加する．
ケートを実施した．
(3) ユーザストーリの記述
ペルソナ設定とユーザストーリ記述が出来るよう質問項
アンケートで収集したユーザ経験に基づき，ユーザス 目を設定し，各ページにおける操作における使いづらいとトーリを作成する．
感じる度合を 5 段階で評価してもらう項目を追加した．
次のユーザストーリの作成プロセスに沿って行う．
(2) アンケート結果
1) 集める
アンケート結果は性別による差は見られなかったが，学ユーザのストーリをアンケートによって集め，選択する．
部による差が見られた．アンケート結果全体から，特に回2) 作る
答が明確に分かれた結果をペルソナに付与する．なお，次の二つのプロセスを行う．
数字は回答者数とする．アンケートの設問に対して上から2.1) 構成を設定する：このプロセスではストーリの構成 順番に数字を割り当てる．以下に操作量に関わる設問と要素として「視点，キャラクタ，コンテクスト，心的イメージ， デザインに関わる設問に分けた結果と表を図 5，6 に示す．
言葉使い」の五つを設定する． 本研究ではストーリ構成

32015101255ア
ン
ケ 項ー目
ト

01135101112

情報理工171610181410
情報総政

図 3 操作に関する問題点
12016215101454013697アンケート項目

情報総政124679131416

情報理
工1191011899912

表 1 ペルソナごとの使いづらさ

総政総合11014911

総合政策
171311141116121011

図 4 デザインに関するアンケート項目
アンケート項目を七つ抜粋し，以下に示す．
アンケート項目 1：PORTA 全体の文字サイズ
アンケート項目 2：PORTA 全体の色合い
アンケート項目 3：登録までの操作量
アンケート項目 5：メニューの量
アンケート項目 9：履修希望登録の名所アンケート項目 11：授業内容の確認
アンケート項目 12：登録実行ボタンの有無

図 3，4 より，情報理工学部生と総合政策学部生を比較すると，総合政策学部生がデザイン面に多くの問題を抱えており，情報理工学部生が操作面に多くの問題を抱えていることが分かる．
6.2
ペルソナ設定ペルソナは情報理工学部生，総合政策学部生，それぞれ男女 1 名とする．

PORTA 利用時に使いづらいと感じる度合
ペルソナ

そうでもない←・・・・・→使いづらいA( 1 ・ 2 ・ 3 ・ ④ ・ 5)B

( 1 ・ 2 ・ ③ ・ 4 ・ 5)C

( 1 ・ 2 ・ ③ ・ 4 ・ 5)D(① ・ 2 ・ 3 ・ 4 ・ 5)

ペルソナ A は 4 となっており，メンバの中では最もPORTA を使いづらいと感じていることがわかる．一方ペルソナ B は 3 となっており，この項目においても平均的であるとわかる．ペルソナ A に比べてペルソナ B は問題に偏りがないため，本研究の主要ペルソナをペルソナ B とする．
6.3
ストーリの記述
ペルソナごとのストーリの構成要素と構造とプロットを作成し，その要素を基にストーリを記述する．その後，ペルソナの属性に加える．
改善点抽出

6.4

(1) ペルソナの優先順位

アンケート項目「PORTA 利用の際に困っていると感じる度合」の回答に従い，困っている度合いの高いペルソナから順に優先していく．主要ペルソナ B が 1 位となる．ペルソナの優先順位は，次に示すようになる．1 位：ペルソナ
B，2 位：ペルソナ A，3 位：ペルソナ C，4 位：ペルソナ D．
(2) ユーザストーリマッピング
ペルソナごとのストーリから改善点を抽出し，ストーリマッピングを行う．
主要ペルソナが抱えている改善点に焦点をあて，優先順位 1 位，2 位の改善点を順番に見つける．次に，ペルソナの優先順位 2 位，3 位，4 位から順に優先順位 1 位の改善点を見つける．主要ペルソナ以外のペルソナにおける改善点の優先順位 2 位，3 位と繰り返すことで，実際に改善する改善点が抽出できる．
主要ペルソナのストーリマッピングを図 5 に示す．
困っている度合い（ １ ・ ２ ・ ③ ・ ４ ・ ５ ）PORTAを開く

履修登録をする

登録完了後時間

履修希望登録の名称がわかりづらいA

総合政策学部

3年

山本 猛

B

総合政策学部

2年

榊原 美紀C

情報理工学部

2年

河合 涼

D

情報理工学部

3年

清水 絵里

4 名の中から，ペルソナの中の主要ペルソナを選定する．情報理工学部生である C，D は Web サイトに関する知識が多く，Web サイトの作り方，作るための手順などを知っているためユーザとして主要ペルソナに適切でない．
総合政策学部生である A，B は Web サイトの開発についての知識は少ないことから主要ペルソナに適していると考える．
ペルソナの優先度を決定するため，大きく関わるアンケート項目「初回授業登録の際に使いづらいと感じる度合い」に注目する．ペルソナごとの使いづらいと感じる度合
いを表 1 に示す．

優
先度

初回登録ページへのボタン
各曜日・時限の授業選択

画面の色合い

図 5 ペルソナ B のストーリマッピング
表 2 ペルソナごとの抽出した改善点
改善点
文字が小さい
履修希望登録の名所
初回登録ボタンの位置
授業内容確認が分かりづらい
登録までの操作量が多い

A
1位
2位

ペルソナ
BC

D

1位
2位
1位2位

1位
2位

表 2 の改善点の順位を見易く表示するため，それぞれに点数を付与する．主要ペルソナ B から抽出された改善点の上位から順に点数を付与し，次に，ペルソナの順位

が 2 位，3 位，4 位の改善点 1 位，2 位の順に点数を 1 点ずつ下げて付与していく．上記の点数付与を行うことによって，改善点として以下の五つを得る．
(1)
(2)
(3)
(4)
(5)

7

履修希望登録という名称の変更
授業内容確認をわかりやすくする
PORTA 全体の文字サイズを大きくする
登録までの操作量を減らす
初回登録ページへ移動するボタンを見つけやすくする

改善結果

操作量とデザインに着目し，改善を行う．操作量に関して，授業内容確認をわかりやすくするために， 授業内容の確認を画面遷移せずに授業科目名にカーソルを合わせることによって吹き出しで表示し，カーソルを離すと吹き出しが消えるように改善する．画面遷移の状態遷移図と操作手順を示すシーケンス図を作成した．以下に改善後の画面遷移の状態遷移図を図 6 に示す．
学生メニュー
ボタンクリック
HOME
ページ

履修希望登録（初回登録エントリー）★ボタンクリック
学生
メニューページ

個人情報確認“他学科も表示”
クリック

“クリア”
クリック

虫眼鏡
アイコンクリック

9

消しゴムアイコンクリック

履修希望
登録ページ

登録実行クリック

履修希望
登録完了
ページ

項目を選択
“OK”クリック
科目一覧“閉じる”クリック[ 科目名]
クリック

授業
シラバス

図 6 画面遷移図
改善前，後のクリック数と画面遷移の比較を以下の図 7に示す．デザインに関して，学生メニューにおける文字のサイズを疑似的に大きくした．改善前の画面と改善後の画面で，一対比較を行う．ペルソナに近いアンケート対象とは異なる学生に対して，改善前と改善後であることを伏せて，どちらの画面の方が良いか 3 名にインタビューを行い，改善後の方が良いという結果を得た．
改善前
12

改善後

16.7%減101118.2%減9回数が行えることで，操作量が減りユーザビリティを改善することが期待できる．
(3) プラスの感情を高める
改善前の画面と文字のサイズを大きくした画面で，一対比較を行う．改善前と改善後であることを伏せて，どちらの画面の方が好感を持てるかをペルソナに近い学生に対して，インタビューを行った．その結果，改善後の方を選択したため，文字サイズを大きくした方が好感を持てることを確認した．このような視覚的な変化によって，デザイン性は向上できていること言える．デザイン性を向上させることによって，好感を持ち，プラスの感情を高められることが期待される．文字サイズを大きくすることによって，アンケート項目である文字のサイズの数値を減らすことが期待される．
文字サイズを大きくすることで，好感を持つことができ，プラスの感情を高めることが期待できる．

考察

本研究の提案方法では，従来，新規のシステム開発に使用されるペルソナ法の特性を活かし，Web サイト再構築の UX 向上にも適用し，効果を上げることができた．ペルソナを作成することによって，ユーザ像を明確にし，ユーザストーリを用いて，ユーザストーリマッピングを使用し問題抽出をすることによって，ユーザ行動の全体を把握しながら問題点を見つけることができ，ユーザの視点に立った
ユーザストーリで要求獲得することができた．

10 今後の課題
以下の 3 点が今後の課題としてあげられる．
(1) ユーザが特定されていない Web サイトにも UXを用いた Web サイト改善方法が適応できるかの検証．
(2) Web サイトの一部の機能ではなく，システム全体のより広い範囲での適応を可能であるかの確認．
(3) 評価方法，優先順位付けの手段が，主観的にならないような基準を見つけることが必要である．

11 まとめ

現在多々存在する Web サイトの中には，ユーザが使い勝手が悪いと感じる Web サイトがある．その問題の原
図 7 改善前後の回数比較
因に対して，Web サイトを作成する開発者が Web サイトのユーザのユーザ経験を考慮することが困難であると考8 評価えた．本研究では，ユーザに良くない経験を与えてしまう(1) UX の向上について
Web サイトをペルソナ，ストーリ，ストーリマッピングという 3
良い UX をもたらす三つの条件，機能，ユーザビリティ， つを組み合わせて UX を考慮したより良い Web サイトにプラスの感情を基に評価した．なお，機能面はすでに満 改善する方法を提案した．
たしているものとする．操作性を向上させることで，ユーザビリティを改善することが期待できる．また，デザインを改 参考文献
善することで，プラスの感情を高めることが期待できる．
[1] 浅井 さゆり，横江 美咲，吉田 春名，Web サイトの(2) ユーザビリティの改善について
再構築におけるユーザビリティ向上設計方法に関す操作として，画面遷移を 11 ステップから 9 ステップになる研究， 南山大学 2006 年度卒業論文，2007．
ることで 18.2%減らすことができ，クリック数を 12 回から 10 [2] M．Kuniavsky，ユーザエクスペリエンス ユーザリサ回になることで 16.7%減らすことができた．
ーチ実践ガイド，翔泳社，2007．
画面遷移やクリック数を減らすことによって，アンケート [3] R．Unger and C．Chandler，UX デザインプロジェクト
項目である登録までの操作量，授業内容の確認箇所が不ガイド，カットシステム，2011．
明の数値を減らすことができると期待される．画面遷移数 [4] W．Quesenbery and K．Brooks，ユーザエクスペリエ
やクリック数を減らすことで，効率的にかつ有効的に操作ンスのためのストーリテリング，丸善出版，2011．
クリック数

画面遷移の回数