情報処理学会 インタラクション 2020
IPSJ Interaction 2020

3B-12
2020/3/9

バーチャルな影による奥行き錯覚を用いた付箋紙の移動操作と類似度可視化インタフェース
中原 和洋†1

藤田 和之†2

土田 太一†2

高嶋 和毅†2

北村 喜文†2

概要：物理的な付箋紙環境における付箋移動と類似付箋探索の支援を目的としたインタフェースを提案する．付箋紙へのバーチャルな影のプロジェクションマッピングにより，(A)付箋を張り替えずに奥行き方向へ擬似的に移動する，(B)文書解析に基づき付箋間の類似度を可視化する，2 つの機能を実現するインタフェースのプロトタイプを開発した．ユーザテストを通じて，(A)は奥行きレベルの知覚が難しく改善が必要，(B)は類似付箋を目立たせる目的として良好な感触が得られた．

1. はじめに付箋紙に情報・知識・アイデアを言語化し，分類・整理するプロセスは，創造的な活動で広く用いられている．付
箋紙の分類・整理プロセスには試行錯誤を要するため，(a)付箋紙の移動（張替え），(b)類似付箋の探索，が頻繁に発生する．(a)(b)の作業を支援することで，分類・整理プロセスの効率化や質の向上が期待できる．

図 1

提案システムイメージ(a)付箋紙の移動（張替え）を支援する手段として，タブレットや大型タッチスクリーンを用いた付箋環境のデジタ

影の表示とその振動アニメーションにより擬似的な奥行きル化がある．Jensen ら [1] は，物理的な付箋紙環境に比べを強調することで可視化する． 本稿では，本手法を実現してデジタル付箋紙環境の方が付箋紙の移動量が増加したとたプロトタイプの実装と，これを使用した簡易なユーザテ報告している．しかし，付箋紙環境のデジタル化の普及はストの結果について述べる．

進んでいない．Harboe ら [2] は，紙のリッチなインタラク

2. 関連研究

ションと素材のアフォーダンスが付箋の分類プロセスに重要であると報告しており，付箋紙のデジタル環境が普及しない原因の一つとして考えられる．一方で Ogata ら [3] は，電磁石ヘッダを裏側に備えたホワイトボードと磁性レイヤが塗布された付箋紙を用いて，付箋紙をホワイトボード上で移動させるシステムを構築しているが，既存の付箋紙や壁面をそのまま用いることはできない．
また，(b)類似付箋の探索を支援する手段として，文書解析に基づく文書類似度の算出 [4][5] や可視化技術 [6] がある．しかし，これらの技術は，物理的な付箋紙の分類・整理プロセスでの利用に向けたものではなく，データ分析作業を前提としており，2 次元ディスプレイを用いたグラフィカルユーザインタフェースによるものがほとんどである．したがって，付箋紙の分類・整理プロセスにおけるこれら技術の利活用は十分に研究されていないと言える．
そこで本研究では，物理的な付箋紙環境を前提として，(a)付箋の移動と(b)類似付箋の探索支援を実現する新しいインタフェースを提案する．具体的には，図 1 に示すように物理的な付箋紙に対し，バーチャルな影を動的にプロジ

2.1 紙への影のプロジェクションマッピングによる奥行
き知覚
Kawabe [7][8] は，物理的な紙に印刷された画像中のオブジェクトや書かれた文字に対して，プロジェクションマッピングによりバーチャルな影を投影することで，奥行き方向の錯覚を与えられることを示した．
本研究では，この手法を付箋紙に適用し，さらに指によるタッチインタラクションを組み合わせることで，奥行き方向に対する付箋紙の擬似的な移動操作を試みる．さらに2.2 で記述する文書解析に基づく付箋類似度可視化の軸として，影による擬似的な奥行き方向への可視化を試みる．
2.2 文書解析と類似度の可視化
自然言語処理研究において，文書（文）を数百～数千次元のベクトルに変換する技術（埋め込み，分散表現）が発展し，ベクトルの近さ（コサイン類似度等）の計算により，文書間の類似度を算出できるようになった．近年，Web の膨大なテキストデータと深層学習を用いた手法により，文書間類似度の算出精度は飛躍的に向上した．現在，日本語ェクションマッピングすることで，奥行き方向への付箋紙を含む 16 か国語に対応し，オープンソースで利用可能な代の擬似的な移動操作を可能とする．さらに，付箋紙の文字表的なものとして，Universal Sentence Encoder [4][5] がある．

認識と文書解析に基づき算出した付箋紙間の文書類似度を，また文書の埋め込みベクトルを２次元インタフェース上で可視化する代表的な手法として，主成分分析や t-SNE [9]†1 日本ユニシス(株)†2 東北大学 電気通信研究所© 2020 Information Processing Society of Japanなどの次元圧縮をベクトルに適用して可視化する方法があ848

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

3B-12
2020/3/9

る ． これ ら を 実 装 した 代 表 的 な 可視 化 ツ ー ル とし て ，embedding projector [6] がある．

指タッチ入力センサー

これら文書解析，類似度可視化のツール群は，データ分付プロジェクタ

析作業を目的としたものであるため，付箋紙環境における分類・整理作業で利用しようとすると，作業と利用プロセスが大きく分離してしまうため，利用が難しい．本研究では，文書解析，類似度可視化を，物理的な付箋紙にバーチUSB カメラ

ャルな影による奥行き次元に可視化することで，作業と利用プロセスの自然な融合を試みる．

3. 提案手法とプロトタイプ実装
ＰＣ

3.1 概要本提案手法では，下記(A)(B)の 2 つの機能を実現する．
(A)

奥行きへの擬似的な付箋移動：
付箋紙を張り替えずに，奥行き方向へ付箋を擬似的に移動できる．

(B)

奥行き強調による付箋類似度可視化：
付箋紙に書かれた文書間の類似度に応じて，付箋紙の奥行きを擬似的に変化させることで，類似度の大小を可視化できる．

機能の詳細は次の通りである．
(A) 奥行きへの擬似的な付箋移動は，任意の付箋紙を指でタッチすることで，付箋紙の奥行き位置を１段階ずつ最大 4 段階，手前方向に浮き出た状態にできるようにする．
(B) 奥行きへの付箋類似度可視化については，任意の付箋紙を指でタッチすることで，タッチした付箋紙とその他の各付箋紙との間の類似度を，付箋紙毎にバーチャルな影による擬似的な奥行き方向に可視化する．類似度の高い付箋ほど手前に浮き出た状態，類似度の低い付箋ほど浮き出ない（一定閾値以下の類似度の付箋は，元の付箋のままで影を投影しない）状態とする．また，擬似的な奥行き方向へ配置後に減衰振動のアニメーションを付け，類似付箋をより強調させる．

図 2

提案システム構成(1)カメラ座標，プロジェクタ座標のマッピング
参考文献 [8] と同様に，グレーコードパターンを利用した Structured-light 方式により，プロジェクタとカメラ座標の変換マップを作成した．変換マップの計算においては，壁（プロジェクタ投影面）に付箋紙の全体が完全に接着する前提とし，付箋紙の浮きへの対応は，今回の実装では対象外とした．本プロトタイプおよび後述のユーザースタデ
ィでは，全面が接着面タイプの付箋紙を利用した．実装には Python，OpenCV を用いた．
(2)付箋領域の抽出
一般的な利用環境である，白無地の壁面に対し，色のついた付箋を貼り付ける前提とした．付箋領域である画像のR, G, B 成分をそれぞれ強調した後に，設定パラメータの閾値で２値化した画像に対して，輪郭抽出と単純形状への近似を行うことで，付箋領域を抽出した．
(3)付箋の文字認識
文 字 認 識 に は ， Google Cloud Vision API のDOCUMENT_TEXT_DETECTION [a] を用いた．上記 APIに USB カメラで撮影した付箋群画像を入力として与え，認3.2 プロトタイプ実装

識テキストデータおよびその位置座標情報を取得する．(2)3.2.1 ハードウェア構成で抽出した各付箋領域座標内に含まれる認識テキストデー(A)と(B)の機能を実現するプロトタイプのハードウェア構成を説明する．図 2 のように，指タッチ入力センサー付
き プ ロ ジ ェ ク タ (EPSON EB-1430WT) ， USB カ メ ラ(ELP-USB8MP02G-SFV)，PC(TOSHIBA dynabook R63/D)で構成した．指タッチ入力センサーは，どの付箋をタッチしたかの検出に利用する．プロジェクタは影のプロジェクシ
ョンに用いる．USB カメラは，壁面に貼られる付箋全体の映像を一定間隔で取得する．PC は，後述のソフトウェア実装の配置と実行を行う．

タ群を結合することで，各付箋紙に書かれている内容をテキストデータとして得た．
(4)文書類似度の算出
Universal Sentence Encoder の Multilingual large モデル
version 3 [b] を利用して，(3) で認識した各付箋紙に書かれている文書間の類似度を算出した．文書間類似度はコサイン類似度として算出され，1.0（類似度高）～-1.0（類似度低）の範囲となる．
(5)付箋の影画像生成
文献 [8] を参考に影画像を生成した．(2)の付箋領域のみ

3.2.2 ソフトウェア実装

を黒に塗りつぶした画像に対し，水平方向，垂直方向へ移(A)と(B)の機能を実現するプロトタイプのソフトウェア実装について，下記(1)～(6)の流れで説明する．

© 2020 Information Processing Society of Japana) https://cloud.google.com/vision/docs/fulltext-annotationsb) https://tfhub.dev/google/universal-sentence-encoder-multilingual-large/3849

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

3B-122020/3/9

図 3 機能(A)：奥行きへの擬似的な付箋移動操作

図 4 機能(B)：奥行き強調による付箋類似度可視化

インタフェース例

インタフェース例（左）：「鼻の長い生き物」付箋をタッチした時の状態

動し，ガウシアンフィルタをかけてぼかした．水平，垂直（右）：「りんご」付箋をタッチした時の状態方向への移動量は，機能(A)は設定パラメータの最大移動量を４段階の奥行きに応じて案分した値，機能(B)は最大移動量に類似度を乗じた値（ただし類似度閾値 0.2 以下の場合0 を乗じ，影を生成しない）とした．移動後の影と，移動

4. ユーザテストと考察
本章では，3 章で開発したプロトタイプを用いて実施し前の元の付箋領域の重なり部分を除去し，付箋の影画像をたユーザテストの内容を記述する．

生成した．本プロトタイプでは，光源や視線位置の考慮は4.1 ユーザテスト行わず，すべての付箋において，元の付箋位置から同じ量筆者が所属する会社社員 7 名に対し，プロトタイプの 2の水平，平行移動させた位置に影を生成した．

機能の実演・体験デモを行い，意見を収集した．(A)(B)の(6)付箋への影投影機能について，使えそう／使えなさそうの 2 件法でヒアリ(5)で生成した影画像を，(1)で生成した変換マップで座標ングした結果，(A)は使えそう 0 名，使えなさそう 7 名，(B)変換を行い，プロジェクタで投影した．

は，使えそう 7 名，使えなさそう 0 名であった．また，主3.3 プロトタイプのインタフェース例

な自由意見は，以下の通りであった．

図 3 に機能(A) 奥行きへの擬似的な付箋移動操作のイン機能(A)の主な意見

タフェース提示例を示す．図 3 は，(A)のモードにおいて付⚫ 奥行きの段階の違いが分かりにくい．使いこなすのが箋に書かれた数字の回数分，付箋をタッチした後の，バー難しいだろう．影が色分けされた方が分かりやすい．

チャルな影のプロジェクション結果を示している．付箋の⚫ 奥行きでグルーピングするというのに慣れていないた

タッチ回数が増えるほど，影と付箋紙の距離が大きくなっていく（付箋が手前方向に浮きあがってくる）．

め，難しい．慣れれば使えるかもしれない．
⚫ 色分けできた方がいいのではないか．

次に機能(B) 奥行き強調による付箋類似度可視化のイン機能(B)の主な意見

タフェース例を図 4 に示す．図 4 左のように，「鼻の長い生⚫ 面白い．新しい．

き物」タッチすると，類似度の高い「首が長い動物」付箋⚫ 振動があった方が，無い場合よりも分かりやすい．の影が大きく提示される．類似度の少し高い「カラス」付⚫ 振動はいらないかもしれない．振動しなくても分かる

箋にも影が小さく提示される．また図 4 右のように，「りんので．

ご」付箋をタッチすると，「アップルパイ」，「みかん」の影⚫ 一度付箋を分類した後に，気づきが得られそうで良い．

が大きく提示され，類似度の少し高い「オレンジジュース」⚫ あまり似ていない付箋は小さい影が付かない方が良い

付箋にも影が小さく提示される．この時の実際の類似度ののではないか．

値を付録 A1 に示す．また，このインタフェース例では，3.2.2(3)で述べた文字認識の精度は 100%であった．

4.2 考察また，減衰振動アニメーションを有効にした場合は，図プロトタイプ実装とユーザテストの結果を考察する．

4 の状態を振動の中心として，類似度が高いほど振幅が大機能(A)については，全員が使えなさそうと回答した．そきく，類似度が低いほど振幅が小さく，影が振動しながらの理由が，影（奥行き）のレベル差の知覚が難しく，分類減衰し最後に停止し図 4 の状態に戻るアニメーションを提に利用するのは難しいとのことであった．このことから，示した．

今回のプロトタイプ実装では，機能(A)の実現は難しいことが分かった．機能(A)の改良アイデアの 1 つとして，光源や視線による影の変化を考慮することで，奥行きレベル差の© 2020 Information Processing Society of Japan850

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

3B-12
2020/3/9

知覚を改善できる可能性がある．しかし，複数人の視線のIllusory Depth Impressions to Two-dimensional Real Objects,”
NTT Technical Review, vol. 16, no. 11, pp. 30–34, 2018.
T. Kawabe, “Shadow-based illusion of depth and transparency inprinted images,” ACM Trans. Appl. Percept., pp. 10:1–10:12,
2019.
L. Van Der Maaten and G. Hinton, “Visualizing data using
t-SNE,” J. Mach. Learn. Res., vol. 9, pp. 2579–2605, 2008.

考慮を同時にプロジェクションできない問題が残る．今後，影による擬似的な奥行きレベル差の知覚に関する詳細な調[8]

査，奥行き知覚を補助する手法等，研究課題としたい．
機能(B)については，類似付箋を見つけやすくする手段と[9]して有用性，利用性，実現性が高い感触を得た．ただし，機能(A)の結果から，細かいレベルの類似度の違いを可視化しても，ユーザは知覚できていない可能性がある．類似度

付録の高い付箋を目立たせるだけであれば，付箋に色やマーク

付録 A.1 インタフェース例における付箋テキスト間の類をプロジェクションする単純な方法がある．これらの方法に比べ，影による可視化の特性や有用性については，今後
詳細な評価実験で明らかにしたいが，推測できる仮説の１つを述べる．ユーザが能動的に分類したいときは，付箋紙

似度
1
首が長い動物
アップル
2
パイ

12

34567

8910

111.000.04

1.00

3 服を着る

0.09

0.10

1.00

オレンジジュース

-0.010.34の色を変えるなどの明示的な可視化が有効であり，それと

4

0.14

1.00

なくシステム側が分類を示唆したいときは，本提案システ

5 りんご

0.22

0.40

0.26

0.31

1.00

ムのように影をつけるといった非明示的，アンビエントな

6 空を飛ぶ

0.12

0.15

0.28

0.22

0.32

1.00

7 セーター

0.19

0.18

0.64

0.22

0.31

0.17

1.00

鼻の長い生き物

0.68

0.07

0.08

0.04

0.28

0.20

0.08

1.00

9 カラス

0.28

0.23

0.23

0.24

0.49

0.39

0.33

0.29

1.00

10 甘い

0.09

0.32

0.23

0.29

0.57

0.26

0.26

0.10

0.40

1.00

11 みかん

0.13

0.58

0.27

0.54

0.54

0.28

0.30

0.20

0.42

0.53

可視化が有効である可能性がある．今後の検証課題としたい．

5. おわりに8

本稿では，物理的な付箋紙環境における付箋移動と類似付箋探索の支援を目的としたインタフェースを提案した．
付箋紙へのバーチャルな影のプロジェクションマッピング
により，(A)付箋を張り替えずに奥行き方向へ擬似的に移動する，(B)文書解析に基づく文書間類似度を可視化する，2つの機能を実現した．ユーザテストを通じて，(A)は奥行きレベルの知覚が難しく改善が必要，(B)は類似付箋を目立たせる目的として良好な感触が得られた．今後，ユーザテス
トで得られた知見を踏まえ，プロトタイプの改良と提案手法の有効性や特性についての詳細な評価を行う予定である．

参考文献
[1]

[2]

[3]

[4]
[5]

[6]

[7]

M. M. Jensen, S. K. Thiel, E. Hoggan, and S. Bødker, “PhysicalVersus Digital Sticky Notes in Collaborative Ideation,” Comput.
Support. Coop. Work CSCW An Int. J., vol. 27, no. 3–6, pp.
609–645, 2018.
G. Harboe and E. M. Huang, “Real-world affinity diagramming
practices: Bridging the paper-digital gap,” Proc. CHI '15, pp.
95–104, 2015.
M. Ogata and M. Fukumoto, “FluxPaper: Reinventing paper withdynamic actuation powered by magnetic flux,” Proc. CHI '15,
pp.29-38, 2015.
Y. Yang et al., “Multilingual Universal Sentence Encoder forSemantic Retrieval,” arXiv preprint arXiv:1907.04307, 2019.
M. Chidambaram et al., “Learning Cross-Lingual Sentence
Representations via a Multi-task Dual-Encoder Model,” Proc.
RepL4NLP-2019, pp. 250–259, 2019.
D. Smilkov, N. Thorat, C. Nicholson, E. Reif, F. B. Viégas, andM. Wattenberg, “Embedding Projector: Interactive Visualization
and Interpretation of Embeddings,” arXiv preprint
arXiv:1611.05469, 2016.
T. Kawabe, “Ukuzo―A Projection Mapping Technique to Give

© 2020 Information Processing Society of Japan851

1.00