モーダル表示の分類
昨今の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デザイナーの方を募集しています。エンジニアと一緒に、より良いインタフェースを突き詰めていける方をお待ちしております。