高解像度画像を閲覧できるようにする

高解像度画像を用意することができて、それがターゲットユーザーの興味/関心に合致する可能性があるのであれば、積極的にWebサイト（ホームページ）上に公開すべきでしょう。私自身の、ユーザビリティテストを実施したときの経験を振り返ってみても、サイトの扱う情報ジャンルによっては、高解像度画像が見たいというニーズ（逆に言うと、高解像度画像が見れないことによるフラストレーション）は確かにあります。高解像度画像をユーザーが見ることによって、そこからビジネス貢献につながるユーザー行動が引き起こされ、コンバージョン（興味/関心を持った商品を購入したり、資料請求したり、問い合わせメールを送ったり、など）につながる可能性が期待できるのです。

高解像度画像を閲覧させるには様々な方法がありますが、前回のコラム記事「Ajaxによる画像の拡大」で使ってみた「Highslide JS」でも、こんな感じで可能ではあります。

サンプル

航空機のコクピット
閉じる

画像をクリックすると拡大します。

拡大した画像の上にマウスオーバーすると、右下にアイコン（四方の外側に矢印が向いている図柄）が表示されます。 このアイコンをクリックすると高解像度画像を原寸大で表示します。

原寸大表示した画像は、ドラッグで表示する部分を動かすことができます。また、クリックすると拡大した画像を閉じることができます。

（マウスが使えない場合：こちらで高解像度画像ファイルを開きます）

上記サンプルでは、原寸大の高解像度画像を開いたとき、その面積があまりに広すぎて、ユーザーの立場で見ると「全体のどの部分が表示されているのか（どう操作して、自分の見たい部分を表示させればよいのか）」が理解されない可能性がありそうです。 その意味では、Highslide JSで原寸大の画像を表示する場合は、解像度があまり高くないものに留めておくのが賢明なのかもしれません。

そこで今回は、次回以降のコラム記事で、高解像度画像を閲覧するためのアプリケーション（「ビューワー（viewer）」とも言います）について、無料で気軽に使えるものをいくつかご紹介したいと思います（「高解像度画像ビューワーの例」と題して、取り敢えず「その1」から「その4」を想定していますが、後から面白いものを発見した場合は、さらに増えるかもしれません）。

いずれのビューワーもマウス操作が前提なので、厳密に言うと、アクセシビリティの面で問題が無いわけではありません。「マウスを使えないユーザーがキーボード操作だけで閲覧制御を完結できるようなUI（ユーザーインターフェース）を提供すべき」といった、より厳密なアクセシビリティの観点で考えると、実はごく単純な、高解像度画像ファイル自体にリンクさせて、その画像ファイルを直接ブラウザで開く形が優れていると言えるかもしれません（キーボードの矢印キーで上下左右にスクロールができるうえ、ショートカットキーの操作でブラウザの[戻る]（バック）に相当するコマンドを呼び出して、高解像度画像を開く直前のページに戻ることもできるからです）。

とは言うものの、この手のビューワーアプリケーションには、ユーザーのエモーションを刺激して、楽しみながら操作してもらえる要素があることも非常に大切だと思っています。というのも、自分が強く興味関心を持っている対象物（サイトで採り上げている商品など）について、その詳細を突き詰めて調べるという作業は、わくわくする経験であって、それが楽しく（「わくわく」感を持続させながら）実現できるのであれば、さらに、その楽しさをもって、満足いく目的達成（商品の購入など）ができるのであれば、そのサイトは優れたユーザーエクスペリエンスを提供できていると言えるからです。アクセシビリティ（キーボード操作による閲覧制御の完結性）との両立については：

という形で実装するのが「現実的な解」ではないだろうか、というのが今の時点での私の考えです。

それでは、「高解像度画像ビューワーの例（その1）」以降のコラム記事をご覧いただけますと幸いです。

当サイトのアクセシビリティポリシーに基づいて、このページの「JIS X8341-3」準拠状況をWebInspector（富士通）でチェックをすると、要件「5.3a（ウェブコンテンツは、特定の単一のデバイスによる操作に依存せず、少なくともキーボードによってすべての操作が可能でなければならない。）」に抵触するという結果が出ます。これは、上記「サンプル」でJavaScriptのonclick属性を使用しているためですが、実際には、キーボード操作による画像の拡大/縮小は可能です。