ウェブ上のコンテンツに対する視覚的装飾手法の提案

179 Views

February 08, 16

スライド概要

HCGシンポジウム2015のオーガナイズドセッション(コミック工学)にて発表した内容となっています。

profile-image

明治大学 総合数理学部 先端メディアサイエンス学科 中村聡史研究室

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
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.

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

8.

サーバ データベース 装飾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]}] 装飾 情報 装飾ID付きURLを伝える ユーザA ユーザB

9.

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

10.

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

11.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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