Website Usability Info

Highslide JSは個人的にオススメのライブラリーですが、数あるポップアップ用ライブラリー（いわゆる「Lightbox系」と呼ばれているもの）の中では、以下の点で秀逸だからです。

• 開いたポップアップをドラッグで自由に移動できる。
• 複数のポップアップを同時に開くことができる。
• ポップアップを開いた状態で、背景にあるコンテンツ本文側を操作できる。
• キーボード操作によって基本操作（ポップアップを開く/閉じる、など）ができる。

そこで今回はAjaxポップアップの応用例として、このHighslide JSを使って、YouTube上にある動画を扱ってみます。サムネイル画像をクリックするとポップアップが開き、動画を再生することができる、というユーザーインターフェース（UI）です。

自サイトでYouTube動画を表示する場合は、コラム記事「動画共有サービスでお手軽にユーザーエクスペリエンス向上」でお見せした例のように、YouTube画面（動画とその操作子）をWebページに直接埋め込む手法が基本になります。サムネイルをわざわざクリックしなくても「動画が視聴できる」ことがユーザーに伝わりやすいため、一般論的には、このほうがユーザビリティが優れていると言えます。

ただしWebページの内容によっては、複数の動画を同一ページ内で提示したいこともあるでしょう。その場合、YouTube画面を、そのまま動画の数だけ埋め込んで表示すると、コンテンツ領域の大きな面積を占めてしまい、情報デザインに支障が出る（情報のまとまり感が見えにくく、ページレイアウトが間延びしてしまう）恐れがあります。サムネイル画像をコンパクトに配置し、各々をクリックするとポップアップで動画が開くことができれば、こうしたページレイアウト上の問題を解消できそうですね。試しにここでは、ニューヨーク近代美術館（MoMA: The Museum of Modern Art）で開催された、「Home Delivery」展の概要紹介（walkthrough）を題材に、下記のように実装してみました。

ニューヨーク近代美術館（MoMA）: 「Home Delivery」展の概要

画像をクリックすると動画をポップアップ表示します（Internet Explorer、Firefox、Operaをお使いの場合は[Enter]キーでも表示できます）。ポップアップ表示は上部の余白部分をドラッグして移動できます。「閉じる」または×印をクリックするか、[Enter]または[Esc]キーを押すとポップアップ表示を閉じます。

SYSTEM3
YouTube サイトへ

「Home Delivery」展: SYSTEM3 概要
閉じる

Cellophane House
YouTube サイトへ

「Home Delivery」展: Cellophane House 概要
閉じる

BURST*008
YouTube サイトへ

「Home Delivery」展: BURST*008 概要
閉じる

Digitally Fabricated Housing
YouTube サイトへ

「Home Delivery」展: Digitally Fabricated Housing 概要
閉じる

micro compact home
YouTube サイトへ

「Home Delivery」展: micro compact home 概要
閉じる

実装してみてわかったことですが、静止画像（写真など）を拡大表示するのとは異なり、動画のポップアップ表示にはいくつか細かな問題があります。たとえば：

• ある動画を再生した状態でポップアップを閉じると、動画の再生は自動的には止まらない。
• ある動画を再生しながら別の動画を再生すると、音声が混ざってしまい聞き取れなくなる。
• 静止画像と異なり、再生/停止といった追加操作をポップアップ表示領域の中で行なう必要がある。動画表示領域をなんとかクリックできれば、キーボード操作による再生/停止などの制御は可能だが、基本的にマウス操作が前提となるので、アクセシビリティの面で課題が残る。

デザインは常にトレードオフなので、このようなポップアップによる動画再生のソリューションが功を奏するケースもあれば、かえってユーザー行動を妨げてしまうケースもあることでしょう。最終的には、ターゲットユーザー像とビジネスゴール（動画を見せることでユーザーにどうして欲しいのか？）の両面から充分検討した上で判断するしかありませんが、UI設計の一例として、参考になれば幸いです。

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