# 第 4 部：ビヨンドブックのプロト タイプ制作

Part 4: Prototyping the Beyond Book

野見山 真人
NOMIYAMA Masato
Design Engineer
}

谷川 智洋 TANIKAWA Tomohiro

東京大学

\begin{abstract}
抄録：書籍や Web コンテンッの膨大なデータをもとにユーザの好奇心をサポートする知識体験プラットフォーム BB のプロトタイ プをUI/UX 設計を重視して制作した。BB のUI/UX 設計では、「知りたいことから体系的に学べる」「遊び感覚で好奇心を育める」「書籍と Webコンテンツを横断できる」という3つの知識体験を設計して、新しい知識体験の形態を模索した。BB のユーザは知りた いことをモバイルアプリで調ベることで、書籍や Web コンテンツに裏付けされた知識を体系的に学びながら徐々に好奇心を育てる ことができる。このような知識体験の UI/UX 設計は、デジタルアーカイブの利用形態全般に応用可能であり、デジタルアーカイブ に含まれる知識コンテンツを楽しみながら系統的に学ぶことをサポートする。

Abstract: Based on the enormous amount of data of books and Web contents, we produced a prototype of BB, a knowledge experience platform that supports user curiosity, with an emphasis on UI/UX design. In the UI/UX design of BB, we designed three knowledge experiences: "You can systematically learn from what you want to know," "You can cultivate curiosity with a sense of play," and "You can cross between books and Web content," and explored new forms of knowledge experiences. By researching what they want to know on a mobile app, BB users can gradually develop curiosity while systematically learning knowledge backed up by books and web content. The UI/UX design of such knowledge experiences can be applied to all forms of use of digital archives, and supports the systematic learning of the knowledge content contained in digital archives while having fun.
\end{abstract}

キーワード：BBプロトタイプ、画面設計、UI/UX設計、新しい知識体験、ゲーミフィケーション、BBマップ、星座

Keywords: BB Prototype, Screen Design, UI/UX Design, New Knowledge Experience, Gamification, BB Maps, Constellations
## はじめに

$\mathrm{BB}$ 開発の意義と目的、その機能と利用形態、それを支える要素技術等の検討を重ねながら、BB のプロダクト機能要件（表 1）を洗い出し、プロトタイピングを通じて新規性や UI (User Interface)/UX (User eXperience)設計について具体的な検討を重ねた。本稿では UI/UX 設計を中心にプロトタイプの概要について紹介する (第 2 部図 1 制作フロー図内 (8) ${ }^{[1]}$ 。

## 1. 目的とアプローチ

BB のコンセプトをもとに具体的なサービスの形を検討するため、サービスの UI/UX 設計を行なった。 ここまで検討してきた BB の機能要件や要素技術を取りまとめてサービスを作るとき、ユーザにとって価値ある体験を本当に提供できるかどうかは具体性を高めないと見えてこない。そこでサービスのUI デザインやアプリケーションの実装を実際に進めながらユーザ体験の理想形を模索した。

BB のUI はサービス利用者（以下ユーザ）が継続的に利用することを前提にモバイルアプリとして設計し表1 プロダクトの機能要件

 \\

た。もしモバイルアプリではなく Web としてサービスを提供した場合、ユーザが能動的に利用する意志を持たない限り継続的な利用を望めない。スマートフォンから継続的にアクセスしやすいモバイルアプリとして BB を設計することで、利便性の高いサービスの構築を目指した（図1）。

図1 サービスのイメージ

BB の UI/UX 設計では、静的な画面制作と動的なプロトタイプ制作を並行して進めた。静的な画面設計と動的なプロトタイプ制作の目的はそれぞれ、サービスの全体像を構築することとサービスの主要な体験を詳細化することである。これら 2 つのアプローチを同時に行うことで、全体と詳細の整合性を保ちながらサー ビスの具体化を進めることができた。静的な画面設計では、UIデザインツールの Figma ${ }^{[2]}$ を用いた。サー ビスのいくつかの主要画面について、要素技術や機能要件を踏まえながら Figma でUIコンポーネントをレイアウトして、サービスの全体像を構築した。レイアウトがひと通り完了した後は、Figmaのプロトタイピング機能を用いて簡易的な画面遷移を作りサービスの動作を確認した。Figmaのワークスペースは常にタスクフォースメンバーに公開することで、いつでもメンバー からのフィードバックを受けられる環境を準備した。動的なプロトタイプ制作では、Web 技術を用いてサービスの主要画面を開発した。開発した主要画面は、 ユーザが体系化された知識を探索して読み込む箇所である。インタラクションやUXを詳細に作り込むことで、ユーザにとって価値あるサービスとは何かを模索した。なお動的なプロトタイプ制作で Web 技術を用いた理由は 2つある。1つは開発中のプロトタイプを Web 経由でタスクフォースメンバーと共有して、いつでもフイードバックを受けられる環境を作るためである。もう 1 つの理由は、ビルド速度やライブラリ数など、開発のイテレーションを早く回すための環境が Web 技術周辺に揃っていたためである。

## 2. 設計の概要

BB は書籍や Webコンテンツの膨大なデータをもとにユーザの好奇心をサポートする知識体験プラット
フォームである。BB で知りたいことを調べると、書籍や Webコンテンツに裏付けされた知識が体系的に可視化される。ユーザの知識レベルに合わせてコンテンツを深堀りすることができるため、ユーザは好奇心に任せて遊ぶように楽しく学ぶことができる。

もともと書籍や Web コンテンツを用いた知識体験にはそれぞれ短所がある。書籍はあるトピックについてパッケージ化されているため、ちょっと知りたいというユーザの小さな好奇心に応えることができない。一方で Webコンテンツは検索方法によって結果が一意に決まるため、少しずつ成長するユーザの知識レべルに寄り添うことができず、体系立てた理解を促すことができない。

そこで書籍や Webコンテンツでは理想的な知識体験を得られなかった人たちに向けて、「知りたいことから体系的に学べる」遊び感覚で好奇心を育める」書籍と Webコンテンツを横断できる」という3つの知識体験を設計した。書籍と Webコンテンツをひとつのプロダクトに統合して、どちらか片方だけでは得られない新しい知識体験の形態を模索した。

## 3. 知識体験の設計 1 「知りたいことから体系的に学べる」

知りたいことから体系的に学ぶ体験を作るため、書籍をマイクロコンテンツ化してその関連性を求める技術をサービス設計の前提とした。各書籍をマイクロコンテンツ化する目的は、手軽に短時間で学べる環境や複数の書籍にまたがって横断的に知識を学べる環境を作るためである。ユーザは目的の知識をすばやく学び、関連する知識をまとめて習得することで好奇心を育むことができる。このことは、大量かつ様々な分野の知識コンテンツを蓄積しているデジタルアーカイブの意義ある利用にもつながる。

書籍のマイクロコンテンツ化やマイクロコンテンツ間の関連性導出は、第 3 部で述べたように研究途中の技術である。今回は簡易的に処理して手作業で修正したデータを用いてサービスを設計した。まず書籍の各節や各カラムの内容をマイクロコンテンツとして定義して、マイクロコンテンツに登場する単語のうち、表 2 の条件に従うものを、マイクロコンテンツを束ねるトピックとして選定した。

続いて選定した各トピックについて簡易的に TF-IDF (term frequency - inverse document frequency) を求めた (図 2)。

この TF-IDF の値をトピック順に並べたものを各マイクロコンテンツの特徴ベクトルと定義して、次元削
減することでマイクロコンテンツを 2 次元上にマッピングした。最後にマッピングしたデータを理想形に近づけるため、手作業でマイクロコンテンツの位置関係を修正して関連性の高いマイクロコンテンツ間にリンクを追加することで、体系化された知識コンテンツのデータベースを構築した。

表 2 のようにトピック所属数を設定した目的は、トピック間でコンテンツ数に大きな格差を作らないためである。またトピック共起確率の設定は、意味の近い
トピックを乱立させないことが目的である。そしてトピック利用率の設定は、コンテンツ総数を十分確保することが目的である。これら 3 点の選定条件を設けることで、マイクロコンテンツを可視化したときに各トピックが意味的なまとまりを持つことを目指した。

「お酒の科学」4 冊（第 2 部参考文献 [2] 参照）のデー 夕をもとに生成した知識のデータベースが図 3 である。各マイクロコンテンツのタイトルが TF-IDF の最も高いトピックで色分けされて記載されている。この知表2トピックとなる単語の選定条件

 &  & 15 以上 \\

$
\begin{gathered}
t f=\frac{\text { マイクロコンテンツAにおけるトピックxの出現頻度 }}{\text { マイクロコンテンツAにおける全単語の出現頻度の和 }} \\
i d f=\log \left(\frac{\text { 全マイクロコンテンツの数 }}{\text { トピック } x を \text { 含むマイクロコンテンツの数 }}\right) \\
t f i d f=t f * i d f
\end{gathered}
$

数式 5.3(1). TF-IDF 9 定義

図2 TF-IDFの定義

識のデータベース自体を「BBマップ」、トピック毎のまとまりを「BB カテゴリ」、各マイクロコンテンツを 「BBコンテンツ」と定義した。なお今回選定したトピックは「料理」「香り成分」「栽培」「地域」「市場」「酒蔵」の 6 件で、トピック所属数・トピック共起確率・ トピック利用率は表 3 のようになった。

表3 選定したトピックの所属数・利用率・共起率

 & 栽培 & 地域 & 市場 & 酒蔵 \\

 & 栽培 & 地域 & 市場 & 酒蔵 \\

BB マップとはテーマごとに体系化された知識の地図のことで、あるテーマに関心を持ったユーザがテー マに関連する知識の全体像を俯瞰するためのものである。ユーザは知識の全体像を俯瞰しながら知りたいことを探索することで、学びの経路を意識しながら少しずつ関心を広げることができる。Web の検索結果のように一次元に並べられたリストと異なり、テーマに関連する情報が体系化された状態で点在するため、直感的かつ偶発的に知識を探索できるのが特徴である。

BB カテゴリとはトピックごとにまとめられた知識の群のことで、広大に広がる知識を束ねて体系的な理解を促すためのものである。ユーザは各知識コンテンツの意味的な距離を視覚で感じながら知識を探索することができる。BB カテゴリというランドマークがあることで、漠然とテーマに関する知識を眺めるたけでは得られない知識の土地勘を得られるのが特徴である。 BB コンテンツとは人が理解できる程度に知識の文脈を維持したコンテンツの最小単位のことで、ユーザが短い時間で気になる知識を学ぶためのものである。従来の書籍による知識体験と異なり、知りたいことに直接アクセスして短い時間で読破できるため、ユーザは途中で飽きることなく知識を学ぶことができる。もし理解や読解の難しいBB コンテンツに出会った場合も、隣接した BBコンテンツから外堀を埋めるように知識を広げられるため、モチベーション低下による離脱を防ぐことができる。
なお、ここでの BBマップ、BB カテゴリ、および $\mathrm{BB}$ コンテンツ間の関連性は、将来的には、第 3 部第 1 章で説明した機能群のさらなる開発により自動的に構築されるものとなる。

## 4. 知識体験の設計 2

## 「遊び感覚で好奇心を育める」

遊び感覚で好奇心を育む体験を作るため、ゲーミフィケーション要素や認知負荷の少ない情報デザインの導入を試みた。ユーザがちょっとした好奇心から新しい知識を学ぼうとしたとき、認知負荷を過度に与えてしまうとモチベーションの低下に繋がる。そこで努力して学んでいる感覚にユーザがならないように、 ゲーミフィケーション要素と認知負荷の少ない情報デザインをサービスに取り达むことで、身近で親しみのある知識体験を目指した。

先ずゲーミフィケーション要素をサービスに取り入れるにあたり、BBマップを夜空に見立ててサービス画面を設計した。天体を占める星座は BB カテゴリ、星座を構成する星は BBコンテンツに該当する。星座や星といった夜空のメタファーをデザインに導入することで、身近に感じられる知識体験の基盤を構築した。

具体的にゲーミフィケーション要素として導入したのは、星座や星のメタファーを活かしたクエストとコレクションである。クエストは新しい星を解放して達成するというもので、新しい知識に積極的に取り組んでもらうために導入した。一方コレクションは星座を辿って集めるというもので、長期的に学び続けてもらうために導入した。どちらも外的報酬に頼らず内発的動機づけを誘発することを意図した仕掛けである。

新しい星を解放して達成するクエストでは、「ロック」「アンロック」「コンプリート」という3つの BBコンテンツの状態を作り、それぞれの状態を視覚的に異なる星として設計した（図4)。各状態の星はユーザによるインタラクションに応じてアニメーションする。初期の BB マップでは、各 BB カテゴリの始点となる $\mathrm{BB}$ コンテンツ 1 点のみがアンロック状態で、それ以外はロックされている (図4左)。アンロックされた BB コンテンツを読破するとコンプリート状態になり、隣接する BBコンテンツがアンロックされて読める状態になる（図 4 中央）。ユーザは少しずつ新しい星を解放して達成することで、知識レベルに合わせて無理なくテーマに関する学習を進めることができる (図 4右)。星座を辿って集めるコレクションでは、BBコンテンッ間のリンクを星座に見立てて、踏破したリンクを強調表示することで徐々に星座が完成する様子を設計

図4 BBコンテンツの3つの状態

図5 星座が完成する様子

図6 BBマップが発展する様子

した（図 5）。これによりユーザは星座を完成して集めるという具体的な中間目標を設定して学習を進めることができる。漠然とした学習ではなく目標を持った学習にすることで、長期間モチベーションを維持できるようにした。

続いて認知負荷の少ない情報デザインを実現するため、情報量の制御と情報のシームレスな接続に取り組んだ。情報量の制御では、BBマップ内にある BBコ
ンテンツの情報を提示する際に、アンロック状態の BB コンテンツのみタイトル表示することで BB マップの認知負荷を抑えた（図 6)。ユーザは限られた情報に集中して新しい学習に踏み出すことができる。また情報のシームレスな接続では、情報を俯瞰するための BB マップと情報を学習するための BB コンテンッを1タップで行き来できるように画面設計した（図7）。特定のテーマについて学習する際に、各知識の繋がり

図7 情報のシームレスな接続

を意識しながら個別の知識を体系的かつ具体的に学習できる。

## 5. 知識体験の設計 3

## 「書籍と Web コンテンツを横断できる」

書籍と Webコンテンツを横断する体験を作るため、 $\mathrm{BB}$ コンテンツを起点に出版社・Web サービス・その他関連サービスとどのように連携するべきか検討した。出版社や Web サービスと連携することで、書籍やWebコンテンツを統合した新しい知識体験を作る。 また書籍や Webコンテンッ以外にも、特定の知識と関連するサービスにユーザを誘導することで、メディアを超えて開かれた知識体験をユーザに提供できる。

先ず出版社との連携では、ユーザの小さな知的好奇心をきっかけに新しい書籍と出会えるように、BBコンテンツで引用された書籍情報にすぐアクセスできる導線を用意した。ユーザは引用元の書籍情報を確認できるだけでなく、BB サービスのアカウントと連携して1タップで書籍を購入できる（図8）。BBコンテンツの知識をもっと深く掘り下げたいというユーザのニーズに応えることを目指した。

次に Web サービスとの連携では、ユーザがメディアを横断したときも知識体験に集中できるように、知識と関連する Webコンテンツにすぐアクセスできる導線を用意した。ユーザは $\mathrm{BB}$ コンテンツで青くハイライトされたテクストをタップすると、外部サイトに飛ぶことなくひと続きの体験としてWebコンテンツにアクセスできる（図9）。なお図9では Web サービスの一例として Wikipedia ${ }^{[3]}$ の情報が揭載されている。

図8 引用元の書籍情報の表示と購入

最後にその他関連サービスとの連携では、ユーザが五感で知識体験を楽しめるように、知識と関連するサービスにすぐアクセスできる導線を用意した。Web コンテンツのときと同様、ユーザは青くハイライトされたテクストをタップすると関連サービスのページにアクセスできる（図9）。図9では関連サービスの一例として、ワインの通販サービスの特集記事が掲載されている。特集記事に書かれたワインの知識を学ぶだけでなく、BBのアカウントと連携してその場でワインを購入することで、ユーザは五感で知識を楽しむことができる。このように書籍や Webコンテンツというメディアを超えた新しい知識体験を設計した。

## 6. まとめ

書籍や Webコンテンツの膨大なデータをもとにユーザの好奇心をサポートする知識体験プラットフォーム BB の UI/UX を設計した。BB の UI/UX 設計では「知りたいことから体系的に学べる」「遊び感覚で好奇心を育める」「書籍と Webコンテンツを横断できる」という 3 つの知識体験を設計して、新しい知識体験の形態を模索した。BB のユーザは知りたいことをモバイルアプリで調べることで、書籍や Webコンテンツに裏付けされた知識を体系的に学びながら徐々に好奇心を育てることができる。このような知識体験のUI/UX 設計は、デジタルアーカイブの利用形態全般に応用可能であり、デジタルアーカイブに含まれる知識コンテンツを楽しみながら系統的に学ぶことをサポートしてくれるだろう。

図9 関連サービスの表示と購入

## 註・参考文献

[1] エンジニアリングとデザインを専門領域とする野見山真人とインタフェース研究に取り組む谷川智洋が中心になって行なった。

[2] Figma. https://www.figma.com/ (参照 2021-08-28).
[3] Wikipedia カベルネ・ソーヴィニヨン.

https://ja.wikipedia.org/wiki/\%E3\%82\%AB\%E3\%83\%99\%E3\% 83\%AB\%Е3\%83\%8D\%E3\%83\%BB\%E3\%82\%BD\%E3\%83\% ВС\%Е3\%83\%В4\%Е3\%82\%A3\%Е3\%83\%8B\%Е3\%83\%A8\%Е 3\%83\%B3 (参照 2021-08-28).