社内のSlackでUI談義が突発的に始まることがあるのだけれども、以前そこで上がったiOS純正メールアプリのUIについてのネタがなかなか面白いのでまとめてみようと思った。結論から言うと、純正メールアプリ、ヤバイ。
まずは観察
メールの新規メッセージ画面は他の純正アプリではあまり見かけないようなトランジションを採用していて、開くと元の画面が少し後ろに下がってナビバーだけが見えつつもメッセージ画面が中途半端なモーダルビューで現れたような状態になる。このUIが使いやすいとか何となく見た目がかっこいいとか、そんな上辺だけの理由では絶対ないはずなので、AppleがメールアプリをデザインするときになぜこのUIに至ったのか、その理由を考えてみた。
普段純正メールアプリでメッセージを送信することはほとんどなかったので、まずはいろいろと動きを観察することにした。新規メッセージ画面は送信せずに下にスワイプすると、このようにスタックされていく機能があった。このスタック部分はツールバーを押し退けて下に鎮座する、ある意味でグローバルな状態になっている。ここにスタックされているのは「すべての下書き」内に溜まっているもののうち、画面として開かれているものだ。
そしてこのスタック部分をタップすると、なんとSafariで見たことがある画面一覧が現れる。元々のメールボックス画面もそれらの一つとして扱われているが、左上に×ボタンがないことからもわかるようにこの画面だけは閉じることができない。新規メッセージ画面はSafariと同様、×ボタンまたは左スワイプで閉じることができる。これらは閉じてしまっても下書きとしては残っている。
ここまでの材料で考察したのは、新規メッセージ画面はiOSで一般的なモーダルビューではなくウインドウのようなものではないか、ということだ。同じUIを採用しているSafariの画面一覧を考えてみるとこれはしっくりくる。
タブとは何か
そもそもWebブラウザのタブとは元はウインドウなのであって、何枚もドキュメントウインドウを重ねるのが使いづらいということでタブの形で一つにまとめたUIパターンだ。なのでそのタブを分解したらウインドウになるのはとても自然なことだ。iPhone版SafariではPCで一般的なタブバーをあえて採用せず、重なったウインドウの切り替えという表現で同様の仕組みを実現している。もちろん左上には×ボタンが配置されている。これはAppleのOSでは標準的なクローズボタンだ。iPhoneというモバイルデバイスは複数のウインドウを同時に扱うような用途のためには設計されていないので、このように単一の画面（アプリ）にのみ集中できることが大前提となっている。アプリは絶対にひとつしか表示できない。あるアプリの中でウインドウのメタファーを採用したとしても、ユーザーが同時に扱えるのはひとつだけだ。SafariのUIはそのことをよく反映している。
なお、iPadではスプリットビューでアプリを同時に起動できる機能があるし、SafariではPCと同様のタブバーを採用している。iPadは片手前提のiPhoneとは違う使い方を想定したデバイスなので、UIにもこのような違いが現れる。Appleは単純に画面の広さだけではなく、ユーザーがデバイスを使う場面やユーザーとデバイスの「距離」に合わせてそれぞれ適切なUIをデザインしていることが伺える。
純正メールアプリは単なるモバイルアプリではない
ここで純正メールアプリに話を戻すとあの画面がSafariと同じUIなのも察しがつく。要は新規メッセージ画面は一つ一つがウインドウなのであって、下のスタックはウインドウを開きつつも避けている状態（Macで言うExposéやDockへの最小化状態）、画面を閉じることはウインドウを閉じることと同義だ。メールボックス画面が後ろに少し下がる演出は、メールボックス画面は生きているのだけれども一旦後退しているよ、という視覚的な合図。だから新規メッセージ画面は一応モーダルビューっぽいんだけれど完全ではないみたいな、そういう特殊な状態になっている。下にスワイプしてスタックできるのは、開いたまま下に最小化しているよ、ということなのでしょう。
このようなUIはPCのアプリを見ればとてもしっくりくる。MacのメールアプリMail.appではメッセージのウインドウをいくつも並べて開くことができる。メッセージを開いたままメールボックスの方に行くことだってできる。マルチウインドウとはそういうものだ。
このようなマルチウインドウのUIをモバイルに持ってきて更に最適化すると結果的に純正メールアプリのあの形になる。実はiOSの純正メールアプリは、マルチウインドウをモバイルで実現してしまったとてつもないアプリなのだ。おそらくこれが答えでしょう。
メールボックス画面と新規メッセージ画面は独立したウインドウ、そしてモバイルでマルチウインドウを擬似的に実現するには完全なモーダルではダメだった。ウインドウは閉じることができるし、開いているウインドウはそのままの状態で簡単に切り替えられなければならない。閉じずにメールボックスも確認できなければならないから最小化の仕組みが必要。特にiPhoneでは単なるタブバーでは到底実現できなかったので、ウインドウのスタックとSafariを模倣したUIが必要だった。（実はSafariも結構すごかった。）
自分たちがモバイルアプリのUIをデザインしようとしてもまずここにはたどり着くことができなかっただろうし、モバイルアプリとは何なのか、モバイルのUIとはどうあるべきなのかを改めて考る機会にもなった。そしてAppleのデザインが単に表面的なものではないことに衝撃を受けたのだった。「純正メールアプリ、ヤバイ」と。
