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.

sighci169_hikawa

321 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

sighci169_hikawa

  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. 装飾モードの追加

×