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.

of

Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 1 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 2 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 3 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 4 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 5 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 6 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 7 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 8 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 9 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 10 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 11 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 12 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 13 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 14 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 15 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 16 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 17 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 18 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 19 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 20 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 21 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 22 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 23 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 24 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 25 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 26 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 27 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 28 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 29 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 30 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 31 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 32 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 33 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 34 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 35 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 36 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 37 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 38 Deconaby: ウェブ上の画像に対する解説アニメーション付与システム Slide 39
Upcoming SlideShare
WePatch:ユーザの手によるBADUI改善システム
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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

  1. 1. Deconaby:ウェブ上の画像に対する 解説アニメーション付与システム 樋川 一幸 (明治大学総合数理学部3年) 松田 滉平 中村 聡史 (明治大学総合数理学部)
  2. 2. デモ https://blog.codecamp.jp/hidemaru
  3. 3. HOWTOページがわかりづらいパターン 1. 文章がわかりづらい 2. 画像がわかりづらい 3. 文章と画像の対応がわかりづらい 背景
  4. 4. HOWTOページ - 画像とテキスト両方の理解が必要 背景
  5. 5. HOWTOページ - 画像とテキスト両方の理解が必要 背景 例:用語がわからない人 プラグイン ディレクトリ 環境変数 ドライブ OS
  6. 6. HOWTOページ - 画像とテキスト両方の理解が必要 背景 例:英語が苦手な人 Hello
  7. 7. HOWTOページ - 画像とテキスト両方の理解が必要 背景 例:フランス語が苦手な人 Bonjour
  8. 8. HOWTOページ - 画像とテキスト両方の理解が必要 背景 例:オランダ語が苦手な人 Goede middag
  9. 9. HOWTOページ - 画像とテキスト両方の理解が必要 背景 例:アラビア語が苦手な人 ‫السالم‬‫عليكم‬
  10. 10. 想定されるシチュエーション パソコン操作関係のHOWTO - 家族にSkypeのインストールの方法を教えたい - 生徒に授業で使うツールのダウンロード方法を教えたい 操作手順を教えたい - 友達にYouTubeの動画の投稿の仕方を教えたい 道順や経路を教えたい ページや動画を作ればいいのでは? わざわざ作るのは面倒なので 元からあるコンテンツを再利用!!
  11. 11. 目的 •HOWTOページにアニメーション付与 •アニメーションを他人と共有 HOWTOページをわかりやすくする 手法を実現
  12. 12. 画像にアニメーションを付与 アニメーションならわかりやすい!
  13. 13. 提案システム
  14. 14. 実装 ブラウザ(Chrome)拡張で実装 使用言語(スクリプトを含む) -JavaScript/jQuery/P5.js/PHP/MySQL http://deconaby.club/ ダウンロードはこちら Deconabyで検索! または
  15. 15. 装飾:カーソルモード
  16. 16. 装飾:指モード
  17. 17. 装飾:足跡モード
  18. 18. 共有手法 URLとハッシュ値を利用した共有 http://example.jp #ID=XXXXX ハッシュ値
  19. 19. 実験 システムの有用性の検証 25件 10人 25件 500件の データ!! ページのわかりやすさを5段階(-2~+2)で評価
  20. 20. No. なし あり 4 -1.2 -0.4 9 -0.25 0.6 10 -0.4 0 21 -0.8 -0.2 23 -0.8 -0.2 25 -0.6 0.8 28 -0.6 -0.6 33 -0.6 0.6 38 -0.4 0 41 -0.8 -0.4 44 -1 0.2 46 -0.8 -0.6 48 -1.4 -0.4 49 -1 1.6 平均 -0.76 0.071 14件中13件の わかりやすさが増加 わかりにくいページは アニメーション付与 により改善! 装飾ありとなしの平均点に 有意な差が認められた 装飾なしの評価の平均点が負となるページの結果
  21. 21. 考察:特徴的な装飾 ぐるぐると囲むような装飾
  22. 22. 考察:特徴的な装飾 指でなぞる装飾
  23. 23. 考察:特徴的な装飾 迂回する経路 迂回通常
  24. 24. 考察:システムの利点 • ユーザ同士ならではの装飾が可能 -おすすめの経路 -住んでいる場所からの経路 -相手の環境に合わせた操作方法 • ユーザの苦手な言語のページでも アニメーションでなら理解が可能
  25. 25. 考察:システムの欠点 • 操作アニメーションがクリックのみな ので表現に限界がある • HOWTOページが見つからないと 何 もできない
  26. 26. 応用:Gyazoでの利用 HOWTOページが見つからなくても アニメーション付きの画像を共有可能
  27. 27. 応用:ゲームのマップ
  28. 28. 応用:学習支援
  29. 29. 応用:一筆書き
  30. 30. 応用:文字の書き順を示す
  31. 31. 応用:装飾モードの追加
  32. 32. まとめ • HOWTOに関するページにアニメーションを 付与する手法の提案 • アニメーションを共有する仕組みの実現 今後の課題 -記録可能な操作パターンの追加 -スマホや他のブラウザ上でアニメーショ ンを閲覧できるサービスの実装 http://deconaby.club/
  33. 33. 関連研究 [Marcel 2009] オンラインでリアルタイムに文 章や手書きを共有 ブラウジングを同期し て支援 [中村 2010]
  34. 34. 関連研究 グラフィカルなアノテーション付与 [Giordano 2005]
  35. 35. 関連研究 Decoby [松田 2015]
  36. 36. 関連研究 ブラウザ上での操作を 記録し,習慣的操作の軽減 [椿 2011] 操作ログを利用し,支援が必要 と判断される場面を検出してハ イライト表示 [中村 2009]
  37. 37. 実験結果 50件全体 ジャンル内訳 • PC操作 20件 • スマホ操作 12件 • 地図 5件 • その他 13件 結果 平均 なし0.218点 あり0.51点 対応のないt検定 t(98)=2.06, p=0.04
  38. 38. No. なし あり 4 -1.2 -0.4 9 -0.25 0.6 10 -0.4 0 21 -0.8 -0.2 23 -0.8 -0.2 25 -0.6 0.8 28 -0.6 -0.6 33 -0.6 0.6 38 -0.4 0 41 -0.8 -0.4 44 -1 0.2 46 -0.8 -0.6 48 -1.4 -0.4 49 -1 1.6 平均 -0.76 0.071 ジャンル内訳 組み立て 4 PC操作 9,10,21,23,25,28,44,46 スマホ操作 33 地図 38,49 迷路 41 フローチャート 48 うち外国語 48,49 t(19)=4.40, p=0.0003 装飾なしの評価の平均点が負となるページの結果
  39. 39. 実験協力者の平均点 協力者 なし あり A -0.28 0.72 B -0.16 0.28 C 0.56 1.16 D -0.04 1.04 E 0.72 0.24 F 1 0.68 G 0.32 -0.24 H -0.08 0.44 I 0.48 0.36 J -0.4 0.48 平均 0.212 0.516

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

Views

Total views

540

On Slideshare

0

From embeds

0

Number of embeds

179

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×