Microsoft Word - „´“e‚æﬁñ“ed doc

(1)

発想支援機能を有する対話型進化計算による

Web ページのデザイン生成システム

System for Generating Style Sheets of Web Pages

using Interactive Evolutionary Computation with Idea Support Functions

筑波大学

○濱田

悠介狩野均

○ Hamada Yuusuke, Kanoh Hitoshi,

University of Tsukuba

Abstract: We developed a system for generating Style Sheets of Web pages using Interactive Evolutionary Computation (IEC). IEC has the effect of idea support because user can examine a variety of solutions. However, conventional systems don’t have the effect enough. To make the best use of the effect of idea support, we developed the system that had the two functions. The first function is to use interest of a user by setting the specialized screen for idea support. The second function is to display sample designs on the screen that enables user to correct design by hand. Moreover, we verified the effectiveness of this system by questionnaire survey.

1. はじめに

近年、Web 標準化の観点から Web ページのデザイン

にスタイルシートを用いることが推奨されている[1]。 Web ページに使用される主なスタイルシートとして CSS（Cascading Style Sheet）がある。この CSS を利用したWeb ページを作成するためには HTML や CSS に関する知識が必要となる。そのため、初心者でもCSS を用いた Web ページのデザインを手軽に作成できるシステムが望まれる。従来、対話型進化計算法[2,3]と呼ばれる探索手法を用いてスタイルシートを生成するシステムが研究されている[4,7]。しかし、これらの研究ではユーザの発想を支援する仕組みが十分とはいえない。また、対話型システムにおいてはユーザが手動で解を修正できる機能が必要だと考えられる。そこで本研究では、ユーザに発想支援を促すことに特化した画面と、ユーザが手動で解を修正できる画面を備えた対話型進化計算によるスタイルシート生成システムの開発を行った。また、アンケートを用いた主観評価実験により提案システムの有効性を評価した。本稿では、まず研究分野の概要を示す。次に提案システムを説明し、最後にアンケートを用いた主観評価実験の方法と結果を示す。

2. 研究分野の概要

2.1. 対象問題：スタイルシート生成問題 スタイルシートとは文書のデザインを制御するための書式を記述したファイルである[1]。本研究では、 Web ページのデザインに広く使われている CSS を生成の対象とする。Fig. 1 に CSS の書式と、デザインされたWeb ページを示す。セレクタとは HTML の中のどの部分にスタイルを適用するかを指定するものである。プロパティとはどの様なスタイルを適用するかを指定するものである。セレクタ１｛プロパティ１：値１プロパティ２：値２｝セレクタ２｛プロパティ２：値３｝セレクタ３｛…｝… Fig. 1 CSS の書式とデザインされた Web ページ ユーザの要望に適うCSS を探すという問題は「ユーザの要望」を制約とした制約充足問題である。その探索空間のサイズは設定すべきすべてのプロパティに対し、各プロパティのとりうる値の数を掛け合わせることで求めることができる。 2.2. 対話型進化計算法 対話型進化計算法は遺伝的アルゴリズムなどの進化計算と呼ばれる探索手法において、解の評価部分をユ

(2)

ーザが直接行う手法である[2]。Fig. 2 に対話型進化計算法の概念図を示す。 Fig. 2 対話型進化計算法の概念図 人間が主観的に評価を行うことができるため、人間には判定が可能だが評価の定式化が困難な問題や、個人間で評価の変化する問題に利用されている。 2.3. 従来手法とその問題点 Monmarche らは対話型進化計算法を用いたスタイルシート生成システムの開発を行った[4]。このシステムでは探索のアルゴリズムとして、遺伝子頻度に基づく遺伝的アルゴリズムを用いている。そのアルゴリズムをFig. 3 に示す。確率配列を初期化; 初期デザイン（集団）を生成; while（ユーザが満足するデザインを得るまで）｛ユーザにデザインを提示; ユーザが好みのデザインを選択; ユーザの選択に基づき確率配列を更新; 確率配列を平滑化; 確率配列を元に次のデザインを生成; ｝ Fig. 3 従来手法のアルゴリズム ・コード化 CSS のコード化は、セレクタ（Selector）とプロパティ（Property）の組が一つの遺伝子座に、そのプロパティのとりうる値（Value）が遺伝子にすることによって行われる。に染色体の例を示す。 Selector1 Property1 Selector1 Property2 Slector2 Property2 _… 遺伝子座

遺伝子 _{Value1-1 Value2-3 Value2-1}_…

Fig. 4 染色体の例 ・確率配列確率配列とは「遺伝子の選択確率」を表現する配列で、遺伝子座ごとに設定される。スタイルシート生成問題では、Fig. 5 のようにあるセレクタとプロパティの組に対して、あるプロパティの値が選ばれる確率を示すことになる。染色体の生成では、この確率に応じて遺伝子の値が選ばれる。 Selector1 Property1 遺伝子選択確率 Selector1 Property2 遺伝子選択確率 Value1-1 0.3 Value2-1 0.2 Value1-2 0.05 Value2-2 0.5 Value1-3 0.1 Value2-3 0.01 … … … … Fig. 5 確率配列の例 確率配列の初期化は確率配列ごとに「1/その遺伝子座のとりうる値の総数」を設定することで行われる。・確率配列の更新確率配列の更新は次式によって行われる。 ij ij ij

p

E

p

′

=

(

1 −

α

)

+

α

添え字のi は i 番目の遺伝子座、添え字の j は j 番目 の対立遺伝子をあらわす。p’ijは更新後の遺伝子選択確率をあらわす。pijは更新前の遺伝子選択確率をあらわす。αはユーザの評価をどれくらい重視するかの割合をあらわす。Eijはユーザの評価を基に計算される値をあらわす。具体的には次式によって求められる。

∑

⋅ = k k k k ij U k j i f U E )) , , ( ( 添え字のk はユーザに提示したデザインの総数をあ らわす。Ukはユーザの選択を表し、ユーザがそのデザインを選択していれば1、選択していなければ 0 となる。f (i, j, k)はデザイン k に遺伝子座 i の対立遺伝子 j が含まれている場合は1、そうでない場合は 0 を返す関数である。・確率配列の平滑化確率配列の平滑化は次式によって行われる。この操作は通常の遺伝的アルゴリズムの突然変異に対応する操作である。 i ij ij

N

p

′

=

(

1 −

β

)

+

β

1

ユーザシステム主観的な評価ユーザが評価できる形式で解を表示評価を反映して新たな解を生成

(3)

Niは遺伝子座 i の取りうる対立遺伝子の総数をあら わす。βは平滑化をどのくらい強く行うかの割合をあらわす。問題点①：上記のアルゴリズムではデザインの候補を幅広く提示し、ユーザにとって思わぬデザインが出現することがあるため発想支援の効果が見込まれる。しかし、このアルゴリズムではユーザが好みのデザインを選択し、その選択に基づき候補を絞り込むことが主眼であるためユーザが発想支援の効果を意識しにくい。また、候補の絞込みを主として行っている場合、「ユーザにとって思わぬデザイン」が出現することは探索を妨げる可能性もある。問題点②：進化計算による探索である程度解が絞り込まれた後は、ユーザが手動で解を修正するほうが効率がよいと考えられる。しかし、上記の従来手法ではその仕組みは取り入れられていない。文献[5]などではこの修正の仕組みを取り入れているが、変更操作と結果の対応がユーザにとって分かりにくいという問題点がある。また、対象問題が違うので、スタイルシート生成システムにおける修正の仕組みの効果を検証する必要がある。なお、この研究を引き継いだ研究として文献[6]が挙げられる。しかし、文献[6]では上記の問題点に対しての対策は実施されていない。 2.4. 提案システムの方針 本研究では、2.3 節の問題点を踏まえ以下の方針に基づきシステムの開発を行う。方針①：問題点①に対して、発想支援に特化した画面を設け、ユーザの使い勝手の向上を図る。方針②：問題点②に対して、ユーザが手動で修正できる画面を取り入れる。また、サンプル候補を提示する機能を付けることで変更操作と結果の対応をユーザにとって分かりやすくする。また、システム評価において、発想支援画面に対する意見と、修正画面の有無によるユーザの探索行動の変化を調べる。

3. 提案システム

3.1. システムの概要 システムには「発想支援画面」「探索画面」「修正画面」の３つの画面を設ける。ユーザは状況に応じて自由に画面を切り替えることができる。Fig. 6 にシステムの概念図を示す。 Fig. 6 システムの概念図 本システムで想定しているユーザについて説明する。本システムでは CSS の生成のみを扱うため、実際に Web ページを作成するためには HTML の知識が必要となる。加えて右クリックやドラッグ＆ドロップといったコンピュータにおける基本的な操作を理解していることが望ましい。 3.2. 発想支援画面 発想支援画面ではデザインの候補を取捨選択する作業を通して、デザインに対するイメージを深める作業を行うことができる。Fig. 7 は発想支援画面の画面構成を示している。 Fig. 7 発想支援画面の画面構成 ①表示スペース：ここにデザインの候補が表示される。表示個数は１２個。 ②「新しいデザインの表示」ボタン：このボタンを押すと表示スペースにランダムに生成されたデザインが新たに表示される。 ③登録スペース：表示スペースに気に入ったデザインがあった場合、このスペースにドラッグ＆ドロップすることで登録できる。メモリの許す限り登録できるため、相当数登録することができる。ユーザイメージを深める細かな調整発想支援画面探索画面修正画面気に入ったデザインを登録し探索に利用絞り込んだデザインに対して細かな調整 ※進化計算による探索デザインを絞り込む ① ② ③

(4)

また、発想支援画面で登録したデザインは後の探索画面において利用することができる。 3.3. 探索画面 探索画面では 2.3 節で説明した遺伝子頻度に基づく遺伝的アルゴリズムにより、好みのデザインに近づけていく作業を行うことができる。Fig. 8 は探索画面の画面構成を示している。 Fig. 8 探索画面の画面構成 ①生成スペース：デザインの生成のときスペースに生成されたデザインが表示される。表示個数は８個。 ②評価スペース：生成スペースからデザインをドラッグ＆ドロップすることで評価することができる。評価できるデザインの個数は４個。 ③「新しいデザインを生成」ボタン：確率配列の初期化を行ってから、デザインを生成する。 ④「次のデザインを生成」ボタン：ユーザの評価を元に確率配列の更新と平滑化を行ってから、デザインを生成する。 ⑤発想支援画面の登録デザインの利用：利用方法は２つあり、１つ目が発想支援の登録デザインも評価して確率配列の更新を行う、２つ目が登録デザインに含まれるデザインの要素のみ出現させるようにする。特に２つ目の利用方法で探索の範囲を絞り込むことで、2.3 節で説明した「ユーザにとって思わぬデザイン」が発生するのを防ぐことができる。 3.4. 修正画面 修正画面ではユーザが手動でデザインの細部を変更することができる。Fig. 9 は修正画面の画面構成を示している。 Fig. 9 修正画面の画面構成 ①現在のデザイン：修正した結果が反映される。 ②サンプル候補：現在のデザインの周辺のデザインをサンプルとして提示している。この候補を選択すると現在のデザインが選択したデザインとなる。 ③プロパティ―セレクタリスト：遺伝子座に対応しており、ここから変更したい部分を選択する。 ④プロパティの値リスト：遺伝子に対応しており、ここから変更したい値を選択する。選択すると現在のデザインに変更が反映される。

4. 評価実験

評価実験は修正画面の効果を検証する実験と、発想支援画面に対するユーザの意見を収集するため実験の２つの実験を行った。実験計画にあたっては文献 [3,8-11]を参考にした。 4.1. 実験１：修正画面の効果検証 実験１では修正画面がある場合とない場合で、探索画面における世代数（デザインの生成回数）、探索にかかった時間を調べた。実験に参加したユーザは 3.1 節の操作に関する要件を満たしている学生17 名である。ユーザには次のタスクを行ってもらった。 Step1：条件１のシステムを説明後、トレーニング。 Step2：条件１で行う課題を説明後、課題実施。 Step3：条件２のシステムを説明後、トレーニング。 Step4：条件２で行う課題を説明後、課題実施。条件１、条件２は修正画面がある場合とない場合で、順序効果を考慮して各ユーザに順序を変えて割り振った。また、課題は「春らしいデザインを作成する」「秋らしいデザインを作成する」の２つを用意し、こちらも条件ごとに均等になるように割り振った。 ① ② ③ ④ ① ② ③ ④ ⑤

(5)

ユーザが満足するデザインを得られた、もしくは、課題開始から２０分経過した場合に課題を終了とした。課題終了後、システムの各種機能に対する意見を収集するためアンケートを実施した。・探索画面での世代数修正画面がある場合とない場合の世代数の最大・最小・平均・標準偏差をTable 1 にまとめる。 Table 1 世代数の比較 最小最大平均標準偏差修正画面あり 9 153 57.82 43.64 修正画面なし 41 215 113.35 55.00 最小・最大・平均とも探索にかかった世代数は修正画面がある場合の方が低くなった。平均値は無い場合のおよそ半分となっている。t-検定の結果、有意水準 5%で有意差有りと判定された。・システムの操作時間の比較修正機能がある場合とない場合の課題終了までにかかった操作時間の平均と標準偏差をTable 2 に示す。単位は秒である。 Table 2 操作時間の比較 平均標準偏差修正画面あり 874.8 321.5 修正画面なし 887.1 284.6 課題終了までにかかった操作時間には修正画面の有無による差はみられなかった。ユーザごとに操作時間を比較したときに特に差が見られたユーザについて Table 3 に示す。 Table 3 ユーザごとのシステム操作時間 修正画面あり修正画面なし userA 508 1024 userB 349 681 userC 543 864 userD 1200 723 userE 746 524 userF 620 420 修正機能ありの方が早くなったユーザでは、userA （516 秒）、userB（332 秒）、userC（321 秒）。修正機能なしの方が早くなったユーザではuserD（477 秒）、userE （222 秒）、userF（200 秒）となった。修正画面を導入した場合の方が探索画面での世代数は大幅に短縮した。しかし、全体のシステム操作時間で見ると、短縮効果の表れ方には個人差があることがわかった。 4.2. 実験２：発想支援画面に対するユーザの意見 実験２では発想支援画面をシステムに加えて、ユーザの発想支援画面に対する意見をアンケートにより調査した。実験に参加したユーザは実験１に参加したユーザ中15 名である。ユーザには次のタスクを行ってもらった。 Step1：発想支援画面についての説明後、発想支援画面のみを用いてデザインのイメージを深める作業を実施。 Step2：発想支援画面、探索画面、修正画面すべてを備えたフルシステムで自由にデザインを行ってもらう。同時にシステムの各種機能についてのアンケートに答えてもらう。・発想支援に特化した画面を設けることについて発想支援画面を探索画面とは別に設けることについて、「別画面の方が使いにくい」「一緒の画面でも変わらない」「別画面の方が使いやすい」の３段階で評価してもらった。その結果をTable 4 に示す。 Table 4 画面をきり分けることに対する意見 発想支援画面について人数 1：別画面の方が使いにくい 4 2：一緒の画面でも変わらない 1 3：別画面の方が使いやすい 10 「別画面の方が使いやすい」という意見が6 割強を占める。一方で「別画面の方が使いにくい」というユーザも存在することがわかった。・登録デザインを探索画面で利用する機能について登録デザインを探索画面で利用する機能について、その必要性を５段階で評価してもらった。その結果を Table 5 に示す。 Table 5 登録デザイン利用の必要性 登録デザイン利用の必要性人数 1：まったく必要ない 0 2：あまり必要ない 2 3：どちらともいえない 2 4：それなりに必要だ 10 5：必ず必要だ 1

(6)

「それなりに必要だ」と「必ず必要だ」をあわせて７割強という結果になった。・発想支援画面に対するユーザの自由記述システムに対する自由記述において発想支援画面について言及した意見の一部を記載する。なお、記述の内容は意味の変わらない範囲で一部修正している。［意見１］発想支援画面では自分の気に入ったデザインがぽんぽんと登録できるのがよい。また、たくさん入れられるところもよい。［意見２］発想支援画面で出たデザインを取り出して修正で着たらよい。［意見３］登録したデザインを一度にリセットできたらよい。［意見４］登録したデザインを探索画面に直接登録できるとよい。システム全体で共有する登録スペースがあるとよいかと。［意見５］登録デザインの並べ替えができるとよい。似たイメージをまとめたり、比較したりしたい。意見１では画面のどういった部分が発想支援に寄与しているかを指摘している。意見２～５では発想支援画面に対する改善点を指摘している。特に意見５からはより高度な発想支援の効果を期待しているユーザがいることがうかがえる。

5. おわりに

発想支援に特化した画面を設けた対話型進化計算法によるスタイルシート生成システムの開発を行った。本研究では、発想支援に特化した画面を設けることによるユーザの利便性の向上と、修正画面においてサンプル候補を提示することにより変更操作と結果の対応を分かりやすくすることを目的とした。また、１つ目の評価実験ではスタイルシート生成システムで修正画面を導入したときの効果の検証し、探索画面における収束性の向上と探索時間の短縮には個人差があることを確認した。２つ目の評価実験では発想支援画面などについてユーザの意見を調査し、実験に参加した６割強のユーザから発想支援画面を別に設けたほうが、システムが使いやすくなったという回答を得た。今後の課題としては、ユーザの意見を受けてシステムを改良することが挙げられる。具体的には、発想支援画面において登録デザインのグループ化などを可能とし、よりイメージを深める作業を支援する。また、修正画面のように効果に個人差のある機能では、その要因を詳しく分析すれば、ユーザの要求に合うシステム作りに役立ことが考えられる。さらに他の発想支援が必要となる問題に本システムの考え方を適用し、有効性を調べることも課題として挙げられる。

参考文献

[1] 益子貴寛： Web 標準の教科書 , 秀和システム (2002)

[2] H Takagi ： Interactive Evolutionary Computation: Fusion of the Capabilities of EC Optimization and Human Evaluation, Proceedings of the IEEE, vol.89, no.9, pp.1275-1296 (2001.9)

[3] 北野編：遺伝的アルゴリズム４ , 産業図書 (2000)

[4] N.Monmarche, G.Nocent, M.Slimane, G.Venturini, P.Santini：Imagine: a tool for generationg HTML style sheets with an interactive genetic algorithm based on genes frequencies, SMC’99, vol.3, pp.640-645 (1999)

[5] T.Unemi：SBART2.4: an IEC Tool for Creating 2D Images, Movies, and Collage, in Workshop on Genetic Algorithms in Visual Art and Music, pp.21-33 (2000.7) [6] A.Oliver, N.Monmarché, G.Venturini：INTERACTIVE DESIGN OF WEB SITES WITH A GENETIC ALGORITHM, Proceedings of the IADIS International Conference WWW/Internet, pp.355-362 (2002.11) [7] 濱田, 狩野：知識を利用した対話型進化計算による Web ページのスタイルシート生成システムの開発, 情報処理学会第69 回全国大会 3C-3 (2007.3) [8] 三浦：概論:心理学的評価のための基本的視座, 人工知能学会誌, 20 巻 6 号, pp.723-730 (2005.11) [9] 三浦：技法１:実験による評価, 人工知能学会誌, 21 巻1 号, pp.102-110 (2006.1) [10] 三浦：技法２:調査による評価, 人工知能学会誌, 21 巻 2 号, pp.225-233 (2006.3)

[11] American Psychological Association: APA：Ethical Principles of Psychologists and Code Of Conduct 2002, URL: http://www.apa.org/ethics/code2002.pdf (最終アクセス 2007/12/10）