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

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

ウインドウUIを例にモードレスとモーダルの違いを考えてみましょう。
まずモードレスウインドウというものは、複数のウインドウが重なって表示されている場合に、手前側、奥側、どちらのウインドウにもいつでも触れられる状況を作り出す種類のウインドウです。ユーザーはいつでも手前側のウインドウをクリックしたり移動(ドラッグ)したりできるし、奥側のウインドウも同様に操作することができます。奥側のウインドウをクリックしたらそれがすぐに手前側に移動してきて、重なり順が入れ替わります。その際に確認等は挟まりません。
厳密にはウインドウという枠組みによって一種のモードがウインドウごとに生じていると考えられるのですが、このようにいつでも好きな時に順番を入れ替えられる(メインウインドウを素早く自由に切り替えられる)仕組みであるため、実質的にモードレスである、と解釈することができます。
(参考:Alan Kay 「ユーザーインターフェース 個人的見解」より)
ここから先は

UI設計ビジュアライズノート集
usagimaruのTwitter / Xで不定期に投稿してきたUI設計のビジュアライズノート(デザインパターン解説)を収録しています。新…
この記事が気に入ったらチップで応援してみませんか?