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

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

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

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

• http://ryori.co.jp/kushiage

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

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

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

サーバ データベース 装飾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

• http://example.jp
• http://example.com

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

• http://example.jp
• http://example.com

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

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

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

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

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

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

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

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

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

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

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