The 19th Annual Conference of the Japanese Society for Artificial Intelligence, 2005

3C3-04Proxy エージェントに基づく Web ブラウザを用いた
Web ページ調和配色システムの試作
On a harmony color scheme system of a web pageusing the web browser based on a Proxy agent
早川潤一∗1

大囿忠親∗1伊藤孝行∗1新谷虎松∗1

Junichi Hayakawa

Tadachika Ozono

Takayuki ItoToramatsu Shintani∗1

名古屋工業大学大学院 工学研究科 情報工学専攻

Dept. of Computer Science and Engineering, Graduate School of Engineering, Nagoya Institute of Technology

The color scheme design is one of the important elements to make attractive web page design. However, ingeneral, we need much knowledge of HTML and web design to decide the color scheme design of a web page, andit is difficult for a novice user to create a web page reflecting one’s image. In this paper, we propose a color scheme
design support system for a web page on an exsisting web browser. Since a user can directly color a web page on a
web browser by using our system, a user can easily decide the color scheme design of a web page. Moreover, since
our system can provide a color scheme design based on the word which a user imagines, our system enables a userto support reflection of a user’s image.

1.

はじめに感性の差に柔軟に対応することのできる手法が提案されている[3][4][5]．
本研究では，Web ページデザインにおけるユーザの配色決定までにかかる負担を軽減し，容易な Web ページデザインの決定を目指す．通常，Web ページの配色を行う際には，編集，保存，および確認などといった作業を必要とする．本システム
では，既存の Web ブラウザをインタフェースとして対象となる Web ページを閲覧した状態から直接配色を変更可能にすることでユーザの編集作業を軽減する．また，Web 上における色の作成は，現実に色を作成する方法とは異なり，経験の少ないユーザにとって困難である．本システムでは，デザイン経験の少ないユーザが感覚的に理解しやすいカラーモデルを用いることで色の決定を容易にする．また，調和した配色を Webページに適用することで，ユーザのイメージの具体化を支援し，配色決定を促す．
本稿では，第２章で本システムの概要，本システムの構成，および機能について述べる．第３章で調和配色の決定手法について説明する．第４章で Proxy エージェントに基づく応用例について説明し，最後に第５章で本研究をまとめる．

現代社会において，カラーハーモニーのある景観，道具類，包装紙，ポスター，およびプリント柄など多数の配色デザインを目にすることができる．このような身の回りのさまざまな場面において，色彩による調和感を得たデザインが存在しており，配色の重要性は高まりつつある．また，近年，インターネットの普及に従って，個人による Web ページ所有が増加し，世界に向けて情報発信，および世界からの情報取得など国境を越えた自由なコミュニケーションが行われている．個人が所有する Web ページは個人の個性がよく反映されたものが好ましく，Web ページにおける配色はレイアウトとともにデザインを決定づける重要な要素の一つであるといえる [1]．しかし，
Web ページの配色決定には HTML の知識および Web デザインに関する知識が必要であり，経験または知識の少ないユー
ザにとって自分のイメージ通りに Web ページを作成することは容易ではない．Web ページ配色作業の煩雑さのために Webページ作成を断念するユーザも少なくない．
Web ページ作成に関して，多機能のツールが多く存在している．しかし，これらは白紙の状態から「どんな色を用いるか」などといった決定は，ユーザ自身に委ねられている．イメージを具体化する場合，センスや専門知識の少ないユーザにとっては大きな負担である．もし，システムが完成された Web ページの配色情報を抽出し，ユーザの Web ページに適用することができれば，Web ページの配色にかかる労力は大幅に削減することができる．
配色に関する研究として，服のコーディネイトに対する配色支援を行う研究があるが [2]，ユーザとのやりとりでユーザの好みを獲得し，個人の感性に対応させている．また，ロゴマー
ク，タイトルおよびイラストといった画像を対象として，配色における支援手法が提案されている [6]．提案されている手法を用いることでユーザはデータベースから得られた画像の配色を自分の画像に反映させることが可能となる．また，個人的な

2.

Web ブラウザを用いた Web ページ調和
配色システムの試作

2.1

システムの概要

本システムは，既存の Web ブラウザ上から直接 Web ページに配色できるシステムである．通常，ユーザが Web ページに配色を行う際，ユーザはテキストエディタもしくはオーサリングツールを用いて HTML タグ毎に配色を決定することで，徐々に Web ページ全体の配色が完成に近づく．しかし，Webページが複雑になるにつれ，タグの数が増加し，同じ色を使用することも多くなり，一つずつ変更していく作業は煩雑となる．また，オーサリングツールのプレビュー機能を用いて作成した場合，Web ブラウザと表示が異なることがあるため，ユーザは編集・確認といった作業をする必要がある．本システ
ムでは，ユーザが普段使用している Web ブラウザを利用するため，確認の手間を省くことができる．
本システムでは，HTML タグ毎に配色するだけでなく，Web

連絡先: 早川潤一，名古屋工業大学大学院 情報工学専攻 新谷研究室，〒 466-8555 名古屋市 昭和区 御器所町 名古屋工業大学，TEL:(052)735-7968，FAX:(052)735-5477，
junbe@ics.nitech.ac.jp1

The 19th Annual Conference of the Japanese Society for Artificial Intelligence, 2005

図 1: システムの実行例

HTML タグを取得し，色属性を書き換えることで配色を変更する．以下に，色情報取得部，およびカラーモデル変換部の詳細について説明する．

ページ全体の配色を同時に変更可能である．本システムを用いることにより，ユーザは Web ページ全体のイメージを少ない手順で容易に変更することが可能となる．また，既存の配色チャート表では，いくつかのサンプル色についてのみの調和配色を提示するが，必ずしもユーザが求める配色が載っているとは限らない．本システムでは，ユーザの好きな色についての調和配色を Web ページの配色に適用する機能を実装した．
色を表現するカラーモデルに関しては，普段 Web ページの配色には赤，緑，および青の３色の組み合わせの RGB カラーモデルを用いる．RGB カラーモデルは３色を組み合わせて色を表現するため，デザイン経験の少ないユーザにとって思い通りに色を表現することは困難である．本システムでは，RGBカラーモデルを HSV カラーモデルに変換して色を表現する．
HSV カラーモデルとは，色相，彩度，および明度の色の三属性によって色を表現するカラーモデルである．色の三属性は人間の色知覚に基づいて構成されているため，直感的に色彩を扱うことが可能である．また，現代色彩調和論は色の三属性を基にして成り立っているため，調和した配色を扱う際にも有用であると言える．
本システムの実行例を図 1 に示す．ユーザは，図 1 に示す
ように，本システムによって Web ページに付与されたスライダバーを操作することで配色を変更する．スライダバーの属性として，色の三属性である色相，明度，および彩度を用いることでより感覚的に理解しやすく色の作成が行える．(1) の実行
画面上部にあるスライダバーのうち，明度のスライダバーを右に移動し，Web ページ全体の明度を上げると，(2) のように全体が明るくなる．また，(2) の灰色の背景部分をクリックすると，色情報を取得したウインドウが出現する．(3) のように出現したスライダバーを移動することで，クリックした部分の色だけが即座に変更可能となる．

2.2• 色情報取得部
色情報取得部は，HTML タグの色情報を取得し，変更された値へと書き換えを行う．各 HTML タグ，もしくはユーザが選択したタグから色情報を取得し，カラーモデル変換部に値を渡す．変換された値にユーザのスライダバー入力値を加え，再びカラーモデル変換部へと値を渡し，各タグの色情報を書き換えて Web ブラウザに反映させる．色情報の記述のない HTML タグについては，色情報の記述のあるタグまで再帰的にさかのぼることで取得する．
• カラーモデル変換部
カラーモデル変換部では，色の表現方法であるカラーモデルの変換を行う．本システムでは，ユーザが容易に色を表現できるように，HTML ソースから取得した RGB値を HSV 値に変換したものを利用する．変換式は以下のように求められる．
M ax = max(R, G, B)(1)

M in = min(R, G, B)(2)のとき，まず明度 (V)，および彩度 (S) が以下のように求められる．

V = M ax
S=M ax − M in
M ax

次に，色相 (H) が求められる．
8G−B>)> π3 × ( M ax−Min<システムの構成

配 色 シ ス テ ム の 構 成 を 図 2 に 示 す．配 色 シ ス テ ム は ，JavaScript お よ び CGI ス ク リ プ ト で 構 成 さ れ て い る ．
JavaScript で実装された配色変更機構は，主に Web ブラウ
ザからのユーザの配色変更要求を処理する．CGI で実装された機構は，HTML ソースへの配色変更機能の付加，および編集された Web ページの保存を行う．
配色変更機構は，色情報取得部．およびカラーモデル変換部で構成される．システムは，ユーザのスライダバー操作による配色変更要求を受け，HTML ソースから色属性の記述のある

B−R
H = π3 × (2 + M ax−M)in>>: π × (4 + R−G )3
M ax−M in

2.3

(3)
(4)

(M ax = R)
(M ax = G)(5)

(M ax = B)

本システムの機能

本システムには，配色の方法に合わせて，全体配色同時変更機能，選択部分変更機能，および調和配色表示機能の３つの機能が実装されている．

2

The 19th Annual Conference of the Japanese Society for Artificial Intelligence, 2005

図 2: システムの構成• 全体配色同時変更機能
Web ページ上部に付与されたスライダバーを移動すること
で Web ページ全体の色彩，明度，および彩度を同時に変化させる機能である．ユーザがスライダバーを移動すると，システ
ムは Web ページの色情報をすべて取得し，取得した色情報にスライダバー変化値を加えて Web ページの配色を変更する．
例えば，Web ページ全体の配色を明るくなどといった変更が容易に行うことが可能である．
• 選択部分変更機能
ユーザが選択した部分のみの配色を変更する．ユーザが配色を変更したい部分を選択することで，選択部分の色情報を取得したスライダバーがポップアップ表示される．ポップアッ
プ表示されたスライダバーを操作すると，選択した部分の配色変更が即座に反映され，変更と同時に確認を行うことが可能となる．
• 調和配色表示機能
ユーザが選択した部分の配色の決定を促すために，周りの色と調和した配色を表示する．本機能では，調和のとれた配色を 2 種類の求め方で実装した．一つ目は，実際にデザインの世界で広く使用され，デザイン活動で重要な役割を果たしている配色技法である．本システムでは，基本となる以下の２つの技法を実装した．

図 3: 配色モデル
得ることができる．明度と彩度を合わせもつものをトーンという．また，本稿では，ユーザのイメージする語に基づいて配色したものについても調和配色という．イメージ語とは，色のイメージを系統だて，人の感性を表す語のことである．例えば，「はなやか」「おだやか」「さわやか」などといった語である．

3.2

1. トーン・オン・トーン
赤系統，青系統でまとめるように，同系色相でまとめる技法．色みで統一し，トーンで変化をつける技法である．
例えば，樹木の葉に光が当たっている部分の色と影の色の関係である．
2. トーン・イン・トーン
淡い色調，あざやかな色調でまとめるように，トーンで統一し，色みで変化をつける技法である．各トーンがもつ感情性のイメージ化に有効な配色である．

4.

二つ目は，ユーザのイメージを直感的な感性語で表現し，調和配色を求める手法である．次節で詳細について説明する．

3.

イメージ語からの調和配色の決定

3.1

調和配色

調和配色の判定

本節では，イメージ語からの調和配色の求め方について詳しく説明する．本システムでは，まずユーザが配色の基準としたい HTML タグ，および配色のイメージを選択する．システ
ムは，ユーザが選択した色，およびイメージから最も条件と適合する３色の組み合わせを調和配色として提示する．
配色のイメージは，日本カラーデザイン研究所の提案するカラーイメージスケール，および言語イメージスケール [7] に基づいて，図 3 に示す配色モデルを作成した．図中の (1) は，各ノードの色を表し，H，S，V の３つの属性を持つ．(2) はノード間の関係を表す．2 色間の H，S，V 値の差を求めることで関係を表す．図 3 の Web ページの構造 A のように HTML タ
グの構造が包含関係であるものは，有向グラフで表現する．構造 B のように HTML タグの構造が同階層にあるものは無向グラフで表現する．構造 C のように包含関係かつ同階層であるものは，有向グラフおよび無向グラフを組み合わせて表現する．以上のようなモデルをカラーイメージスケールで定義されている語すべてについて作成した．システムははじめに，ユー
ザが選択した HTML タグの色が選択したイメージの配色モデルの中に存在するか判定する．存在するならば，結果をそのまま返す．存在しないならば，配色モデルのノード間の関係に基づき，各ノードの色を補正してユーザに返す．

Proxy エージェントを用いた応用例

本システムの特長は既存の Web ブラウザ上で動作する点である．Web ブラウザは最も広まっている Web アプリケーションであるので，Web ブラウザをインタフェースとしたシステムは有用であると言える．そこで，本研究室で開発されたモバイルエージェント構築環境である MiLog[8] を用いた本システムの応用について述べる．MiLog エージェントは WWW サーバ機能を持っており，Web ブラウザからエージェントを操作することが可能である．本研究では Web プロキシサーバ機能を持ったエージェントとして Proxy エージェントを実装した．

調和配色とは，色彩調和のとれた配色をいう．色彩調和とは2 色以上の色を組み合わせて，色彩のバランス，美しさ，または心地よさを作り上げていくことである．色彩調和論を参考にして，色相に関しての共通性，および対照性，明度と彩度に関しての共通性，および対照性をもたせることで調和した配色を3

The 19th Annual Conference of the Japanese Society for Artificial Intelligence, 2005の決定，HTML ファイルの編集，および再読み込みといったユーザの配色決定までに要する試行錯誤のプロセスの繰り返しを軽減し，容易に Web ページデザインを決定することが可能となる．ユーザ入力にスライダバーを用いているため，細かな色の選択が可能であり，色の移り変わりを視覚的に理解しやすいという利点もある．また，本システムは，ユーザのイメージを直感的な感性語で表現し，調和配色を適用することでデザイン経験の少ないユーザの配色決定を支援することが可能である．今後の課題として，３色以上の組み合わせによる調和配色の決定手法，および色の組み合わせに面積を考慮した手法の考察が挙げられる．

参考文献
図 4: Proxy エージェントを用いたシステムの構成[1] N.Murayama, S.Saito, and M.Okumura, ”Are web
pages characterized by color?”, The 13th International
World Wide Web Conference, 2004.

Proxy エージェントはユーザの Web ページの閲覧要求に応じて，Web ブラウザと WWW サーバを仲介し，WWW サーバから HTML ソースを取得する．システムの構成を図 4 に示す．

4.1[2] 藤林 俊彦, 徳丸 正孝, 村中 徳明, 今西 茂, ”Virtual Stylist
Project −色彩調和を考慮した配色支援システムについて−”, 電子情報通信学会技術研究報告, HIP2002-44, pp.712, 2002.12.

Proxy エージェントによる作成支援

通常初心者にとっては自分の思い通りのデザインの Web ページを作成することは容易ではない．思い通りのデザインを実現するためには，デザインの知識，および HTML の知識が必要とされる．初心者にとって，白紙の状態から完成されたデザインを完成されることは難しい．既存の Web ページの作成ツールは完成された Web ページの作成を目的としており，Web ページのイメージができあがっていないユーザの作業には向いていない．
本節では，ユーザが閲覧している Web ページの色情報を取得し，作成中の Web ページへ反映させるシステムを提案する．
閲覧している Web ページの色情報を取得するために，本システムをサーバ上に設置することで，同一のサーバ上に置かれている HTML ファイルを Web ブラウザ上から編集することができる．そのため，Proxy エージェントにより取得した HTMLに配色変更機構を付加して，Web ブラウザに表示させることにより，色情報の変更・取得を実現する．取得した色情報をテンプレートとして，作成中の Web ページへと適用する．ユー
ザは既に完成された Web ページの配色を適用することができるため，より簡単に配色を決定することができる．

4.2[3] 徳丸 正孝, 村中 徳明, 今西 茂, ”配色イメージ判定における個人差を考慮したシステム構築の試み”, 電子情報通信学会論文誌, Vol.J84-D-II, No.4, pp.688-698, 2001.4.
[4] 諸原雄大, 近藤邦雄, 島田静雄, 佐藤尚, ”テキスタイルデザイン画像におけるイメージカラーの選定法”, 情報処理学会論文誌, Vol. 36, No.2 pp.329-337, 1995.2.
[5] 市野順子, 田野俊一, ”デザイン描画を支援するユーザイ
ンタフェース”, 電子情報通信学会論文誌, Vol. J82-D-II,
No. 10, pp. 1693-1709, 1999,10.
[6] 賀川 経夫, 西野 浩明, 宇津宮 孝一, ”配色に基づくデザイン支援ツールに関する一考察”, 電子情報通信学会技術研究報告, HIP, pp.1-6, 2002.12.
[7] 小林重順, ”カラーイメージスケール”, 講談社 1995.
[8] N.Fukuta, T.Ito, and T.Shintani, ”MiLog: A Mobile
Agent Framework for Implementing Intelligent Information Agents with Logic Programming”, PRIIA2000,
pp.113-123, 2000.

Proxy エージェントによる色彩調和判定

本システムでは，ユーザのイメージを表した感性語に基づく調和配色機能を実装した．調和配色機能は，イメージ語を選択し，調和配色を得ることが可能であるが，逆の手順を踏むことで，Web ページの配色がどのようなイメージであるか判定することが可能となる．Proxy エージェントによって，ユーザが閲覧している Web ページの色情報を取得し，取得した配色を配色モデルに適用させ，最も適合するイメージの語をユーザに表示する．そのため，既に完成された Web ページ，もしくは本システムを使用せずに作成した Web ページのイメージを判定することが可能となる．

5.

まとめ

本研究では，既存の Web ブラウザをインタフェースとして，Web ページの配色を作成・変更できるシステムを実装した．本
システムを用いることによって，ユーザは普段を使用しているWeb ブラウザ上で Web ページの配色を容易に変更することが可能である．Web ページの配色が即座に反映されるため，色4