WISS2007

Web サイト間のモーフィングによる Web デザイニング支援
A support of web designing with the morphing between web sites

近藤 裕佑

大久保 弘崇粕谷 英人

山本 晋一郎∗Summary. 本研究では，Web デザイニングの知識を持たない者でも容易に Web デザインを作成できる方法を提案する．CMS のように HTML 構造が等しい Web サイトでは，CSS を共通に適用できる．そこで，画像や映像などに使われるモーフィングの考え方を応用し，複数のサイトの CSS を融合することで新たなWeb デザインを得る．大量に生成できる中間の CSS をモーフィングの考え方により適度な数に制限し，自然な順序で整列させる．そして，スライドバーを用いることで容易に選択を行うことができるシステムを作成した．

1

はじめにWWW が一般的となり，個人や企業に広まるにつれて，コンテンツ内容だけでなく見栄えや使いやすさといった Web デザインの重要性が増してきた．
簡単にサイトを構築・管理できる CMS（コンテンツ・マネージメント・システム）では，既定の Webデザインが簡素な場合があり，広く使用されているCMS であるほど同じ Web デザインを持つ Web サイトが多く存在してしまう．また，例えばプログラ
マがドキュメントの公開を行う場合のように，サイト管理者が Web デザイニングに関する知識を持っているとは限らない．このとき，新たな Web デザインを作成するにはコストが大きくかかる．
そこで，Web デザイニングに関する知識を持たない者が新たに Web デザインを作成する作業の支援を考える．CMS の出力する HTML の構造は一定であるため，同じ CMS を利用する他の Web サイ
トの CSS を自分の Web サイトに適用すると同等のWeb デザインを得る．この特徴を利用することによって，様々な Web デザインを取り込むことができる．そして，既存の CSS を組み合わせることにより新たな Web デザインを作成する手法を提案する．
同じ目的の関連研究として，対話型進化計算を用いる方法や配色を支援する研究があげられる [1, 2]．

2Web デザインの作成

Web デザイニングに関する知識を持たない者が新たに Web デザインを作成するためには，知識を要求しないことが重要である．そのため，視覚的な理想を掲げるのみで知識を必要とせず Web デザインを作成する方法として，画像に使用されるモーフィ
Copyright is held by the author(s).
∗Yusuke Kondo, 愛知県立大学大学院 情報科学研究科,
Hirotaka Ohkubo, Hideto Kasuya, and Shinichiro Yamamoto, 愛知県立大学 情報科学部

ングの考え方を応用する．

2.1

CSS におけるモーフィング

CSS のモーフィングでも画像の場合と同様に中間状態を作成し，その中から新たな Web デザインを選び出すことを考える．そこで，CSS のセレクタに着目し，セレクタに指定された内容を組み合わせることによって中間状態を作成する．以下では，セレクタに指定された宣言を単にセレクタとまとめる．
また，元にする 2 つの CSS を A, B と呼ぶ．
2.2

中間の CSS

2 つの CSS が宣言するセレクタは一般的に異なるため，中間の CSS がもつセレクタの集合は両者の和となる．また，その属性値は両者のいずれかの値をとるため，セレクタ数を n とすると中間の CSSは 2n 値考えられる．例えば，A では body 要素，p要素に対して指定がされており，B では body 要素，a 要素に対して指定がされているとする．これらのセレクタの和集合は body 要素，p 要素，a 要素となり，全体の組み合わせパターンは 23 (= 8) 通りとなる．幾つかの CMS の CSS について調べてみたところ，セレクタ数はおおよそ 50〜100 であった．そのため，全ての組み合わせ数は 250 (≒ 1,000 兆) 以上となる．この組み合わせを提示し，その中から選択することは現実的ではない．
また，A から B にモーフィングするとは，変化が単調に起きる必要がある．そこで，提示する中間状態はセレクタ数 n に限定し，1 つのセレクタに関して 1 度だけ変化するという制約の下で，直線上に並べる．
2.3

セレクタの切り替え順序各セレクタは A から B へ 1 度だけ変化することができるとして，直線上に並べる．この直線上の変化が自然に見えるセレクタの切り替え順序が重要で

WISS 2007ある．CSS を用いる CMS の出力する HTML の構
造は，body 要素の直下でヘッダ部，サイドメニュー部，本文，フッタ部などのように分けられる．この部分ごとに変化を集中させることで中間のレイアウ
トに矛盾が生じることを防ぎ，かつ直感的に受け入れやすい順序とする．具体的には HTML を木構造と考えて，html，body 要素の高さは深さ優先，次の高さで幅優先，さらに高い部分については再び深さ優先で選択する（図 1）．
¶µ´
図 1. 提案する順序の例

色レイアウトのための属性は上で述べたとおり，Aか B のいずれかの属性値を利用する．色については，この方法は適当でない．例えば A が白地に黒文字，B が黒地にしろ文字であるとき，A の背景に Bの文字色では何も見えない．一方，中間色を用いると，いずれもグレーであり妥当とはいえない．したがって，色についてはモーフィングを行わず，モーフィングとは異なる支援ツールを提供する．

3

図 3. Web サイト B

図 4. モーフィング 1

図 5. モーフィング 2³

1: html ................ (1)2:body .............. (2)3:
div#header ...... (3)4:h1 ............ (7)5:
div#main ........ (4)6:p ............. (8)7:table ......... (9)8:tr ......... (10)9:td ....... (11)10:
div#menu ........ (5)11:ul ........... (12)12:li ......... (13)13:
div#footer ...... (6)14:
p ............ (14)2.4

図 2. Web サイト A

CSS Morphing System

CSS Morphing System は，2.3 節で提案した順序をスライドバー上に実装した Web アプリケーションである．本システムは，http://www.aichi-pu.ac.jp/ist/lab/yamamoto/demo/kondo/ にて公開

なる Web デザインを対象に，本システムによって実際に Web デザインのモーフィングを行い，その結果を確認する．ただし，ここで示している例は変化の過程の一部である．
スライドバーを動かすと図 4 が得られ，Web サ
イト A の背景とヘッダが変化している．さらに動かすことで図 5 が得られ，1 カラム構成から 3 カラム構成に切り替わっていることが分かる．このように，レイアウトが異なる Web デザインのモーフィングを行っても，2 つを組み合わせた Web デザインを得ることができる．また，この例ではスライドバーから選択できる中間の CSS のうち，極端にレイアウトが崩れていない Web デザインは約 9 割である．
よって，2.3 節で提案した順序は，中間のレイアウ
トに矛盾が生じることを防いだと考えられる．

4

まとめ本システムを利用し既存の CSS を利用することで，ユーザが予め取り入れたいと思う Web デザインを簡単に取り込むことができる．また，スクロールバーによる直観的なインタフェースを提供することで，Web デザイニングに関する知識を持たないユーザにとっても扱いやすくなっている．その結果，そのような者でも新たな Web デザインを簡単に作成できるようになった．

している．

参考文献

3.1

[1] 賀川 経夫, 西野 浩明, 宇津宮 孝一. 配色に基づくデザイン支援ツールに関する一考察. 信学技報
Vol. 102 No. 534, pp. 1–6, 2002.
[2] 濱田 悠介, 狩野 均. 知識を利用した対話型進化計
算による Web ページのスタイルシート生成システムの開発. 情報処理学会 第 69 回全国大会 3C–3,2007.

実例評価

ブログを模した Web サイト A（図 2）は，本文部分が 1 カラムであり，本文部分の下にメニューが2 カラムの構成となっている．また，同様の Web サイト B（図 3）は 3 カラム構成である．これらは同じ HTML 構造である．このようにレイアウトが異