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

Size: px

Start display at page:

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

ゆきひらさわまつ
5 years ago
Views:

発想支援機能を有する対話型進化計算による Web ページのデザイン生成システム System for Generating Style Sheets of Web Pages using Interactive Evolutionary Computation with Idea Support Functions 筑波大学濱田悠介狩野均 Hamada Yuusue, Kanoh

1 発想支援機能を有する対話型進化計算による 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 ーザが直接行う手法である [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 遺伝子選択確率 Value Value Value Value Value Value 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

3 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 にシステムの概念図を示す Fig. 7 発想支援画面の画面構成 1 表示スペース : ここにデザインの候補が表示される表示個数は12 個 2 新しいデザインの表示ボタン: このボタンを押すと表示スペースにランダムに生成されたデザインが新たに表示される 3 登録スペース : 表示スペースに気に入ったデザインがあった場合このスペースにドラッグ & ドロップすることで登録できるメモリの許す限り登録できるため相当数登録することができる

4 また発想支援画面で登録したデザインは後の探索画面において利用することができる 3.3. 探索画面探索画面では 2.3 節で説明した遺伝子頻度に基づく遺伝的アルゴリズムにより好みのデザインに近づけていく作業を行うことができる Fig. 8 は探索画面の画面構成を示している 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つを用意しこちらも条件ごとに均等になるように割り振った

5 ユーザが満足するデザインを得られたもしくは課題開始から20 分経過した場合に課題を終了とした課題終了後システムの各種機能に対する意見を収集するためアンケートを実施した修正画面を導入した場合の方が探索画面での世代数は大幅に短縮したしかし全体のシステム操作時間で見ると短縮効果の表れ方には個人差があることがわかった探索画面での世代数修正画面がある場合とない場合の世代数の最大最小平均標準偏差を Table 1 にまとめる Table 1 世代数の比較最小最大平均標準偏差修正画面あり修正画面なし最小最大平均とも探索にかかった世代数は修正画面がある場合の方が低くなった平均値は無い場合のおよそ半分となっている t- 検定の結果有意水準 5% で有意差有りと判定されたシステムの操作時間の比較修正機能がある場合とない場合の課題終了までにかかった操作時間の平均と標準偏差を Table 2 に示す単位は秒である Table 2 操作時間の比較平均標準偏差修正画面あり修正画面なし課題終了までにかかった操作時間には修正画面の有無による差はみられなかったユーザごとに操作時間を比較したときに特に差が見られたユーザについて Table 3 に示す Table 3 ユーザごとのシステム操作時間修正画面あり修正画面なし usera userb userc userd usere userf 修正機能ありの方が早くなったユーザでは 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

6 それなりに必要だと必ず必要だをあわせて 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 (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 (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 (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 ( ) [7] 濱田, 狩野 : 知識を利用した対話型進化計算による Web ページのスタイルシート生成システムの開発, 情報処理学会第 69 回全国大会 3C-3 (2007.3) [8] 三浦 : 概論 : 心理学的評価のための基本的視座, 人工知能学会誌, 20 巻 6 号, pp ( ) [9] 三浦 : 技法 1: 実験による評価, 人工知能学会誌, 21 巻 1 号, pp (2006.1) [10] 三浦 : 技法 2: 調査による評価, 人工知能学会誌, 21 巻 2 号, pp (2006.3) [11] American Psychological Association: APA:Ethical Principles of Psychologists and Code Of Conduct 2002, URL: ( 最終アクセス 2007/12/10)

技術開発懇談会-感性工学.ppt

技術開発懇談会-感性工学.ppt ! - 1955GNP - 1956!!!! !. - 1989, 1986 (1992)! - 4060 (1988 - - /!! ! 199810 2011913!!! 平成２４年１月２３日技術開発懇談会 in 魚沼感性工学によるデザイン因果の順推論感性評価感性デザイン因果の逆推論物理形状モノイメージ言葉物理形状をどのように表現するかイメージをどのように表現するか物理形状とイメージの関係づけと変換はどうするか