DEIM Forum 2017 C3 - 3

ユーザのメンタルモデルに基づいた Web ページデザインのリアルタイム最適化
楠牟禮章伍†

牛尼 剛聡††† 九州大学大学院芸術工学府 〒 815-8540 福岡県福岡市南区塩原 4-9-1†† 九州大学大学院芸術工学研究院 〒 815-8540 福岡県福岡市南区塩原 4-9-1
E-mail: †1ds12181p@gmail.com, ††ushiama@design.kyushu-u.ac.jp
あらまし Web デザイナは，Web ページをデザインする際に，利用すると想定されるユーザが使いやすいように Webページの要素の順序やレイアウトを決定する．しかし，同一の Web ページを利用するユーザは様々な目的があり，デザイナが決定した順序やレイアウトが、必ずしも全てのユーザの，全ての目的のために効果的であるとは限らない．
本研究では，この問題を解決するために，Web ページを訪問するユーザのメンタルモデルを推定し，推定結果に基づいて Web ページの構成要素の順序やレイアウトをリアルタイムに最適化する Web ブラウザの機能を開発することを目的とする．本論文では，この機能を実現するための基礎となるページ要素の特徴モデル化と単純なメンタルモデルを利用した最適化手法を提案する．
キーワード 閲覧意図，レスポンシブ Web デザイン，コンテンツ最適化，インターフェース

1. は じ め にできない問題も存在している．一般的にレスポンシブ Web デザインでは，Web ブラウザの表示幅に関して，しきい値（ブレ近年，インターネットが普及し，Web ページを閲覧して情報イクポイント）を設定しておき，表示幅によって異なるデザイを取得することが一般化した．こうした中で，Web ページ検索ンを提供する．特に，スマートフォンのような小型のタッチパや Web ページ推薦技術が発達し，ユーザは，自分が要求するネルによるアクセスでは，縦スクロールのみで全てのコンテン情報が含まれる Web ページに効率的にアクセスできるようにツがアクセスできるようにコンテンツの直列化が行われるデザなった．それに合わせて，Web ページを提供する側も，Searchインが用いられることが一般的である．1 コンテンツを直列化

Engine Optimization（SEO）を実施して上質なコンテンツのすることで，ユーザはユーザの操作は単純になるが，ページに提供を行っている．一方，Web デザインの観点からも，ユーザ含まれるコンテンツの分量が多い場合には，結果的に縦に長いのアクセス効率を上げるために，現実世界の物理現象を反映さページをアクセスすることになる．一般的に，頻繁にアクセスせたマテリアルデザインや，必要最低限までコンテンツの外見されるコンテンツは，ページの先頭近くに配置されるため，アを削ってわかりやすくしたフラットデザインなど様々なデザイクセスは比較的容易に行うことができる．しかし，末尾に配置ン手法が取り入れられたり，ユーザに提示するコンテンツの順されたコンテンツは，労力が必要となるという問題がある．

序を，統計的に多く利用されているコンテンツ順に並べたりするなど多くの工夫が行われている．

本研究では，上記の問題を解決するために，Web ページをアクセスするユーザの目的を推定し，ページ内の各コンテンツとしかし，近年，Web を取り巻く状況が変化しつつある．10の関連性と，ユーザが経験を通して得たコンテンツの順番やレ年前には，Web ページをアクセスするために，パーソナルコンイアウトの規則に関するメンタルモデルを考慮し，ユーザの目ピュータ（PC）を利用することが一般的であったが，近年で的に適した適切なデザインでコンテンツを提示する手法を提案

は，PC を所持するユーザは減少傾向にあり，その代わりに，スする．Web ページのデザインには様々な要素が存在するが，本マートフォンやタブレット端末を利用するユーザが増加してい研究では，同位の要素の順番に注目し，ユーザの目的とメンタる．また，スマートフォンの普及に伴い，様々な種類のスマールモデルに合わせて効果的な順番で自動的にレイアウトする手トフォン端末が登場し，様々な画面サイズで Web ページが閲法を提案する．従来のレスポンシブ Web デザインは，画面サ覧されるようになった．画面サイズが異なることで，コンテンイズ等のユーザの物理的な閲覧環境に対してレスポンシブであツの配置やフォントサイズに差異が生まれ，効率的に Web をるが，本研究では，ユーザの目的に対してレスポンシブにペー閲覧できないという問題が生じた．こうした背景の下，上記のジを最適化する機構と位置づけられる．

問題を解決するために，レスポンシブ Web デザイン [17] が注目され一般的に利用されるようになった．

2. 関 連 研 究レスポンシブ Web デザインを導入することで，ユーザはスWeb ページ閲覧の支援として，重要だと推定される単語をマートフォンやタブレット端末等から効率的にアクセスできるハイライト等の強調表示することは一般的な手法である．このようになった．しかし，レスポンシブ Web デザインでは解決手法は Google Quick Scroll [1] という Google chrome の拡張

ラウザ操作履歴に基づいた Web サイト改善ツールを提案している．このツールでは，ブラウジングした際の操作ログを記録し，ユーザのブラウジングを支援することを目的としている．
この手法では，ユーザの Web ページ閲覧の効率は良くなると考えられる．しかし，本研究とは履歴を用いた Web ページ閲
覧支援という点では類似するが，ユーザの目的に合わせたリアルタイムの最適化が行われるわけではない．
図 1 レスポンシブ Web デザインにおける基本的なコンテンツ配置の例

以上を踏まえ，本研究ではユーザは，通常の閲覧とは異なる特別な操作を行わず，ただ複数の Web ページを閲覧するだけでユーザの意図を推定し，目的の Web ページまでアクセスの支機能でも用いられている．この手法では，ユーザが入力した検索キーワードを閲覧意図としており，そのキーワードが出現す援ができるようになるような手法を開発することを目的とする．

3. 提 案 手 法る位置に自動スクロールし，ハイライト表示することで Webページ閲覧の効率を高める機能である．しかし，この機能では，

3. 1 アプローチ

ユーザがキーワード検索を行った検索結果のページにのみ適用

近年，Web ページを閲覧する環境は多岐に渡るようになっ可能な手法であり，ユーザが特定の目的のもとに Web ページた．例えば，10 年ほど前までは，Web ページは PC での閲覧を巡回するような場合には適切に対応できない．

が主であったため，スマートフォン，タブレットでの閲覧を考横尾ら [2] は，検索キーワードの類語や同義語をページ内から慮する必要がなかった．しかし，スマートフォンやタブレット探し出し，表示する手法を提案している．この手法では，ユー端末の普及により，ブラウザを表示可能な幅が大きく異なるデザが与えた検索キーワードから，類語と同義語をオンライン辞バイスでのアクセスが増加し，異なるデバイスで同一のページ書から取得し，いずれかのワードが含まれる箇所を重要箇所にアクセスする機会が増大した．デバイスが異なれば，表示領とするものである．この手法では，類語と同義語を考慮に入れ域の違いやフォントサイズ，操作法が変わり，ユーザのアクセているため，曖昧なキーワードやコンテクストにあった箇所がシビリティを低下させる恐れがある．

探し出せるメリットがある．本研究では，閲覧履歴に含まれるそうした背景の下，近年，レスポンシブ Web デザインが利Web ページから，ユーザにとって重要だと思われる情報を取得用されるようになった．レスポンシブ Web デザインとは，ユーすることによって，ユーザの Web ページ閲覧を支援すること

ザの使用するデバイスの種類やサイズを判別し，それに応じてを目的にしている点がこの研究と異なる．

デザインを最適化するデザイン手法である．レスポンシブ Web

井桁ら [3] は，Web ページ内に存在する膨大な情報の中からデザインでは，コンテンツの幅や高さなどを調整し，レイアウ

ユーザの目的である情報を見つけることを支援するためのシストを変更することで最適化し，スマートフォンのような狭い画テムを提案している．この手法では，ページ全体のサムネイル

面でもユーザはアクセスしやすいように表示される．

をブラウザの画面を分割して表示し，マウスカーソルをサムネ

一般的に，パソコンで表示されるページをレスポンシブ Web

イルに合わせるとその箇所が拡大される．ユーザはページ内でデザインによってスマートフォン用のページに最適化する場合，キーワード検索を行うと，スクロールすることなく，どの箇所デバイス幅が狭いためにコンテンツを縦１列に配置することがに目的の情報が書かれているかが確認できる．本研究では，こ多い．そのようなデザインを利用すると，結果的にページが長の研究とは異なり，ユーザは通常の閲覧行動を繰り返すだけでくなり，このコンテンツの順序が固定化されるため，下部のコユーザの意図を推定し，目的の情報の取得を支援することを目ンテンツにはアクセスしづらいという問題が生じる．コンテン指す．また，この手法はブラウザ幅が広い場合には有効である

ツの順序は固定化されたデザインで，ユーザは閲覧したいコンと考えられるが，本研究で対象とするスマートフォンで表示しテンツがそれぞれ異なるにもかかわらず，同一のページを閲覧た Web ページでの利用は困難である．

する．そこで，レスポンシブ Web デザインでデバイスに応じ閲覧行動からユーザの意図を推定する手法として，顔ら [4] はユーザのスマートフォンでのオンラインショッピングサイトにた最適化だけでなく，個人のメンタルモデルに基づいた最適化の必要性がある．

対する振る舞いから購買意図を読み取り，最適化する手法を提以上のことから，本研究で提案する手法での対象をスマート案している．この手法では，閲覧時間やスワイプ速度からユーフォンで表示される Web ページとする．ユーザの閲覧履歴かザが興味のある商品を推定し，未読部分をユーザにとって，よらメンタルモデルを推定し，訪問したページのコンテンツからり興味がある商品の順に並び替える．この研究では，オンライユーザの意図に近いコンテンツが上部に表示されるように並びンショッピングサイトに対して，意図の推定と最適化を目指し替える，というアプローチでユーザのメンタルモデルに合わせている点が異なる．また，本研究では操作の振る舞いについてて最適化するシステムの実装を目指す．

は考慮しないという点も異なる．
本手法では閲覧履歴から意図推定を行うが，木本ら [5] は，ブ

しかし，一般的にパソコンで表示されるページをレスポンシブ Web デザインによってスマートフォン用のページに最適化する場合，デバイス幅が狭いために，Web ページ内に含まれる要素（コンテンツ）が縦１列に配置されることが多い．その場ることが一般的である．図 2 を例とする場合，html の要素に合，結果的にページが長くなり，コンテンツの順序が固定化さ着目すると要素の中には head, body の要素が属している．これているため，末尾に近いコンテンツにはアクセスしづらいとれらは同階層であるが，それぞれタグの性質は異なる．並び替いう問題が生じる．コンテンツの順序が固定化されたデザイン

えをおこなうと本来のタグの意味を失ってしまうため，これらで，ユーザは閲覧したいコンテンツが異なるにもかかわらず，の順序を入れ替えることは不適切である．次に body 要素の中同一のレイアウトのページを閲覧する．そこで，現在のレスポに着目する．body 直下の要素には div 要素が 2 つ並んでおり，ンシブ Web デザインが行うデバイスに応じた最適化だけでなすべてのタグの意味は等しい．また div タグはそれ自身では意

く，アクセスしているユーザ個人の目的とメンタルモデルに基味を持たず，要素の区切りとして用いられるタグで，順序関係づいた最適化が必要である．

が厳密に決まっているものではない．div タグに限らず，同階以上のことから，本研究での対象をスマートフォンで表示さ層で順序を持たない性質を有した要素間では並び替えによる問れる Web ページとする．本研究では，ユーザの閲覧履歴から題は生じない可能性が高いと考える．実際，レスポンシブ Web

メンタルモデルを推定し，訪問したページのコンテンツからデザインでもこの考え方が根底にあり，順序のないタグで要素ユーザの意図に近いコンテンツが上部に並び替える，というアを分割し，デバイスに臨機応変に対応している．メンタルモデ

プローチでユーザのメンタルモデルに合わせて最適化するシスルに基づく最適化においても，同階層で順序を持たない性質をテムの開発を目指す．

有した要素をセグメントとし，並び替えれば意味，表示ともに

3. 2 システム概要

崩れが生じる可能性は低いものと考えられる．

本研究で開発するシステムの概要を説明する．本システムは大きく分けると，以下の３つの処理から構成される．

3. 2. 1 文書セグメントの特徴抽出
Web ページを構成する幾つかの部分要素である文書セグメントに分解する．具体的には 3. 3 で文書セグメントを定義する
が，対象の各ページを文書セグメントに分割し，その特徴を抽出する．

3. 2. 2 ユーザのメンタルモデル推定
ユーザの閲覧履歴は，その時点でのユーザの興味を顕著に表

図 2 DOM ツリーで表現される木構造していると考えられる．そこで，閲覧履歴ページを利用してユーザのメンタルモデルを推定する．一定のセッションの間の3. 3. 1 文書セグメントの順序が与える影響の調査

閲覧履歴ページを取得し，ページの特徴を抽出する．また，時文書セグメントを並び替えることがユーザビリティに与える間経過によるユーザの興味減衰と経験から培われるユーザごと影響を調査するために予備実験を行った．のコンテンツの並び規則を考慮した上でメンタルモデルを作成する．

3. 2. 3 メンタルモデルに基づいた最適化推定したメンタルモデルと，最適化対象のコンテンツの類似度を計算し，類似度順に並び替えて再表示を行う．

3. 3 文書セグメントのモデル化a) 実 験 方 法
スマートフォンにおいて要素が直列化される形式のレスポン
シブ Web デザインを採用している Web ページに対して，文書セグメント順番を変更した場合の並び替えを行ったページを計11 ページ用意し，被験者が閲覧開始から発見までに要した時間とスクロールする時の画面タップの回数を計測した．

3. 2 で示したシステムを実現するために，まず，Web ページ対象とする Web ページとして，九州大学の Web サイトのを文書セグメントに分割する必要がある．Web ページを構成トップページを利用した．このページはレスポンシブ対応されする HTML はマークアップ言語であり，タグを用いて論理的ており，同一のページであっても幾つかの要素がデバイスの幅な構造が記述されている．文書セグメントは DOM(Documentに従って表示の仕方や幅が異なる．また，これらの要素の中かObject Model) に基づいて定義する．DOM とは，html 文書

らページの大部分を占めるメインの要素で，同階層のものを文の要素にアクセスする仕組みであり，Web ページを構成する書セグメントと定義した．被験者は三名であり，指定した文書HTML 文書 は図 2 に示すような DOM ツリーと呼ばれる木構セグメントを探してもらった．指定したセグメントは最下部に造を構成する．

あるコンテンツで，一般のユーザにとって，最もアクセスが困Web ページを構成する要素の並び替えによって，表示と意味難であると考えられるものである．の崩れが生じる恐れがある．そのような問題が発生しないように，DOM の構造に基づいて，並び替えを行う要素を決定する．

DOM ツリーの中では，意味的に並列する要素は同階層に属すb) 実 験 結 果
図 3 に結果を示す．layout1 が並び替えを行わない通常のペー11 は４つあるコンテンツを適当な順序で並び替ツとそれとつながるリンク先の Web ページを考える．文書セえたものである．特に layout2 は，指定したセグメントが一番

グメント s の特徴は p1 と p2 から決定されるが，同様に p1 の上に配置されたものである．また，青のバーはアクセスに要す

特徴もリンク先のページから決定づけられるものと考え，p1 のるタップ回数，赤のバーがアクセスに要する時間（単位：秒）

ベクトルに p3 ，p4 のベクトルの重みも考慮する．

ジ，layout2の平均をそれぞれ表している．layout2 は layout1 に比べてタップ回数が約７回，アクセスに要する時間は４秒程短縮できている．正しくユーザの閲覧意図を反映した並び替えができれば，コンテンツの並び替えによるユーザのアクセス効率向上が見込めると考えられる．

最終的に，文書セグメント s の合成特徴ベクトル C(s) は以下の式で表されるものとする．

C(s) = f (s) + p(l1 |s) · C(p1 ) + p(l2 |s) · C(p2 )(1)

ここで，f (s) は文書の持つ特徴ベクトル，p(l|s) は，文書セグ
メント s から Web ページ p へリンクする確率を表す．

図 3 並び替えの影響についての予備実験結果

4. LDA を用いた最適なコンテンツ推定
4. 1 文書セグメントの特徴ベクトル
図 4 文書セグメントの特徴定義モデル

文書セグメントの特徴は，リンク構造を利用し，そこに含まれるリンク先のページから決定する．
今回 は，例 と して 大 学の Web サ イト を 利 用 す る ．ま ず，LDA [8] を用いて大学のサイトを構成する Web ページに関するトピック解析を行った．
日本の国立大学（全８６大学）のトップページを始点とし，２リンク先まで Web ページをスクレイピングにより取得した．
取得した Web ページに対して MeCab を用いて形態素解析を1 ページを１文書とし，特徴ベクトルを計算した．このトピッ
クとトピックに含まれる単語の出現確率を考慮し，文書 d の特徴ベクトル V (d) を以下で定義した．word(d) は文書 d に含まれる名詞集合，v(w) は次元に基づいた名詞 w のベクトル，p(w) は名詞 w が出現する確率を表す．
V (d) =行って名詞のみを抽出し，１ページの名詞集合を１文書と定義した．この文書から大学名や，「大学」，「大学院」などどのトピックとして適さない名詞やどのページにも出現するような単語をストップワードに設定して削除した．これらの文書をもとにコーパスを作成し，LDA を用いてトピック解析を行った．ト
ピック数を 50 とし，各トピックには 10 の単語が含まれている．
これをベクトルの次元として特徴ベクトルを求める．

∑v(w) · p(w)(2)

w∈word(d)このモデルで１文書ずつのベクトルを計算したのち，式 1 に基づいて最終的なコンテンツの特徴を決定する．今回は九州大学のページの特徴を抽出したため，コンテンツを手動で４つにセグメントに分割し，各セグメントの特徴を抽出した．

4. 3 ユーザのメンタルモデル推定
ユーザの興味があるコンテンツを推定するために，閲覧履歴

4. 2 リンク構造を用いた特徴決定を用いてメンタルモデルを作成する．メンタルモデルは，ある

3. 3 を基に，最適化する対象のページを文書セグメントに分割長さのセッションに対して，その範囲内の閲覧履歴ページの合する．本論文では九州大学（http://www.kyushu-u.ac.jp/ja/）

成ベクトルとして表現する．また，図 5 に示すように，ユーザのトップページを例として，トップページを DOM の構造を利は時間経過に伴い，興味が減衰することが考えられる．そこで，用して４つの文書セグメントに分割することを考える．各コンユーザの興味減衰を考慮した閲覧意図に基づいたモデルを作成

テンツの特徴は含まれるリンクから特徴付けられると考えるたする．あるユーザ u のメンタルモデル i(u) は以下の式で定義

め，各セグメントから URL を抽出し，そのページを解析した．

する．

また，今回はセグメントの特徴を表すページとして２リンク先まで考慮するため，さらにページに含まれる URL を取得し，同様にページの解析を行った．例えば，図 4 のようなコンテン

i(u) =∑·∑

0<=n s∈seg(pn )= i<a−(n−i) · f (s)(3)

seg(pn ) はページ pn に含まれる文書セグメント集合，f (s)は文書セグメント s の特徴ベクトル，a は興味の減衰を表す係

5. Doc2Vec を用いた最適なコンテンツの推定
Doc2Vec [9] は，近年注目されている単語集合で構成された数 (0 < a < 1) である．

文書をベクトルとして表現する手法の一つである．類似する手法として Word2Vec があるが，これは単語をベクトル表現化し，単語の意味的な表現を扱うものである．一方，Doc2Vec は単語ではなく，文をベクトル化できるように拡張したものである．また，他に文書をベクトル化する技術として Bag-of-Wordsが挙げられるが，これは文書内での単語の出現回数をベクトル化したものである一方，Doc2Vec ではあらかじめ膨大な量の文書データをコーパスとして学習することで，単語の組み合わせなどに基づいた，文書の文脈を考慮したベクトルを作ることが期待できる．
今回は Wikipedia の全記事をコーパスとして使用し，これを図5

ユーザの閲覧履歴と興味の減衰学習させた Doc2Vec モデルを作成した．このモデルを利用してユーザのメンタルモデルを反映した文書とコンテンツの特徴

ただし，ユーザの閲覧行動であるセッションの長さの定義であるが，これについては今後検討していく予定であり，本稿では考慮しない．

を反映した文書の cos 類似度を計算し，この値からユーザに最適なコンテンツの推定を行う．2 つのベクトル a,b の cos 類似度は以下の式で表す．

抽出したコンテンツの特徴と閲覧行動を行うユーザのペルソナを作って類似度を計算し，抽出したコンテンツが尤もらしい特徴を抽出できているかを検証した．
本検証ではコンテンツ特徴抽出が尤もらしいか，という検証のため，簡易的なモデルを使用した．閲覧履歴ページを Google検索エンジンで「（大学名）入試」とクエリを入力し，得られた上位３件のページを閲覧履歴ページとし，時間による興味減衰は考慮せず，すべてのページは重み付けせず等しく扱った．
また，大学名は九州内の国立大学名を複数指定した．2 に基づいて１ページ１文書として特徴を計算し，その合計をユーザのメンタルモデルを表す特徴ベクトルとした．九州大学のコンテンツとユーザのメンタルモデルのベクトルの類似度を、cos 類似度を用いて計算した．その一覧を表 1 に示す．全体的な類似
表 1 九州大学のコンテンツとペルソナユーザとの類似度
コンテンツ
熊本地震関連の緊急のお知らせ

類似度

∑|V |

aba·bi=1 i i√∑cos(a, b) == √∑|a||b||V | 2|V | 2a ·bi=1 i
i=1 i

(4)

5. 1 リンク構造を用いた特徴決定
4. 2 と同様に最適化の対象となるページを文書セグメントに分割する．九州大学 (http://www.kyushu-u.ac.jp/ja/) のトッ
プページを対象にし, トップページを DOM の構造を利用して4 つの文書セグメントに分割した．また，このセグメントの特徴もリンク構造をもとに構築するため，分割したそれぞれのセグメントに含まれる URL を取得したのちスクレイピングを行
い，含まれる URL と名詞を抽出した．抽出した URL は再度スクレイピングを行い，名詞を抽出した．抽出した名詞はそのコンテンツの特徴を表すものと考えられるため，１つの文書とした．スクレイピングはページに含まれる共通だと考えられるheader 要素と footer 要素を除いた上で名詞を抽出した．

0.787

5. 2 ユーザのメンタルモデル推定

お知らせ

0.831

ユーザのメンタルモデルを，ユーザの Web ページ閲覧履歴

イベント情報0.837

キャンパス、研究、教育情報を用いて推定する．ユーザが閲覧した直近の数ページをスクレ

0.821

イピングし，名詞を収集し，ユーザのメンタルモデルの元となる文書を作成した．LDA を用いた手法と同様にペルソナを作

度にはほとんど差が生じない，という結果になった．コンテンツ特徴を決定する際に，ページ間では重みを考慮しているが，単語レベルでは重み付けを行っていないため，ページ間の共通要素の出現頻度が多くなってしまったことが原因としてあげられる．解決作としては，共通要素に対して重みを考慮することや，現在ページリンクの重みは等しいものとして遷移確率を考慮しているため，リンクの重みを調整することを考えている．

成し，ある目的に基づいて閲覧された Web ページを利用した．
今回，ユーザは就職活動を行う大学生として，就職活動のイベントに関して閲覧してもらい，最後に閲覧した直近の 4 ページを対象とした．

5. 3 文書セグメントとメンタルモデルの類似度
作成した文書セグメントの特徴を表す文書とメンタルモデルを表す文書の類似度を，Doc2Vec を用いて計算した．その一覧を表 2 に示す．今回の例では，類似度として cos 類似度を利用しているため，類似度は −1 1 で表現される．九州大学のトップページに含まれる４つのコンテンツのうち，「イベント情報」が最も類似度が高く，ユーザの興味に最も近いコンテンツであ表 2 九州大学のコンテンツとペルソナユーザとの類似度
コンテンツ

類似度

熊本地震関連の緊急のお知らせ

0.024

お知らせ

0.062

イベント情報0.240

キャンパス、研究、教育情報

0.013

るという結果になった．
「イベント情報」には就職活動のイベント情報も含まれているため，目的にあったコンテンツとの類似度が高くなっていることがわかる．一方，次いで「お知らせ」のコンテンツも類似度は比較的高くなっているが「イベント情報」と比べると類似度はかなり低い結果となった．お知らせにも多くの就職活動に関わる情報も含まれており，類似度としては高くなると考えられるが，結果は反するものとなった．考えられる要因は「お知らせ」のコンテンツはコンテンツマネジメントシステム（CMS）で構築されており，サイトの運営者が容易に新規のページを作成することができるため，他のコンテンツに比べて更新頻度が多く，就職活動に関する Web ページの割合が少なく類似度が低くなったものと考えられる．

6. ま と め
本稿では，ユーザの閲覧履歴からメンタルモデルを推定し，Web ページをリアルタイムに最適化する手法を提案した．文書のトピック解析モデルである LDA と文書の文脈を考慮してベクトル化することができる Doc2Vec を用いてユーザのメンタルモデルとコンテンツ特徴を抽出し，類似度を求めることでユーザの意図に合わせたコンテンツを推定した．
コンテンツの特徴の検証の結果は，LDA を用いた手法の場合，メンタルモデルとの類似度の差がほとんどなく，モデルの見直しが必要であるという結果となった．今後は LDA によって得られたトピックの数やストップワードの見直し，単語毎に重みを考慮したモデルを検討する．

Doc2Vec を用いた手法では，類似度としてはある程度妥当性の高い結果は得られたが，CMS のような様々なコンテンツを含む要素に対しては類似度が小さくなってしまうという結果になった．今後は文書の作成手法を見直し，精度向上を目指す．
また，被験者による実験を行い，客観的な分析を行っていく予定である．
メンタルモデルに関して，ユーザのメンタルモデルを構成する閲覧ページの対象とするセッションを厳密に定義していないため，被験者による実験を通してユーザの意図をより反映したモデルへ改善していく．また，本研究での最終的なシステムはユーザの意図に合わせてコンテンツの並び替えを行うシステムの開発である．ユーザは並び替えによってアクセスしやすくなる面もあるが，経験によってコンテンツの並びはある程度の規則の上で並んでいると知覚している場合，ユーザに混乱を生じさせてしまう可能性がある．この問題は，ユーザが経験として知覚している並びのデータを収集し，機械学習によってその並びを予測し，予測した並びをモデルに組み込むことで，混乱を生じさせずに並び替えるモデルを考えることで解決する予定である．

文

献[1] ”Google Quick Scroll” https://chrome.google.com/webstore/
detail/google-quick-scroll/okanipcmceoeemlbjnmnbdibhgpbllgc?hl=ja[2] 横尾俊一，吉浦紀晃， 検索された Web ページにおける検索語に基づく重要箇所の表示 ，情報処理学会研究報告 Vol.2013IOT-20 No.4 2013/3/14[3] 井桁正人，寺田実，丸山一貴， Scout View : Web ページにおけるナビゲーションインターフェース ，情報処理学会研究報
告 Vol.2009-HCI-133 No.8 2009/5/16[4] 顔洪，牛尼剛聡， スマートフォンでの効率的な商品選別を目的としたユーザの振る舞いに基づく閲覧リスト最適化手法 ，情報処理学会論文誌 データベース Vol.8 No.4 1-15(Dec. 2015)[5] 木本亮司，市村哲， ブラウザ操作履歴に基づいた Web サイト
改善ツール ，情報処理学会研究報告 Vol.2011-GN-79 No.23
2011/3/17[6] ”F-Shaped Pattern For Reading Web Content” https://www.
nngroup.com/articles/f-shaped-pattern-reading-web-content/[7] John T. Richards Vicki L. Hanson ”Web Accessibility: ABroader View” WWW ’04 Proceedings of the 13th international conference on World Wide Web[8] David M. Blei Andrew Y. Ng Michael I. Jordan ”Latent
Dirichlet Allocation” Journal of Machine Learning Research
3 (2003) 993-1022[9] gensim:
models.doc2vec - Deep learning with paragraph2vec , https://radimrehurek.com/gensim/models/doc2vec.html[10] Bongwon Suh, Allison Woodruﬀ, Ruth Rosenholtz, andAlyssa Glass. Popout prism: Adding perceptual principles to overview+detail document interfaces. . Proc. CHI
2002,pp.251-258.
[11] Deng Cai, Shipeng Yu , Ji-Rong Wen and Wei-Ying Ma”Extracting Content Structure for Web Pages Based on Visual Representation” APWeb 2003: Web Technologies andApplications pp 406-417[12] 内山俊朗, 永野行記, 篠原裕一, 高本康明, 登坂秀規, 高橋宏祐
”Web アクセシビリティ診断ツールの開発” ANNUAL DESIGN REVIEWOF JSSD Vol．11 No 11200531 pp.28-31.
[13] 渡辺 隆行, ”ウェブ・アクセシビリティ向上の要件” IC2005[14] 小倉弘敬、村上佐枝子、佐藤宏之、小島富彦、清水昇、細見格、
セマンティック Web の応用システム
情報処理 43 巻 7 号
pp.742-750 2002-07-15[15] HTML5, https://www.w3.org/TR/html5/[16] Google, https://www.google.co.jp/[17] Ethan Marcotte,”Responsive Web・Design An A List
Apart Article”, https://alistapart.com/article/responsiveweb-design[18] 阪井誠、中道上、島和之、中村匡秀、松本健一,”WebTracer :視線を利用した Web ユーザビリティ評価環境”