Ajaxによる画像の拡大
- 公開日 : 2009年4月27日 (2011年7月27日 更新)
- カテゴリー : アクセシビリティ , ユーザビリティ , ユーザーインターフェース (UI)
Webページ上にある小さな画像（サムネイルなど）をクリックすると、画像が拡大表示される — Ajaxを使った、そんなUI（ユーザーインターフェース）をご覧になったことがある人は多いと思います。たとえば、以下のような感じです（eコマースサイトの例）。
【ページ1】商品一覧の中から、興味のある商品を選びます。
【ページ2】上記で選んだ商品について、拡大してみたい画像を選びます。
【ページ2′】拡大画像が表示されます。
なお、このページを【ページ3】ではなく【ページ2′】と記しているのは、上記【ページ2】からページが切り替わっていないから（URLが同じだから）です。
潜んでいる問題点
Ajaxを使うと、上記のようにクールに（かっこよく）画像を拡大することができるので、自分のWebサイト（ホームページ）でも採り入れようと考えているウェブマスターの方も多いことでしょう。ただしこのAjaxによる画像拡大、ユーザビリティやアクセシビリティの観点で見ると、以下の問題点が潜んでいます。
- 適切なコンテキスト（文脈）を明示しないと、ユーザーが元画像（サムネイルなど）をクリックしたときの挙動が予測しにくい（「他のページへのリンクなのか？」「画像の拡大なのか？」とユーザーを迷わせてしまう）。
- 使用するAjaxライブラリーによっては、画像を拡大表示すると他の操作ができない（たとえば、拡大画像を見ながら隣接する関連情報にアクセスできない）ため、かえってユーザーにフラストレーションを与えてしまう。
- 拡大した画像の閉じ方がAjaxライブラリーによって異なる（「拡大画像をクリックするのか？」「拡大画像の外のエリアをクリックするのか？」「特定の[閉じる]ボタンをクリックするのか？」など）ため、ユーザーを迷わせてしまう可能性がある。
- ブラウザの[戻る]（バック）ボタンをクリックすると、ユーザーのメンタルモデルと乖離したフィードバックを返してしまう恐れがある（上記の例で言うと、【ページ2′】の状態でブラウザの[戻る]ボタンをクリックすると、ユーザーは【ページ2】に戻ることを予測しているのに、【ページ1】まで戻ってしまう）。
- Ajaxライブラリーを特にカスタマイズせずに実装すると、（マウス操作が前提なので）キーボードによる操作ができず、アクセシビリティが損なわれる可能性がある。
- Ajaxライブラリーを特にカスタマイズせずに実装すると、UIが英語表示になるのが普通なので（たとえば「CLOSE」「PREV」「NEXT」など）、ユーザーがスムーズに使いこなせない場合がある。
- JavaScriptがオフ（無効）の環境だとAjaxでの画像拡大はできないので、代替手段を用意しない場合、アクセシビリティが損なわれる可能性がある。
（その他、画像拡大に限らずAjax全般についての注意事項については、コラム記事「Ajaxは取り扱い注意」をご参照ください。）
ちなみに2つめの項目は、UIの専門用語でいうところの「モーダル表示（ある状態のときに他の操作ができないような表示）」に該当します。本来、モーダル表示は、ユーザー行動が横道にそれないように制限したり（ウィザードダイアログなど）、重大なヒューマンエラーを防いだりする目的で使うべきであって、画像拡大機能をモーダル表示にすることの是非はもっと慎重に検討されるべきだと思います。
どう対策するか
Ajaxが本来、UIの改善/革新のために使われるべきであるにも関わらず、かえってユーザー行動を阻害してしまう可能性があるのは、皮肉なものですね。画像拡大機能をAjaxで実現する場合には、以下のような対策をしておくと良いでしょう。
- 「クリックしたら画像が拡大する」という文脈（コンテキスト）を明示する。
- 「モーダル表示」をしない。それによって、拡大画像を見ながら他の操作（隣接する関連情報にアクセスしたりなど）ができる。また、「モーダル表示」でなくすると、ブラウザの[戻る]（バック）ボタンを押したときに予想される挙動について、誤解を招く確率が少なくなる。
- 拡大した画像の閉じ方を明示する。
- マウスだけでなく、キーボード操作でも画像拡大機能を制御できるようにする。
- UIはできるだけ日本語表示にする。
- JavaScriptがオフ（無効）の場合でも拡大画像が見えるようにする。
サンプル
上記の対策の実践例として、以下のように実装してみました（ここでは、Highslide JSというAjaxライブラリーを使用しています）。
ニューヨーク フォトギャラリー
画像をクリックすると拡大します（Internet Explorer、Firefox、Operaをお使いの場合は[Enter]キーでも拡大できます）。拡大した画像はドラッグで移動できます。「閉じる」または拡大画像部分をクリックするか、[Enter]または[Esc]キーを押すと、拡大画像を閉じます。
上記のサンプルでで工夫しているポイントは以下の通りです。参考例のひとつとして、ご覧いただければと思います。
- 拡大した画像は「モーダル表示」ではなく、他の操作（別の画像を拡大したりなど）ができます。また拡大画像はドラッグで移動できるので、隣接する関連情報も読むことができます。
- 元画像（サムネイル）にマウスオーバーするとポインターの形状が「プラス」の虫眼鏡になり、拡大画像にマウスオーバーすると「マイナス」の虫眼鏡になるので、クリックすれば拡大/縮小できることがユーザーに直感的に伝わるのですが、さらに言葉（日本語）で操作法を補足することで、ユーザーに適切なコンテキストを明示しています。
- Internet Explorer、Firefox、Operaをお使いの場合、キーボード操作（[Enter]キーおよび[Esc]キー）で画像の拡大/縮小が可能です。
- ツールチップを含めた細かい部分に至るまで、UI（ユーザーインターフェース）は日本語で表記しています。
- JavaScriptがオフ（無効）のときは、元画像（サムネイル）をクリックすると、拡大画像のjpgファイルをそのままブラウザで開くので、一応、拡大画像を見ることができます。
