へたれwebディレクターの覚え書き

このブログではサイズが大きめの画像を表示するのに『Lightbox JS』という仕組みを利用しています。

しかし、自分の書いたエントリーをあとから閲覧したり、ほかのLightboxを使っているブログを読むにつけ、
「ブログの画像にLightboxを使うのって、あまりよくないのではないか？」
と思うようになってきました。

なぜそう思ったのか、そしてそれをどう解決するのかを考えてみます。

Lightboxの特徴を再確認する

まず、Lightboxの特徴を再確認してみましょう。

Lightboxの優れいている点

限られたスペースで画像を表示することができる

もともとLightbox導入の目的がこれだったはずです。

なにかを説明するとき、やはり画像や図の力は絶大です。しかしwebの画面は幅が限られています。
以前はこれを別ウィンドウ表示で対応していたのですが、ユーザビリティー的によろしくなく、このサイトでもそれを解決するためにLightboxを採用しました。

Lightboxの良くない点

たいして情報がプラスされない

Lightboxはそもそも「画像を詳細に見せる」意外にほとんど情報がプラスされません。つまり「画像を見てもらうこと自体に意味がある」場面でないと真価を発揮しづらい仕組みです。

たとえば『アヴァロン・コード』というゲームのサイトはなどは悪い例で、Lightboxで表示した結果にまったく情報がプラスされていません。これでは何かに期待してわざわざ画像をクリックしてくれたユーザーをガッカリさせてしまうのではないでしょうか。

画像がパーマリンクでない

拡大した画像をあとから再度確認しようとしても、ブラウザーのhistoryに残っていません。ですので「進む」「戻る」でも表示できませんし、画像自体をブックマークできません。つまりユーザーが画像にアクセスする手段を限定してしまっています。

また、Lightbox画像表示中にブラウザーの「戻る」をクリックしてもメーン画面に戻らないため、初心者にとっては遷移が把握しづらくなります。

クリックする前にユーザーが動きを想定できない

Lightboxが表示される画像は見た目、画像にAタグを貼っているのと変わらないので、クリックしたらページ遷移するのかLightboxが開くのか判断できません。

UIを考える上での基本は、ユーザーになにかアクションさせるときに「これをクリックしたらこういう動作をするんだろうな」というユーザーの予測を絶対に裏切らないこと、そして予測させやすくすることだと思います。この意味で、当ブログでのLightboxのUIは良いとは言えません。

UIが分かりづらい

Lightboxが表示されたのはいいけれど、そのあとどこをクリックすればどうなるのかが分かりづらいようです。

本文とのつながりが失われやすい

Lightboxは表示時にメーン画面を暗くするので、画面を見ながら本文を見る、という使い方ができません。このような仕組みを『モーダルウィンドウ』『モーダルダイアログ』と呼びますが、これは「いまやってることはひとまず置いておいてここに注目！」というときに使うべき仕組みです。

ブログでなにかを説明しているときは、画像や図はその説明を補足するために使うわけであり、本文と画像のつながりが切れては意味をなさなくなると思われます。

Lightboxはモーダルダイアログである

ここでちょっと「モーダルダイアログ」について。

ダイアログとは一時的に現れるウィンドウのことを指します。アラートボックスなどもこれに当たります。
ソシオメディアによると

メインウィンドウでの利用フローを中断して一時的に現れるウィンドウ。モーダル（それを閉じるまで別の操作に移れない）とモードレス（それを閉じなくても別の操作に移れる）のものがある。
（『UIデザインパターン - ダイアログウィンドウ / ダイアログボックス』ソシオメディア）

とのことです。

Lightboxは一時的に今までの画面をブラックアウトさせて見えづらくさせるわけですから、モーダルダイアログである、と言えます。

先ほども書きましたが、モーダルダイアログは「いまやってることはひとまず置いておいてここに注目！」というときに真価を発揮する仕組みだと思います。

逆に言うと、「今やってることを覚えておいてね、そしてあとで100％思い出してね」というのは難しいようです。


前に興味本位で「初心者のためのパソコン講座」を見学させていただいたことがあります。そこで「質問フォームに文字を入力してみましょう」というのがありました。

入力モードをローマ字からかなに変更したいという受講生がいたので、その切り替え方法を説明していたときのことですが

IMEがローマ字設定なので仮名入力に切り替えたい→IMEの設定パネルを開いていもらう→設定する→設定パネルを閉じる→ん？パネルを開く前はなにをしようとしてたんだっけ？

となっていました。

「サイト利用中にダイアログを表示させてひとまずそこに注目、ダイアログが終了したら元の作業に戻る」というのはPCに慣れきっている我々にとっては一般的な仕組みですが、そうでない人にとっては理解するのが難しい仕様のようです。

で、このブログはどうしましょう？

ブログの画像にとって「本文とのつながりが失われやすい」のは致命的な気がします。

たとえば東京駅から六本木に行きたい外国の方に東京の地下鉄乗り継ぎを説明するブログがあったとします（我ながら例の極端さにどうかと思います）。

「From Tokyo Station, take the Marunouchi (RED) subway line to Kasumigaseki Station and transfer to the Hibiya (Grey) subway Line for Roppongi Station」という文章による説明と、東京の地下鉄路線図を同時にみせることでなんとか説明できそうですが、これが文章だけだったり、逆に地下鉄路線図だけだったらどうでしょうか。

Lightboxを使うと言うことは「文章と路線図を同時に見ちゃダメ」と言っているようなものです。

ということで、やはりこのブログにはLightboxは向いていないように思えます。

では代わりになる仕組みはなんでしょうか。

要件は以下のようになるかと思います。

• クリックする前に「ここをクリックすると画像を拡大するよ」というのを伝える
• 画像を拡大しても本文を確認できるようにする
• 拡大した画像はどこをクリックすれば閉じるのか分かるようなUIにする

「画像がパーマリンクでない」については、このブログの画像は単体で表示させても特に意味がなく、本文と同時に見られることではじめて意味をなすものであることから、必須要件ではないと判断して対応を見送っています（解決案が浮かばなかった、とも言います）。

そんなわけで、Highslide JSという仕組みを導入してみました。具体的に、以下のように動作が変わっています。

• 拡大、縮小（拡大を元に戻す）される画像にマウスカーソルが合うと虫眼鏡カーソルになるようにしました
• 拡大された画像はドラッグで移動できます

これで少しは良くなったかと思います。しばらくこれで様子を見てみることにしましょう。