発想支援機能を有する対話型進化計算による Web ページのデザイン生成システム System for Generating Style Sheets of Web Pages using Interactive Evolutionary Computation with Idea Support Functions 筑波大学 濱田悠介狩野均 Hamada Yuusue, Kanoh Hitoshi, University of Tsuuba 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 mae 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 の中のどの部分にスタイルを適用するかを指定するものである プロパティとはどの様なスタイルを適用するかを指定するものである セレクタ1{ プロパティ1: 値 1 プロパティ2: 値 2 } セレクタ2{ プロパティ2: 値 3 } セレクタ3{ } Fig. 1 CSS の書式とデザインされた Web ページユーザの要望に適う CSS を探すという問題は ユーザの要望 を制約とした制約充足問題である その探索空間のサイズは設定すべきすべてのプロパティに対し 各プロパティのとりうる値の数を掛け合わせることで求めることができる 2.2. 対話型進化計算法対話型進化計算法は遺伝的アルゴリズムなどの進化計算と呼ばれる探索手法において 解の評価部分をユ
ーザが直接行う手法である [2] Fig. 2 に対話型進化計算法の概念図を示す ユーザが評価できる形式で解を表示ユーザシステム評価を反映して主観的な評価新たな解を生成 Fig. 2 対話型進化計算法の概念図人間が主観的に評価を行うことができるため 人間には判定が可能だが評価の定式化が困難な問題や 個人間で評価の変化する問題に利用されている 2.3. 従来手法とその問題点 Monmarche らは対話型進化計算法を用いたスタイルシート生成システムの開発を行った [4] このシステムでは探索のアルゴリズムとして 遺伝子頻度に基づく遺伝的アルゴリズムを用いている そのアルゴリズムを Fig. 3 に示す 確率配列を初期化 ; 初期デザイン ( 集団 ) を生成 ; while( ユーザが満足するデザインを得るまで ) { ユーザにデザインを提示 ; ユーザが好みのデザインを選択 ; ユーザの選択に基づき確率配列を更新 ; 確率配列を平滑化 ; 確率配列を元に次のデザインを生成 ; } Fig. 3 従来手法のアルゴリズム コード化 CSS のコード化は セレクタ (Selector) とプロパティ (Property) の組が一つの遺伝子座に そのプロパティのとりうる値 (Value) が遺伝子にすることによって行われる に染色体の例を示す 遺伝子座 Selector1 Selector1 Slector2 Property1 Property2 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/ その遺伝子座のとりうる値の総数 を設定することで行われる 確率配列の更新確率配列の更新は次式によって行われる p = ( 1 α ) p + αe 添え字の i は i 番目の遺伝子座 添え字の j は j 番目の対立遺伝子をあらわす p は更新後の遺伝子選択確率をあらわす p は更新前の遺伝子選択確率をあらわす αはユーザの評価をどれくらい重視するかの割合をあらわす E はユーザの評価を基に計算される値をあらわす 具体的には次式によって求められる E = ( U f ( i, U j, )) 添え字の はユーザに提示したデザインの総数をあらわす U はユーザの選択を表し ユーザがそのデザインを選択していれば 1 選択していなければ 0 となる f (i, j, ) はデザイン に遺伝子座 i の対立遺伝子 j が含まれている場合は 1 そうでない場合は 0 を返す関数である 確率配列の平滑化確率配列の平滑化は次式によって行われる この操作は通常の遺伝的アルゴリズムの突然変異に対応する操作である p 1 = ( 1 β ) p + β N i
N i は遺伝子座 i の取りうる対立遺伝子の総数をあらわす βは平滑化をどのくらい強く行うかの割合をあらわす 問題点 1: 上記のアルゴリズムではデザインの候補を幅広く提示し ユーザにとって思わぬデザインが出現することがあるため発想支援の効果が見込まれる しかし このアルゴリズムではユーザが好みのデザインを選択し その選択に基づき候補を絞り込むことが主眼であるためユーザが発想支援の効果を意識しにくい また 候補の絞込みを主として行っている場合 ユーザにとって思わぬデザイン が出現することは探索を妨げる可能性もある 問題点 2: 進化計算による探索である程度解が絞り込まれた後は ユーザが手動で解を修正するほうが効率がよいと考えられる しかし 上記の従来手法ではその仕組みは取り入れられていない 文献 [5] などではこの修正の仕組みを取り入れているが 変更操作と結果の対応がユーザにとって分かりにくいという問題点がある また 対象問題が違うので スタイルシート生成システムにおける修正の仕組みの効果を検証する必要がある なお この研究を引き継いだ研究として文献 [6] が挙げられる しかし 文献 [6] では上記の問題点に対しての対策は実施されていない イメージを深める発想支援画面気に入ったデザインを登録し探索に利用デザインを絞り込む 進化計算による探索探索画面ユーザ絞り込んだデザインに対して細かな調整細かな調整修正画面 Fig. 6 システムの概念図本システムで想定しているユーザについて説明する 本システムでは CSS の生成のみを扱うため 実際に Web ページを作成するためには HTML の知識が必要となる 加えて右クリックやドラッグ & ドロップといったコンピュータにおける基本的な操作を理解していることが望ましい 3.2. 発想支援画面発想支援画面ではデザインの候補を取捨選択する作業を通して デザインに対するイメージを深める作業を行うことができる Fig. 7 は発想支援画面の画面構成を示している 2.4. 提案システムの方針本研究では 2.3 節の問題点を踏まえ以下の方針に基づきシステムの開発を行う 方針 1: 問題点 1に対して 発想支援に特化した画面を設け ユーザの使い勝手の向上を図る 方針 2: 問題点 2に対して ユーザが手動で修正できる画面を取り入れる また サンプル候補を提示する機能を付けることで変更操作と結果の対応をユーザにとって分かりやすくする また システム評価において 発想支援画面に対する意見と 修正画面の有無によるユーザの探索行動の変化を調べる 3. 提案システム 3.1. システムの概要システムには 発想支援画面 探索画面 修正画面 の3つの画面を設ける ユーザは状況に応じて自由に画面を切り替えることができる Fig. 6 にシステムの概念図を示す 1 2 3 Fig. 7 発想支援画面の画面構成 1 表示スペース : ここにデザインの候補が表示される 表示個数は12 個 2 新しいデザインの表示 ボタン: このボタンを押すと表示スペースにランダムに生成されたデザインが新たに表示される 3 登録スペース : 表示スペースに気に入ったデザインがあった場合 このスペースにドラッグ & ドロップすることで登録できる メモリの許す限り登録できるため 相当数登録することができる
また 発想支援画面で登録したデザインは後の探索画面において利用することができる 3.3. 探索画面探索画面では 2.3 節で説明した遺伝子頻度に基づく遺伝的アルゴリズムにより 好みのデザインに近づけていく作業を行うことができる Fig. 8 は探索画面の画面構成を示している 1 2 3 4 1 2 3 4 5 Fig. 8 探索画面の画面構成 1 生成スペース : デザインの生成のときスペースに生成されたデザインが表示される 表示個数は8 個 2 評価スペース : 生成スペースからデザインをドラッグ & ドロップすることで評価することができる 評価できるデザインの個数は4 個 3 新しいデザインを生成 ボタン: 確率配列の初期化を行ってから デザインを生成する 4 次のデザインを生成 ボタン: ユーザの評価を元に確率配列の更新と平滑化を行ってから デザインを生成する 5 発想支援画面の登録デザインの利用 : 利用方法は2 つあり 1つ目が発想支援の登録デザインも評価して確率配列の更新を行う 2つ目が登録デザインに含まれるデザインの要素のみ出現させるようにする 特に 2つ目の利用方法で探索の範囲を絞り込むことで 2.3 節で説明した ユーザにとって思わぬデザイン が発生するのを防ぐことができる 3.4. 修正画面修正画面ではユーザが手動でデザインの細部を変更することができる Fig. 9 は修正画面の画面構成を示している Fig. 9 修正画面の画面構成 1 現在のデザイン : 修正した結果が反映される 2サンプル候補 : 現在のデザインの周辺のデザインをサンプルとして提示している この候補を選択すると現在のデザインが選択したデザインとなる 3プロパティ セレクタリスト : 遺伝子座に対応しており ここから変更したい部分を選択する 4プロパティの値リスト : 遺伝子に対応しており ここから変更したい値を選択する 選択すると現在のデザインに変更が反映される 4. 評価実験評価実験は修正画面の効果を検証する実験と 発想支援画面に対するユーザの意見を収集するため実験の 2つの実験を行った 実験計画にあたっては文献 [3,8-11] を参考にした 4.1. 実験 1: 修正画面の効果検証実験 1では修正画面がある場合とない場合で 探索画面における世代数 ( デザインの生成回数 ) 探索にかかった時間を調べた 実験に参加したユーザは 3.1 節の操作に関する要件を満たしている学生 17 名である ユーザには次のタスクを行ってもらった Step1: 条件 1のシステムを説明後 トレーニング Step2: 条件 1で行う課題を説明後 課題実施 Step3: 条件 2のシステムを説明後 トレーニング Step4: 条件 2で行う課題を説明後 課題実施 条件 1 条件 2は修正画面がある場合とない場合で 順序効果を考慮して各ユーザに順序を変えて割り振った また 課題は 春らしいデザインを作成する 秋らしいデザインを作成する の2つを用意し こちらも条件ごとに均等になるように割り振った
ユーザが満足するデザインを得られた もしくは 課題開始から20 分経過した場合に課題を終了とした 課題終了後 システムの各種機能に対する意見を収集するためアンケートを実施した 修正画面を導入した場合の方が探索画面での世代数は大幅に短縮した しかし 全体のシステム操作時間で見ると 短縮効果の表れ方には個人差があることがわかった 探索画面での世代数 修正画面がある場合とない場合の世代数の最大 最 小 平均 標準偏差を 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. 実験 2: 発想支援画面に対するユーザの意見実験 2では発想支援画面をシステムに加えて ユーザの発想支援画面に対する意見をアンケートにより調査した 実験に参加したユーザは実験 1に参加したユーザ中 15 名である ユーザには次のタスクを行ってもらった Step1: 発想支援画面についての説明後 発想支援画面のみを用いてデザインのイメージを深める作業を実施 Step2: 発想支援画面 探索画面 修正画面すべてを備えたフルシステムで自由にデザインを行ってもらう 同時にシステムの各種機能についてのアンケートに答えてもらう 発想支援に特化した画面を設けることについて発想支援画面を探索画面とは別に設けることについて 別画面の方が使いにくい 一緒の画面でも変わらない 別画面の方が使いやすい の 3 段階で評価してもらった その結果を Table 4 に示す Table 4 画面をきり分けることに対する意見発想支援画面について人数 1: 別画面の方が使いにくい 4 2: 一緒の画面でも変わらない 1 3: 別画面の方が使いやすい 10 別画面の方が使いやすい という意見が 6 割強を占める 一方で 別画面の方が使いにくい というユーザも存在することがわかった 登録デザインを探索画面で利用する機能について登録デザインを探索画面で利用する機能について その必要性を5 段階で評価してもらった その結果を Table 5 に示す Table 5 登録デザイン利用の必要性登録デザイン利用の必要性人数 1: まったく必要ない 0 2: あまり必要ない 2 3: どちらともいえない 2 4: それなりに必要だ 10 5: 必ず必要だ 1
それなりに必要だ と 必ず必要だ をあわせて 7 割強という結果になった 発想支援画面に対するユーザの自由記述システムに対する自由記述において発想支援画面について言及した意見の一部を記載する なお 記述の内容は意味の変わらない範囲で一部修正している [ 意見 1] 発想支援画面では自分の気に入ったデザインがぽんぽんと登録できるのがよい また たくさん入れられるところもよい [ 意見 2] 発想支援画面で出たデザインを取り出して修正で着たらよい [ 意見 3] 登録したデザインを一度にリセットできたらよい [ 意見 4] 登録したデザインを探索画面に直接登録できるとよい システム全体で共有する登録スペースがあるとよいかと [ 意見 5] 登録デザインの並べ替えができるとよい 似たイメージをまとめたり 比較したりしたい 意見 1では画面のどういった部分が発想支援に寄与しているかを指摘している 意見 2~5では発想支援画面に対する改善点を指摘している 特に意見 5からはより高度な発想支援の効果を期待しているユーザがいることがうかがえる 5. おわりに発想支援に特化した画面を設けた対話型進化計算法によるスタイルシート生成システムの開発を行った 本研究では 発想支援に特化した画面を設けることによるユーザの利便性の向上と 修正画面においてサンプル候補を提示することにより変更操作と結果の対応を分かりやすくすることを目的とした また 1つ目の評価実験ではスタイルシート生成システムで修正画面を導入したときの効果の検証し 探索画面における収束性の向上と探索時間の短縮には個人差があることを確認した 2つ目の評価実験では発想支援画面などについてユーザの意見を調査し 実験に参加した6 割強のユーザから発想支援画面を別に設けたほうが システムが使いやすくなったという回答を得た 今後の課題としては ユーザの意見を受けてシステムを改良することが挙げられる 具体的には 発想支援画面において登録デザインのグループ化などを可能とし よりイメージを深める作業を支援する また 修正画面のように効果に個人差のある機能では その要因を詳しく分析すれば ユーザの要求に合うシステ ム作りに役立ことが考えられる さらに他の発想支援が必要となる問題に本システムの考え方を適用し 有効性を調べることも課題として挙げられる 参考文献 [1] 益子貴寛 :Web 標準の教科書, 秀和システム (2002) [2] H Taagi : 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] 北野編 : 遺伝的アルゴリズム4, 産業図書 (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 Worshop 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] 三浦 : 技法 1: 実験による評価, 人工知能学会誌, 21 巻 1 号, pp.102-110 (2006.1) [10] 三浦 : 技法 2: 調査による評価, 人工知能学会誌, 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)