ブクログの地図
Booklog graph(https://booklog-graph.web.app/)
Web本棚サイト「ブクログ」の地図を描いてみました。IDの検索機能で自分の本棚の位置を知ることができます*1。動作確認はChromeのみです。
地図を読む
せっかく地図を描いたので、少し巡ってみましょう。
まず自分自身の本棚の位置を確認。あまり一般的でない選書をしているので、中心から外れた位置になると想像していましたが、比較的中心に落ち着いたようです。
次に、ユーザが最も集まっている活況のエリアについて。影響力の大きい（フォロワーの多い）ユーザは右下辺りに集団を形成しています。本棚を確認すると、レビューの数が多い、あるいはレビュー率が高い傾向があるようです。ユーザ同士の交流であったり、レビューを読み合ったりと、ブクログを有効活用している本棚が多い印象です（意外なことに本の登録数とフォロワーの多さはあまり関係無いようです。数十冊程度でも集団の中心に居るユーザもいます）。
その次に目立っているのは右上あたりです。このエリアは非常に分かりやすい傾向があります。講談社文庫、メディアワークス文庫、晶文社、国書刊行会といった面々が集まっていることが確認できます。出版社の公式本棚と、そもそも本に対して出版社の存在を意識しているユーザが集まってることを意味しています。
中心から外れている小さな島々を見るとまた面白い傾向があります。これらの離島は特定ジャンルで固まっている傾向があります。一概に括ることはできませんが、自己啓発系またはマーケティングやビジネスに関する選書の本棚が多いようです。
最後にピックアップしたいのは左上の半島のように突き出たエリアです。このエリアも非常に解りやすい傾向があります。いわゆるボーイズラブに関する本棚が沢山集まっていることが容易に確認できます。一大ジャンルとして特化し、かつユーザが多いため、将来このエリアが比較的大きな島として独立するポテンシャルを持っています。
地図を描く
さて、このようなブクログの地図ですが、単に私の頭の中のイメージを描いたわけではありません。つまり、ある程度の客観性を伴う手段で描いたことを注釈する必要があります。ここではその手法について簡単に解説したいと思います。
まず自分自身の本棚を起点として、一定のルールで情報をクローリングしました（ブクログさんのサービスに負荷をかけるのは本意ではないので、アクセス頻度はかなりセーブしています）。収集したデータは約2万、全ユーザの1～5%程度ではないかと推定しています。
ここからユーザをノード、フォロワーの関係をリンクとするグラフデータを作成しました。この大規模なグラフデータを粒子力学の物理シミュレーションにかけたのが下図です。
このシミュレーションでは、各ノードに重力や引力・反発力が働き、リンクの関係ではバネの力の関係が働きます。全体が停止状態になることでシミュレーションが終了します。着色はリンクの繋がりが多いものがより明るい色になるように調整しています。
シミュレーションの結果から更にノードの集合の密度推定を行います。この結果をもとに一定の閾値で等高線を引きました。
ユーザが多く集まっているエリアはより明るい色になります。ここでは解りやすいように極端な着色にしていますが、最終的には周りを水色で囲み、色合いを緑にすることで島のようなデザインにしています。
ノードの表示についてはフォロワーの多さと、ズーム率に応じてインタラクティブな表示になるように設定しています。つまり影響力の大きい本棚が優先して表示されます。地味な実装ですが処理速度の観点と、UIの観点から非常に重要な機能です。例えば、全てのユーザをフラットに表示すると下図のように、UIとしては非常にまずい見た目になってしまいます。
ノードをクリックすると簡単なユーザ情報と本棚を取得して表示することができます。
参考文献
グラフデータを地図として表すというアイデアと、その可視化のテクニックについては『ビジュアル・コンプレキシティ ―情報パターンのマッピング』から引用しています。
また、最終的なデザインはGoogleMapを参考にしています。
*1:全ユーザを網羅しているわけではないのでご了承ください。一応ユーザ数は日々増えています。
