Pickupニュース

モバイルファースト時代のlightboxの在り方
コラム

モバイルファースト時代のlightboxの在り方

Androidのバックボタンにどう対応するか?
画面遷移せずに同一ページで複数のコンテンツを表示することが出来るlightbox系のjQueryプラグインはPCサイトで多用されていますが、果たしてそのままモバイルサイトで使用しても良いのか検討する必要があります。

きっかけ

先日、Toggeterまとめでこちらの記事をスマートフォン(Android)で閲覧していた際に、うっかり画像をクリックしてしまったようで、下のようなスライドショーが画面に表示されました。
そのため、Android端末のバックボタンをタップして記事ページに戻ろうとしました。
しかし、タップして戻った先は、記事ページではなくその1つ前のページでした。

そこで初めて気づきました。あぁ、これはlightbox系のjQueryプラグイン(以下lightboxと略)でポップアップされた写真が画面全体に表示されているのだと。

今回のToggeterまとめの場合、元の記事ページに戻るには、画面右上の☓マークをタップするか、画面を上下にスワイプする必要がありました。 余談ですが、本来表示されるはずの☓マークが表示されないこともありました。読み込みエラーでしょうか?

しかし、Webブラウジング中においては「一つ前の画面に戻る=バックボタン」という図式が頭の中に出来上がっていたため、この挙動は煩わしく思えました。 画面全体のオーバーレイが透過0の黒一色であったことも気づかなかった要因でした(lightboxを使用したWebページでは、半透明の黒を使用したオーバーレイが主流で背景に記事ページがうっすら見えています)。

lightboxの考慮すべき点

そうなると、スマートフォンでlightboxを使用する際には以下のような注意が必要であると感じました。
  • PCモニターの場合、ポップアップウィンドウ外の余白が大きいため、それが同一ページ上に展開されていることがわかりやすいが、スマートフォンの小さな画面だと余白が少ない(もしくは全くない)状態になるためわかりにくい
  • (上記に続けて)画面を閉じるためのより「閉じるボタン」を明確にする必要がある
  • lightboxの種類によっては、画像の拡大に対応していない(画面の100%までしか表示出来ない)ものもあるので、最初に十分吟味する必要がある
  • (本末転倒ながら)本当にlightboxを使う必要があるのかを考える(PCでの閲覧では演出効果としては良く見えるが、全ての環境下で万能では無い)。
  • 予期しない操作によって記事ページから離れてしまうと、元のページに戻ることを諦めてそのまま離脱してしまう(これは小さなことですが、重要です)。

具体的な対応策は?

こういったことを考えつつも何か具体的な対応策は無いものかと探しておりましたら、stackoverflowに同様の質問をされている方がいらっしゃいました。

I have this lightbox (Colorbox) that works perfect, but there’s one problem.

If I press the hardware back button on my tablet, I want the lightbox to exit. Instead of closing the lightbox, the hardware back button exits the entire website and goes back in history–that’s not what the user would expect.

こちらの方は、Colorboxを使用しているとのことですが、その返答として、以下のようにpushStateを用いて、ブラウザに履歴を追加されることを提案されていました。
JavaScriptCopy
history.pushState(null, "Colorbox", '#colorbox'); window.onpopstate = function(event) { $.colorbox.close(); };

こちらの方法を後日検証してみたいと思います。
iPhoneは持っていないのでどうなるかはわかりかねます。

(2016年11月14日追記)
続きを書きました。

続:モバイルファースト時代のlightboxの在り方

pushStateでブラウザの「戻る」に対応!
先日、スマートフォンでのlightbox系プラグインを使用してスライドショーを表示する際は、誤って「戻る」操作をしてしまうと、元のページのさらに前のページに戻ってしまう問題点?を指摘しました。その解決策がわかりましたので、ご紹介致します。

(2016年11月15日追記)
さらに続きを書きました。

完結:モバイルファースト時代のlightboxの在り方

lightGalleryで全てが解決しました!
とにかく今、一番良いlightbox系のjQueryプラグインは何か、とにかく調べ回りました。その結果、2016年11月現時点で入手可能なものとして最高なプラグインを見つけました。それがlightGalleryです。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください