ハーフモーダル（半モーダル）の時代が到来！【スマホサイトのUIデザイン】
クリスマスから唐突に開始されるUIデザイン研究。
私はWEBディレクターとして、現場でよく使われるUIデザインを研究しています。
UIデザインにおいて、使いやすいデザインを研究する際、参考にすべきものは、「大手サイト・大手サービスのUI」です。
大手はお金をかけてUI・UXの研究を行っており、CVRがより高くなるデザインで常に最先端を走っています。我々は研究する土俵が少ない中で、それらを後追いしていくことが最も「効率的」なのです。
今回はAppleやGoogleなど、大手が軒並み採用し始めている「ハーフモーダル」についてお話しましょう。
感動するほど使いやすい「ハーフモーダル」とは？
ハーフモーダルとは、画面下部から表示され、画面の半分までで表示されるモーダルを指します。
半モーダル、セミモーダルとも呼ばれるUIデザインになります。
メリットとしては以下のようなものがあります。
・画面が「遷移していない」ことを示し、UXを向上させる
→その画面内のアクションであることをユーザーに示せる
・スマホによるアクションがとにかく楽
→スマホを持ち替えなくとも操作できる
スマホ使用時の「アクション」に特化したUI
スマートフォンを持っている時、画面の中で一番操作しやすい場所はどこでしょうか？「画面の下半分」ですよね。
ハーフモダールは、画面下半分で必要なアクションを操作できるUIなのです。
従来、モーダルといえば「画面中央」に表示されたり、ハンバーガーメニューの「画面横からスライド」するような表示方法が主流でした。
従来のモーダルは、指を少しスライドさせて、画面上部〜中央を触る必要がありました。
ただ、ハーフモーダルを使用する際は、指をスライドする必要がありません。そこにUX的な観点での「楽」が存在するわけですね。
もっとも有名なハーフモーダルといえば？
スマホにおけるハーフモーダルとは、最近登場したUIなのでしょうか？それは違います。本来、ハーフモーダルは「入力キーボード」で採用されていたUIデザインです。
もし、キーボードが画面上部にあったら、指が疲労骨折してしまいます。
スマホにおいて「アクションを起こす場は画面下部」だと相場は決まっているのです。
普通のモーダルとハーフモーダル、使い分けは？
では、普通のモーダルとハーフモーダルの使い方はどう違うのでしょうか？ただただ見栄えがよく、流行しているからハーフモーダルを使用するのでしょうか？
それは違うと考えています。
ハーフモーダルと普通のモーダルで、使い分けは「その画面のメインはどこなのか？」を考えるべきです。
例えば、グーグルマップの場合、メインは「地図」です。ハーフモーダルは、アクションを起こす場であり、その画面のメインではありません。
もし、グーグルマップで、スポットをクリックしたときに、全面にモーダルが表示されたら、下の地図は動作させることができません。ユーザーは「地図ではない画面に遷移した」と錯覚するのです。
グーグルマップは、ハーフモーダルを採用する意味が伝わる設計になっていますよね。
逆に、全面モーダルを使用する意味は、そのモーダル画面が「メイン」であるということです。
例えば、求人サイトの検索を「ハーフモーダル」で実装した場合はどうでしょうか？絞り込み検索は、「絞り込みをする」ということがメインです。別に、その下のレイヤーにあるトップページなどは別に見えなくても良いはずです。
モーダル下のレイヤーにある画面が見えるべきか？見えなくても問題ないか？で決めていく必要があるでしょう。
世界中のサービスで「ハーフモーダル」が使用されている
主にスマホアプリにおいて、このハーフモーダルは多用されていることがわかります。
ハーフモーダルを採用しているサービスは多岐に渡りますが、以下のようなブランドでハーフモーダルを使用しています。
・Apple（IOS13以降）
・Google Map
・Youtube
・Amazon
個人的に感動したのは、Amazonの決済画面です。
これまで、購入の際は画面遷移していたイメージでした。
しかし、現在は画面遷移せず、ハーフモーダル内で全ての決済が行えるようなUIになっています。
購入までとてもシームレスに行うことができ、UXがとても良いです。
他にも例を出すと、スーモのアプリなどが好例ですね。
個人的な見解ですが、日本一使いやすいアプリだと感じています。（多くの優秀な人材がUI・UXを研究しているのでしょう。）
毎日のように物件情報を見て回っています！！
ECサイトにハーフモーダルは必要か？
ECサイトの検索UIにハーフモーダルを利用しているサイトもあります。
こちらは「ebay」という世界最大級のオークションサイトのUIです。
全ての検索を使用する際は、全画面のモーダルとなる。
上記のように、簡易的な検索をハーフモーダルで行うことが可能です。もし、詳細な検索を行いたい場合は「全て表示」で詳細検索モーダルが表示されるような仕様ですね。
これは、「タブ」を切り替える際に使用します。正直、検索系のUIであれば、ハーフモーダルは別に必要ないかと思います。
アマゾンの決済用モーダルUIのように、その画面内のアクションに関わる簡易的な導線は、ハーフモーダルを使用するとユーザビリティが上がりそう。
ハーフモーダルは流行りで見栄えも良いですが、ユーザーにとって「どこで使用すると使い勝手がよいか？」を考えるべきですね。
開発や実装は難しいのか？
非エンジニアの私としては、開発工数や実装可能なハーフモーダルを知っておく必要があります。
調べてみると、いろいろな意見があります。
アプリ的な挙動のため、Swiftでの実装記事が多めでした。
実装したいアクションによって、開発難易度は格段に違います。
例えば、ハーフモーダルを閉じるときの挙動として、下にスクロールすると閉じるというIOSのような挙動があります。
しかし、これを実装しようとすると、既存ブラウザのスクロールジェスチャと衝突し、うまく動かなくなるなどの不具合が発生した例があるようです。
この他、モーダル内で下にスクロールさせるような仕様を想定した場合で、下レイヤーのスクロールと噛み合わせが悪く、挙動が安定しないなどの例もありました。
モーダルなので、そこまで開発が難しくないのでは？と思うかもしれません。しかし、やりたいことによっては、既存のジェスチャやアクションと要素がかぶり、うまく実装できないケースが多々あるようでした。
この時「なぜハーフモーダルである必要があるのか」という原理に基づいて行動する必要があります。
実装できなくても、ユーザビリティに大きな問題があるわけではありません。
ハーフモーダルの実装工数が膨大になる場合、他の方法でユーザビリティを高めるか、実装できるエンジニアを探す必要がありますね。
ハーフモーダルが主流の時代が来る？
アプリのように、頻繁に画面内で操作が起こる場合、ハーフモーダルは使い勝手の良いUIだと言えます。
画面内の主役を助ける役割があるUIなので、実装の際、「必要性」をきちんと考えて使っていきたいですね！
この記事が気に入ったらサポートをしてみませんか？