Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

776 views

Published on

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

Published in: Entertainment & Humor
  • Be the first to comment

  • Be the first to like this

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

  1. 1. ウェブ上のコンテンツに対する 視覚的装飾手法の提案 松田滉平(明治大学B3/JST CREST) 中村聡史(明治大学/JST CREST) HCGシンポジウム 2015/12/16
  2. 2. URLを用いたコンテンツ共有 様々なSNSでURLベースの コンテンツの共有が行われている
  3. 3. URLを用いたコンテンツ共有 ここの料理こんな風にうまかった! http://ryori.co.jp/kushiage 今度行ってみようかな 既存のコンテンツに自身の 意図を込めて他者と共有したい
  4. 4. 背景 •コミックで使用される効果線 - 集中線 - たれ線 - スピード線(流線) 表情付けやインパクトを 出すのに効果的
  5. 5. 関連研究 •エフェクト(集中線など)はコンテンツの面白 さや状況の把握し易さを増幅可能 - ライブカメラに漫画的手法[高橋ら 2007]
  6. 6. 目的 •ウェブ上の任意のマルチメディアコンテンツ を装飾 •装飾したコンテンツを他の人と共有 自分好みにウェブ上のコンテンツに 装飾を付与して演出を可能にする
  7. 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. 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. 9. 装飾IDのURLへの埋め込み •HTMLのハッシュ要素を利用 -ハッシュ要素: ページ内の場所を指定 - http://example.jp/test.html#deco_id=AAAAA - http://example.jp/test.html#deco_id=BBBBB •システムを導入している場合 - ハッシュ要素のIDを利用してサーバに問い合わせし, 装飾データを読み込む •システムを導入していない場合 - 装飾なしのオリジナルのページにアクセス 別々の 装飾
  10. 10. プロトタイプシステム •ブラウザ(Chrome)拡張で実装 •使用言語(スクリプトを含む) - JavaScript/jQuery/P5.js/PHP/MySQL
  11. 11. デモ •ウェブ上の任意の画像に装飾を付与 - 印象を付与して相手に伝える
  12. 12. プロトタイプシステムの試用 •実際にシステムを利用し,コンテンツを装飾 してもらった -8名が22件の動画に対して装飾 -4名が26件のウェブページの画像に対して装飾
  13. 13. ユーザフィードバック •手軽に装飾を付与出来て面白い •もっとエフェクトが欲しい • 現状はマイナス面の装飾が多い • キラキラしたエフェクトなどのように,プラスに見せるエ フェクトが欲しい •画像や動画の全体ではなく,一部に対して エフェクトを付与したい
  14. 14. •「集中線」の使用頻度が高い -動画のシーンやページの注目部分の表現に利用 -集中線のパターンを増やすことが重要? •静的な画像への動的な装飾の面白さ -動きによって画像を際立たせることが可能 考察(装飾コンテンツから)
  15. 15. •コンテンツとエフェクトの相性 - 装飾によって画像や動画が見えづらくなる -エフェクトのパラメータ変更の必要性 •印象をエフェクトで表現 - 文章よりも自身の気持ちに近い表現 考察(装飾コンテンツから)
  16. 16. 装飾手法の応用 •ウェブコミックにおけるコマ識別が可能にな るとコマ単位で装飾可能に
  17. 17. 装飾手法の応用 •ウェブ画像・動画への自動装飾の可能性 • 膨大なコミックでの効果線情報を収集&学習 ウェブページの コンテンツに 適した装飾
  18. 18. 装飾手法の応用 •ユーザの嗜好に合わせたサイト - ユーザが気に入る商品を強調するよう自動装飾 •将来的にスタイルシートの一部として - CSSの表現の一部として記述することで手軽に装飾 Img.example1{ decoby : focus_line; }
  19. 19. まとめ •ウェブ上の任意のマルチメディアコンテンツ に対して視覚的装飾を付与する手法の提案 •装飾したコンテンツを共有する仕組み •今後の課題 - ウェブコミックへの応用 -エフェクトを増やす仕組み -エフェクトによる印象実験

×