画像スライドショーの標準 UI (あったらいいな)

ウェブサイトで複数の写真をまとめて (一連で) 見せたいケースがあると思います。イベントの様子をレポートするコンテンツだったり、製品写真を様々な角度から見てもらうようなコンテンツだったり、といった例が挙げられますが、それらは連続した画像群でありながらも、一枚一枚をじっくりとユーザーに見てもらいたいことでしょう。

現状よく見る UI : カルーセルとモーダルウィンドウ

現状では、たとえば bxSliderFlexSlider のような JavaScript のライブラリーを使って、ウェブページの中にカルーセル形式でフォトギャラリーを埋め込む例を見ることがあります。あくまでもページ全体の中の一部分の面積で見せているので、ユーザーにとっての没入感という点では物足りない場合があります。また、カルーセル特有のユーザビリティ/アクセシビリティ上の問題もあり (ご参考 : カルーセル)、適切にデザインしないとユーザーがついてこれない (カルーセルであることに気付いてもらえなかったり、使いかたがわからなかったりする) 恐れがあります。

もうひとつ、モーダルウィンドウ (いわゆる Lightbox 系) の中で複数の画像を切り替え表示させる例を見ることもあります。モーダルウィンドウ特有のユーザビリティ/アクセシビリティ上の問題があるうえに (ご参考 : モーダルウィンドウを考える)、画像切り替え機能までもが加わることで、ユーザーのミステークを誘発する恐れがあります。たとえば下図のような状態で、画像の外側 (左側または右側) をクリックしても、画像は切り替わらず、さらに悪いことにモーダルウィンドウ自体が閉じてしまう...といった具合です。

モーダルウィンドウ (Lightbox) の中に画像切り替え機能が加わったイメージ。画像の外側 (左側または右側) をクリックしても、それが矢じりアイコンから多少離れた箇所である場合は画像が切り替わらない。さらには、モーダルウィンドウ自体が (ユーザーの意図に反して) 閉じてしまう。
モーダルウィンドウの中に画像切り替え機能が加わったイメージ。

あったらいいな : 標準的な「全画面スライドショー」

上述のような課題意識から、ユーザビリティ/アクセシビリティ上の問題がなく、かつユーザーが没入感を得やすいような、画像 (写真) 切り替え表示とはどういうものだろう…ということを考えてみました。

現時点では「あったらいいな」の個人的な空想ですが、あるウェブページに並んでいるサムネイルをクリック (タップ) すると、全画面表示でスライドショーが提示される…というのは、いかがでしょうか。標準的な HTML のマークアップ (と Fullscreen API?) で、ユーザーエージェント側が自動的にアクセシブルな UI を提供してくれるようなイメージです。(スマートフォンで動画を再生すると OS 標準の動画プレーヤーが起動しますが、それと同じような感じです。)

全画面表示で画像のスライドショーが提示されるイメージ。ユーザーエージェントが標準の UI を自動的に提供してくれる。
ノートブック PC の場合
タブレット (ポートレイト表示) の場合
スマートフォン (ポートレイト表示) の場合
スマートフォン (ランドスケープ表示) の場合

要件としては、以下のような感じでしょうか。

たとえば、複数の <figure> 要素 (<img> や <figcaption> を内包している) を括る「画像セット」的な意味合いの要素があったとして、その要素があると各ブラウザが自動的に上記のようなスライドショーの UI を開いてくれる、というインタラクションがもし標準で可能になれば、サイト制作側も楽できますし、ライブラリやプラグインの数だけアクセシビリティに悩まされることもなくなりますし、セマンティクスとしても明示的ですし、ユーザーとしても認知/操作がしやすいでしょうし、と「いいことずくめ」な気がしますが、さて...。

以上、「あったらいいな」でした。