NAIST-IS-MT0851057

修士論文

拡張現実感を用いた
マルチメディア付箋システム

鈴木 可奈

2010 年 3 月 17 日

奈良先端科学技術大学院大学
情報科学研究科 情報システム学専攻

本論文は奈良先端科学技術大学院大学情報科学研究科に修士 (工学) 授与の要件として提出した修士論文である。
鈴木 可奈

審査委員：
横矢 直和 教授

（主指導教員）加藤 博一 教授

（副指導教員）山澤 一誠 准教授

（副指導教員）拡張現実感を用いたマルチメディア付箋システム∗
鈴木 可奈

内容梗概
付箋は一時的な予定の管理やメモ書きとして日常的に活用されているアイテム
であり，近年その直観性・操作性を模倣した PC 上で動作する電子的な付箋アプ
リケーションやシステムが開発されている．電子的な付箋システムは，従来の紙媒体の付箋にある「紙にペンで書ける内容などの，限られた情報の記録をすることにとどまる」という点に対し，マルチメディアに対応できる利点がある一方，ユーザインタフェースの面で一覧性や直観性が紙媒体に比べ劣るものが多い．そこで本研究では，電子的な付箋の利点である文字・画像・音声・動画・URL などのマルチメディアへの対応と，紙媒体の付箋の利点である一覧性や直観的な操作
感を，拡張現実感（AR）を用いて融合するシステムを構築する．マルチメディア
情報の管理はブログシステムを採用することにより，閲覧・編集を簡単に行えるようにし，紙の付箋にマーカとして QR コードを描くことで，ブログデータベー
スへのアクセスを容易にする．このシステムにより，ユーザは紙媒体の付箋と同じように実環境に付箋を貼ることができ，カメラ付きモバイル PC を通し，実環境上に重畳表示されたマルチメディア情報を閲覧・編集することで，文字・画像・
音声・動画・URL などを用いて効率的にメモを残すことが可能となる．最後に，実験により構築した提案システムの有用性を分析し，ユーザインタフェースの課
題及び改善について考察する．
∗

奈良先端科学技術大学院大学 情報科学研究科 情報システム学専攻 修士論文, NAIST-ISMT0851057, 2010 年 3 月 17 日.

iキーワード付箋，マルチメディア，拡張現実感，QR コード，ユーザインタフェース，ブロ
グデータベースiiMultimedia Sticky Note System
Using Augmented Reality∗
Kana Suzuki

Abstract
When we daily jot memos, sticky notes are convenient goods with intuition andsurveillance. Paper-based sticky notes accept limited information which is written down just by a pen. Recently, electronic sticky note applications and systems
which imitate paper-based sticky notes have been developed. Electronic sticky
notes have an advantage of accepting multimedia information. But, electronic
sticky notes have a disadvantage that they are worse in intuition and surveillance
than paper-based ones. This research aims at the construction of an augmented
reality sticky note system that has good properties of intuition, surveillance, andacceptance of multimedia information such as texts, images, audios, videos, andURL. In this study, a blog system is employed for management of multimedia
information. It makes users to read and edit multimedia memos easily. Paperbased sticky notes with QR code are used to access blog pages easily. They keep
properties of intuition and surveillance of standard sticky notes. The prototype
AR sticky note system makes users to write down multimedia information easily using a mobile PC with a camera. Finally, the usefulness of the system isdemonstrated by experiments and some remaining problems are then discussed.
Keywords:
sticky note, multimedia, augmented reality, QR code, user interface,blog database∗

Master’s Thesis, Department of Information Systems, Graduate School of Information
Science, Nara Institute of Science and Technology, NAIST-IS-MT0851057, March 17, 2010.

iii

目次
1. はじめに1

2. 関連研究と本研究の位置づけ

3

2.1

付箋紙の特徴 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.2

電子的な付箋の関連研究 . . . . . . . . . . . . . . . . . . . . . . .

4

2.3

本研究の位置づけ . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

3. マルチメディア付箋システムの構築

14

3.1

システムの概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

3.2

システムの処理の流れ . . . . . . . . . . . . . . . . . . . . . . . .

16

3.3

拡張現実感を用いたマルチメディア情報の表示 . . . . . . . . . . .

18

3.4

マーカ付き付箋 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

4. プロトタイプシステムの構築

23

5. マルチメディア付箋システムと付箋紙の比較実験

26

5.1

実験方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26

5.2

実験結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

5.3

考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

34

6. まとめ

37

謝辞

40

参考文献

41

付録

43

A. プロトタイプシステムで使用したブログシステム

43

B. アンケート結果と作成された付箋

45

B.1 ブログや付箋アプリケーション，HTML に関する質問結果 . . . .
iv

45

B.2 自由記述における意見 . . . . . . . . . . . . . . . . . . . . . . . .

46

B.3 口答による意見 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

51

B.4 被験者が作成した付箋 . . . . . . . . . . . . . . . . . . . . . . . .

56

v

図目次
1

身のまわりの付箋紙. . . . . . . . . . . . . . . . . . . . . . . . .

2

2

付箋紙の活用方法 [1] . . . . . . . . . . . . . . . . . . . . . . . . .

4

3

付箋アプリケーションシステム lino[2]. . . . . . . . . . . . . . .

8

4Quickies（Mistry ら [3]） . . . . . . . . . . . . . . . . . . . . . . .

85

拡張現実感を用いたカード型情報管理システム（仲村 [4]） . . . .

96Augmented Reality Post-It System（Singh ら [5]） . . . . . . . . .

9

7

セカイカメラ [6] . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

8Augment-able Reality[8] . . . . . . . . . . . . . . . . . . . . . . .

10

9pitag:街に貼る音のシール [9] . . . . . . . . . . . . . . . . . . . . .

11

10

The Mintpad[10] . . . . . . . . . . . . . . . . . . . . . . . . . . .

1111

システムの概念 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1512

データの流れ . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

13

付箋編集時にユーザが行う操作の流れ. . . . . . . . . . . . . . .

17

14

ブログの例 [1] . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

15

マルチメディア付箋の閲覧画面 . . . . . . . . . . . . . . . . . . .

20

16

マルチメディア付箋の編集と管理 . . . . . . . . . . . . . . . . . .

20

17

拡張現実感表示されたマルチメディア付箋 . . . . . . . . . . . . .

21

18

マーカ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

19

認識されたマーカの例 . . . . . . . . . . . . . . . . . . . . . . . .

25

20

被験者の作業 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

21

使用するデモシステム（テレプレゼンスシステム） . . . . . . . .

28

22

付箋を作成する様子

29

23

本プロトタイプシステムを用いて被験者 A1，A2，A3，A4 が作成. . . . . . . . . . . . . . . . . . . . . . . . .

した付箋 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

24

マルチメディア付箋の共有 . . . . . . . . . . . . . . . . . . . . . .

39

25

被験者 A1 が作成した付箋 . . . . . . . . . . . . . . . . . . . . . .

57

26

被験者 A2 が作成した付箋 . . . . . . . . . . . . . . . . . . . . . .

58

27

被験者 A3 が作成した付箋 . . . . . . . . . . . . . . . . . . . . . .

59

vi

28

被験者 A4 が作成した付箋 . . . . . . . . . . . . . . . . . . . . . .

60

表目次
1

付箋・関連研究比較. . . . . . . . . . . . . . . . . . . . . . . . .

122

機器構成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

3

使用したアプリケーション . . . . . . . . . . . . . . . . . . . . . .

25

4

被験者 A1〜A4 の実験結果 . . . . . . . . . . . . . . . . . . . . . .

32

5

被験者 B1〜B4 の実験結果 . . . . . . . . . . . . . . . . . . . . . .

33

6

ブログの編集などに関する質問結果 . . . . . . . . . . . . . . . . .

45

vii

1. はじめに我々の身の回りには様々な情報が溢れている．多数の情報の中から必要なものを取得し，活用・管理することは日々の生活を快適に過ごすために重要なことである．情報管理のためのツールは様々なものがあるが，我々の身近な物のひとつとして付箋があげられる．近年，ペーパーレス化が唱えられている 90 年代以降も付
箋はその直観性や一覧性，手軽さなどから変わらず使用され続けているアイテムである．例えば時間管理・タスク管理のような To Do リストとして，伝言メモのような人と人とのコミュニケーションツールとして，アイデアを留めておくためのメモとしてなど，付箋の利用方法は多岐に渡り，図 1 のようにオフィスや家庭など様々な場所で日常的に活用されている．しかし情報化が進む現代では，誰もが手軽にデジタルカメラやビデオで写真や映像を撮影して PC に取り込み，ネッ
トワークを通じて情報の受信や発信が行えるようになるなど，扱う情報も様々な物になった．従来の紙媒体の付箋（以下，付箋紙）は紙にペンで書ける内容の保存に留まるため，これらの画像や動画，音声または URL，3D モデルなどのマル
チメディア情報には対応していない．マルチメディアやネットワークに対応した
情報管理機能があれば付箋の利便性は向上する．

IT 化の進む中で，付箋のデジタル化も試みられており，付箋紙の直観性・操作性を模倣した PC 上で動作する電子的な付箋アプリケーションやシステムが開発されている．これらのアプリケーションやシステムでは，写真や動画などのマル
チメディアを扱うことができる利点がある．しかし PC 上で使用可能な付箋アプ
リケーションは使用する場所が PC のディスプレイ上に限定されている点や，紙媒体と比較し，直観的な操作がやや劣る場合があるという点がある．従来の紙媒体のように直観的であり，なおかつマルチメディア情報に対応した付箋があれば便利である．
そこで本研究では，アプリケーション付箋のように文字・画像・音声・動画などマルチメディア情報を扱い，付箋紙のように紙媒体を用いて一覧性を保持し，手軽にどこにでも貼れる直観的な操作が可能なユーザインタフェースを有した付箋システムの構築を目的とする．付箋紙の特徴と，仮想的な付箋の特徴を兼ね備えたシステムを作るため，これら紙媒体（実物体）とマルチメディア情報（仮想1

図 1 身のまわりの付箋紙物体）をつなぐ技術として拡張現実感（AR）を用いる．拡張現実感は，実環境上に仮想的な情報を重畳表示することで，仮想的な物体が実環境に存在している
ように見せる技術である．この技術を，持ち運びに便利なモバイル PC 上で実装することにより，ユーザは実環境上にある付箋紙と仮想的な情報の操作をスムーズに行うことが可能となる．
以降，2 章では付箋紙の特徴と関連する研究を概観し，本研究の位置付けを示す．3 章では本研究で構築したマルチメディア付箋システムについて説明し，4 章
では構築したプロトタイプシステムについて述べる．5 章では構築したプロトタ
イプシステムと付箋紙の比較実験について述べ，考察する．最後に，6 章において本論文のまとめと今後の課題について述べる．

2

2. 関連研究と本研究の位置づけ
本章では，関連研究と本研究の位置付けについて述べる．2.1 節では付箋紙の特徴を述べ，2.2 節では付箋紙を模倣したアプリケーション・システムや情報管理に関連する研究の特徴をまとめ，比較する．2.3 節において本研究の位置付けと方針について述べる．

2.1 付箋紙の特徴
貼ってはがせる付箋紙は一次的な情報の管理に便利であり，我々の身の回りにあるアイテムである．大事な情報をすぐに追加する・不要な情報を捨てる・情報を整理する・並び変えるなど，付箋紙は様々な場面で用いられる．
付箋紙として広く知られているポスト・イット [1] は 3M によって 1980 年に開発された．3M によるとポスト・イットの活用方法は次の図 2 のように 5 つに分類される．

• コミュニケーション
メモのような，忘れてはいけないメッセージなどを，目のつく場所に「貼って残す」ことで，コミュニケーションをサポートする．

• ファイリング＆クリッピング
書類ファイルのみならず，引き出しやキャビネットなどに「見出し/インデックス」を「書き込んで，貼る」．これにより情報を取り出しやすくする．

• 時間管理/タスク管理
やるべきことや予定などを書き込み，手帳や PC ディスプレイ周りなどに「貼り」，終わったものは「はがして」いく．備忘録的な使い方．

• アイデア創造
パッと思いついたことを瞬時に書き留める．これを「貼りながら整理する」
ことで瞬間のひらめきを活用する．

3

図 2 付箋紙の活用方法 [1]• ミーティングソリューション（ファシテーション）
会議などで参加者のそれぞれが自分の意見や情報を書き込み，それを壁面に「貼る」ことで，参加者の意識の共有を円滑にする．
付箋紙はコミュニケーションツールや物に対する注釈，備忘録，情報の共有など，様々な用途に用いることができる．いつでもどこでも手軽にメモを残すことができ，直観性と一覧性が高いことが利点であるといえる．このように便利なツールである一方，付箋紙が記録できることはペンで書き込める情報に限られる．

2.2 電子的な付箋の関連研究
付箋紙に対し，近年盛んに開発されている電子的な付箋システムは，電子的な情報を扱える特徴がある．

4• lino[2]オンライン付箋サービス「lino」はブラウザで使える付箋とキャンバスによるアプリケーションである．図 3 のように文字・写真・ネット上に存在する動画などマルチメディア情報をメモすることが可能で，情報の書き換えが簡単にできるといった利点がある．画面上のキャンバスはドラッグすることで動かすことができるが，付箋を設置できる場所は PC 上という制限がある．

• Quickies[3]
紙にペンで書き様々なところに貼るという操作性を活かしたまま，デジタル
情報の検索が可能な付箋システムである「Quickies」は，MIT の「AmbientIntelligence Group」で研究されている．図 4 のように紙に文字を書くという紙媒体の持つ手軽で直観的な操作性・一覧性を利点に加え，書いた内容は
デジタルペンにより電子的に取り込み，管理・情報の検索や情報を携帯電話に送信する機能などもある．また付箋紙に RFID を埋め込むことで，付箋紙の場所を調べることも可能である．ただし紙に書くため，情報は付箋紙と同じく，文字や絵などに限られる．

• 拡張現実感を用いたカード型情報管理システム [4]仲村による「拡張現実感を用いたカード型情報管理システム」は，AR の特徴を生かした作業空間の提供を目的とし，提示される情報をユーザが新たに入力する手法について検討している．図 5 のようにペンで書いた内容や画像などを写真で撮影し，撮影した情報を拡張現実感を用いて AR 空間に張り付け，管理を行うことで，情報の分類・整理を行い，情報を階層的に管理する．情報が載ったカードは完全な仮想物体であり，空間中のどこにでも貼れる利点はあるが，AR 装置がない状態では，どこにカードが有るか
分からないなど一覧性はない．

• Augmented Reality Post-It System[5]Singh らによって開発された携帯電話を媒体にした拡張現実感を用いた付箋システムである．携帯電話のカメラでマーカを撮影し読み取ると，図 6 の5

ように画面に付箋が現れる．マーカは場所を示しており，移動させずに使用することが想定されている．ネットワークに対応しており，離れた所から付箋を作成し，マーカに貼ることができる．また，携帯電話で書き込める手書きおよび文字入力で付箋は作成される．

• セカイカメラ [6]
頓智・によって提供されている iPhone 上で動作する拡張現実ソフトウェア
である．図 7 のように iPhone 内蔵のデジタルカメラによって実環境が画面上に映し出された上に，その場所や対象物（建物・看板など）に関連する「エアタグ」と呼ばれる付加情報（文字・画像・音声）が重ねて表示される．
エアタグはユーザが空間中のどこにでも自由に付加することができ，ユー
ザ間で共有できるが，完全な仮想物体であるため，AR 装置がない状態では
一覧性はない．また GPS と PlaceEngine[7] を用い，現在地を特定するため，タグの貼付け精度は数 m〜数 10m であり，付箋のようにデスクトップでは使用できない．

• Augment-able Reality[8]
暦元らによる AR システムに双方向な情報の流れをもたせ，応用を行おうとする試みであり，実環境に情報を作成して付与できる試作システムが構築されている．ビジュアル ID を事物に添付することでオブジェクトレベル
での認識を可能にしている．ビジュアル ID が印刷された付箋紙を用いることで，図 8 のように書類にボイスメモや画像が添付された付箋紙を貼りつけることが可能となるが，付箋のように手軽に編集できる・貼ったりはがしたりすることができるという点は考慮されていない．また，同時に一つのマーカしか認識しないため一覧性が低い．

• pitag:街に貼る音のシール [9]
図 9 に示す逆井らによる pitag は「誰でも，好きな音を好きな場所に手軽に貼れる音のシール」であり，立方体型の録音・再生デバイスと RFID 付き
シールからなる．音とシールは関連付けられてあり，公共空間に貼ったシー
ルに pitag をかざすことで，そのシールの音を聞くことができる．

6

• The Mintpad[10]図 10 に示す Mintpass で販売されているデジタルポストイット「The Mint-pad」は，タッチペンで操作をする電子的な装置である．手書き入力や動画，音声などのマルチメディアに対応している．無線 LAN による通信が可能であるため，ネット上の情報を取得することや，付箋の情報をネット上に保存することができる．付箋情報は装置で閲覧するため，場所や物に対して付箋は貼れない．
付箋紙と以上の関連研究の特徴を表 1 にまとめる．表 1 から分かる通り，これらのアプリケーション・システムではマルチメディアなど電子的な情報が扱える利点がある一方，付箋紙のような一覧性や直感性に欠けるものが多い．なお，表1 における「マルチメディア」とは「文字・画像・音声・動画」を含むものとする．

7

図 3 付箋アプリケーションシステム lino[2]

図 4 Quickies（Mistry ら [3]）8

図 5 拡張現実感を用いたカード型情報管理システム（仲村 [4]）図 6 Augmented Reality Post-It System（Singh ら [5]）9

図 7 セカイカメラ [6](a) 実物体にボイスメモを添付する様子(b) ウェアラブルディスプレイ画面の様子

図 8 Augment-able Reality[8]10図 9 pitag:街に貼る音のシール [9]

図 10 The Mintpad[10]11表 1 付箋・関連研究比較
書き込める内容

付箋の媒体

貼れる場所

備考

付箋

ペンで書ける

紙

付箋紙が

（紙媒体）

内容

付箋アプリ

マルチメディア

2D のPC デスク

実物体に付箋を

ケーション

対応

仮想付箋

トップ上

貼れない

ペンで書ける紙

付箋紙がデジタルペン，

貼れる場所

RFID により貼れる場所（lino）

Quickies

内容

電子検索可能AR を用いた

画像

カード型情報2D の空間中のAR 装置なしでは

仮想付箋

どこでも可能一覧性がない携帯電話

マーカが

マーカは場所を

ある場所

示すために

管理システム

Augmented

文字・

Reality

ペンで書ける

Post-It System

内容

セカイ

文字・画像・

2D の空間中の室内では不向き，

カメラ

音声

仮想付箋

どこでも可能AR 装置なしでは用いる

一覧性がないAugment-able

画像・音声

紙

Reality

付箋紙が同時に一つの

貼れる場所

マーカしか
認識しない

pitag:街に貼る

音声

音のシール

紙

シールが

同時に一つの

（シール）

貼れる場所

マーカしか
認識しない

The

マルチメディア

電子装置の実物体に付箋を

Mintpad

対応

装置

画面内

貼れない

12

2.3 本研究の位置づけ
表 1 にあげるように，付箋紙は「紙にペンで直観的にメモを書いて，紙が貼れる様々な場所に，貼ったりはがしたりすることができる」利点がある反面，「紙に収まる量の内容しか書けない」，「動画や音声等は記録できない」という欠点がある．そこで本研究では，電子的な付箋の利点である文字・画像・音声・動画・URL，そして 3D モデル などのマルチメディアへの対応と，付箋紙の利点である一覧性
や直観的な操作感を，拡張現実感（AR）を用いて融合するシステムを構築する．
貼ってはがせる付箋紙を用いることで，貼る対象に対して直観的操作を可能とす
る．実環境と仮想物体を組み合わせるために拡張現実感を用い，現実の環境に CG
で情報を表示させることにより，マルチメディア情報の提示を行う．マーカ付き
付箋とネットワークに繋がったモバイル PC があれば簡単にマルチメディア情報を利用したメモを残すことが可能であり，情報はサーバ上に保存され，マーカとして QR コード [11] を用いることにより，携帯電話などの機器からも，メモの閲
覧編集が可能となる．さらにネットワーク越しに遠隔地からもメモを閲覧編集することもできる．また時系列で情報の確認をすることや，閲覧者・編集者を限定した使い方，情報の検索も可能である．

13

3. マルチメディア付箋システムの構築
3.1 システムの概要
本節では，提案するマルチメディア付箋システムの概要について述べる．シス
テムの概念図を図 11 に示す．本システムはユーザが持つユーザ PC（モバイルPC）とマルチメディア情報が管理されたサーバ PC（ブログサーバ）から構成され，ネットワークを介してデータの送受信を行う．ユーザはユーザ PC を用いてマーカ付き付箋から，マルチメディア情報を表示できる仮想の付箋ページ（以下付箋 Web ページ）に対応するコード情報を取得し，無線 LAN を介してサーバ PCに送る．得られたマーカのコード情報から，サーバは対応する付箋 Web ページを
ユーザ PC に送り，ユーザ PC は付箋 Web ページをディスプレイに表示する．得
られた付箋 Web ページに対し，ユーザは自分で作成・またはネット上から取得した文字や画像，音声，動画などのマルチメディア情報を書き込み，サーバへ送信
する．そしてサーバで情報の管理を行う．このように紙媒体のマーカ付き付箋とマルチメディア情報を対応づけることで，ユーザはマルチメディア情報を付箋紙のように簡単に操作することが可能となる．以降では，3.2 節で処理の流れについて述べ，3.3 節で拡張現実感を用いたマルチメディア情報の表示について述べ，

3.4 節ではマーカ付き付箋について述べる．

14

䝃䞊䝞PCᩥᏐ⏬ീ⏬ീ䠄䝤䝻䜾䝃䞊䝞䠅
Web䝨䞊䝆

ື⏬
㡢ኌ
㡢ኌ
䜹䝯䝷
URL
URL
䝴䞊䝄

䝴䞊䝄PC

3D䝰䝕䝹
䝹
䝬䞊䜹௜䛝௜⟢図 11 システムの概念

15

3.2 システムの処理の流れ
マルチメディア情報の閲覧と編集の流れは以下のとおりである．システムにおけるデータの流れを図 12 に，また付箋編集時にユーザが行う作業を図 13 に示す．

[マルチメディア付箋の閲覧]
1-1. ユーザ PC のビデオカメラで撮影されたマーカ付き付箋画像をデコードし，付箋 ID である URL 情報を得る．

1-2. URL を用いて，ユーザ PC からマルチメディア情報を管理するサーバ PC
へアクセスする．

1-3. サーバ PC のブログデータベースを参照し，URL に対応する付箋 Web ペー
ジがユーザ PC に返される．

1-4. ユーザ PC で付箋 Web ページをユーザに拡張現実感を用いて提示する．
[マルチメディア付箋の編集]
2-1. 重畳表示された付箋 Web ページをクリックし，最大表示化する．
（入力情報
が文字やリンクのみ，またはあらかじめ PC 内，ネット上に保存されている
データを貼りつける場合は，次に 2-3 を行う．
）

2-2. 新たにマルチメディア情報の作成を行う場合，編集画面上の「手書きメモ」「音声メモ」「静止画・動画メモ」ボタンでアプリケーションを実行し，ユー
ザ PC 内に保存する．

2-3. 編集画面でユーザによって入力されたマルチメディア情報をサーバ PC に送り，サーバ PC で管理する．

2-4. サーバ PC のブログデータベースで付箋 Web ページの更新が行われ，ユー
ザ PC の表示に反映される．

16

䜹䝯䝷
䜹䝯䝷⏬ീ

QR䝁䞊䝗䝸䞊䝎

䝴䞊䝄PC

௜⟢䛾ID(URL)௜⟢䛾ᗙᶆAR⾲♧㒊䞉Web䝤䝷䜴䝄௜⟢䛾ID(URL)䝬䝹䝏䝯䝕䜱䜰᝟ሗ

䝃䞊䝞PC

௜⟢Web䝨䞊䝆

䝤䝻䜾䝕䞊䝍䝧䞊䝇

図 12 データの流れ䝡䝕䜸䜹䝯䝷䛷QR䝁䞊䝗䜢᧜ᙳ⦅㞟䛧䛯䛔௜⟢䜢㑅ᢥ᪂䛧䛟෗┿䜔ື⏬䜢᧜ᙳ䞉㡢ኌ䝯䝰䜢సᡂ䛧䛶௜⟢䛻㍕䛫䛯䛔
YES䜰䝥䝸䜿䞊䝅䝵䞁䛷䝕䞊䝍䜢సᡂNO

⦅㞟⏬㠃䛻⛣䜚䚸ᩥᏐ䛾グධ䜔ධຊ䛩䜛䝣䜯䜲䝹䛾㑅ᢥ䜢⾜䛖

図 13 付箋編集時にユーザが行う操作の流れ

17

3.3 拡張現実感を用いたマルチメディア情報の表示
2.3 節で述べたように，本システムでは拡張現実感を用い，実環境中の付箋紙とマルチメディア情報を結びつけ，マルチメディア対応の付箋をユーザに提供する．付箋紙の特徴である見やすさ・書き込みやすさを維持し，マルチメディア情報の管理と編集を行うため，本研究ではブログシステムを採用する．
ブログとは，個人や数人のグループで運営され，日々更新される日記的なサイトの総称である．ブログの例を図 14 に示す．ブログは CMS(コンテンツマネジメ
ントシステム) のひとつであり，一般に広く普及している [12]．CMS とは Web コ
ンテンツを構成する文字や画像などのデジタルコンテンツを統合・体系的に管理し，配信など必要な処理を行うシステムの総称で，コンテンツ管理システムとも呼ばれる．CMS はページごとの公開期間の厳密な時間管理や，公開を承認する
ワークフロー，デザインの統一など様々な機能があり，品質を維持しつつ多人数での共同作業を効率よく行うことを可能にしている．図 15 に実装したプロトタ
イプシステムにおけるマルチメディア付箋の閲覧画面，図 16 に編集画面と管理
画面，図 17 に実環境に拡張現実感表示された例を示す．

図 14 ブログの例 [1]18拡張現実感の情報提示部分では，後述するマーカ付き付箋の QR コードの 4 角の点を用いて PnP 問題を解き，QR コードに埋め込まれたサイズ情報を利用する
ことにより，カメラとマーカの相対的な位置と方向をリアルタイムで求める．この情報を元に実環境に付箋 Web ページや 3D モデルを重畳表示する．

19

図 15 マルチメディア付箋の閲覧画面(a) 編集画面(b) 管理画面

図 16 マルチメディア付箋の編集と管理

20

図 17 拡張現実感表示されたマルチメディア付箋21

3.4 マーカ付き付箋本研究では，貼ってはがせる，一覧性があるという利点を維持するために，紙媒体を用いる．図 18 のように付箋紙にマーカである QR コードを描き，マルチ
メディア付箋 ID に URL を用いることで付箋 Web ページへのアクセスを容易にする．またこれにより携帯電話など他の媒体からもアクセスを可能にする．QR
コードにはマーカ付き付箋に対応する付箋 Web ページの URL とマルチメディア
付箋のサイズ情報を与え，URL はサーバ PC のデータベースにアクセスする際に用い，マルチメディア付箋のサイズは拡張現実感表示を行う際に用いる．

http://postit.naist.jp/wordpress/?p=788
Size:70mm

図 18 マーカ

22

4. プロトタイプシステムの構築
表 2 に機器構成を示す．本研究ではブログシステムとして WordPress[13] を採用したプロトタイプシステムを構築した．WordPress の機能やプラグインによる拡張によってプロトタイプのマルチメディア対応の付箋システム（以下，本プロ
トタイプシステム）は以下の機能を有している．

• 情報の貼り込み
ユーザが用意した画像，音声，動画の他，ネット上にある youtube などの動画，google マップの貼りつけやテーブルの挿入など，様々な情報の貼り込みに対応している．また Web ページをインフレーム表示することもできる．

• 時系列での情報の管理
書かれた月ごとに情報を表示することが可能である．また，投稿日によるソートも行える．

• セキュリティやマルチメディア付箋の共有
マルチメディア付箋の作成・編集時に，一般投稿やパスワード投稿が選択でき，ユーザの権限レベルに応じて閲覧できるマルチメディア付箋を指定することも可能である．これにより，一般公開され誰でも閲覧可能なマル
チメディア付箋や複数人で編集を行うマルチメディア付箋の他に，ある特定のユーザのみ閲覧と編集が可能なプライベートなマルチメディア付箋など，必要に応じて付箋を管理することが可能である．

• マルチメディア付箋のデザイン
デザインの統一やマルチメディア付箋毎に異なるデザインの指定も可能である．用途に応じて異なる色の付箋を使うなどができる．
画像・動画・音声の新規作成のためのアプリケーションとして，本研究では表3 に示すアプリケーションを用いた．

23

表 2 機器構成
機器の種類

名称

仕様

ユーザ PCSony VAIO type u

CPU:Intel Celeron M 1.06GHz

VGN-UX90PS

メモリ:512MB
重量: 492g

4.5 型 ワイド液晶ディスプレイ
解像度: 1024 × 600
カメラ:解像度 640 × 480 画素
フレームレート 30fps
サーバ PCDELL Inspiron 530s

CPU:Core 2Duo E6830(3.00GHz)
メモリ:2.00GB
サーバ:Apache HTTP Server 2.0

MySQL 5.1.33-community
PHP Version 5.2.9
WordPress 2.7.1

マーカ付き付箋のマーカサイズは一般的な付箋紙と同等の 75mm × 75mm とし，QR コード作成には Psytec 社の QR Code Editor[14] を用い，誤り訂正レベル

L（7%），型番 3 で作成した．QR コードのデコードには同社の QR Code Decode
Library[15] を使用した．カメラは VAIO type u に内蔵されているカメラを用いた．
表 2 に示す機器構成において，マーカを認識できる距離は約 50cm であり，図 19に示す角度からの撮影でも認識を行い，CG を重畳表示することが可能であった．

24

表 3 使用したアプリケーション
アイコン

手書きメモ

写真・動画撮影

対応する
アプリケ

作成する

バイオカメラwindows

キャプチャーサウンド

ユーティリティ

レコーダ

画像・動画

音声

ペイント

ーション

音声メモ

画像

ファイル

図 19 認識されたマーカの例

25

5. マルチメディア付箋システムと付箋紙の比較実験
4 章で説明したマルチメディア付箋システムのプロトタイプシステム（以下，本プロトタイプシステム）の評価を行うため，被験者実験を行った．本プロトタイ
プシステムは付箋として紙を用いているため，付箋紙と同様に場所や物に付箋を貼ることができ，モバイル PC を用いなくとも付箋の一覧性があるだけでなく，
モバイル PC を用いれば図 17 のように複数の付箋を同時に拡張現実感表示できるため，一覧性が高い．この特長により，関連研究に対する本プロトタイプシステ
ムの有用性は自明である．そのため本章では，本プロトタイプシステムと市販されている一般的な付箋紙を用いた比較実験について述べる．5.1 節で実験方法について説明する．5.2 節は実験結果を示し，5.3 節でその結果について考察する．

5.1 実験方法
本実験では，あるシステムの操作方法を人へ教えるというタスクを設定する．
これは 2.1 節にあげた付箋紙の活用方法の「コミュニケーション」にあたる一例
である．このタスクに対して，付箋紙と本プロトタイプシステムを用いて比較実験を行う．
実験は付箋作成の実験と，付箋閲覧の実験からなり，被験者は付箋作成者（以下，被験者 A），付箋閲覧者（以下，被験者 B）の 2 種類とする．被験者 A にはデモの操作方法について 2 種類の付箋それぞれを用いて説明を作成してもらい，被験者 B には被験者 A が作成した付箋を見て 1 種類につき 1 回，計 2 回デモの操作を行ってもらう．図 20 に各々の被験者の作業内容を示す．
本実験で使用するデモシステムを図 21 に示す．デモは PC や機器の電源を入れる，PC ディスプレイ上でクリックやプルダウンメニューから選択する，ボタンを押すなどの操作を行うものとした．付箋紙を用いた実験は 127mm × 75mmのサイズのものを用い，本プロトタイプシステムは 127mm × 75mm の付箋紙に75mm × 75mm のマーカをつけたものを使用する．

26

௜⟢సᡂ⪅䠄⿕㦂⪅A䠅௜⟢㜀ぴ⪅䠄⿕㦂⪅B䠅䞉௜⟢⣬䜢⏝䛔䛶䝕䝰䛾ㄝ᫂䜢సᡂ䛩䜛

䞉⿕㦂⪅A䛜సᡂ䛧䛯௜⟢⣬䛻䜘䜛ㄝ᫂䜢⏝䛔䛶䝕䝰䜢᧯స䛩䜛䞉ᮏ䝥䝻䝖䝍䜲䝥䝅䝇䝔䝮䛾௜⟢䜢⏝䛔䛶䝕䝰䛾ㄝ᫂䜢సᡂ䛩䜛

䞉⿕㦂⪅A䛜సᡂ䛧䛯ᮏ䝥䝻䝖䝍䜲䝥䝅䝇䝔䝮䛾௜⟢䛻䜘䜛ㄝ᫂䜢⏝䛔䛶䝕䝰䜢᧯స䛩䜛

図 20 被験者の作業[マルチメディア付箋作成の実験](1) 被験者 A に本プロトタイプシステムの使い方の説明を行い，練習をしてもらう．

(2) 「デモを使用したことがない人にデモの操作方法を伝える」という目的で，付箋紙を用いて説明を作成してもらう．このとき，デモシステムの PC の電源を入れる動作，または付箋紙に文字を書き始める動作の早い方から，説明を作成し終えデモシステムの PC の電源を切るまでの時間を計測する．

(3) 次に同様の目的で，本プロトタイプシステムの付箋を用いて説明を作成してもらう．このとき，付箋紙と同様にデモシステムの PC の電源を入れる動作，または本プロトタイプシステムにより説明を作成し始める動作の早い方から，説明を作成し終えデモシステムの PC の電源を切るまでの時間を計測する．

(4) 付箋作成者用のアンケートに答えてもらう．

27

図 21 使用するデモシステム（テレプレゼンスシステム）[マルチメディア付箋閲覧の実験](1) 被験者 B に本プロトタイプシステムの使い方の説明を行う．
(2) 被験者 A が作成した 2 種類の付箋の説明をもとに，被験者 B に付箋紙を用いた場合と本プロトタイプシステムの付箋を用いた場合の 2 回のデモの操作をしてもらう．このとき，デモシステムの PC の電源を入れてから，デモシステムの PC の電源を切るまでの時間を計測する．

(3) 付箋閲覧者用のアンケートに答えてもらう．
図 22 に被験者 A が本プロトタイプシステムの付箋で説明を作成する様子を示す．アンケートは，まずブログや付箋アプリケーションの使用経験などについて答えてもらい，次に本プロトタイプシステムの伝えやすさと見やすさの項目について，付箋紙と比較し 5 段階の相対評価で答えてもらう．自由記述の項目では，各付箋を用いて感じたことや感想，各付箋それぞれが便利だと思われる状況やタスクを答えてもらう．
閲覧実験時には各付箋において，被験者ごとに使用する付箋の順番を入れ替えて実験を行う．1 回目のデモ操作の際は付箋紙を用い，2 回目のデモ操作の際は28

本プロトタイプシステムを用いた被験者を 2 名，1 回目のデモ操作の際は本プロトタイプシステムを用い，2 回目のデモ操作の際は市販の付箋紙を用いた被験者を 2 名とする．なお閲覧 2 回目の操作所要時間は，1 回目で被験者がデモの操作手順を覚えているため 1 回目より短くなることから，被験者の機器を扱う速さな
どの参考として扱う．本実験は被験者 A はデモの操作経験がある者 4 名を対象とし，被験者 B はデモの操作経験がない者 16 名を対象として実施した．

図 22 付箋を作成する様子

29

5.2 実験結果
被験者 A1〜A4 が本プロトタイプシステムを用いて作成した付箋を図 23 に示
す．被験者 A1〜A4 による付箋作成の所要時間とアンケート結果を表 4 に，被験者 A1 の作成した付箋を用いて閲覧実験を行った被験者 B1-1〜B1-4，被験者 A2の作成した付箋を用いて閲覧実験を行った被験者 B2-1〜B2-4，被験者 A3 の作成した付箋を用いて閲覧実験を行った被験者 B3-1〜B3-4，被験者 A4 の作成した付箋を用いて閲覧実験を行った被験者 B4-1〜B4-4 によるタスクを行う所要時間とアンケート結果を表 5 に示す．また被験者 A1〜A4 が作成した付箋紙およびアンケートの自由記述を含む実験結果の詳細については付録 B で示す．

(a) 被験者 A-1 による付箋(b) 被験者 A-2 による付箋(c) 被験者 A-3 による付箋(d) 被験者 A-4 による付箋

図 23 本プロトタイプシステムを用いて被験者 A1，A2，A3，A4 が作成した付箋

30

被験者 A1，A2 による本プロトタイプシステムの付箋は文字入力，写真+手書
きメモを用いたものであり，被験者 A3 は動画を用いたもの，被験者 A4 は写真+
手書きメモ（文字入力含む）を用いたものとなった．

31

表 4 被験者 A1〜A4 の実験結果
付箋紙

本プロトタイプシステム

伝えやすさ※ 1

見やすさ※ 2

所要時間

所要時間

A1

7 分 50 秒

20 分 43 秒

同じ

同じ

A2

7 分 40 秒

22 分 50 秒

+

やや+

A3

10 分 24 秒

6 分 52 秒

やや+

やや+

A4

7 分 58 秒

39 分 2 秒

やや+やや+※ 1 伝えやすさ
本プロトタイプシステムが付箋紙に対して，「伝えやすい（+），やや伝えやすい（やや+），付箋紙と同じ（同じ），やや伝えにくい（やや-），伝えにくい（-）」を評価してもらう．
※ 2 見やすさ
本プロトタイプシステムが付箋紙に対して，「自分が閲覧者の立場にたって付箋を見てどう思うか」について，「見やすい（+），やや見やすい（やや+），付箋紙と同じ（同じ），やや見にくい（やや-），見にくい（-）」を評価してもらう．
被験者 A1，A2，A4 では本プロトタイプシステムは，付箋紙より所要時間が長かったが，被験者 A3 は本プロトタイプシステムの所要時間の方が短かった．伝
えやすさ，見やすさは被験者 A1 は同じ，被験者 A2〜A4 は（やや）伝えやすい，
やや見やすいという結果を得た．

32

表 5 被験者 B1〜B4 の実験結果(a) 被験者 B1-1〜B1-4 の実験結果
付箋紙

本プロトタイプシステム

見やすさ

所要時間

順番

所要時間

順番

B1-1 5 分 30 秒

1 回目

3分6秒

2 回目

やや+

B1-2 7 分 25 秒

1 回目

3 分 43 秒

2 回目+

B1-3 3 分 40 秒

2 回目

6 分 33 秒

1 回目

やや+

B1-4 2 分 47 秒

2 回目

3 分 39 秒

1 回目-(b) 被験者 B2-1〜B2-4 の実験結果
付箋紙

本プロトタイプシステム

見やすさ

所要時間

順番

所要時間

順番

5分5秒

1 回目

3 分 33 秒

2 回目+

B2-2 4 分 15 秒

1 回目

3 分 52 秒

2 回目

やや+

B2-3 3 分 35 秒

2 回目

4 分 15 秒

1 回目

やや+

B2-4 3 分 28 秒

2 回目

4分4秒

1 回目

+

B2-1

(c) 被験者 B3-1〜B3-4 の実験結果
付箋紙

本プロトタイプシステム

見やすさ

所要時間

順番

所要時間

順番

B3-1 6 分 10 秒

1 回目

6分9秒

2 回目

やや+

B3-2 5 分 40 秒

1 回目

5 分 14 秒

2 回目

やや-

B3-3

4分1秒

2 回目

5 分 56 秒

1 回目

同じ

B3-4

3分8秒

2 回目

6 分 21 秒

1 回目

やや+

(d) 被験者 B4-1〜B4-4 の実験結果
付箋紙

本プロトタイプシステム

見やすさ

所要時間

順番

所要時間

順番

B4-1 5 分 22 秒

1 回目

3 分 39 秒

2 回目

やや+

B4-2 8 分 52 秒

1 回目

3 分 39 秒

2 回目

やや+

B4-3 3 分 14 秒

2 回目

3 分 41 秒

1 回目+

B4-4 3 分 29 秒

2 回目

4 分 10 秒

1 回目

+

33

5.3 考察
付箋閲覧の実験により，多くの被験者から「（やや）見やすい」評価を得たことや「画像を用いたほうが直観的でわかりやすい」などのアンケート結果を得た
ことから，写真を用いて指示を行うなど，マルチメディア情報を付箋に付加することが効果的であり，本プロトタイプシステムの有用性が確認できたと考えられる．一部の付箋では閲覧者によって評価に差が現れたが，これは閲覧者の PC 操
作スキルなどの個人差や，付箋作成者の個人差，使用するマルチメディアの選択によるものだと考えられる．以下にそれぞれの項目における考察を述べる．

付箋作成実験における付箋作成所要時間に関する考察
付箋作成の実験では，マルチメディア情報を扱えるようになったことで，付箋を作成する際の自由度が上がり，その分丁寧に説明を作成しようとして時間がかかっていたと考えられる．しかし被験者 A3 のように，動画で手早く説明することも可能であることから，速く情報を残したい場合や，時間は多少かかってもいいが丁寧に説明したい場合など，状況やタスクに応じてユーザが適当なマルチメ
ディア情報を選択することで，より本システムの利便性は向上するものと考えられる．
なお，本プロトタイプシステムの付箋作成における所要時間に関して，被験者が作業をしている様子，またアンケートの自由記述結果から，本プロトタイプシ
ステムで用いたモバイル PC のキーボード入力に時間がかかったことが一番の原因であったことが考えられる．またディスプレイが小さく，アイコンなどが小さくなるため，タッチミスにより作業に時間がかかったことや，写真を撮影する際，
アプリケーションを起動する時間などが加わったことも理由の一つと考えられる．

付箋閲覧実験におけるデモの操作所要時間に関する考察
付箋紙に比べ，本プロトタイプシステムの付箋による説明では，閲覧者のデモの操作所要時間が比較的短かったことから，写真や写真に文字を記入した説明を34

作成することで，閲覧者が作業のイメージをつかんだり，使用する機器や PC デ
スクトップ上の項目を見つけやすくなったと考えられる．なお被験者 A3 による動画のみを使用した本プロトタイプシステムの付箋は動画時間が約 5 分あり，動画再生時間，また被験者によっては巻き戻しや一時停止を用いたため，閲覧にはそれ以上の時間を有している．

アンケート調査の自由記述の結果に関する考察
各々の付箋が便利だと思われるタスク
アンケートの自由記述欄で行った「本プロトタイプシステムが便利だと思うタ
スク・状況は？」という問いでは，「PC を知らない人に PC の操作を教えるときは絵があった方がわかりやすい」，「絵でも示しているため，初心者にも易しい説明になっていると思った」という意見があった．これにより，本プロトタイプシス
テムでは作業に不慣れな人や初心者に物事を説明する際に，特に効果が現れるものと考えられる．また，「文字であると『ここをこうする』などが直観的に分かりにくいので，画像・動画があると助かる」，「複数のものの中から選択する際は画像があると分かりやすい」という意見があったことから，文字で伝えにくい情報を伝える際には本プロトタイプシステムの写真や動画機能が活用できると考えられる．反対に，「本プロトタイプシステムに比べて市販の付箋紙の方が便利だと思うタスク・状況は？」という問いでは「一言残したり，それを他人のデスクに貼るとき，いちいち端末を持ってブログで作成するのは面倒」，「（付箋紙は）紙とペンだけでいいというおばあさんでもわかる設定がよい」という意見があった．これらの意見から，付箋紙と本プロトタイプシステムでは得意とする使用目的が異なると考えられる．また，「（タスクや状況によるため）一長一短」，「文字の方が読めばいいのでわかりやすい気がする」などの意見もあったことから，付箋紙と本プロトタイプシステムは状況に応じて使い分けされるものであると考えられる．

35

本プロトタイプシステムに対する意見・印象など「（付箋紙は）軽くて貼っておけるため，両手を使いたい状況であると紙の方がよい」，「PC を使って付箋の情報を見るのが面倒（HMD を使ったら問題なし？）」などの意見があった．これらに関しては，付箋閲覧の際に HMD を使用することで，本プロトタイプ使用時，両手が使えなくなる問題はなくなると考えられる．
ただし，付箋作成時や編集時には別の入力装置が必要となる．
その他，「エンターテインメントに使えそうだ」「デコレーション付箋などがあっても面白そうだ」という感想があったこと，実験後に被験者が「楽しかった」と言っていたことからも，被験者は本プロトタイプシステムを市販の付箋紙にない「遊ぶもの，楽しむもの」としてもとらえたことが伺える．付箋紙は遊び目的では使用されることが少ないため，マルチメディア情報が扱えるようになった本プ
ロトタイプシステムにより，新たな付箋の活用方法も考えられる．

36

6. まとめ
本論文では，電子的な付箋の利点である文字・画像・音声・動画・URL ・3Dモデルなどのマルチメディアへの対応と，紙媒体の付箋の利点である一覧性や直観的な操作感を，拡張現実感を用いて融合するシステムについて述べた．構築したシステムでは，アプリケーション付箋のように文字・画像・音声・動画などマルチメディア情報を扱い，付箋紙のように紙媒体を用いて一覧性を保持し，手軽にどこにでも貼れる直観的な操作が可能なユーザインタフェースを有したものを目的とした．この目的を達成するため，本システムでは媒体として付箋紙を用いて直観性を維持し，マルチメディア情報の管理のためにブログシステムを導入し，マルチメディア情報を保持した付箋 Web ページへのリンクへは付箋紙に付けた

QR コードに URL 情報を埋め込むことでアクセスを容易にした．
モバイル PC を用いたプロトタイプシステムによる被験者実験では，付箋作成に関しては付箋紙と比較して「情報を（やや）伝えやすい」または「情報の伝えやすさは同じ」評価を得た．また付箋閲覧に関しては多くの被験者から付箋紙と比較して「（やや）見やすい」評価を得た．これらの評価やアンケート結果から，写真を用いて指示を行うなど，マルチメディア情報を付箋に付加することは効果的であり，本プロトタイプシステムの有用性が確認できた．
付箋作成における所要時間の結果とアンケート結果から，本システムに要求される残された課題と改善案として以下のものがあげられる．

• 作業時間を短縮するためのユーザインタフェースの向上
作業時間を短縮するためのシステムとして，プロトタイプで用いた Word-

Press の拡張機能を用い，ユーザが行うと想定される作業をボタン一つで行えるような付箋用プラグインを作成する．

• HMD によるマルチメディア付箋の閲覧
表示用デバイスとして HMD の利用も有効であると考えられる．HMD を装着すると，手に何も持たずとも，付箋の閲覧が簡単にできるため，一覧性が高くなるといえる．しかし編集時に，入力デバイスが必要となる．

37

実験では，コミュニケーション・物に対する注釈としての付箋の活用に関する評価を行った．この他にも，複数人で共有し，ミーティングを行う際のツールとしての付箋の活用も考えられる．構築したシステムはグループなど複数人で共有することもできる．共有に関し，図 24(a) のように 1 枚のマーカ付き付箋を複数人で利用する以外に，図 24(b) のように同じ ID のマーカ付き付箋を複数枚用意
し，1 人 1 枚マーカ付き付箋を用いて，同じ付箋 Web ページを閲覧・編集することも可能である．これにより，遠隔地にいるメンバーとも同じ付箋 Web ページを用いてコミュニケーションをとることができる．同様に図 24(c) のように 1 人で付箋を利用する際も，同じ ID のマーカ付き付箋を 2 枚用意し，自宅用，会社用などとして異なる場所貼っておけば，付箋を持って移動せずとも異なる場所で同
じ付箋 Web ページを共有することができる．この他のシステムの利用方法として，実験によるアンケートにおいて「エンターテインメント」という単語が現れていたことから，「楽しいこと」に関するアイデアの記録や，またその情報の閲覧においてマルチメディア情報が有効に用いられる状況も考えられる．

38

ྠ䛨ID

(a) 複数人で 1 枚のマーカ付き付
箋を用いて，同じ付箋 Web ペー
ジを共有ᐙ(b) 複数人で複数枚のマーカ付き付箋を用いて，同じ付箋 Web ページを共有

ྠ䛨ID

఍♫

(c) 1 人で複数枚のマーカ付き付箋を用いて，異なる場所で同
じ付箋 Web ページを共有

図 24 マルチメディア付箋の共有

39

謝辞
本研究の全過程を通して，懇切なる御指導，御鞭撻を賜った視覚情報メディア講座 横矢直和教授に心より感謝致します．本研究の遂行にあたり有益な御助言，御指導を頂いたインタラクティブメディア設計学講座 加藤博一教授に厚く御礼申し上げます．そして，本研究のテーマ設定から日々の研究活動，本論文の執筆に至るまで，本研究の全過程を通して多大なる御指導，御助言を頂いた視覚情報
メディア講座 山澤一誠准教授に心より感謝致します．さらに，本研究の遂行に的確な御助言を頂いた視覚情報メディア講座 神原誠之助教に深く感謝致します．そして，本研究を進める上で，多大なる御助言，御指導頂いた佐藤智和助教に心より感謝致します．本研究の被験者実験に御協力頂いた皆様に心より感謝致します．
また，研究室の生活を支えて頂いた視覚情報メディア講座事務補佐員 高橋美央女
史に厚く御礼申し上げます．そして，研究活動だけでなく日々の生活においてもお世話になった視覚情報メディア講座の諸氏に深く感謝致します．最後に，私の二年間の大学院生活を見守り支えてくれた家族に感謝します．

40

参考文献
[1] 住友 3M: “Post-it”.
http://www.mmm.co.jp/oﬃce/post it/[2] インフォテリア株式会社: “lino”.
http://ja.linoit.com/[3] P. Mistry and P. Maes: “Intelligent sticky notes that can be searched, located and can send reminders and messages”, Proceedings of The 13th International Conference on Intelligent User Interfaces, pp. 425–426, 2008.
[4] 仲村元亨: “拡張現実感を用いたカード型情報管理システム”, 奈良先端科学
技術大学院大学修士論文, NAIST-IS-MT9651081, 1998.

[5] S. Singh, A. Cheok, G. Ng and F. Farbiz: “Augmented reality post-it system”, Proceedings of The 2004 ACM SIGCHI International Conference on
Advances in Computer Entertainment Technology, pp. 359–359, 2004.
[6] セカイカメラサポートセンター: “セカイカメラ”.
http://support.sekaicamera.com/ja/[7] 暦本純一, 塩野崎敦, 末吉隆彦, 味八木崇: “Placeengine: 実世界集合知に基づく wiﬁ 位置情報基盤”, インターネットコンファレンス 2006, pp. 95–104,

2006.
[8] J. Rekimoto, Y. Ayatsuka and K. Hayashi: “Augment-able reality: Situatedcommunication through physical and digital spaces”, Proceedings of The 2nd
International Symposium on Wearable Computers, pp. 68–75, 1998.
[9] 逆井寛, 奥野隆大, 岩田慎吾, 奥出直人: “pitag: 街に貼る音のシール”, イン
タラクション 2007 論文集, Vol. 2007, No. 4, pp. 219–220, 2007.

[10] mintpass: “The Mintpad”.
http://www.mintpass.com/product/p mp100 spec.asp
41

[11] QR: “QR コード”.
http://www.qrcode.com/[12] 総務省: “平成 21 年版 情報通信白書”.
http://www.soumu.go.jp/johotsusintokei/whitepaper/[13] ja.wordpress.org: “WordPress”.
http://ja.wordpress.org/[14] Psytec: “QR code editor”.
http://www.psytec.co.jp/freesoft/01/[15] Psytec: “QR code decode library 1.54”.
http://www.psytec.co.jp/product/03/

42

付録

A. プロトタイプシステムで使用したブログシステム
本研究ではプロトタイプシステムの構築において，ブログシステムとして Word-

Press（ワードプレス）を使用した．WordPress はオープンソースのブログ／ CMS
プラットフォームである．データベースに MySQL を利用し，PHP で書かれている．セマンティック Web，コードやデザインの美しさ，Web 標準，ユーザビリティなどを意識して開発されており，GNU General Public License（GPL）の下で配布されている．

WordPress により，PHP による動的なページ生成が可能となり，アーカイブ機
能や検索機能，プラグインによる拡張機能や各機能に対するユーザーアクセス権の制御やパスワード投稿，ファイル・画像のアップロード，携帯での閲覧など，マルチメディア付箋情報の表示とデータの管理を行うことができる．また，付箋のデザインをテーマとして簡単に切り替えが可能となっている．WordPress により作成したブログ 1 ページを１枚の付箋とし，ユーザに提示し，文字の入力・画像
や動画ファイル保存と編集をこのブログシステム上で行う．

WordPress の主な特徴• PHP による動的なページ生成• 標準添付のテンプレート等がウェブ標準に準拠• 記事への複数カテゴリー設定に対応• カスタマイズ可能で検索エンジンフレンドリーな URL• テーマによる簡単なデザインの切り替え• プラグインによる拡張機能• WYSIWYG によるエントリ編集• 投稿スラッグによるパーマリンク URL 作成
43

プロトタイプシステムに導入したプラグイン• TinyMCE Advanced
ビジュアルでの投稿入力方式を選択した場合に便利なプラグイン．TinyMCEに水平線，高度な画像編集，高度なリンク，コンテキストメニュー，顔文
字，日にちと時間，スペルチェック，レイヤー，印刷，検索と置換，テーブルなどのボタンを追加する．

• Ktai Style 1.81
携帯対応プラグイン．携帯用のテーマを適用したり，画像の表示を変更したりする他，携帯端末からの簡単なサイト管理も可能にする．

• Audio player 1.2.3
オーディオ関連．mp3 に対応するプレイヤー．

• Dashboard Editor 1.1
ダッシュボードのカスタマイズ．

• AddQuicktag 1.31
HTML での投稿入力方式を選択した場合に便利なクイックタグ．カスタム
タグを作成し，入力時間を短縮できる．

44

B. アンケート結果と作成された付箋
B.1 ブログや付箋アプリケーション，HTML に関する質問結果
被験者 20 名にブログや付箋アプリケーションに関する以下の事項を質問した．
なお，WordPress では HTML モードで編集も可能なため，HTML に関する質問を行った．アンケート結果を表 6 に示す．
ブログや付箋アプリケーション，HTML に関する質問内容

1. これまでにブログの編集（mixi など SNS への書き込みを含む）を行ったことがありますか？（はい・いいえ）

2. これまでに WordPress を用いてブログの編集を行ったことがありますか？
（はい・いいえ・わからない）

3. これまでに PC 上で動く付箋アプリケーションを使用したことがありますか？（はい・いいえ・わからない）

4. これまでに HTML を扱ったことがありますか？
（はい・いいえ・わからない）

表 6 ブログの編集などに関する質問結果
質問項目

はい

いいえ

ブログの編集経験

16

4








WordPress の使用経験

1

13

6

付箋アプリケーションの使用経験

3

14

3

HTML 使用経験

19

1

0

45

わからない

B.2 自由記述における意見
紙の付箋に比べて，本プロトタイプシステムの方が便利だと思う
状況・環境・タスクなど• 初めての作業環境．
• 道案内．
（セカイカメラ的な．
）• 人に使い方を詳しく教えるとき．
• ブログなどで，自分が見たものをそのままの状態で伝える場合．
• チラシや看板の広告．
• 道案内．
• 多くの情報を提示することが可能なので，今回のような作業支援や一時的でない（再利用を想定した）環境のナビゲーション．

• 学会誌などの資料．付属ムービーなどがこれで見れたら便利かもしれない．
• 画像でデスクトップ上のアイコンが示せる点．
• 音声提示とか．
• QR コードが読める装置がある場合．
• 説明がある程度長い場合，文章による説明がしにくく，絵などを使う場合．
• 字の汚い人が使う場合．
• ボタンと位置が明確に示されているのでわかりやすい．
• 様々な情報を容易に伝えることができる．
（写真でも文字でも．絵より多くのことを伝えられる．
）• 一見してわからない．特に暗号化すると伝えたい人にだけ，情報を伝えることができる．

• 映像だけでなく音声も可能だと思うので，「音の付箋」とか面白そう．
• 画像・動画・音声を使う時．
• 作業が一連の操作としてつながっている時．
• 1 つの作業の情報量が多い時．
• 動き回る必要がある時．
（ただしハード面の改良が必要？）
46

• 図を示すほうがスムーズに説明できる場合．
• サーバーの場所や HMD の電源がマルチメディア付箋の場合の方がわかりやすい．

• 紙の付箋が貼れないような危険物に対しては，マルチメディア付箋を用いると便利かも．

• 動画なので，ボタンの位置をすぐに知ることができる．
• タスクが複雑な場合．
• エンターテインメント．
（ミステリーツアーの様な．
）• 作業支援など．
• 指示がほしい時、状況．文字であると「ここをこうする」などが直観的に分かりにくいので，その面，画像・動画であると助かると思う．

• 操作ステップをまとめてあるものと，各ステップに分けているものがあれば便利．分からないステップをまとめてあるものからリンクしていく．Webを検索する感じ．
（ステップが多いと付箋の場所が分からなくなるから．
）• 画像を使えるので，位置や操作場面を伝えやすい．
• 複雑な手順をする場合．
• 複雑な作業．
• 画像などがあると便利な場合．
（機器の説明が必要な時など．
）• 地図．
• PC の操作をする時は，画像が貼ってあった方がいいので，このシステムの方が便利だと思う．

本プロトタイプシステムに比べて，紙の付箋の方が便利だと思う
状況・環境・タスクなど• 作業が分かっている場合の変換の指示．
（雨なので空調の温度を**度に設定
してください，など．
）• 会議中などのときに，1〜2 秒でリマインダーとして使う．
47

• 思考スピードのままメモを取りたい時．
（アナログなデバイスの方が早い
ので．
）• 教科書のマーキング．
• タスクのメモ．
（おもに机や PC に貼る．
）
• 不在時の書き置き．
• 急な用事など装置を使う余裕がないとき．
• 一目で見たいとき．
• 一時的にしか使わない場合．
• QR コードを読み取る装置がない場合．
• 急いでいる場合．
（すぐにできるから便利．
）• PC 本体の電源 ON，OFF など．
（視界から離れているものには便利かも．
）• 特別な機器が不要．
• 簡単に書き換えることができる．
• 作業がそれぞれ独立している場合．
• 補足など，従となる情報を与える時．
• 付箋に次のステップへの操作も矢印で書いてあると分かりやすい．
• ステップを追加する時は楽．
• 操作を把握していると作るのが早い．
• 説明するべき事柄がシンプルな内容であるときは，わざわざシステムを使うより紙の方が早い．

• 音声が聞き取りづらいという点では，紙の付箋が便利だった．
• マルチメディア用の PC を持ち歩くのは不便．
• 正確に何を入力すればいいのかわかるので便利．
• 操作が複雑な物を利用するときに，見直したりしやすい．
• タスクが単純な場合．
• メモ，簡易連絡など．
• 紙だとペンと紙だけでいいというおばあさんでもわかる設定がいいと思う．
• 貼っておけるので両手を使いたい状況であると紙の方が良いかと思う．
48

• 付箋に次のステップへの操作も矢印で書いてあると分かりやすい．
• ステップを追加するときは楽．
• 操作を把握していると作るのが早い．
• 両手を使いたい状況の時．
• 簡単な作業．
• 一文で済むような連絡事項．
（電話番号，人名，時間．
）• メモ書きするなど，文字だけで事足りる場合．

付箋作成者の感想など• ペイントやカメラ撮影のソフトを起動させるので，メモを作るよりもソフト起動を待つ時間の方が長く感じた．

• 操作画面が小さいので，タッチミスによる間違いがあった．
• スクロールバーが小さくてやりにくかった．
• ボタンが小さくて操作しにくい時があった．
• URL のコピペがめんどうくさい気がする．
• 編集画面は改善が必要だと思う．
• vaio の画面サイズと編集画面が一致していない．
• 複数マーカが入った時の動作が重い．
• キーボードが打ちにくかった．

付箋閲覧者の感想など• 文章と写真をプリントした作業手順案内と比較して、利点がうすい？インタラクティブ性を押しだした方が良いのでは？

• PC を使って付箋を見るのが少し面倒．
（HMD なら問題なし？）• 使い方の手順のレクチャーなどは，詳しい情報が実時間で見れるの便利．

49

• 多くの情報を提示する際，一度に提示できる情報量と見やすさは反比例のようになってしまう．今回は一度に表示させれる範囲で情報を提示していたが，一度に表示させる情報に意味を持たせるのも良いのではないかと感じた．
（最初の手順で 1 ページ，次の説明手順で 1 ページなど．
）• スクロールするという動作より，めくるという動作の方がより分かりやす
いかも？

• 比較する紙の付箋の文字を word などで書いて読みやすくすると，また印象が変わるのかもしれない．
（しかし付箋にそこまではしないと考えられる．
）• 文字の方が読めばいいので分かりやすい気がする．
• マルチメディアは人によって強く個性が出る印象がある．
• 紙の付箋は次にどれを読むべきかわかりにくい．今回の場合ではむしろ一枚の紙に書いてある方が分かりやすいと思う．

• 紙の付箋には「電源を落とす」などといった文が書かれていたが，PC 操作に疎い人間が使う際には，この意味がわからないこともあるように思う．それに比べれば，（本プロトタイプ）システムは絵でも示している部分が多かったため，初心者にも易しい説明になっていると思った．

• 紙の付箋を作るにはおそらく数十秒も要せずに書けると思うが，（本プロトタイプ）システムの付箋を作るにはどのくらい時間がかかるのか気になった．

• 紙の付箋の文字が読みにくい．
• QR コードとはいえ，パスワードを直接載せるのは危険だと思う．
• HMD の付箋の位置が No.4 の上にない．
• 紙の付箋の書き方がかなり悪い気が．
• 面白かった．
• もっといろんな用途がありそう．
• 今回の実験で見た情報（指示）だと，同じ物を印刷した方がやりやすいと思う．

• 複数の付箋を使った場合に，相関が分かるとうれしい．
• 作業中にハードを「置く」アクションが必要なので，「ハードウェア」と「付箋の指示」「付箋の使い方」次第で使いやすさが変わると思う．

50

• 文字は読めるが，図が小さくて見づらかった．クリックで拡大できると良いと思う．

• マルチメディア付箋で指示を出す際に，（動画の）画面の下に字幕の様な形で文字による指示もあるとわかりやすいと思った．

• 動画だと，画質や音質が悪いと伝わりづらいので，画質や音質などを上げる必要があると思う．

• 1 回目で操作をある程度覚えてしまったため，本当に便利だったか少し評価がしにくかった．

• 画像，動画はユーザが拡大できたほうが良い．
• 指示の書き方次第で，良くもなるし，悪くもなるシステムかなと思う．

B.3 口答による意見
付箋作成者の感想など• 動画は長ったらしく，飛ばしたいところを飛ばしすぎると見たいところを過ぎてしまうことがあるので，写真並べていた方が見やすいと思い，（付箋作成では）写真を並べてみた．

• （付箋紙を複数枚使うように，マーカ付き付箋も複数枚使うとすると）マー
カ付き付箋を色々なところに貼ると，次にどの付箋を見ればよいかわからなくなるので，一番最初に各々の付箋をまとめた付箋を作成すれば，次の操作がわかりやすくなってスムーズにシステムを使うことができるかもしれない．例えばステップ順が出てきて（加えてどこにある付箋かという情報も載せて），ステップをクリックすると次の手順が出てくるような感じで．

• キーボードが押しにくかった．
本プロトタイプシステムに関する感想など• 検索できるので，次何をするか分からなくなった時検索できる点が便利だ
と思う．

51

• PC を知らない人に PC の操作を教えるときは，絵があった方がわかりや
すい．

• 料理本には動画がないので，料理するときに便利かもしれない．
• 遊びに使えそう．
• （AR 装置なしでは）マーカ付き付箋は一覧性が減る気がする．
• 全く知らないことをする時はシステムの方が便利．テレプレゼンスシステ
ムの操作は初めてで全然分からない状況だったので，マルチメディア（動画）で同じ状況が映し出されているのが便利だった．

• パスワードをかけて，見てほしい人にだけパスワードを渡して，その人に合った内容を見せることができそうな点が便利だと思う．

• （動画による説明は）パスワードが聞き取りにくかった．
• ボタンの位置（HMD の OK の位置）などが，動画だと分かりやすかった．
• ボタンが多い装置を操作する時など（選択肢多い時），説明書ではないけれ
ど，こういう動画があれば便利．

• 一言残したり，それを他人のデスクに貼るとき，いちいち端末を持ってブログで作成するのは面倒．

• 観光案内で，写真と状況，お勧めなメニューなどを表示すれば良さそう．
• 画面が小さかった．
• 面白かった．
• 音声ができると何か便利なことがありそうだと思う．高齢者向けなど？（けれど高齢者はこのシステム使わないかもしれない．
）• （説明のわかりやすさは）画質と音質に左右されると思う．
• 音声が聞き取りにくかった．
• リアルタイムで動画が流れるので焦った．
• 図が小さかった．
• もうちょっとマーカの読み込みがスムーズにいくと良いと思う．
• 色々なボタンがあるところで，「これを選べ」という風に丸で囲ってあるのが見やすかった．特に HMD のボタンやシステムのプルダウンメニューのところ、play や stop ボタンを選択するところがすごく分かりやすかった．

52

• 学会誌などにこのシステム（動画）を付ければよいと思う．
• 実験室の機器ごとにこのシステムの付箋を貼ると便利そう．説明書置いておくより，物に貼っておく方が親切．

• データのメリットは検索だと思うので，試薬の説明をこのシステムの付箋
でぺたぺた貼って置くと，検索できて便利．

• 機器の起動の仕方，使い方の説明を書いて，機器に貼っておく使い方ができると思う．

• （システムを用いて）サイエンスフェスティバルなどで，１階で携帯で情報を取得して，２階に行ったら２階に行ったことをシステムに教えて情報を更新するなど．一度見たらディスプレイに情報残ることを利用して，そ
ういう風に使ってもよいかもしれない．

• 付箋というよりも作業支援など，いっぱい情報を提示したい時に使ったらいいかもしれない．

• 限られたスペースに載せられない場合，こういうシステムがあったら詳細な情報載せれて便利．

• 電源の位置とか，付箋紙ではフォローしきれないことに対して良い．
• 初めての作業環境に便利．
• ある程度作業内容を知っていたら付箋紙なら飛ばして読めるが，動画はど
こにどの説明があるかわからないので，そのような点が（動画による説明
は）不便かもしれない．

• モバイルパソコンの操作の仕方が分からなかった．
• システムが便利な状況はいっぱいありそうだと思う．
（具体的な例は思い浮
かばないが．
）• デスクトップ画面上の操作が，図で示されているので見やすかった．
• クーポンに QR コードあることが多いので，利用できそう．
• 字だけではちょっと分かりにくかった．画像は分かりやすかった．
• 立体に見えるやつ（3D モデル）が楽しかった．
• （認識・表示する）反応は良い．ピッとかざすとすぐに表示された．

53

• 中途半端に文字による説明と画像による説明が混ざるより，動画で一連の動作を表示させたり紙芝居のように絵を変えていく方が見やすいと思う．

• 付箋紙は全部文字なので見流せるけれど，一度図が入ると流れが悪くなるというのがある．

• 付箋のイメージが紙媒体のイメージなので，図が入ると戸惑う．
• （スクロールに関して）目線を下にしたら，自動的にスクロールしたら便利かもしれない．

• システムは見にくかった．紙の方がぱっと見れて見やすい．
• 画像で「これをクリックする」という説明が画質が悪くて見にくかった．
• 本に貼っておけばムービーが見れてよい．
• 面白いと思った．
• システムとして面白い．
• 機器を持ち歩くため，メリットがないと厳しい．
• デコレーション付箋も可愛いかもしれない．可愛い方が使いやすい．
• （付箋のデザインなどを）自分でカスタマイズできると便利．
• 手を拘束されるので，できれば両手あいていた方が良い．
• モバイル機器なので（一度に表示できる）情報量が小さくなりがちなので，
スクロールしていかなければならない．

• ボタンを押すと，最初に表示される情報は最初の支援だけ．それが終わったら，次の情報をぺらぺらと付箋をめくるように表示できればいいかもしれない．一つの作業に対し一つの支援という風にするともっと分かりやすくなったと思う．

• 字だけじゃなくて，映像と文字を伴って見れたので，使い方が具体的にイ
メージしやすかった．

• 付箋は，自分が次から使うときは見てわかるけれど，始めて使うときは動画などがあるとより分かりやすいと思う．

• 動画残せるということで，この動画を見てこう思ったよ，ということも動画と文字で残せると思う．

• インタラクティブな環境でないと，意味がないかもしれない．
54

付箋紙に関する感想など• パスワードが分かりにくかった．
• 紙の付箋の字と書き方が悪い気がする．
• 付箋紙は目で見てパッと情報が見えるのがよい．
• 多く情報を見ようとするなら，ディスプレイより紙の方がぱーっと一度に見やすいかもしれない．

• 付箋だと，メニューが少ない時は確実に情報が分かるので，（動画だと音質が悪いと聞こえないことがある）選択が少ない場合は付箋紙の方が良い．

• 情報量が限られることは付箋紙の方がよい．
• 字がちょっと見にくかった．
• 文字情報は目で追えるから付箋紙の方が見やすい．
• 字が汚かった．
（g が y に見えたため，デスクトップのアイコンを探した．
）• 話している時にささっと書けて，いちいちたくさん書いてられない会議中などに，後で思い出すために（付箋紙は）便利．

その他の感想など• （本プロトタイプシステムは付箋紙と比較して，タスクや状況によるため）
一長一短．

• その場所にある，というのも付箋の利点．
• （付箋紙と本プロトタイプシステムでどちらが便利かは）タスクによっても違うかもしれない．

• ぱっと見，ぱっと認識が付箋のイメージ．
• 作る人によって（見やすさは）違う．
• （見やすさは）作り手によると思った．紙で作った方が良い人，マルチメ
ディアで作った方が良い人がありそう．

• 付箋は走り書き目的が多いので，そこまできれいに書かないかもしれないと思う．

• 印刷が多いと大変だから，付箋を使う？
55

• 残すまでもないメモ書き，メモ帳代わりに付箋を使う．人に本を返す時に，本に「本貸してくれてありがとう」と書いて貼っておくなど．

• 一時的にぱっと使って，使ったらすぐ捨てる利用には付箋紙．システムは
情報量が多くできるので，それをうまく生かせばいいかもしれない．

• 付箋というと長く使わないイメージ，物を渡す時に誰からかということを書くなど．こちら（本プロトタイプシステム）は長持ちしていっぱい情報
与えられる．

• 環境が変わる時は付箋を貼ってはがしたり書き変えたりすればいいが，不変な環境であれば印刷して物を置いておけばよいと思う．

B.4 被験者が作成した付箋
被験者 A1 が作成した付箋を図 25，被験者 A1 が作成した付箋を図 26，被験者

A1 が作成した付箋を図 27，被験者 A1 が作成した付箋を図 28 に示す．

56

(a) 付箋紙による説明(b) 本プロトタイプシステムによる説明

図 25 被験者 A1 が作成した付箋

57

(a) 付箋紙による説明(b) 本プロトタイプシステムによる説明

図 26 被験者 A2 が作成した付箋

58

(a) 付箋紙による説明(b) 本プロトタイプシステムによる説明

図 27 被験者 A3 が作成した付箋

59

(a) 付箋紙による説明(b) 付箋紙による説明（全体図）(c) 本プロトタイプシステムによる説明

図 28 被験者 A4 が作成した付箋60