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

1B23
2018/3/5「トイレ型 UI」におけるソーシャルログの可視化と共有ー「コミッチケーション」の実践を通じてー
中島理紗 1

望月茂徳 1

斎藤進也 1

概要：本研究では，昨今のソーシャルメディアの社会的インパクトを踏まえ，ソーシャルログを対象としたデータ可視化のあり方について検討し，独自のデザインを提案する．独自デザインの開発においてポイントになるのは，「笑いの要素」や「コミカルな要素」をいかに取り込むかという点である．本研究では，そうしたコミカルなデザイン要素を取り入 れるこ とで実現 される( ソーシャ ルメデ ィア上の) 人 びとの共愉 的な対 話を「コ ミッチケ ーショ ン（comicication）」と定義し，独自 Web システム「TOTOL」の開発を通じ，実現を目指す．本稿では，「TOTOL」の機能やデザインについて紹介するとともに，試験運用の結果を踏まえ，システムの有用性について論じる．

Visualization and Sharing of Social Logs with “Toilet Type UI”-Through the Practice of “comicication”RISA NAKAJIMA1 SHIGENORI MOCHIZUKI1SHINYA SAITO1
Abstract: In this research, we propose an original data-visualization method and UI design for log data of social media. The
method and design involves“elements of smile” that makes social-communication enjoyable. We label such thought of design as“comicication”. Based on the design concept, we are developing the Web system “TOTOL” now. We are going to demonstrate“TOTOL", discuss the utility and usefulness of it on the presentation.

1. 背景と目的
1.1 背景はき出された“もやもや”を可視化し，ユーザーが対話的に操作可能な“キャラクター”として蓄積する機能を実装する．

Web 技術の応用分野は，昨今，飛躍的に多様化しており，サーバー上には人々の行動やコミュニケーションの記録であるソーシャルログが大量に蓄積されている．

1.2.3「下水処理場」の実装
ユーザーらが相互に他者の“もやもや”を共有し，ポジティブな影響を与えあうことのできる「場」を構築する．

1.2 目的
本研究は，こうした状況を踏まえて，ソーシャルログの1.3 先行研究・事例可視化に関する独自の知見を導き出すことを目的とする．

本研究と同様に日常をデザインや可視化によって明るく

今回は特に，人びとが，はき出したいけれども，はき出せ楽しいものにさせることを目的とする研究はいくつかなさない“もやもや”とした感情とその対処方法に着眼点を置き，れている．例えば，永田ら(2016)[1]は，緊張することへのそれを解消する為のソーシャルメディアにおける独自のマイナスイメージをプラスイメージに変える体験を提案す

UI 及び，データの可視化手法の開発をおこなう．

る絵本の制作をおこなっている．

具体的には，下記の３点を研究目的として設定する．

一方で，ソーシャルログを可視化する研究もいくつか存在している．浦野ら(2016)[2]は，ツイッターでトレンドに

1.2.1 トイレ型 UI の実装
日常において，はき出したいけれども，はき出せない“もやもや”を現代人は心の中に秘めているという想定のもと，これをデザインの力によって外化させる（はき出させる）機能を実装する．

なっているハッシュタグのデータを 3D オブジェクトで表現することで，SNS 上における人びとの興味を可視化する研究をおこなっている．
また， Web サービスにおけるネガティブな投稿を他ユーザーが閲覧する際に受ける印象を緩和させる表現の研究もおこなわれている．吉永ら(2011)[3]は，Web サービスに

1.2.2 キャラクター化機能の実装
1 立命館大学大学院映像研究科
Ritsumeikan University Graduate School of Image Arts

© 2018 Information Processing Society of Japan

おいて，他人に見せたくない本音の投稿を隠す「建前」の投稿を記述する手法を提案している．

270

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

1B23
2018/3/5

先行事例としては，ヤフー株式会社の「Yahoo!リアルタ

本研究では，Node.js との相性を考慮し，JSON 形式でのデイム検索」[4]というサービスがあげられる．これは，検索ータ入出力が可能な NoSQL タイプのデータベースシステしたワードのツイート数の推移や検索したワードが含まれムである mongoDB を採用した． 図 1 は，「TOTOL」のシる投稿のテキストデータからポジティブな投稿とネガティステム構成図であり，図 2 は「TOTOL」のシステム操作フブな投稿に分けて，その割合を円グラフにして表示していローである．

る．それらの感情は折れ線グラフにも表され，時間ごとに感情の動きを見ることが可能である．
このようにデザインによってマイナスイメージなものをプラスの感情に変化させる研究やソーシャルログそのものの可視化，ネガティブな投稿をそのまま表示させるのではなく何かに置き換えて表現することで印象を緩和させる手法の研究はなされている．本研究では，それらの要素を組
図 1

み合わせることで，ソーシャルログを対象としたデータ可視化研究を発展させられるのではないかと考えた．

Figure 1

システム構成図
System Configuration.

1.4 研究課題
本研究では，「笑いの要素」や「コミカルな要素」をより積極的に UI および機能のデザインに導入するコミュニケーション・メソッドの構築を目指す．こうしたメソッドを本研究では，「コミッチケーション（comicication）」と呼ぶこととし，これを実現するための仕組みの構築を研究課題とする．

2.

研究方法とシステム概要

図 2

2.1 研究方法

Figure 2

システム操作フロー
System operation flow.

本研究では，上記の研究課題にアプローチする方法として，オリジナル Web システム「TOTOL」(=The Online Toilet
Of Lament)を開発し，これを運用する中で，コミッチケーションの成立要件を具体的に検討していく．

2.3.2 トイレ型 UI のデザイン
図 3 は「TOTOL」のホーム画面 a における「トイレ型UI」である．ここでは，主要な UI パーツ(2.3.2.1)トイレ，(2.3.2.2)マイクボタン，(2.3.2.3)吐き出しボタンについて解2.2 UI のデザイン説する．

上記の目的を踏まえ，デザインの主題として選んだのがトイレである．トイレは排泄のための場であり，誰しも使用する道具でもある．排泄という行為は，老若男女，誰しもするものでありながら，公衆の面前ですることはできず，隠れてする「憚り」でもある．我々は，こうしたトイレあるいは排泄の意味合いが，親しみやすさやコミカルさにつながるのではないかと考え，デザインの核として設定することとした．
さらに，現実世界における下水処理の仕組みを模して，“もやもや”を協調的に処理する「場」の UI デザインをすることとした．
図 3
2.3 システム概要

ホーム画面における「トイレ型 UI」

Figure 3 "Toilet type UI" on home screen.

2.3.1 使用プログラミング言語とデータベースシステム
Web システム構築において，フロントエンドは HTML5，2.3.2.1 トイレ

CSS3， JavaScript(p5.js，jQuery)を用い，バックエンドはJavaScript(Node.js)を使用してプログラミングをした．また，© 2018 Information Processing Society of Japana ホーム画面 URL [http://asobi-lab.com:443]

271

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

1B23
2018/3/5

ホーム画面の中央に，トイレ型 UI が設置されている．

はき出されたテキストデータによって表示される種類が異

配色は明るく癒しのイメージである黄色〜緑色を使用した．

なる仕様になっており，現時点で 11 種類用意されている

トイレの左側には二種類のボタンがある．赤色はマイクボ(図 5)．
「わだかまりん」にクリックやタッチによって触れタン，緑色は吐き出しボタンである．

ると，それに関連するテキスト情報が表示されるとともに音声出力される．同時に「わだかまりん」のサイズが段階

2.3.2.2 マイクボタン的に小さくなる．そして５回クリックやタッチされると最マイクボタンを押すと，Web Speech API を用いた音声認

終的には画面から消滅する．また，一度もクリックやタッ識システムが起動する．音声認識システムが起動することチをされずに一定時間経過した場合は，「へどりん」というにより，声に出した“もやもや”がテキスト化される．そヘドロをモチーフにしたキャラクターに変化する(図 5)．それらはトイレの中央にあるテキストエリアに表示される．

して，「下水処理場」の中の「わだかまりん」の総数が 20個以下になると，水（＝背景）の彩度が上がり，澄んだ色2.3.2.3 吐き出しボタン合いに変化する．いわば，水が“浄化”されるのだ．

吐き出しボタンを押すと，水が流れると共に，テキストがトイレの奥に流されるアニメーションが実行される．この時，テキストデータはサーバーサイドに送信され，データベース(mongoDB)に格納される．なお，テキストデータは「下水処理場」においてキャラクター化され表示される．
2.3.3「下水処理場」画面について
図 4 は「TOTOL」における「下水処理場」bである．ここでの主要な UI パーツ(2.3.3.1)「下水処理場」，(2.3.3.2)「わだかまりん」，(2.3.3.3)「わだかまりん」の個数表示について解説する．

図 4
Figure 4「TOTOL」における「下水処理場」

図 5"Sewage treatment plant" in "TOTOL".

2.3.3.1「下水処理場」

Figure 5「わだかまりん」カテゴライズ表"Wadakamarin" categorization table.

2.3.3.3「わだかまりん」の個数表示「下水処理場」画面の中央に「下水処理場」UI(図 4)が設

ユーザーが「下水処理場」画面へアクセスした時に浮遊置されている．デザインは，水槽をイメージした．はき出している「わだかまりん」の数が表示されている．ホーム

された，“もやもや”が増えると水が汚くなる（画面の彩度画面よりはき出されるとリアルタイムに数値が変化する．

を下げ，灰色がかった色合いにかえる）．

3.
2.3.3.2「わだかまりん」

運用とフィードバック3.1 運用「下水処理場」の中を浮遊しているものは，「わだかまり「TOTOL」には，「通常ブラウザ版」（図 3）と「インスん」といい，ユーザーからはき出された“もやもや”のテキタレーション版」（図 6）がある． 「通常ブラウザ版」は，ストデータを可視化したものである．
「わだかまりん」は，一般的なウェブコンテンツと同様に，Google Chrome やMozilla Firefox といった Web ブラウザで閲覧するタイプのb 「下水処理場」画面 URL [http://asobi-lab.com:443/gesui.html]© 2018 Information Processing Society of Japanものである．一方で，「インスタレーション版」は，展示会

272

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

1B23
2018/3/5などにおいてデモンストレーションをする際に使用するものであり，介護用トイレ型おまる(アロン化成 サニタリー
SP 据置式アイボリー)と複数の Android 端末を組み合わせた独自の設置形態のもと運用をする．

図 7
Figure 7

日常の中での“もやもや”の有無
Presence of "Moyamoya" in everyday life.

3.2.2.2 日常の中での他者の“もやもや”への対応
この項目では，「日常の中で，他者が何か“もやもや”とし
図 6「インスタレーション版 TOTOL」

Figure 6

Installation version of "TOTOL".

た感情を抱いていると感じたとき，あなたは多くの場合どうするか」についてたずねた． 図 8 は，日常の中での他者の“もやもや”への対応についての結果をグラフにまとめた

3.2 ユーザーからのフィードバックものである．なお，この項目は複数選択可である．その結

3.2.1 対象

果，「なにもしない」が 13 人，「気づかないふりをする」が2017 年 10 月 21 日(土)に立命館大学映像学部主催の映像

10 人，「距離をとる」が 8 人，
「話しかける」が 14 人，「“もコンテンツの展示会「EIZO JUNCTION×CAREER FAIR（ジやもや”について尋ねる」が 6 人，「その他」が 1 人となっャンキャリ）」において「インスタレーション版」を体験した．
「なにもしない」，「気づかないふりをする」，「距離をとた来場者 46 人（男性 19 人，女性 25 人，性別無回答 2 人）る」という項目を合わせると，全体の半数以上になることに対し，アンケートを実施した．

から，他者の“もやもや”に対し積極的な関わりを持ちたくないと考える人が多いことが伺える．

3.2.2 結果
ここでは，上記アンケートの結果を記述する．
3.2.2.1 日常の中での“もやもや”の有無
この項目では，「日常の中ではき出したいけれども，はき出せない，“もやもや”とした感情を覚えることはあるか」についてたずねた． 図 7 は，日常の中での“もやもや”の有無についての結果をグラフにまとめたものである．その結果，「よくある」
が 25 人(55%)，「たまにある」が 19 人(41%)，「ほとんどない」が 2 人(4%)となり，全体の 96%の人たち

図 8が“もやもや”を抱えていることがわかった．このことから，

Figure 8

誰しも日常で，はき出せない感情を抱くのではないかと考

日常の中での他者の“もやもや”への対応
Correspondence to 'Momoyamaya' by others ineveryday life.

えられる．
3.2.2.3 はき出す行為を促進する効果
この項目では，「トイレの形をした音声入力画面（トイレ型 UI）を用いることで，普段ためこんでいる “もやもや”をはき出してみたくなったか」についてたずねた． 図 9
は，はき出す行為を促進する効果についての結果をグラフにまとめたものである．その結果，「かなりなった」が 11人(24%)，「ややなった」が 25 人(54%)，「どちらともいえない」が 8 人(18%)，「あまりならなかった」が 2 人(4%)となった．全体の 78%のユーザーがトイレ型 UI を用いること© 2018 Information Processing Society of Japan273

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

1B23
2018/3/5

で普段ためこんでいる“もやもや”をはき出してみたくなったと回答した．

図 10「下水処理場」におけるキャラクターへのタッチの誘発

図 9
Figure 9

はき出す行為を促進する効果

Figure 10

The effect to promote the act of spitting out

Induction of touch to characters in"sewage treatment plants".

"Moyamoya".
3.2.2.6 キャラクターへのタッチが誘発された理由
3.2.2.4 はき出す行為が促進された理由

この項目では，「(3.2.2.5 で「かなり思った」，「やや思っ

この項目では，「(3.2.2.3 で「かなりなった」，「ややなった」と答えた方のみ)なぜ，「わだかまりん」に触れてみたた」と答えた方のみ)トイレ型 UI のどのような点が，“もやいと思ったか」についてたずねた．なお，この項目は自由

もや”をはき出したいという気持ちにつながったと思うか」

記述形式である．ここでは「他の人はどんなことをモヤモについてたずねた．
なお，この項目は自由記述形式である．

ヤするのかなーと思ったから」「他人の心の中が気になる」

その結果，「トイレという馴染み深いモチーフであるから」といった普段はうかがい知れない他者の心の中にある“も「トイレだから何でもいいや！という気持ちになりましやもや”への関心を口にする体験者が目立った．その中でた．
」
といったトイレに対する親しみを指摘する声が目立っ「他者の悩みを見ることで自分だけじゃないと思える．
」

た．また，「トイレ型が面白くて，流せる」「トイレは汚れ「色んな人の“もやもや”を聞いて，しゃべってくれるから，を流す部分だから」といったトイレの機能面とトイレ型 UI

おもしろくて自分のたまっていることもアホらしくなる．
」

での体験をなぞらえた面白さについての意見も聞かれた．

といった他者の“もやもや”に触れることで自分の気持ちが軽くなるという意見もあった．

3.2.2.5「下水処理場」におけるキャラクターへのタッチの誘発この項目では，「「下水処理場」には「わだかまりん」と3.3 考察
3.3.1 トイレ型 UI によるコミッチケーションの効果

いう自分や他人がはき出した言葉がキャラクター化されてアンケート結果（3.2.2.1）から，日常において，容易に表示されており，その「わだかまりん」に触れてみたいとはき出すことができない“もやもや”とした感情を抱く人思ったか」についてたずねた． 図 10 は，「下水処理場」にが多いことがわかった．この状況に対し，「TOTOL」のトおけるキャラクターへのタッチの誘発についての結果をグ

イレ型 UI を用いることによって，そうした“もやもや”ラフにまとめたものである．その結果，「かなり思った」がのはき出す行為が促進されることが示唆された（3.2.2.3）．

27 人(59%)，「やや思った」が 15 人(33%)，「どちらともいその要因としては，我々の狙い通り，人々がトイレにもつえない」が 2 人(4%)，
「あまり思わなかった」が 2 人(4%)

イメージ（親しみやコミカルさ）を UI デザインに落としとなり，「かなり思った」，「やや思った」という肯定意見が込んだことで，「はき出す」という行為が促進されたと考え

実に全体の 92%を占め，キャラクターへのタッチが強く促られる(3.2.2.4)．

されていることが伺える．

こうしたことから，トイレ型 UI は，我々の考えるコミッチケーションを促進するものとして実装できたと考えられる．
3.3.2 キャラクター化によるコミッチケーションの効果はき出された“もやもや”を「わだかまりん」というキャラクターとして可視化することは，「可愛らしいキャラクターを作りたい」という思いから自らの“もやもや”をは© 2018 Information Processing Society of Japan274

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

1B23
2018/3/5

き出すことを誘発する効果があると同時に，他者がはき出した“もやもや”に触れたいという動機付けにつながることがわかった（3.2.2.4，3.2.2.5）．アンケート結果（3.2.2.2）から，通常，日常において人びとは，他者の“もやもや”に内心では興味をもちつつも，積極的には触れたがらない傾向があることが見て取れる．今回おこなったキャラクター化は，そうした状況をコミッチケーションの力によって変容させ，結果として他者へのアクセスを促進したといえる．
3.3.3「下水処理場」によるコミッチケーションの効果「下水処理場」において，自身や他者によってはき出された多数の“もやもや”（＝「わだかまりん」）が一箇所にあつめられ，俯瞰的に眺められるかたちになることで，（現実空間ではそれ自体が触れあうことのない）複数の“もやもや”が，あたかも生き物が触れあうがごとく自律的に共鳴し合っているような印象をもたらすことが示唆された（3.2.2.5，3.2.2.6）．
またここから，「自分だけが“もやもや”を抱えているのではない」という実感とともに，他者に対する励ましや慈しみの感情の芽生えがあったことが伺えた．
また，「わだかまりん」へのタッチや“もやもや”のはき出しが一定程度誘発されていると推察され，コミュニケーションの活性化の効果があったと考えられる．

課題と展望

4.

以上みてきたように，トイレをモチーフに，“微笑ましさ”や“コミカルさ”を意図的に UI デザインや機能に取り入れた Web システム「TOTOL」は，通常はき出し辛く，また，接しがたい“もやもや”を協調的に処理するツールとして機能していることが示唆された．
一方，現状では，運用形態，および，ユーザーからのフィードバックがかなり限定的なものであるため，今後より多様なフィールドで運用するとともに，科学的な手法を用いてより厳密に有用性を検証していく必要があるだろう．
そして，「コミッチケーション」概念自体の精緻化を計っていきたい．
参考文献
永田 翔香， 山崎 和彦（2016）「緊張を楽しむためのデザインの提案」日本デザイン学会第 63 回研究発表大会セッション
ID: PB-13[2] 浦野 三貴， 竹下 由里子，菊池 司（2016）「SNS における話題の傾向の可視化に関する研究」映像情報メディア学会技術報告 = ITE technical report 40(11)，99-101，2016-03[3] 吉永 珠里， 宮下 芳明（2011）「建前のあとに：空白を利用したウェブコンテンツのステガノグラフィ」情報処理学会 イ
ンタラクション 2011[4] Yahoo!リアルタイム検索[https://search.yahoo.co.jp/realtime][1]© 2018 Information Processing Society of Japan275