Webサイトにモーダルは必要か
先日 @sevenina と某所にて『ちょっとさ、「モーダル」について話してみるよ』という雑談をした。
経緯としては、僕がモーダルの不満をツイートしたのがキッカケで、情報設計の分野の大先輩の稲本さんに、とりあえず不満を聞いてもらいつつ、いっしょに意見を整理させてもらった。
定義
ここでいうモーダルは、「モーダルダイアログ」のことで、他の操作を受け付けない状態、つまり文字通りモード状態になるもの。基本的に全面に被さるダイアログが現れてその他の操作はそれをを閉じるまで不可能になるインターフェイスと定義する。
Webアプリはわかる、しかしWebサイトのそれはわからん
まず前提として、Webアプリケーションにおけるモーダルの有用性や必要性は理解できている。そもそもGUIが誕生した初期から存在していて、WindowsやmacなどのOSでも要所々々で今でも採用されているインターフェイスだ。つまりソフトウェア上ではモーダルが必要な場合があり、プラットフォームがブラウザに変わっただけのWebアプリケーションにも当然モーダルが必要な場合がある。
しかし、一般的なWebサイト（いわゆるホームページと呼ばれるような）にはモーダルは必要なのかどうか、かなり疑っている。
WebアプリケーションとWebサイトの区別[1]としては、ユーザーが情報を取得するだけかどうかだ。「だけ」というのが重要で、ログインしたり、何か情報を送信したりするのはアプリケーションだと思っているので、そういう意味ではWebサイトの中では検索機能や問い合わせフォームなんかは部分的なアプリケーションだと思っている。
とにかく、情報を取得するだけの行為に対して、モード状態つまりは他の操作を制限して操作内容を強制させる状態にするモーダルを採用するのは、今の段階ではまったく理解に苦しむのだ。
なぜモーダルは採用されてしまうのか
Webサイトにモーダルが採用されきた歴史的経緯として、ターニングポイントとなったのはLightboxの登場が大きい。
たしかに、当時としては画期的な表現手法だったので、画像ギャラリーにはかならず採用されていたように思うし、振り返ると自分自身その新しい気がする表現手法に心躍っていて喜々としてそのプラグインを実装していたと思う。
しかし、情報設計やアクセシビリティなどを学び実務経験も積んできた今となっては、表現手法よりも機能としての有用性や必要性に疑問をもつことが増えたし、実装コストも相まって大っ嫌いになった。
とまあ自分のことを振り返ったうえで、未だに特にクライアント（Web制作の顧客）から好まれがち（もちろん主観である）な理由はちょっとわかった気がする。表現手法なのだ、あくまで。なにか採用したくなる謎の魅力を持っているのかもしれない。
表現手法としてのモーダルダイアログ
さてしかし、有用でないのであれば、クライアントの意向やアイデアと言えどプロとしてはそのまま採用するわけにはいかず、代替案を差し出さなければならない。雑談の中では「思考停止で採用してる可能性」は言及されていて、それはそもそもアレなのでソレなんだけど、代替案の検討の難しさもあるのかもしれない。
モーダルを設計時に持ち込む場合、おおよそ基本としてあるのは「最初は隠しておいて、ユーザーに任意に展開してもらう」という開閉可能な属性を持っている情報モデルだ。それを表現するインターフェイスとしてはモーダル以外ではアコーディオンやポップアップ、ツールチップ、タブそしてスライドショーやカルーセルなどもそれに近い表現が可能だ。代替案としてそれらを検討する余地がある。
また、モーダル自体の表現手法を考える必要がある。モーダルの表現は没入感を与える特徴がある。Lightboxなんかはそれを最大に活かしたものだ。他の情報を遮断し、モーダル内のコンテンツだけに集中させる。写真などの画像に視覚的に集中してもらうための装置となってる。没入感を与える表現手法としてモーダルしかなく、代替案はないのだろうか？
他の情報を遮断して没入感を出して特定のコンテンツだけを表示するというのは、それはつまりページと同じだ。ページも、情報を分割し限定していてそのページだけに表示しているという表現の面でモーダルととても似ている。
あれ？ページでいいのでは？別ページとしてリンクして、レイアウトやスタイルを没入感のあるものにすればいいのでは？
パーマリンク付きモーダル
雑談の中では「ページ遷移よりもモーダルで開く行為のほうが情報の連続性があり、地続きになっているように感じる」という言及もしていて、つまりページ遷移の一瞬の空白が連続性を阻害しているという意見で（空白が現れるのは単純なパフォーマンスの問題の可能性もあるが）、アニメーションなどでモーダルの展開に演出を加えるなどで情報と情報の間にストーリーを加えて連続性を保つことができる。
たしかに、モーダル独自の有用性を発見できた。連続性を保ちながら没入感[2]にシフトするのはモーダルにしかできないかもしれない。
では代替案として挙げた「ページ」の有用性はどうか。ページと比べてモーダルには再現性とシェアラビリティという機能が不足している。つまりパーマリンクだ。別のユーザー（もしくは未来のユーザー本人）に、モーダルを展開している状態を再現するのにはそれを展開する操作が必要になってしまうが、状態にURLが紐付いていれば、そのURLをリクエストするだけで即座に再現ができる。
モーダルにパーマリンクを紐付けるには、History APIや古くはhashとhashchangeイベントを駆使したり、ルーティングライブラリを利用することで実装可能だ。
再現性とシェアラビリティを持ちつつ、連続性を保ちながら没入感のある表現もできる。なるほど、パーマリンクを付けることができればモーダルはページと同等の機能を有してその表現が可能だ。
モーダルに関する様々なコスト
さて、モーダルもパーマリンク付きなら有用であることがわかってきた。しかし問題になるのはコストだ。アクセシブルなモーダルダイアログの実装はかなり難易度が高いし確認することが多くテストの量も大きくなる。その上、パーマリンクとの連携を考えると更にコスト[3]が嵩む。
とは言え実装コストはHTML Standardやブラウザの進化、ライブラリの成熟によって少しずつ減少してく期待はできる。しかし、問題はこれだけではない。
パーマリンク付きということは、パーマリンク設計、つまりサイト全体のURL設計に影響が出る。なぜ影響があるのが問題なのかと言うと、URL設計者が、UIデザイナーやコンポーネント実装者でないことがほとんどだからだ。ライブラリの成熟で恩恵を受けるのはコンポーネント実装者だけなので、URL設計者とUIデザイナーが、パーマリンク付きモーダルダイアログについて熟知（少なくともクライアントなどに説明できる程度の知識）している必要があるのだ。つまり学習コストとコミュニケーションコストが必要になる。
ライブラリの利用や開発チームの腕力（知識・能力）が高く、そしてコストに見合うだけの必要性のある表現手法なのであれば、モーダルは採用していいと思う。むしろ採用すべきだろう。
しかし、それらのどれかがかなわなく表現手法だけに固執してチープなモーダルを実装してユーザーを困らせるのは勘弁していただきたい。
まとめ
- 「情報を隠しておく」という設計にまず必要性を考えて欲しい
- 表現手法としてモーダルダイアログが最適なのか見直して欲しい
- 表現手法としてモーダルダイアログを採用するならパーマリンク付きでお願いします
※前述したとおりあくまでWebサイトに対しての言及でWebアプリは対象外
というわけで雑談から得られた答えとしては以上のとおりで、4人ほどで話しただけなのでもっといろんな意見を伺いたい。何かあれば、是非ご連絡やコメントを待っています。
Discussion