意見

モーダルダイアログは使うべきか?

20年前からそうですが、JavaScriptを使うと、ブラウザが元々用意していたネイティブのUIウィジェットを超えて、様々なUIが自由に作れます。

ただし「作れる」からと言って「作るべき」とは限りません。新しいUIウィジェットを思いつき、それが実装できたからといっても、実際のユースケースとユーザビリティが十分に考慮されていないUIは作っちゃいけないのです。

「作れるもの」「作るべきもの」 はしっかり分けて考えなければなりません。

モーダルはこの点がかなり微妙なUIウィジェットであり、熟慮して使うべきだと私は思います。

モーダルダイアログの特徴をちゃんと理解する

UI要素はすべて目的と役割があります。またコンテキストがあります。どのような場面で有効で、どの場面だとかえって邪魔かというのがあります。そのため、各UI要素の特徴やメリット・デメリットをよく勉強し、達成したい目標およびコンテキストに応じて適切に使い(あるいは使わない)ようにしなければなりません。

モーダルダイアログについては、UI/UX研究で有名なNorman Nielsen Groupが解説記事を用意しています。翻訳はこちらにあります。

また多くの研究者はなるべくモードを無くすべきだと主張していることも知っておくべきです。

残念ながら上記のことをしっかり考えずに、安易にモーダルを使ってしまっている例が多いと感じています。本サイトではモーダルの作り方も詳細に説明していますが、本心としては、モーダルを使わないで済むようにUI/UXデザインを再考するべきだと考えています

そして作るからにはちゃんとUI/UXに配慮した作りをすることが大切になります。

モーダルはUI/UXの拡張性がない

Norman Nielsen Groupの記事でも解説しているように、モーダルは警告・確認や少量のデータの入力に限るべきです。例えばモーダルの中で本格的なCRUDをやるのは、一般にお勧めできません。

「今のところは少ししかデータを入れないから大丈夫」だと思っても、機能はどんどん追加されます。いつの間にか入力すべきデータも増えていきます。この段階でモーダルを使っていると、知らないうちにモーダルの入力フィールドの数が増えていき、モーダルとして不適切な程に大きくなったりします。

したがって、特に開発初期段階ではモーダルはなるべく避けた方が良いと私は強く思います。まずは別画面に遷移するパターンで開発していって、開発が落ち着いて機能追加がひと段落した時に初めてモーダルを検討するのが良いのではないかと思います。

私が参画したあるHotwire採用の現場では、モーダルを多数使っていました。そして上記の理由で管理画面の拡張が完全に詰んでいて、モーダルをスクロールさせても、もう新機能が入り切らない状態になっていました。Hotwire採用の現場はバックエンドエンジニアが中心で、UI/UXをちゃんと考えないことが多いです。デザインを検討せずに画面を作ったのでしょう。

袋小路に迷い込んでしまわないように、モーダルをなるべく使わず、基本に忠実なシンプルな画面遷移を中心にウェブサイトを構成していくのが良いと思います

意外とモーダルは使われていない

例えば37signalsの看板製品であるBasecampやHeyではモーダルは使われていません。またNext.jsを作ったVercelのダッシュボードなどもモーダルはありません。GMailなどを見てもモーダルはありません。

代わりによく使われるのはプルダウンメニューやインライン編集などです。突然画面全体を黒い幕で覆って遮るような無礼はしません。

モーダルでも良いケース

もちろんモーダルが良いケースもあります。完全に否定するわけではありません。ごく単純な確認やちょっとした情報の入力なら問題になりません。また背景画面のステート(例えばスクロール位置や無限スクロールのどこまで来たか)を保持しなければならない場合は他に実用的な選択肢がないかもしれません

しかし9割方、モーダルよりも良いUIが存在すると私は思います。自分が直面しているケースがそれに該当するか否かはしっかり考えていただきたいと思います。