DEIM Forum 2013 E3-1

フォトモザイクを利用した写真閲覧の一手法
坂本季穂†

伊藤貴之†

†お茶の水女子大学 理学部 情報科学科 〒112-0012 東京都文京区大塚 2-1-1
E-mail: † {keyhole, itot}@itolab.is.ocha.ac.jp
あらまし

本報告ではフォトモザイクを写真ブラウザに活用する一手法を提案する．フォトモザイクは小さい画像をタイル状に並べて1枚の大きな画像を作る技法である．本手法はズーム操作型の写真ブラウザCATにこれを搭載し，ズームアウト時にはフォトモザイクを表示し，ズームイン時には個々の写真が閲覧できる仕組みを提供する．
多くの場合において写真は時系列順に閲覧される．そこで本手法では一般的なフォトモザイクの生成手法ではなく，時系列順にタイル状に並べた写真群の色変換によってフォトモザイク風の画像生成を実現する．本論文ではフォト
モザイク生成結果のユーザテストから，フォトモザイク化するにふさわしい写真とはどういう写真であるかを議論する．
キーワード

写真ブラウザ，フォトモザイク，画像生成，ズーム

A Photo Browser Applying Photomosaic
Kiho SAKAMOTO† and Takayuki ITOH††Department of Information Sciences, Faculty of Science, Ochanomizu University
2-1-1 Otsuka, Bunkyo-ku, Tokyo, 112-0012 JapanE-mail: † {keyhole, itot}@itolab.is.ocha.ac.jp
Abstract
This paper introduces a photo browser applying photomosaic. Photomosaic is a technique to produce large images by arranging manysmall images like tiles. We implemented a photomosaic algorithm to CAT, an image browser which provides a zooming operation. CAT
displays representative images while zooming out, and individual images while zooming in. W developed a new algorithm for generating
photomosaic-like images by adjusting colors of images arranged based on their taken time, instead of using general photomosaic algorithms,
because we often browse pictures in order of a taken time. This paper discusses what kind of photographs are suitable for photomosaic, basedon our user evaluations of photomosaic image generation results.

Keyword

Photo browser, Photomosaic, Image generation, Zooming interface

1. 概要

個々の小さい写真であるという特徴がある．そして，この表

近年，カメラのデジタル化や小型軽量化にともない，個人現技法を組み合わせた写真ブラウザの開発のために，ズームの所有する写真の枚数が膨大になることが多くなった．これ

率に合わせた詳細度制御を設けている写真ブラウザCAT[1]に伴い，記憶媒体に蓄積され続ける大量写真を一覧可視化さに着目した．CATでは階層化された大量写真を対話的探索操せる写真ブラウザに関する研究[1][2][3]が数多く発表された．

作によって表示するために，ズームアウトの状態で高階層ク

本研究では，写真閲覧を通して思い出に浸る楽しみを増やラスタの代表写真を表示し，ズームインしていくと個々のサすことを目的として，大量写真の一覧可視化に加えアーティムネイルが表示される仕組みを持っている．ここで高階層ク

スティックな表現要素のある写真ブラウザの実現を考えた．

ラスタの代表写真としてフォトモザイクを採用することで，そこで我々はまず，フォトモザイクという写真の表現技法にズームアウト時には1枚のモザイク画像を表示し，ズームイン注目した．フォトモザイクは無数の小さなタイル状の写真を時には個々の小さい写真を表示できる．CATでは代表写真表並べることで生成される1枚の大きな画像である．フォトモザ

示と個々の小さい写真表示の見かけ上の切り替えはスムーズ

イクには，遠くから見ると1枚の画像であり，近づいて見るとではないが，代表写真にフォトモザイクを採用することでこの切り替えがスムーズになると考えた．

ク生成手法では，写真の整列順は色や形の局所的な類似度以

本報告の前半では，CATの代表写真にフォトモザイクを採外の意味を持たない．このような整列順で写真が配置された用した写真ブラウザを提案する．本報告の後半では，フォト写真ブラウザは，任意の写真を探す上で便利とはいえない．

モザイクの元画像としてどのような写真を採用するのが望ま

そこで本報告では，従来のフォトモザイク生成手法とは違っしいのかを議論するためのアンケート集計結果を報告する．て，時系列順に整列した写真群からフォトモザイク風の画像を生成する手法を提案する．

2. 関連研究2.1

ズーム操作インタフェースを有する写真ブラウザ

3. 写真ブラウザのためのフォトモザイク生成手法

本研究ではズーム操作インタフェースを有する写真ブラウ

本章ではフォトモザイクを各クラスタの代表画像にするこザとして CAT[1]を利用している．CAT は前処理として大量とで，スムーズなズーム操作インタフェースを実現する写真

写真を多階層にクラスタリングし，各クラスタから代表写真ブラウザを提案する．

を選出する．そして「平安京ビュー」[4]という大規模階層型

以下，フォトモザイク生成のために参照する画像を「代表データ可視化手法の配置アルゴリズムに基づいて，各クラス画像」と称し，代表画像を格子状に分割した各領域にはめ込タを表す長方形領域ごとに写真群を表示する．さらに，CATむ画像を「ブロック画像」と称する．本手法が搭載するフォはズーム率に合わせた詳細度制御を設けており，ズームアウ

トモザイク生成手法は，個々の写真の探しやすさや，撮影順

ト時には図 1(左)(中)のように高階層クラスタまたは低階層クを追うように閲覧することを意識して，ブロック画像を撮影

ラスタの代表写真を表示し，ズームイン時には図 1(右)のよう時刻順に並べる．そして，並べたブロック画像に対して色をに各々の写真の表示に切り替える．CAT 以外の写真ブラウザ加工することで，個々の画像の色合いを元画像に近づける．

でも，例えば PhotoMesa[2]にもズーム機能は搭載されている

このとき，与えられた画像数よりもブロック数のほうが多いが，ズームアウト時に適切な大きさおよび形状で代表写真を場合には，与えられた画像を時系列順に沿って反復的にブロ表示する，という方針に基づくズーム操作型写真ブラウザはックに埋めるものとする．

我々が調べる限り CAT が初めての手法である．

本手法では色の加工のためにブロック画像 HSB 表色系を

CAT には「ズーム操作に表示写真の切り替えが唐突に見え用いる．HSB 表色系とは，色相 Hue，彩度 Saturation，明度る」という問題点があった．そこで CAT の代表写真部分に本Brightness を 3 軸とするカラーモデルである．ここで本手法は，研究で生成するフォトモザイクをはめ込むことで，フォトモ代表画像とブロック画像の HSB 値から，生成するフォトモザザイクが有する「ズームアウトして見ると 1 枚の画像，ズームインして見ると個々の小さい画像」の効果によって，表示イクを構成する各画素の RGB 値を算出する．ここでブロック画像全体の HSB 値の平均値を ̅̅̅ ̅ ̅̅̅) とし，代表画像中の写真のスムーズな切り替えを可能にした．

対応する領域全体の HSB 値の平均値を ̅̅̅ ̅ ̅̅̅) し，S 値および B 値について前者に対する後者の比を̅ ̅ および̅̅̅ ̅̅̅とする．このときブロック画像の各画素におけるHSB 値に対して以下の数式を適用することでブロック画像の色を加工する．
̅̅̅

図 1 CAT のズーム操作による写真表示例 (左)(中)ズームアウト時はこの HSB 値の変換によって，ブロック画像の色相は代表画像代表写真を表示 (右)ズームイン操作により各々の写真を表示の対応する部位の色相に置き換えられる．また，ブロック画像中の彩度および明度は，代表画像の対応する部位の彩度お2.2 フォトモザイク

よび明度の影響を受けつつも，ブロック画像中の各画素の値フォトモザイクの生成手法についていくつか紹介する．まの変化率は保存される．言い換えれば，この HSB 値の変換は，ず AndreaMosaic [5]は，小さなブロック画像を色情報にもとづ画像中に写る事象や物体の形状的特徴を保存しつつ，画像全いて選択してタイル状に並べるというオーソドックスな手法

体を白黒画像やセピア色画像などに変色させることに相当すをとっている．また鵜飼ら[6]は，ウェブ上でのコミュニケーる．

ションを目的としており，フォトモザイクの類似性よりも生以上の方法で生成されたフォトモザイク風の画像を図 2 に成速度を重視しながらも，色情報によるオーソドックスな手示す．矢印はズームしたときに表示される順序である．図法をとっている．小島ら[7]は，色情報に加えブロック画像中2(上)は 174 枚の写真を使って生成されたフォトモザイクであの複数の特徴点を取ることで，色と形の 2 つの情報によってり，ブロックの大きさは横 60 画素，縦 45 画素である．ブロ

フォトモザイクを生成する．これらの典型的なフォトモザイ

ックは全部で 5265 箇所あるため，同一画像が約 30 回反復使用されている．この画像を一部，拡大表示したものを図 2(中ようなズーム操作インタフェースを有する写真ブラウザにお上)に示す．これを見ると各々のブロックには建物や樹木が写いて，代表画像の自動選出はユーザが手軽に利用するためのっており，それらの色合いは実物とは全く異なるが，シルエ重要な課題である．代表画像の自動選出はそれ自体が難しいットの形状からそれらが建物や樹木であることを認識可能で課題であり，既に多くの研究が発表されている[8]．本研究にある．このフォトモザイク風の画像を CAT に組み込んでズー

おいても代表写真の自動選出が大きな課題になるが，それ以ムアウト時の代表画像に用いると，図 2(中上)から図 2(中下)前に，一般的な代表写真選択とフォトモザイク生成写真選択のようにズームインして CAT での表示階層が変わる際に，とで基準に違いがあるか否か，という議論が必要であると各々のブロックの色相だけが各々の画像のものに置き換わり，我々は考えた．

スムーズに図 2(下)のような各画像の表示に切り替わる．

そこで我々はまず，どのような画像がフォトモザイクとなって表示される代表写真にふさわしいと感じるかを知るため，ユーザアンケートを実施した．ここで，回答者には旅行別にフォルダ分けされたいくつかの写真群を想像してもらい，それぞれの写真群から一枚だけ代表にふさわしいと感じる画像を代表写真として選ぶならばどれがいいかといった内容の 6ズームアウト

項目の質問について回答してもらった．各項目には，こちらでテーマ別に仕分けた 4〜8 枚の本手法で生成したフォトモザイクが含まれており，該当写真を一枚ずつ閲覧しながらそれぞれが代表写真としてふさわしいかどうかの判断を 5 段階で評価してもらった．なお被験者は 15 人であり，提示する写真に，関わりのある回答者と全く関わりのない回答者が含まれる．
人物がメインに写る画像が対象の場合，図 3 からわかるよ
うに，撮影距離が遠い集合写真(図 4(上))や，撮影距離が近いアップ写真(図 4(下))は，あまりいい評価を得られていない．
これはモザイクにより人物の顔がつぶれてしまっているためと考えられる．このような写真から生成したフォトモザイク
画像においては，被写体を知る回答者には人物の特定が可能であっても，被写体を知らない回答者には全く人物を特定できない場合が多く，それが評価の低さにつながっていると考えられる．一方で，この結果を写真公開時の個人情報保護に利用できるのではないかと考えられる．例えば，本研究を SNSなどのウェブサイトに組み込み，許可を与えられた人にのみズームイン操作が許可され，それ以外の人にはズームアウト

ズーム
イン

状態で表示されるフォトモザイクのみが公開されるとする．
そうすると，フォトモザイクに写る人物の知人以外には人物を特定しにくいので，被写体の個人情報を守りつつも，イベントの雰囲気を閲覧者全員に伝えることができる．

0%

図 2 (上)本手法で生成したフォトモザイク (中上)一部を拡大したもの (中下)元画像に表示が切り替わった瞬間 (中下)元画像の拡大提示

4. 代表画像の自動選出手法に向けてのユーザテスト

20% 40% 60% 80% 100%

背景・４人
有名背景・４人
２人アップ
集合写真
建物・４人
３人アップ
イベント・５人
１人アップ

写真ブラウザを手軽に使えるようにするためには，ユーザによる手動設定を減らすことが重要である．よって，CAT の

図 3 人物の写る画像に関するアンケートの結果

12345

0%

50%

ロンドンの兵隊
ビッグベン
街の風景
ビッグ・オー
船浮かぶ海宮殿
ロンドンタワー
ビッグ・オー light

100%
12345

図 5 風景の写る画像に関するアンケートの結果

図 4 人物の写る低評価だった画像の例 (上)集合写真 (下)顔のアップ写真

また，人物の顔がつぶれているにも関わらず評価の高かった画像もあった．それは，人数や男女がある程度わかるくらいの撮影距離で，背景に写る物の輪郭がくっきりとしている場合であった．これは，代表写真の自動選出に利用できそうであると我々は考えた．
また，図 5 からわかるように，建造物などが大きく写る風
景写真の中でも，ビッグベンやロンドンタワーの写真が高評価を得ている．これらの写真が高評価だった理由として，まず有名な建造物であるという点が考えられる．それに加えて，

図 6 色差のある画像とない画像の例 (上)色差大きい画像 (下)色差

ビッグベン(図 6(上))やロンドンタワーの写真が，他の写真(図の少ない画像6(下))と比べて前景物体と背景との色差が大きかった，という点も一因だったかもしれないと考える．もし写真にうつる物

5. まとめと今後の課題

体間の色差の大きい画像が代表画像としてふさわしいと判断

本報告では前半にフォトモザイクを活用した写真ブラウザできるならば，この基準は代表写真の自動選出に利用可能でについて提案した．ズーム率に合わせた詳細度制御を設けてある．さらに，色差に基づく画像選出であれば，少なくともいる CAT の，ズームアウト時の代表写真としてフォトモザイ真っ暗な画像や，全体が単色に塗られたような画像は選ばれクを採用することで大量写真の一覧可視化に加えアーティスにくくなる．これらについて，今後の課題として検討したい．

ティックも兼ね備えた写真ブラウザの実現が可能となることを述べた．
後半にはどのようなフォトモザイクが代表画像にふさわしいかを調べるためのアンケート結果について述べた．アンケ
ート結果からは、人物がメインに写る写真の場合においては，被写体の顔はつぶれてしまっているが，被写体のことを知る人物からは高い評価が得られた．また，被写体の人数や男女の区別がある程度わかる画像においては，背景部分の輪郭がくっきりとしているものに関しては評価が高い傾向が見られたので，これも自動選出に利用できると考えた．さらに，被写体のことを知らない人物に関してはどの写真においても低評価が多かった．この時の回答者のコメントから推定すると，被写体が人物である写真を代表写真にふさわしいと感じるかどうかは，人物の特定ができるか否かが大きく関わっているのではないかと我々は考えた．ここで，被写体を知らない者にとって被写体の特定が難しいということは，個人情報を守りながらの写真ブラウザの実現が可能なのではないかという新しい発見をした．今後，SNS などの公開型コミュニケーションツールでの利用につながることも考え研究を進めていくことにする．また，風景がメインに写る写真の場合においては，有名な写真が高評価を得ていたが，高評価を得ていた写真と低評価であった写真を比べてみたところ，前者は，写る建造物と背景との間に大きな色差があることを我々は発見した．後者は何が写っているのか理解はできるものの，写る建造物と背景が似ている色をしていたため，代表写真として採用するのにふさわしくないと感じた回答者が多かったように感じられた．そこで本研究では，写る建造物と背景の色差が大きいものが代表写真に利用できるのではないかと考えた．
今後の課題は以下のとおりである．まず CAT における課題としては，ブロックの大きさや数を見直すとともに，写真表示の切り替わるタイミングの再検討をする．次に，アンケートに関しては，集計結果などから代表画像にふさわしい画像の特徴を発見し，既に発見した色差に関する情報の求め方を考えるとともに，その特徴を発見する方法も編み出していく． また将来的に，より快適で楽しい写真ブラウザを目指すために，機能について考案し，ウェブ上に載せることについても検討したい．

参考文

献[1] 五味，宮崎，伊藤，Li，CAT: 大量画像の一覧可視化と詳細度制御のための GUI， 画像電子学会誌，Vol. 38, No. 4,
pp. 436-443, 2008．
[2] B. Bederson, PhotoMesa: A Zoomable Image Browser Using
Quantum Treemaps and Bubblemaps, User Interface Software
and Technology, pp. 71-80, 2001.
[3] J. Yang, J. Fan, D. Hubball, Y. Gao, H. Luo, W. Ribarsky,
Semantic Image Browser: Bridging Information Visualization
with Automated Intelligent Image Analysis, IEEE VisualAnalytics in Science and Technology, pp. 191-198, 2006.
[4] 伊藤，山口，小山田，長方形の入れ子構造による階層型
データ視覚化手法の計算時間および画面占有面積の改善，可視化情報学会論文集，Vol. 26, No. 6, pp. 51-61, 2006.
[5] AndreaPlanet,AndreaMosaic,
http://www.andreaplanet.com[6] 鵜飼，中，遠藤，山田，宮崎，フォトモザイクアートを用いたウェブコミュニケーションシステム，信学技法，
Vol. 108, No. 128, MVE2008-31, pp. 25-30, 2008.
[7] 小島，高橋，岡田，視覚特性を考慮した装飾的フォトモ
ザイク，情報処理学会論文誌, Vol. 49, No. 7, pp. 2703-2711,
2008．
[8] C.-H. Yeh, Y.-C. Ho, B. A. Barsky, M. Ouhyong,
Personalized Photograph Ranking and Selection System, ACM
Multimedia, pp. 211-220, 2010.