1.
ウェブ上のコンテンツに対する
視覚的装飾手法の提案
松田滉平（明治大学B3/JST CREST）
中村聡史（明治大学/JST CREST）
HCGシンポジウム
2015/12/16

2.
URLを用いたコンテンツ共有
様々なSNSでURLベースの
コンテンツの共有が行われている

3.
URLを用いたコンテンツ共有
ここの料理こんな風にうまかった！
http://ryori.co.jp/kushiage
今度行ってみようかな
既存のコンテンツに自身の
意図を込めて他者と共有したい

4.
背景
•コミックで使用される効果線
- 集中線
- たれ線
- スピード線(流線)
表情付けやインパクトを
出すのに効果的

5.
関連研究
•エフェクト（集中線など）はコンテンツの面白
さや状況の把握し易さを増幅可能
- ライブカメラに漫画的手法[高橋ら 2007]

6.
目的
•ウェブ上の任意のマルチメディアコンテンツ
を装飾
•装飾したコンテンツを他の人と共有
自分好みにウェブ上のコンテンツに
装飾を付与して演出を可能にする

7.
サーバ
装飾ID付きURLを伝える
ユーザA ユーザB
装飾ID URL 装飾データ装飾ID URL 装飾データ
#deco_id=AAAAA http://example.jp [{“mode”:[1],”img_src”
:[http://sample1.jpg]}]
装飾ID URL 装飾情報
#deco_id=AAAAA http://example.jp [{“mode”:[1],”img_src”
:[http://sample1.jpg]}]
#deco_id=BBBBB http://example.com [{“mode”:[3],”img_src”
:[http://sample2.jpg]}]
データベース
装飾
情報

8.
装飾情報
•装飾ページURL
•装飾ID（一意に装飾を識別）
•装飾記述
• 装飾パターン ＋ ページ内の画像情報
• 装飾パターン ＋ 動画の装飾開始および終了時間
装飾ID
#deco_id=AAAAA
#deco_id=BBBBB
サイトのURL
http://example.jp
http://example.com
エフェクトの種類
deco_mode=12
画像： 画像のURL
URL_src=http://～
動画： 装飾指定時間

9.
装飾IDのURLへの埋め込み
•HTMLのハッシュ要素を利用
-ハッシュ要素： ページ内の場所を指定
- http://example.jp/test.html#deco_id=AAAAA
- http://example.jp/test.html#deco_id=BBBBB
•システムを導入している場合
- ハッシュ要素のIDを利用してサーバに問い合わせし，
装飾データを読み込む
•システムを導入していない場合
- 装飾なしのオリジナルのページにアクセス
別々の
装飾

10.
プロトタイプシステム
•ブラウザ(Chrome)拡張で実装
•使用言語(スクリプトを含む)
- JavaScript/jQuery/P5.js/PHP/MySQL

11.
デモ
•ウェブ上の任意の画像に装飾を付与
- 印象を付与して相手に伝える

12.
プロトタイプシステムの試用
•実際にシステムを利用し，コンテンツを装飾
してもらった
-8名が22件の動画に対して装飾
-4名が26件のウェブページの画像に対して装飾

13.
ユーザフィードバック
•手軽に装飾を付与出来て面白い
•もっとエフェクトが欲しい
• 現状はマイナス面の装飾が多い
• キラキラしたエフェクトなどのように，プラスに見せるエ
フェクトが欲しい
•画像や動画の全体ではなく，一部に対して
エフェクトを付与したい

14.
•「集中線」の使用頻度が高い
-動画のシーンやページの注目部分の表現に利用
-集中線のパターンを増やすことが重要？
•静的な画像への動的な装飾の面白さ
-動きによって画像を際立たせることが可能
考察（装飾コンテンツから）

15.
•コンテンツとエフェクトの相性
- 装飾によって画像や動画が見えづらくなる
-エフェクトのパラメータ変更の必要性
•印象をエフェクトで表現
- 文章よりも自身の気持ちに近い表現
考察（装飾コンテンツから）

16.
装飾手法の応用
•ウェブコミックにおけるコマ識別が可能にな
るとコマ単位で装飾可能に

17.
装飾手法の応用
•ウェブ画像・動画への自動装飾の可能性
• 膨大なコミックでの効果線情報を収集＆学習
ウェブページの
コンテンツに
適した装飾

18.
装飾手法の応用
•ユーザの嗜好に合わせたサイト
- ユーザが気に入る商品を強調するよう自動装飾
•将来的にスタイルシートの一部として
- CSSの表現の一部として記述することで手軽に装飾
Img.example1{
decoby : focus_line;
}

19.
まとめ
•ウェブ上の任意のマルチメディアコンテンツ
に対して視覚的装飾を付与する手法の提案
•装飾したコンテンツを共有する仕組み
•今後の課題
- ウェブコミックへの応用
-エフェクトを増やす仕組み
-エフェクトによる印象実験