高解像度画像ビューワーの例（その1）：Lightbox Plus｜ウェブユーザビリティ向上を支援するWebsite Usability Info
高解像度画像ビューワーの例（その1）：Lightbox Plus
高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション（ビューワー）、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「Lightbox Plus」です。
Lightbox Plusは、Ajaxを使用したビューワーです。下記にサンプルを用意してみました（Lightbox Plusは残念ながら、「Ajaxによる画像の拡大」で指摘したモーダル表示になっているので、まずは下記サンプルの囲みの中にある説明をひととおり読んでから、操作してください）。
サンプル
「航空機のコクピット」画像拡大 画像をクリックすると、ブラウザのウィンドウサイズにフィットする大きさで拡大画像が開きます。
高解像度画像の表示
開いた拡大画像にマウスオーバーすると、左上にアイコンが表示されます（四方の外側に矢印が向いている図柄）。
高解像度画像を開くアイコン これをクリックすると高解像度画像を原寸大で表示します。原寸大表示した高解像度画像は、ドラッグで表示する部分を動かすことができます。
画像解像度を元に戻すアイコン 高解像度画像を表示している状態で、左上のアイコン（四方の内側に矢印が向いている図柄）をクリックすると、ブラウザのウィンドウサイズにフィットする大きさに戻ります。そのうえで、任意の位置をクリックすると、拡大画像を閉じることができます。
（マウスが使えない場合：こちらで高解像度画像ファイルを開きます）
高解像度画像をマウスでドラッグすると、表示する範囲を変更（移動）することができるわけですが、Lightbox Plusで便利なのは、全体のうち「現在の表示範囲はどこか」を示すインジケーターが（右下に）表示されることです。 表示範囲のインジケーター UI（ユーザーインターフェース）設計上の細かい問題を上げるとすれば、誤ってインジケーター内の四角形（上記のサンプルの場合、白い四角形）をドラッグして表示範囲を移動させようとするユーザーもいると思うので、そうした場合でも表示範囲を移動できれるようにすべきだろうな、とは思いますが...（もっとも、この誤操作は、一度学習すれば解決できるレベルなので、そう大きな問題ではないと言えるかもしれません）。
なおLightbox Plusでは、（マウスのホイールを回すことによって）高解像度画像を表示する大きさを任意に変更することが可能です。原寸大よりも小さく表示して一度に見れる範囲を広くしたい、といったニーズを持ったユーザーにとっては、さりげなく便利な機能と言えるでしょう。
（公開日時：2009年5月 6日 21:41｜最終更新日時：2009年5月 9日 21:36）
