１．採択者氏名

２．担当プロジェクト管理組織

　リトルスタジオインク（株）

３．委託支払金額

　2,925,795円

４．テーマ名

　レイアウトによるWEBページ検索

５．関連Webサイトへのリンク

　http://www-ui.is.s.u-tokyo.ac.jp/~gyasu/projects/layoutsearch/overview.html

６．テーマ概要

　現在の日本ではインターネットの普及が進み，多くの人々が日夜Webページを閲覧している．それにともなって，若者世代を中心に子供から主婦まで幅広い世代で個人のWebページを作る人も増えてきた．しかし，そのような状況下において新たにWebページを作成しようとした時，デザインセンスに長けている人はともかく，一般的な人ではそのレイアウトデザインに悩むことも多い．直接HTML (Webページ作成用言語) を記述する際は勿論，ホームページビルダーなどの専用のグラフィックエディタを用いた場合も用意されたテンプレートは限られており，なかなかイメージが浮かばない．また，漠然と浮かんだとしてもすぐに具体化して確認する手段がない．そのような時に，既存のエディタのように限られたテンプレートを活用するのではなく，実際のWebからレイアウトの参考となるページを検索することができればイメージが色々とわいてきて具体化されやすい．

　そこで，ここでは漠然としたイメージをスケッチすることで実際のWebからスケッチされたレイアウトにマッチしたページを検索する新しい検索システムを提案する．本システムではWebページ作成においてユーザが漠然と思い浮かべたイメージをフリーハンド又は適当なツールでスケッチすることでWeb上からスケッチにマッチするようなレイアウトを持ったページを検索することができる．ユーザはこれを用いて思うままにスケッチを行なうことで，それに見合ったレイアウトのページが検索され，いろんなイメージ湧いてくる．また，実際のWebページが検索されて表示されているので，即座にイメージが具体化され，それらのページからテンプレートを取り出すことで難なくWebページ作成に入ることができる．

　また，この提案は従来の文字列によるキーワードを用いたWebページ検索に対し，レイアウトデザインによる「見た目」重視のWebページ検索システムという点で新しい試みである．

７．採択理由

　好きなWebページデザインの検索と，その結果を用いたページ作成支援の2本立ての提案であるが，なにはともあれ検索が先立つ課題となる．検索のための入力法，入力データについてはさらなる検討を加えてもらいたい．人間の認知能力やヒューマンインタフェースの問題がぞろぞろ出てきそうだ．実際，ユーザからは際限のない要求が出てくるような気がする．

　なお，検索結果を引用したページ作成支援については，たとえばレイアウトの意匠権など権利関係の問題が発生しないかについて，ちゃんと調べるようにしてほしい．むしろ，検索のための入力がそのままページ作成支援になるパスも考えてみるとよいかもしれない．たとえば，こんな感じと指定すると，そんな感じのレイアウトテンプレートを作成してくれ，その細部にさらになにか指定すると，さらに…．

８．成果概要（中間報告時）

　レイアウトによるWebページ検索システムのプロトタイプを作成した．これは，ユーザがスケッチやツールを使用してレイアウトの概観をデザインし，それに応じたレイアウトのWebページを検索するシステムである．主にインタフェースとマッチングアルゴリズムの部分からなる．橋本 図1に，インタフェース画面を示す．

橋本 図1　インタフェース画面

　このインタフェース画面を用いたクエリを設計する前に，ユーザがどのようにWebページを描画するのかを見るための予備実験を行った．すなわち，ユーザテストに基づいて入力インタフェースとマッチングアルゴリズムを設計し，評価実験を行なった．中間報告時（11月末時点）は


・ 1行テキスト (見出し等に使用)
・ 複数行テキスト (1行テキストと区別されている)
・ イメージ (IMGタグに相当)
・ テーブル (TABLEタグに相当，BORDER属性が1以上のもの)
・ フォーム (FORMタグ中のINPUTタグに相当 入力フォームなど)

からオブジェクトを選ぶことができる．マッチングアルゴリズムは，入力されたクエリとデータベース中の各Webページとの間でレイアウトの差異を表すコストを計算し，その値が低い順に結果を返す．レイアウトによる検索において重要だと思われるものは各オブジェクトの空間的な関係である．空間的な関係を表すものとして，今回は各オブジェクトの位置と大きさに注目してコスト計算を行なった．

　実験の結果は概ね良好であり，被験者のアンケート調査からも，このようなシステムに対してのニーズがあることが汲み取られた．

　また，HTMLのソースから各オブジェクトの位置，種類，大きさを取得するために簡易レンダリングエンジンを作成した．

　サンプルを100ページ集めた段階で日本語，英語によるプロジェクトページを作成し，現段階のプロトタイプを一般的に利用できるようにした．

　http://www-ui.is.s.u-tokyo.ac.jp/~gyasu/projects/layoutsearch/overview.html

９．ＰＭコメント（中間報告時）

　橋本君は昨年度もアニメ自動作成を題材にし応募をしてきた人である．残念ながら不採択にしてしまったが，今回のプロジェクトは捲土重来といったところだ．「見た目」にこだわりのあるテーマに関心があるようで，これも彼にとって力の発揮できるテーマであろう．

　しっかり実験を積み重ねてから，システムの設計を行なうスタイルはいかにも研究者っぽい．このシステムの最初のカギはマッチングアルゴリズムである．徐々に改良されているようだが，もう少し人間の直観に合ったマッチングをすることが可能だと思う．少々メタのクエリができるようになればいいと思うのだが，後期の研究開発課題に取り込んでもらえた．

　実用に供するためのもう一つの問題は，検索対象のWebページを増やすことと，それに応じた高速検索の手法の開発である．これについては，すでに多くの研究がなされていると思うので，ある程度それらに乗っかるのがいいだろう．

　検索したあとの，レイアウト情報の適用による新しいWebページ作成機能もこのシステムの目玉であるが，まずレイアウトに著作権があるかどうかといったところから調べないといけないので，結構大変そうである．

　こういうシステムはシロウトにも簡単に評価できてしまうので，つくる側としてはシンドイ．しかし，橋本君には馬力がある．後期が終わるころには，目指したシステムのある程度完成度の高いプロトタイプはできる予感がする．

１０．成果概要（終了時）

　前期に引き続いて開発を進め，レイアウトによるWEBページ検索機能は進化した．それに加えてレイアウト情報の適用による新しいWEBページ作成のプロトタイプを開発した．

(1) レイアウトによるWEBページ検索機能の開発

　ユーザがスケッチツールを使用してレイアウトの外観をデザインし，それに応じたレイアウトのWEBページを検索するシステムである．システムは主に3つのコンポーネントからなる．それらはユーザインタフェースの部分とクローラーによってWEBページを集めてくる部分，そしてマッチングアルゴリズムの部分である (橋本 図2)．ユーザは図・橋本図1に示されたようなWEBブラウザを通してシステムにアクセスできる．検索時にはブラウザの左側のパネルにクエリを描画し，その結果のWEBページのサムネイルが右側のパネルに返ってくる．システムは入力されたクエリとクローラーによって集められたデータベース中のWEBページとの間でコストを算出し値が低いものをより似通っているものとして返す．

　後期にはマッチングのアルゴリズムの改良とクローラーの開発が進んだ．クローラーは検索対象となるWEBページを集めてくるためのアプリケーションで，HTMLファイルと同時にページ上のイメージファイルも集めてくるのはもちろん，画像のほかに検索高速化のためのインデックスファイルと結果表示用のサムネイル画像を独自開発のレンダリングエンジンで作成する．なお，ただのテキストマッチングと比較して速度がどうしても遅くなってしまうので，一般の検索エンジンのようにひたらすらたくさんのページを集めてくれば良いというわけではない．ユーザが参照しても意味がないようなオブジェクト数が少ない単純なページは除去するとか，見た目がほとんど同じページが増えないように同じURLパスからのダウンロード数を制限するとかのポリシーが内蔵されている．

橋本 図2　システム概要図

　画像検索アルゴリズムはAttributed Relational Graphs (ARGs) という手法の中で高速とされているHungarian Methodをベースに設計した．なお，ここでは空間位置関係だけを用いるので，色，テクスチャ，形は対象にしない．これを10名の被験者を対象にしてテストした結果，類以度検索に関してはほぼ満足できる結果が得られた (詳細な数値等はここでは省略)．

　100ページのサンプルを内蔵したWEBページ検索機能全体に対する評価はWebページ作成の上級者以外はこのシステムの有用性を非常に高く買ってくれることがわかった．

(2) レイアウト情報の適用による新しいWEBページ作成のプロトタイプ

　検索して見つかったページからレイアウト情報を取得し，既存のページに適用することで新しいページを簡単に作成できるシステムを作成した．橋本 図3にシステムの画面を例示する．

　橋本 図3の中で上部左側のSOURCEパネルには変更したい既存のWEBページを読み込む．右側のREFERENCEパネルにはレイアウトの参照としたいWEBページを読み込む．画面の中間にあるCREATEボタンを押すことで左下のRESULTパネルにSOURCEパネルにREFERENCEパネルを適当した結果が表示される．これは自動的に両パネルのオブジェクト間で対応を取って，その対応関係にあるオブジェクト同士が入れ替わる仕組みである．また，ユーザが手動で対応するオブジェクト同士を指定することもできる．

橋本 図3　システム概観

１１．ＰＭ評価とコメント（終了時）

　さすがに馬力があり，結局，企画段階で計画していたものを全部やっちゃったという印象である．もちろん100％という完成度には至ってないが，ともかくきちんとデモができるところまで仕上げ，検索システムについてはWebで公開もしている．

　 http://www-ui．is．s．u-tokyo．ac．jp/~gyasu/projects/layoutsearch/overview．html

　最初に課題にしていたレイアウトの著作権については，法的に詳細な検討を行うまでには至らなかったが，株式会社インセプトが作成したインターネットはじめの一歩というWebページにおけるネチケットの項では「レイアウトやHTMLのソースには著作権は発生しにくく，画像や文章が一緒でなければ著作権法上は問題がない」という説明があったとのこと．橋本君はこれでもまだ不安が残ると言っているが，PMはまあ大丈夫なのではないかと思う．いずれにせよ，こういう話は最終的にはこのシステムがどうというより，ユーザの良心に依るという橋本君の意見にPMは賛成である．

　橋本君はさすがに修士2年の学生であり，このプロジェクトと修士論文をうまく重ね合わせている．評価実験とその分析がしっかりしているのはそのためである．また，画像マッチングに関するいろいろなアルゴリズムをよく調べてあった (これらを含めて，報告書の中の参考文献の多さはピカ一)．もっとも，こういうものは検索にある程度のゆらぎがあったほうが，別の意味で役に立つということもある．なにしろ，デザインの参考にしたいというのが本来の目的だからである．心に思い描いたものよりもいいデザインが見つかったらそっちに簡単に乗り換えることができる．

　このことから，Webページ作成支援という意味では，2つめの成果であるレイアウト情報の適用による新しいWebページ作成のプロトタイプのほうに大きな発展性が期待できるような気がする．著作権の問題もそうシビアでない，あるいはうまく抜けることができるということであればなおさらである．いいテンプレートから自分のページ作成ができ，自分で少しモディファイすることができれば嬉しいユーザは意外に多そうだ．そのためにはレイアウト全体ではなくて，部分，部品というレベルでの再利用やレイアウト作成支援があると，もっと便利かなと思う．

　類似検索で色やテクスチャを使わないのは，かえってよかったかもしれないが，形はあるとよかったかもしれない．参考になるテンプレートの部分を見つけることができるかもしれないからだ．

　うまくつくったレンダリングエンジンとインデックス化により検索は高速になったが，それでも検索されるページデータの数は検索速度にそのまま跳ね返る．それに対して，知らぬ間の人気投票とクローラーの働きでページデータベースをどんどんアップデータしていくという提案がなされているが，ここはもう一工夫してデータベースの大きさを増やせるようにしたほうがよいのでは?