増井ラボノート コロンブス日和

第13回 廃れるページ

この記事を読むのに必要な時間:およそ 3 分

Webページの古さの視覚化

Webで面白い情報を見つけたとき,よく見たらとても古いページだということに気づいてがっかりすることがあります。がっかりするだけだとまだ良いのですが,SNSなどで紹介したあとで古さを指摘されたりすると恥ずかしいものです。

世の中のたいていのものは古くなるとゴミが溜まったり変色したりするものなので,古さになんとなく気づくのが普通ですが写真1),ファイルやWebページのようなデジタル情報は古くなっても見栄えが変わらないため,こういう失敗をしやすいと言えるでしょう。

写真1 明らかに古い壁

写真1 明らかに古い壁

情報が劣化しないことは,デジタルデータの大きな特長なのですが,古さが直感的にわかったほうが都合が良い場合もあります。古くても価値が変わらない情報なら気にする必要はないのですが,ニュースや技術情報のように新しさが重要な場合,間違って古い情報を参照しないように気を付けなければなりません。今回はWeb ページの古さを直感的に感じることができるようにするための工夫を紹介します。

廃れるリンク

はこだて未来大学の塚田浩二氏は,古いページへのリンクが汚く見える廃れるリンクというシステムを開発しました。

図1のようなWebページは古い情報へのリンクを含んでいるのですが,これを見るだけではどのリンクがどれだけ古いのかはわかりません。廃れるリンクシステムを使うと,図2のように古いページへのリンク文字列が汚く表示されるため,リンク先のページが古いことが明らかにわかります。

図1 古い情報へのリンクを含むWebページ

図1 古い情報へのリンクを含むWebページ

図2 廃れるリンクを利用した結果

図2 廃れるリンクを利用した結果

廃れるリンクシステムはプロキシサーバとして実装されています。廃れるリンクのプロキシサーバ経由でWebページにアクセスした場合,アクセス先のページの古さを取得したあとで,古さに応じてリンクのCSSを調整することによって古さを表現しようとしています。

廃れるバックグラウンド

リンク先の古さを視覚化するだけでなく,ページそのものも古く見せると良いでしょう。自分のWebページの場合,作成時刻や編集時刻を利用して,きめ細かく古さを表示できます。

図3は私が昔作成した「廃れるバックグラウンド」というシステムです。古さに応じてランダムドットの数を増やしていますが,あまり美しいとは言えないようです。

図3 古くなったWikiページ

図3 古くなったWikiページ

図4はページ内の各部分のアクセス状況によってバックグラウンド表示を変えてみたものです。gimpで自動生成したシミのような画像と日付を表示することによって,古さを直感的に理解させようとしています。

図4 バックグラウンド画像を工夫してみたもの

図4 バックグラウンド画像を工夫してみたもの

廃れるバックグラウンドシステムは,バックグラウンド画像がイケてなかった点や,古いページが読みにくくなってしまった点であまり評判がよくなかったため,真面目に運用せず放置状態になったまま現在に至っています。

廃れるページ

「廃れるリンク」「廃れるバックグラウンド」も10年以上前のシステムなのですが,手間の割に便利さが不足していたり見栄えが悪かったりしたため,日常的に使ってはいませんでした。一方,Web上の情報がますます増えてきた現在,古い情報を新しいものと勘違いする危険は増えていますし,古さの理解は以前よりも重要になっている気がするので,「廃れるバックグラウンド」と同様のシステムを次の方針で作りなおしてみることにしました。

  • ブラウザ拡張機能として実装
  • ページの古さを最初の数秒だけ全面に表示

任意のWebページに対して古さを視覚化するためには,どこかになんらかの細工が必要になるわけですが,最近のChromeやFirefoxはブラウザ拡張機能を簡単に作れるようになってきたので,最近はこれを利用するのが良い気がしています図5)。

図5 廃れるページ

図5 廃れるページ

従来はブラウザ拡張機能を作るのはかなりたいへんでしたが,最近はFirefoxでもChromeでも同じ形式で開発ができますし,開発の手間もかなり小さくなっています。

著者プロフィール

増井俊之(ますいとしゆき)

1959年生まれ。慶應義塾大学環境情報学部教授。ユーザーインターフェースの研究者。東京大学大学院を修了後,富士通半導体事業部に入社。以後,シャープ,米カーネギーメロン大学,ソニーコンピュータサイエンス研究所,産業技術総合研究所,Appleなどで働く。2009年より現職。携帯電話に搭載される日本語予測変換システム『POBox』や,iPhoneの日本語入力システムの開発者として知られる。近著に『スマホに満足してますか? ユーザインターフェースの心理学』。

コメント

コメントの記入