高解像度画像ビューワーの例(その2):TJPzoom
高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション(ビューワー)、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「TJPzoom」です。
TJPzoomは、JavaScriptを使用したビューワーです。Webページに貼り付けられた元画像の上にマウスポインターを当てると、その部分が虫眼鏡のように拡大表示されます。操作子などの細かなUI(ユーザーインターフェース)が一切無く、ただマウスポインターを重ねるだけなので、シンプルでわかりやすく、非常に直感的と言えます。下記にサンプルを用意してみました。
なおTJPzoomでは、高解像度画像を閲覧中に、マウスボタンを押した状態で上下左右にマウスを滑らせる(ドラッグの要領で)と、以下のように拡大表示領域(虫眼鏡領域)を調整することができます。
- 上に滑らせるとズームイン
- 下に滑らせるとズームアウト
- 左に滑らせると虫眼鏡領域の面積縮小
- 右に滑らせると虫眼鏡領域の面積拡大
TJPzoomの細かい問題を挙げるとすれば、Webページに貼り付けられた元画像のどこにマウスポインターが当たっているのかが、厳密には虫眼鏡領域の下に隠れる形になってしまうため、たとえば細かい情報が詰まったような画像の場合、「どの部分を拡大しているか」を精緻なレベルで捉えにくいかもしれません。とはいえ、UI(ユーザーインターフェース)のシンプルさ、直感的なわかりやすさという点では、よくできたツールだと思います。
当サイトのアクセシビリティポリシーに基づいて、このページの「JIS X8341-3」準拠状況をWebInspector(富士通)でチェックをすると、要件「5.3a(ウェブコンテンツは、特定の単一のデバイスによる操作に依存せず、少なくともキーボードによってすべての操作が可能でなければならない。)」に抵触するという結果が出ます。これは、上記「サンプル」でJavaScriptのonmouseover属性を使用しているためです。このページでは対応策(代替手段)として、目的の情報(高解像度画像)にキーボード操作でも直接アクセスできるリンクを用意しています。
トラックバック
この記事に対するトラックバックURL: http://website-usability.info/cgi/mt/mt-tb.cgi/127


コメントを投稿する
(投稿いただいたコメントは、当サイト管理者による承認後、公開させていただきます。なお、コメントの記入は、日本語でお願い致します。)