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.

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

494 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

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

×