ウェブ上の画像に対する解説アニメーション付与システムの提案
207 Views
September 05, 16
スライド概要
ウェブ上の画像に対する解説アニメーション付与システムの提案
明治大学 総合数理学部 先端メディアサイエンス学科 中村聡史研究室
関連スライド
各ページのテキスト
ウェブ上の画像に対する 解説アニメーション付与システム提案 樋川 一幸 （明治大学総合数理学部3年） 松田 滉平 中村 聡史 （明治大学総合数理学部）
デモ
HOWTOに関するページ
HOWTOに関するページ
HOWTOに関するページ
背景 HOWTOページ - 画像とテキスト両方の理解が必要 例：英語が苦手な人
画像にアニメーションを付与 アニメーションならわかりやすい！
関連研究： 装飾付与に関する研究 面白さなどの印象付与 Decoby [松田 2015]
関連研究： 操作支援に関する研究 ブラウザ上での操作を 記録し，習慣的操作の軽減 [椿 2011] 操作ログを利用し，支援が 必要と判断される場面を 検出してハイライト表示 [中村 2009]
想定されるシチュエーション パソコン操作関係のHOWTO - 家族にSkypeのインストールの方法を教えたい ページや動画を作ればいいのでは？ - 生徒に授業で使うツールのダウンロード方法を教えたい 操作手順を教えたい わざわざ作るのは面倒なので - 友達にYouTubeの動画の投稿の仕方を教えたい 元からあるコンテンツを再利用！！ 道順や経路を教えたい
目的 • HOWTOページにアニメーション付与 • アニメーションを他人と共有 HOWTOページをわかりやすくする手法を実現
提案システム
共有システム URLとハッシュ値を利用した共有 http://example.jp #ID=XXXXX ハッシュ値
共有システム データベース アニメーションID URL アニメーション情報 AAAAA http://example.jp 画像のID,モード情報,座標情報 XXXXX アニメーションID http://example.com 画像のID,モード情報,座標情報 アニメーション情報 URL
装飾：カーソルモード
装飾：指モード
装飾：足跡モード
実装 ブラウザ（Chrome）拡張で実装 使用言語（スクリプトを含む） -JavaScript/jQuery/P5.js/PHP/MySQL
デモ • 操作方法 • 装飾モードについて
利用実験 システムの使用感の検証 家族に対して説明するシチュエーション - 14名に対して22ページを装飾してもらった - パソコン上の操作 10ページ - スマートフォン上の操作 5ページ - 地理や経路 7ページ - システムの感想を書いてもらう
結果：アンケートの意見 • 視覚的にわかりやすくなった • 手軽で使いやすかった • 順番を示すことができる点が便利 • クリック以外の操作が表現しづらい - ダブルクリック - スワイプなど
結果：特徴的な装飾 ぐるぐると囲むような装飾
結果：特徴的な装飾 指でなぞる装飾
結果：特徴的な装飾 迂回する経路 通常 迂回
考察：システムの利点 • 苦手な言語のページでもアニメーション なら理解が可能 • ユーザ同士ならではの装飾が可能 - 住んでいる場所からの経路 - おすすめの経路 - 相手の環境に合わせた操作方法
考察：システムの欠点 • 操作アニメーションがクリックのみなので表 現に限界がある • 元々画像がないページには何もできない
まとめ http://hikawa.nkmr.io • HOWTOに関するページに対して 操作アニメーションを付与する手法の提案 • アニメーションを共有する仕組みの実現 今後の課題 -記録可能な操作パターンの追加 -スマホや他のブラウザ上でアニメーションを 閲覧できる仕組み -装飾モードの追加
装飾モードの追加
装飾モードの追加