見出し画像

フローティングビューとモードの設計

このアーティクルでは、いわゆる「モーダル(ビュー)」と呼ばれるUI表現パターンと、実際のモード設計の区別の仕方を簡単に解説します。まず結論として、モーダル、モードレス問わず、画面の中で手前にポップアップしてくるようなビュー表現全般を「フローティングビュー(Floating view)」と呼ぶこととします。ポップアップしてくるビュー表現には、通常のウインドウ、モーダルダイアログ、ポップオーバー、バナー、トーストなどさまざまなものがありますが、これらを総じてフローティングビューと分類して考えてみましょう。

このフローティングビューという呼び方は私が便宜上名付けたパターン名なので、まだあまり一般的ではないかもしれません。HIGなどの有名なUIデザインガイドラインにもそのような記載は無いと思います。しかし「ウインドウ」「ビュー」「シート」「モーダル」「ダイアログ」などの既存のよく知られた分類方法では、どうしてもビューの見た目としての区分けと、モーダル/モードレスの性質が混ざってしまい、単に手前にただ展開してくるビュー表現を総じて「モーダル」と呼んでしまう誤った認識が広がる要因にもなっているように思います。

既存の呼び方からフローティングビューという呼び方に改めることで、そこにモーダル/モードレスの性質上の違いが含まれないようになるため、ただ見た目としてのビュー表現のパターンであると理解しやすくなります。

モードレスとモーダルの違い

ウインドウUIを例にモードレスとモーダルの違いを考えてみましょう。

まずモードレスウインドウというものは、複数のウインドウが重なって表示されている場合に、手前側、奥側、どちらのウインドウにもいつでも触れられる状況を作り出す種類のウインドウです。ユーザーはいつでも手前側のウインドウをクリックしたり移動(ドラッグ)したりできるし、奥側のウインドウも同様に操作することができます。奥側のウインドウをクリックしたらそれがすぐに手前側に移動してきて、重なり順が入れ替わります。その際に確認等は挟まりません。

厳密にはウインドウという枠組みによって一種のモードがウインドウごとに生じていると考えられるのですが、このようにいつでも好きな時に順番を入れ替えられる(メインウインドウを素早く自由に切り替えられる)仕組みであるため、実質的にモードレスである、と解釈することができます。
(参考:Alan Kay 「ユーザーインターフェース 個人的見解」より)

このような仕組みは、macOSやWindowsなど、今日一般的なデスクトップ向けOSの基本UIとして広く普及しています。

そしてモーダルウインドウというものは、そのウインドウの内側に明示的なモードをわざと生じさせるためのウインドウです。ダイアログなど、ユーザーに限定的な操作を求める場面で用いられます。モーダルウインドウが現れると、基本的にはそのウインドウの外側へのアクションは制限され、モーダルウインドウの目標アクションを達成しない限りはこのモードに縛られ続けます。

macOSではアプリケーションモーダルとドキュメントモーダルという階層が異なるモードの仕組みを用意しており、アプリケーションモーダルを用いるとそのアプリケーション全体が縛られるようになります。すなわち、あるアプリケーションモーダルなウインドウが現れると、そのウインドウを閉じるまではアプリケーション内の他の操作を行えなくなります。一方のドキュメントモーダルでは、ある特定の書類を開いているウインドウでこの縛りを作り出すため、アプリケーション全体を固めずに済む利点があります。
(例えばある編集中のファイルを閉じようとした際の確認ダイアログでは、その書類のウインドウ内のみでモードが生じ、他の書類ウインドウには影響が及びません。)

揮発性の高いUIパターンの場合

ここから先は

1,515字 / 2画像
コンテンツが増えていくと価格も少しずつ上がっていきます。ご興味があるなら早い方がお得かもしれません。

usagimaruのTwitter / Xで不定期に投稿してきたUI設計のビジュアライズノートを収録しています。新しい投稿も随時追加してい…

この記事が気に入ったらサポートをしてみませんか?