WISS2005

Willustrator: Web 上での協同イラストレーション
Willustrator: Cooperative Illustration on the Web

神原 啓介

安村 通晃∗

Summary.
A lot of information is exchanged and shared on the Web. Now it is easy to write texts and upload
photoes by using Blog or Wiki. But when we edit and publish illustrations, it requires many processes,
for example using a graphics software on a PC, converting to PNG or JPEG, uploading image ﬁles to aserver and managing them. In addition, it is diﬃcult to edit other people’s illustrations, because generally
ﬁles in original formats are not on the Web.
We want to edit illustrations more easily like using Blog or Wiki, because there are informations thatcan be expressed better using illustrations. We propose a web-based drawing tool called Willustrator.
A user can publish images more easily, reuse other people’s images and draw images co-operationg withothers.

1

はじめにWeb を利用して誰でも手軽に情報発信や共有ができるようになってきた. とりわけ Blog や Wiki,古くは掲示板といったシステムを使うことで文字情報のやりとりや写真のアップロードは簡単になった.
しかし文字や写真と異なり, イラストや図を Web上で公開/共有するには, 「PC 上のツールで画像を作成」「PNG や JPEG 形式に変換」「サーバにアップロード」「元のファイルを管理」といった手間がかかる. そのため Web 上で編集できる Blog や Wiki,NOTA[1] と比べて敷居が高く, 繰り返し編集するのが面倒である. お絵かき掲示板などで用いられている Web 用のペイントツールもあるが, それらの出力するラスター画像はテキストやベクター画像と再編集が難しい.
また, PNG や JPEG は公開されても, その元のファイル (Photoshop や Illustrator 形式のファイルなど) はあまり公開されないため, 他の人の描いた絵や図を再編集・再利用が難しいという問題もある.
イラストや図を利用することで, 情報をより効果的に伝えることができるため, Web 上でももっと手軽に利用したい. そこで本論文では, Web 上で絵や図 (ベクター画像) を描けるようにすることで,他の人の絵を再利用したり, Wiki のように協同で絵を描くことのできる Web に適したドローツール
Willustrator(ウィラストレーター) を紹介する.

∗c 2005 日本ソフトウェア科学会 ISS 研究会．
Keisuke Kambara, 慶應義塾大学 大学院 政策・メディア研究科, Michiaki Yasumura, 慶應義塾大学 環境情報学部

図 1. ホーム画面

2

Willustrator

2.1 利用手順
Willustrator でユーザー登録を行いログインすると自分の絵を描けるようになる. ただしユーザー登録やログインをしなくても匿名ユーザーとして絵を描くこともできる. 匿名ユーザーの描いた絵は Wikiと同様に誰でも編集や削除ができる.
ホーム画面 (図 1) には絵の一覧が表示され, ここから新しい絵を作成したり, すでにある絵を再編集したりする. またタグを使って分類表示することもできる.

図 2. Willustrator で描かれたイラストの例

WISS 2005

を生成している. 基本的なシステムは CGI で動作しており, 画像の編集部分 (図 3) に Flash を使用している. SVG のパース/レンダリング/編集/生成処
理は Flash 側で行われる.

3

議論

本システムは以下のような使い方に適していると考えられる.

• Blog の記事などでちょっとした図の作成

図 3. 編集画面• Wiki のように何度も更新する絵や図編集画面 (図 3) では直線, 楕円, ベジェ曲線といった描画ツールや, レイヤー機能といったドローツールの基本的な機能を備えている. 保存ボタンを押すことで SVG および PNG 画像が生成/保存される.

• 他の人と共有する絵や図, クリップアート, 地

2.2

Web 上に絵があることで, トラックバックのようタグによる分類

絵にはキーワードでタグを複数つけて分類/管理できる (図 4).

図 4. タグ

タグを使うことで自分の絵を管理しやすくなるだ
けでなく, 他人と協同でシステムを利用する上でも役に立つ. Willustrator のトップページでは全ユーザーのタグが一覧でき, 色々な人が描いたイラストをクリップアートや Web 素材集として使うこともできる.
タグで完全な分類をすることは難しいが, 全ての絵を分類する管理者がいなくても, 個人個人が自分の管理に利用しているだけで自然と全体の分類も行われるというメリットがある.
タグを使って多人数で分類する仕組みは Folksonomy と呼ばれ, ソーシャルブックマークサービスのdel.icio.us[2] や写真共有サービスの Flickr[3] など多くのサービスで導入されつつある.
また, 各ユーザーの自然な行動によって気軽に有益な情報共有/交換ができる「控えめな情報共有」というコンセプトが増井によって提案されている [4].
本システムでも「控えめな情報共有」と同様に, 個人が単独で絵を描けるだけでなく, 多人数で一つのシステムを利用することでさらに便利な描き方や使い方ができるようになることを目指している.

2.3

実装

画像の形式としてベクター図形を XML で記述できる SVG を用いた. ただし一般的なブラウザは現在のところ標準で SVG を表示できないため, Webページで利用しやすいように SVG から PNG 画像

図• 色やサイズのバリエーションが欲しい絵に「この絵がどの絵に利用されたか」というつながりを辿れる仕組みを作ることもできる. このように本システムでは画像のソースが公開されているために, それを誰かが再利用したり, あるいは絵を改良してくれるかもしれないというオープンソース的, コミュニティ的な画像の利用が進むことが考えられる.
またキャラクターや製品の図案を募集するといった, 画像をうまく利用した新しいコミュニケーションも可能になると考えている.

3.1 課題PC 上のグラフィックソフトウェアと比較して機能が大きく不足していることが最大の課題である.
今後も継続して機能強化を行いたい.
本システムの特徴として Blog や Wiki といった他のサービスと共に使うことで効果を発揮するため,それらのサービスとの連携を高める必要がある.
また, 画像を利用/複製する際の著作権についてクリアにする必要があると考えている.

4

まとめWeb 上でベクター画像の絵や図を手軽に編集/管理できるシステム Willustrator を提案した. Willustrator を利用することで, これまで難しかった Wikiのような絵の協同編集や, 他の人のイメージソースを再利用するといったことが可能になることを示した.

参考文献[1] NOTA. http://rakusai.org/nota/.
[2] del.icio.us. http://del.icio.us/.
[3] Flickr. http://www.ﬂickr.com/.
[4] 増井 俊之. 本棚通信：控えめなグループコミュニ
ケーション. インタラクション 2005 論文集, pp.135142, February 2005.