ウェブ上の画像に対する解説アニメーション付与システムの提案

>100 Views

September 05, 16

スライド概要

ウェブ上の画像に対する解説アニメーション付与システムの提案

profile-image

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

シェア

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

各ページのテキスト
1.

ウェブ上の画像に対する 解説アニメーション付与システム提案 樋川 一幸 (明治大学総合数理学部3年) 松田 滉平 中村 聡史 (明治大学総合数理学部)

2.

デモ

3.

HOWTOに関するページ

4.

HOWTOに関するページ

5.

HOWTOに関するページ

6.

背景 HOWTOページ - 画像とテキスト両方の理解が必要 例:英語が苦手な人

7.

画像にアニメーションを付与 アニメーションならわかりやすい!

8.

関連研究: 装飾付与に関する研究 面白さなどの印象付与 Decoby [松田 2015]

9.

関連研究: 操作支援に関する研究 ブラウザ上での操作を 記録し,習慣的操作の軽減 [椿 2011] 操作ログを利用し,支援が 必要と判断される場面を 検出してハイライト表示 [中村 2009]

10.

想定されるシチュエーション パソコン操作関係のHOWTO - 家族にSkypeのインストールの方法を教えたい ページや動画を作ればいいのでは? - 生徒に授業で使うツールのダウンロード方法を教えたい 操作手順を教えたい わざわざ作るのは面倒なので - 友達にYouTubeの動画の投稿の仕方を教えたい 元からあるコンテンツを再利用!! 道順や経路を教えたい

11.

目的 • HOWTOページにアニメーション付与 • アニメーションを他人と共有 HOWTOページをわかりやすくする手法を実現

12.

提案システム

13.

共有システム URLとハッシュ値を利用した共有 http://example.jp #ID=XXXXX ハッシュ値

14.

共有システム データベース アニメーションID URL アニメーション情報 AAAAA http://example.jp 画像のID,モード情報,座標情報 XXXXX アニメーションID http://example.com 画像のID,モード情報,座標情報 アニメーション情報 URL

15.

装飾:カーソルモード

16.

装飾:指モード

17.

装飾:足跡モード

18.

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

19.

デモ • 操作方法 • 装飾モードについて

20.

利用実験 システムの使用感の検証 家族に対して説明するシチュエーション - 14名に対して22ページを装飾してもらった - パソコン上の操作 10ページ - スマートフォン上の操作 5ページ - 地理や経路 7ページ - システムの感想を書いてもらう

21.

結果:アンケートの意見 • 視覚的にわかりやすくなった • 手軽で使いやすかった • 順番を示すことができる点が便利 • クリック以外の操作が表現しづらい - ダブルクリック - スワイプなど

22.

結果:特徴的な装飾 ぐるぐると囲むような装飾

23.

結果:特徴的な装飾 指でなぞる装飾

24.

結果:特徴的な装飾 迂回する経路 通常 迂回

25.

考察:システムの利点 • 苦手な言語のページでもアニメーション なら理解が可能 • ユーザ同士ならではの装飾が可能 - 住んでいる場所からの経路 - おすすめの経路 - 相手の環境に合わせた操作方法

26.

考察:システムの欠点 • 操作アニメーションがクリックのみなので表 現に限界がある • 元々画像がないページには何もできない

27.

まとめ http://hikawa.nkmr.io • HOWTOに関するページに対して 操作アニメーションを付与する手法の提案 • アニメーションを共有する仕組みの実現 今後の課題 -記録可能な操作パターンの追加 -スマホや他のブラウザ上でアニメーションを 閲覧できる仕組み -装飾モードの追加

28.

装飾モードの追加

29.

装飾モードの追加