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

1B-442023/3/1

美術作品の関連情報をなめらかに繋げる
美術鑑賞支援ツールの実装
大髙 真由1,a)

加藤 大弥1,b)

山村 浩穂1,c)

砂原 秀樹1,d)

概要：美術館には解説として，キャプションや音声ガイドなどの鑑賞支援ツールが設置されている．しかし，美術に対する知識が十分でない一般の所謂，美術初心者にとって美術館に設置されている既存の解説は美術の知識をある程度有している人向けであるため，美術に対する興味関心を深めることが困難になっている．そこで年代・様式・ジャンルごと，作者や作品の関連性，詳細な情報といった，美術作品に関する情報の種類別に整理し関連付け，それを可視化することで作品をより理解しやすい環境及び鑑賞体験を実現できるのではないかという仮説を立て, 美術鑑賞支援ツールの設計および議論を行った．本研究では，美術館に設置してある既存の解説に難しさを感じている美術初心者が美術への興味関心と理解を深め，楽しむことを目的に美術作品の関連情報をなめらかに繋げる美術鑑賞支援ツールの実装を行った．美術館の展示室に設置できるようタブレット端末を活用し，タッチ操作やスワイプ操作を行うことで解説を段階的に読むことができるように実装を行なった．そして，本ツールを使用することで美術初心者が作品が制作された時代背景といった，作品から作品単体以上のことを感じ取ることが可能となり，美術鑑賞をより楽しむことができることを目指す．

1. はじめに術作品の関連情報をなめらかに繋げる美術鑑賞支援ツールの設計を行なった [6]．本ツールは美術作品について解説

美術館には解説として，キャプションや音声ガイドなどする際に必要な情報を 3 つのレイヤーに分類し，大きな概の鑑賞支援ツールが設置されている．また，パソコンやス念から小さな概念へと情報が構成されている．しかしながマートフォンなどで閲覧できる美術鑑賞支援サービスの提ら，提示する情報のレイアウトやツールの操作性，具体的供が進められている [4]．その他にも学芸員の方から話をな美術館への実装方法に関して課題が残った．本研究では聞くことができるギャラリートークや対話型鑑賞のワーク

情報の区別がより明確になるようレイアウトの改善を行

ショップなどが開催されているが能動的に情報を入手したなった．初見の人のでも本ツールを操作することができる

り，参加する必要があり，一般の鑑賞者にはハードルが高よう操作方法の説明を加えるとともに操作性の統一を行いと考えられる．一方で美術館を訪れた人がまず目にするなった．

であろう，既存の解説は美術に対する知識が十分でない一般の所謂，美術初心者にとって理解が難しいものであり，美術の知識をある程度有している人向けであるため，美術に対する興味関心を深めることが困難になっていると考える．

2. 先行研究2.1 そのとき，西洋では : 時代で比べる日本美術と西洋
美術
そのとき，西洋では : 時代で比べる日本美術と西洋美術

そこで，本研究では美術館に設置されている既存の解説

では， 大まかな時代順に西洋美術と日本美術を比較し，同に難しさを感じている美術初心者が美術への興味関心と理時に日本美術史という窓を通して西洋美術史を眺める試み

解を深め，楽しむことを目的に美術作品の関連情報をなめでもある と述べられている [5]．つまり宮下は，日本美術らかに繋げる美術鑑賞支援ツールを提案する．著者らは美と西洋美術で同じ時代でもどのような発展の違いがあった

1a)b)c)d)

慶應義塾大学大学院メディアデザイン研究科
Keio University Graduate School of Media Designotakamayu@kmd.keio.ac.jp
i.mas.trunk@kmd.keio.ac.jp
usurai-ligno@kmd.keio.ac.jp
suna@kmd.keio.ac.jp© 2023 Information Processing Society of Japanのかという観点から，日本美術と西洋美術の比較を行なっている．その時代の思想や価値観に触れつつ比較を行なっており，これまで分断されることの多かった日本美術と西洋美術の発展の違いを代表的な作品や建造物の画像などを311

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

通して感じることができる．

1B-44
2023/3/1

3.3 想定している活用方法
本ツールは美術館で使用することを想定している．美術

2.2 探究的学習を支援する浮世絵鑑賞システムの構築
早野らは館の展示室で実物の作品を鑑賞している際に本ツールを使身体動作による操作が可能な Kinect を用い用する．美術館に実物の作品が展示されているとき，ここて，体験型の美術鑑賞を行うシステムを構築した [7]．美より前に踏み入れないようにという規制のラインや柵があ術鑑賞初心者が美術鑑賞を行う際に，作品の鑑賞ポイントる場合にはそのラインまたは柵の数十センチ後ろ，作品をを見つけられるようにすることと，作品に関連する情報を鑑賞する際に視界に入らないところに高さ約 1 メートル程提示することで使用者が作品に対する考察をできるように度の台にタブレット端末を設置する．美術館に設置されてすることを目的に行われていた．作品の特定のオブジェクいる既存の解説と併用して，または既存の解説の代わりにトから分岐して，作品の関連情報が提示されるというシスなるようなものとして想定している．

テムを構築していた．

2.3 美術鑑賞支援ツールの設計と課題
著者らは美術作品の関連情報をなめらかに繋げる美術鑑賞支援ツールを設計したが，下記の課題が残った [6]．

• 歴史的な出来事や代表的な作品の提示が少なく時代背景を使用者が感じにくいこと

4. 設計
4.1 設計概要
著者らが行なった設計について以下に記載する [6]．作品をより理解しやすい環境及び鑑賞体験を実現するために，美術作品に関する情報を種類別に整理し関連付け，可視化していく．美術作品に関する情報の整理を行なっていく際• 作者の交友関係だけなく影響を与えた・受けたとされに，情報を大まかに 3 つに分けた．美術作品に関する情報る作品に関しての情報が少なく，時代ごとの作品の変の分類について以下に記載する．上から下に分類として大化が感じにくいこと

きな概念から小さな概念になる．

• 情報の階層を明示的に示すなどの工夫が必要• 初めてツールを操作する人が口頭による説明を受けなくてもスムーズに操作できるようにすること
その他にも実装形態に関する課題が残った．美術初心者に• 作品が制作された時代背景・様式の情報や歴史的出来事や同時代の作品• 作者の交友関係や作品同士のつながり• 作品ごとに異なる詳細な情報とって利用がしやすい実装形態について引き続き議論が必

原則，鑑賞している作品周辺及び作品に直接紐づく解説を要だ．

読んでいくことになる. 大きな概念から小さな概念に沿っ

3. 美術鑑賞支援ツールの前提
3.1 美術鑑賞支援ツールの前提の概要
本研究では, 美術に対する知識が十分でない美術初心者て解説を行うことで作品について大枠から順を追って理解できるようにしていく．
本研究では，ここまで説明した 3 つの分類を下記にようにレイヤーとして呼ぶ．

に対し, 美術作品の関連情報をなめらかに繋げる美術鑑賞• 年代順レイヤー・・・作品が制作された時代背景・様支援ツールを提案する. 美術初心者が美術への興味関心と式の情報や歴史的出来事や同時代の作品について記載

理解を深める，楽しむことを目的とし，プロトタイプ実装するレイヤー

時には課題として残った美術鑑賞支援ツールに必要な情報に関しては情報の追加を行い，情報の区別がより明確になるようにレイアウトの改善を行なった，また初めて使う人でも本ツールを操作することができるよう操作方法の説明• 相関図レイヤー・・・作者の交友関係や作品同士のつながりについて記載したレイヤー• 詳細レイヤー・・・作品ごとに異なる詳細な情報について記載したレイヤーを加えるとともに操作性の統一を行なった．

4.2 追加する設計
3.2 対象者

著者らは課題となった点を踏まえ，歴史的な出来事や代美術に対する知識が十分でない一般の所謂，美術初心者

表的な作品の提示が少なく時代背景を使用者が感じにくいを本研究の対象者とする．美術に対する知識が十分でないことに関しては情報の追加を行った．作者の交友関係だけ一般の所謂，美術初心者とは普段美術館に行く頻度が少ななく影響を与えた・受けたとされる作品に関しての情報がく，たまに美術館に訪れた際に美術館の解説を読んだがわ

少なく，時代ごとの作品の変化が感じにくいことに関してからなかったと感じる，作品の大まかな雰囲気しか感じ取も，作品の影響に関する記載を追加した．情報の階層を明れなかったなど美術館に行っても，美術鑑賞を十分に楽し示的に示すなどの工夫に関しても，一つの情報は一つの塊めなかったと感じる人を指す．にすることや，情報の区切りとわかるようにフォントのサ© 2023 Information Processing Society of Japan312

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

イズ・カラーの変更を行なった．初めて本ツールを使用す

1B-44
2023/3/1

図に示した（図 2）．

る人にも操作方法がわかるように Introduction のレイヤーを新たに設けた．Introduction レイヤーは本ツールを使用する人が一番はじめに見るレイヤーである．本ツールの操作方法に加え，本ツールの各レイヤーに記載される情報の意味についても説明を行う．

5. 実装
5.1 実装概要
設計をもとにメトロポリタン美術館の作品に対して実装を行った．メトロポリタン美術館の Web サイトに掲載されたデジタルアーカイブのうち，パブリックドメインに指定されている作品の一部を使用した [2]．16 世紀から 20 世紀半ばまでの絵画と彫刻で，合計 25 点の作品の実装を行った．Adobe XD を使用し制作を行い，タブレット端末上で表示できるようにした．タブレット端末の画面をタップ，スワイプ，スクロール，ピンチイン／ピンチアウトすることで画面遷移や情報の閲覧ができる．一番始めのページに

図 2

Introduction レイヤー (一部抜粋)

は本ツールの操作方法について説明を行う Introduction の各年代順レイヤー，相関図レイヤー，詳細レイヤーごとページを設けた．

5.1.1 全体のレイヤー構成
全体のレイヤー構成については以下の図に示した（図 1）．に，実際のレイヤーの画像を使用しながら操作方法と各レイヤーに記載される情報の意味についても説明を行なった．また，スクロールを提示する矢印は実際のレイヤーの画像の左または上に載せた．

5.2.3 Introduction レイヤーデータ構成
Introduction レイヤーに必要な情報を以下に記載した．
• 本ツールの概要• 各レイヤーの概要• 各レイヤーの画像 (一部抜粋)• 各レイヤーに記載されている情報の説明• タップなどの操作が必要なボタンの説明• スクロール方向の提示
年代順レイヤー，相関図レイヤー，詳細レイヤーのページ
では淡いグレーを背景色にしているが，Introduction レイ
図 1

全体のレイヤー構成

ヤーは他のレイヤーと異なり作品ごとに繰り返し閲覧するレイヤーではないため，大きく異なるライトブルーを背

Introduction レイヤーは最初に閲覧し，その後は年代順景色に指定している．背景色の明度がやや低い色を選んだ

レイヤー，相関図レイヤー，詳細レイヤーの順に見ていく．

ため，テキストは明度が高いオフホワイトに近い色を選んだ．ただし，次のページ移る際にタップする必要のある次

5.2 Introduction レイヤーのページに進むボタンに関する説明はこのボタンの意味を

5.2.1 Introduction レイヤー概要

理解する重要度が高いため，レッドと目立つ色にした．

初めて本ツールを使用する人にも操作方法がわかるように Introduction のレイヤーを設けた．本ツールを使用する

5.3 年代順レイヤー，相関図レイヤー，詳細レイヤー共通

人が一番始めに見るレイヤーで，本ツールの操作方法や本

5.3.1 年代順レイヤー，相関図レイヤー，詳細レイヤー全ツールの各レイヤーに記載される情報の意味について説明を行う．

5.2.2 Introduction レイヤーのレイアウト
Introduction レイヤーのレイアウトに関しては，以下の© 2023 Information Processing Society of Japan

体の概要
年代順レイヤー，相関図レイヤー，詳細レイヤーでは美術に関する情報を多岐にわたって扱うが，情報ひとつひとつに関しては概要程度に留め，専門的な言い回しを避け平313

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

1B-44
2023/3/1

易な表現にする．想定する対象者である美術初心者に対しの流れを把握しやすくするため，大まかに制作年代順に作多角的な視点による読解力を求めず，本ツールで扱う内容品を並べ時系列順に様式の解説を行った．最初に大まかなに関しては本ツールの解説を読むこと及び，美術館に展示

世紀ごとの区切り，次に様式の分類があり，様式の分類のされている実物の作品を鑑賞することのみで理解できるよ

中に地域によって特色が異なる場合にはさらに分類して記うにする．また，原則 5 行までの記載にとどめ，作者の名載する．取り扱う美術作品の年代が幅広い場合は問題がな

前はフルネームで記載する．

いが，年代に偏りがあり大きく空白期間が存在する場合にまた専門的な用語の使用は原則避けるが，作品の理解には補足を行っていく必要がある．様式によっては前後の様必須な場合は専門的な用語を使用する．しかし，その用語式との関係が大きい場合もあるためその場合には，関連すが初めて登場する際には必ず用語の解説を行う．視覚的にる様式についても記載する．

提示できる情報がある用語の場合は写真等の画像を追加

5.4.3 歴史的な出来事や代表的な作品について記載する

する．

区域

5.3.2 年代順レイヤー，相関図レイヤー，詳細レイヤー全体のデータ構成

歴史的な出来事や代表的な作品について記載する区域では，主にその時代, 美術の中心であった地や歴史的に重要な年代順レイヤー，相関図レイヤー，詳細レイヤーで共通地域と日本について記載した．時代を象徴する出来事や美する情報として，作品画像，作品の制作年，作品のタイト術に影響を与えた出来事に関して記載していく．また，そル, 作品の制作者名を記載する．これらの情報は美術館等の時代の様式らしい作品は代表的な作品として記載する．に展示されている作品に対応している情報であり，作品を代表的な作品として記載した作品には画像も載せる．

区別するために必要な情報である．また，美術館に展示さ5.4.4 年代順レイヤーのレイアウトれている作品と，関連情報として載せた作品を区別できる
よう美術館に展示されている作品には「展示作品」と描か年代順レイヤーのレイアウトに関しては，以下の図に示した（図 3）．

れたアイコンを作品画像の右上に加えた．

5.3.3 フォントサイズ・カラーに関する要件
情報の種類によってフォントサイズ・カラーに関する要件を決めた．フォントは小塚ゴシック Pro で統一し，色は背景色を含め 8 色使用した．背景色はグレートーンで統一し，本文にあたる部分には必ずブラックを使用し，その他の見出しはネイビー，ブラウン，マスタードイエローにした．画面遷移に関わるボタンの色は次のページに進む
または指定したページに進むといった，進む概念のボタンにはブラウンを使用し，前のページに戻るという戻る概念のボタンはネイビーを使用した．フォントサイズは最大で50px，最小で 13px，フォントのウェイトはレギュラー (R)からライト (L) の範囲にした．

5.4 年代順レイヤー
5.4.1 年代順レイヤーの概要
年代順レイヤーは各時代の様式について解説する区域と歴史的な出来事や代表的な作品について記載する区域の 2つに分けた．この年代順レイヤーは様式の変化の流れや時代背景を提示することで，美術作品の作風や題材の選択の意味を知ってもらうことにある．美術作品の作風や題材は多少なりともその時代の価値観や出来事に影響を受けており，特に作者が作品に関する記録を多く残していない場合

図 3

年代順レイヤー (一部抜粋)には様式としての特色や時代背景が作品を理解する手がかりになると考える．

5.4.2 各時代の様式について解説する区域
各時代の様式について解説する区域では美術全体の変化

左側に歴史的な出来事や代表的な作品について記載する
区域を設け，右側に各時代の様式について解説する区域を設けた．下に進むほど年代も進むようになっている．

© 2023 Information Processing Society of Japan314

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

5.4.5 年代順レイヤーのデータ構成

1B-44
2023/3/1

術家であった場合には作品の画像を，その人物が芸術家で年代順レイヤーに必要な情報を以下に記載した．

なくとも画像を提示できる場合には画像を提示する．ま• 何世紀など，時代の区切りになる情報

た，人物名を記載する場合は人物名の横にその人物の職業• 様式に関する説明を記載する．

• 歴史的な出来事• 代表的な作品

5.6 詳細レイヤー
5.6.1 詳細レイヤーの概要

5.5 相関図レイヤー
5.5.1 相関図レイヤーの概要

詳細レイヤーは大きく分けると各作品に関する情報と作者に関する情報をまとめたレイヤーだ．作品が何で制作さ相関図レイヤーでは作者の交友関係や作風の影響の関れたかを表す素材及び技法や支持体 (キャンバスや板など)係，関連作品について記載した．またそれらの情報とピッの情報は，イメージしやすくするため素材及び技法や支持クアップした作品を矢印や線で結んでおり，矢印や線の近体をイラスト化したものをアイコンとして表示する．各作くに詳細な関係性についての補足を加えた．また矢印は関品に関する情報は作品によって異なり，また多岐にわたる．

係性の方向を表している．この相関図レイヤーでは作者のそのため，作品に直接的に関係のある情報を中心に記載す交友関係や作風の影響の関係，関連作品について提示する

る．また，情報はトピックごとに分け，何について説明しことで，作者の交友関係から作風や題材のつながりを見出ているのか明確にする必要がある．例えば，「作品についすことができたり，作者やその周辺の芸術家たちの人間て (概要)」や「登場人物について」「技法について」などト的な部分や共感・共通点を見出せるのではないかと考えてピックごとに分けて示す．

いる．

5.6.2 詳細レイヤーのレイアウト

5.5.2 相関図レイヤーのレイアウト
相関図レイヤーのレイアウトに関しては，以下の図に示

詳細レイヤーのレイアウトに関しては，以下の図に示した（図 5）．

した（図 4）．

図 4相関図レイヤー (一部抜粋)

ピックアップした作品は大まかに時系列順に横に並んでおり，この相関図レイヤーのみ横スクロールになっている．

5.5.3 相関図レイヤーのデータ構成
相関図レイヤーには下記の情報を記載した．

図 5

詳細レイヤー (一部抜粋)• 作者と直接的に交友関係のあった人物• 作者と直接的に交友関係はなかったが，作品の影響に関して関係がある人物

作品の基本的な情報，素材及び技法や支持体の情報は一番上に記載する．その他の情報はトピックごとに分けて下• 関連作品に追加していく．

• 作者の自画像またはポートレイトが残されている場合

5.6.3 詳細レイヤーのデータ構成にはその画像交友関係のあった人物を記載する場合には，その人物が芸© 2023 Information Processing Society of Japan

各作品に関する情報として記載する可能性のある情報は下記に挙げる．全ての項目に関して記載できる場合は少な

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

1B-44
2023/3/1

いが，確認できる項目に関しては記載していく．

• 作品が制作された背景• 作品に登場する人物について• 作品に登場するオブジェクトや場所について• 宗教に関して• 神話に関して• 題材に関して• ストーリーに関して• 作者が参照したとされる文献など• 特筆すべき作品の特徴• 特筆すべき色や画材の情報• 画面や制作物の構成• 特筆すべき筆遣いや作品表面の状態• 素材・技法
特に宗教的なことに関してはあくまでも作品で確認できる範囲にとどめる．
作者に関する情報として記載する情報は下記に挙げる．

• 作者の出生地• 作品の制作地や主な活動地• 特筆すべき作者のエピソード• 作者の作品の特徴
出身地や活動を行なった地がわかる場合には記載し，その地の様子がわかる風景の写真や地図を掲載した．

6. 予備実験
本ツールの口頭で使用方法の説明を行わなくても，スムーズに操作できるか予備実験を行なった．予備実験は慶應義塾大学大学院に在籍する 1 名で行い美術館で作品を鑑賞しながら使用することを想定し，作品画像を A3 用紙にプリントしたものを鑑賞しながら本ツールを使用してもらった．予備実験の結果，Introduction レイヤーがあることやボタンを最低限にしたことで使用方法の説明を行わなくても，概ねスムーズに操作を行うことができた．しかし，本文の文章量に関して一部多く感じるとの意見があり，分量が少なくなるよう予備実験後に修正を行なった．また，

7. まとめ著者らは大まかに必要な情報の要件やレイヤー構成に関して設計を行なった．必要な情報に関して，ツール自体のレイアウトや操作性，具体的な美術館への実装方法に関してや画像の権利関係に関しては課題が残った [6]．そこで，今回の実装ではタブレット端末を活用し，画面遷移，タッチ操作やスワイプ操作などのインタラクションの追加を行うことで本ツールを使用する人がスムーズに解説を読むことができるよう実装を行なった．また，美術鑑賞支援ツールに必要な情報に関しては情報の追加を行い，情報の区別がより明確になるようレイアウトの改善を行なった．本
ツールを初めて使う人でも本ツールを操作することができるよう操作方法の説明を加えるとともに操作性の統一を行なった．

7.1 今後の課題
具体的な美術館への実装方法に関しては本ツールを提供する場面や，画面のサイズ・実装媒体や設置方法は議論の余地が残った．また，今回はパブリックドメインの画像を使用することで本論文中に美術作品の画像を掲載することができたが，未だ作品の画像を公開していない美術館も多く，美術作品のデジタル化やデータの取り扱い方について今後も議論していく必要がある．

7.2 利用している美術作品の画像について本研究で使用している美術作品の画像はメトロポリタン美術館と J・ポール・ゲティ美術館の画像を使用した．美術作品の画像はパブリックドメインに指定されているものを使用している [3][1]．
参考文献
[1]
[2]

詳細レイヤーの登場人物のリンクボタンがわからなかったとの意見に関してもボタンの色の変更と「のページへ進む」[3]の記述を追加した．参加者は予備実験を通して美術に対する興味関心や理解に変化が見られた．特に作品の登場人物に興味を持ち，本ツールの解説を参照しながら鑑賞する様[4]子が見られた．今回の予備実験では口頭で使用方法の説明を行わなくても，概ねスムーズに操作を行うことができた．
しかし，予備実験を行なった人数が少ないため，今後より

[5]
[6]

多くの美術初心者に本ツールを使用してもらい，操作感に関する意見や美術鑑賞をより楽しむことができたか調査を行う必要がある．

© 2023 Information Processing Society of Japan[7]

J・ポール・ゲティ美術館： J. Paul Getty Museum. 20221216
閲覧 https://search.getty.edu/gateway/about.html.
メ ト ロ ポ リ タ ン 美 術 館： The Metropolitan Museum of Art．The Met Collection. 20221212 閲 覧https://www.metmuseum.org/art/the-collection.
メ ト ロ ポ リ タ ン 美 術 館： Open Access at The Met.
20221216 閲 覧 https://www.metmuseum.org/about-themet/policies-and-documents/open-accesswhat-is-openaccess.
横 浜 美 術 館： み る み る ア ー ト き み は だ れ ？ (2022).
https://yma.art-dx.nri.co.jp/.
規久朗宮下： そのとき、西洋では : 時代で比べる日本美術と西洋美術，小学館，東京 (2019).
大髙真由，加藤大弥，砂原秀樹ほか： 美術作品の関連情報をなめらかに繋げる美術鑑賞支援ツールのデザイン，
研究報告エンタテインメントコンピューティング (EC)，Vol. 2022, No. 8, pp. 1–6 (2022).
早野瑞季，時井真紀ほか： 探究的学習を支援する浮世絵鑑賞システムの構築，第 82 回全国大会講演論文集， Vol. 2020,
No. 1, pp. 545–546 (2020).

316