昨今のiOSアプリにおいて、Appleの純正アプリを筆頭に、様々なモーダル表示を見かけるようになりました。いくつか例をあげて、それぞれのモーダルにおける意味をさぐっていきたいと思います。

はじめに
モーダルとは
モーダルの分類
・Semi Modal
・Redirectable Modal
・Phased Modal
まとめ

はじめに

こんにちは、delyでiOSエンジニアをしている佐藤慧(@johnny__kei)です。社内ではJohnというニックネームで通っています。
最近では、仮説を検証するためのHigh Fidelity プロトタイプ、すなわちコードベースのプロトタイプを作ったりしています。

モーダルとは

モーダルについては、iOS Human Interface GuidelinesにModalityという章があるので、そちらを見ていただければと思います。
今回の記事で、関係しそうな部分は以下の部分です。

A modal view can occupy the entire screen, an entire parent view, such as a popover, or a portion of the screen.
モーダルビューは、ポップオーバーのように、画面全体や親のビュー全体に表示されたり、画面の一部に表示されたりします。

上記の通り、様々なモーダルがあることが分かります。

モーダルの分類

今回は以下の3つのモーダル表示について書きたいと思います。

Semi Modal
Redirectable Modal
Phased Modal

正式名称がわからないので、勝手に呼んでいることをご了承ください。むしろ、「これだ！」というのがあれば、ぜひ教えていただきたいです。

Semi Modal

セミモーダル、半モーダル。
画面の半分くらいを占めるモーダル表示。

AppStore
AppStoreやiTunesStoreで商品を購入するときに、本人確認のための認証のためのモーダル表示。認証という１つのアクションを行う。
オーバーレイをタップでキャンセルすることができる。

Google TODO
タスクを投稿する際のモーダル表示。
タスクを投稿するという１つのアクションを行う。
オーバーレイをタップでキャンセルすることができる。
モーダルと言っていいのか正直迷うところですが、既存のチャットUIの投稿とは、違っていて、投稿することに専念しているのでモード感が強いので、モーダルとしました。
このアプリでは、他にも、並び替えやアカウント切り替えにも、Semi Modalを使用しています。

Twitter
Twitterのアカウント切り替えのモーダル表示。
オーバーレイをタップでキャンセルすることができる。
アカウント切り替えという１つのアクションを行う。編集や追加、作成を行うと、別のモーダルが表示されます。同様のものでInstagramのアカウント切り替えがあります。Instragramの方が切り替えのみでシンプルです。

Redirectable Modal

方向転換可能なモーダル。
詳しくは、「Redirectable UI」という考え方という記事をCTOの大竹(@EntreGulss)が以前書いていたので、こちら見てください。

Podcast
聴いているアイテムの詳細画面に遷移のモーダル表示。
遷移時にやめようとして、元に戻ることが可能です。聴きながらも、Podcastアプリ内で他のアイテムを探すことができます。似た例としてはApple Music, YouTubeが挙げられます。他の「Redirectable Modal」と違い、どの画面にいてもアクセスできるのも特徴的です。

*AppleのPhotoアプリは、モーダルっぽい遷移はしますが、Navigation遷移です。

Phased Modal

段階的モーダル。
最初は、モーダルとしては見えず、メインのコンテンツを触ることができるが、広げることでモーダル化する。

Apple Map
検索結果画面および、検索フィールド画面で用いられています。
縮めた状態だと、マップの周辺を詳しく見ることができ、広げた状態だと、検索結果を詳しく見ることができます。小中大と３段階の表示ができます。
GoogleMapは表示されるコンテンツは異なりますが、検索結果で用いられています。

Tasty Table
ご注文フォーム画面。縮めた状態だと、簡単な情報が見れますが、広げた状態だと、選択したメニューの細かい内訳が見れるようになります。

まとめ

例を元にiOSアプリにおける様々なモーダル表示を見てみました。

Semi Modal
ある１つのアクションを行う。すぐアクションを行える、すぐキャンセルできるのが特徴的です。

Redirectable Modal
詳細コンテンツの表示を閉じる際に、ジェスチャーを用いて、Redirectable(方向転換可能)に表示をすることができるのが特徴的です。

Phased Modal
メインコンテンツに関連する情報で、段階的な情報を表示することができるのが特徴的です。

どのモーダルにせよ、メインコンテンツが見えていることが大きな特徴で、全画面を覆わない表示なので、すぐに、モーダルから抜け出すことができます。

自分はiOSエンジニアなので、機会があれば、例のようなモーダル表示の実装を試して見たいです。

kurashiruのアプリは、かなりシンプルになっているので、いますぐ取り入れることはできないですが、使えそうなところでは、自分からデザイナーに提案していこうと思います！

これからもさまざまな、インタラクションを踏まえた、モーダル表示が出てくるのが楽しみです。

kurashiruのUIデザイナー募集
最後に、delyではkurashiruを一緒に作っていくUIデザイナーの方を募集しています。エンジニアと一緒に、より良いインタフェースを突き詰めていける方をお待ちしております。