ベゼルが究極的に少なくなったiPhone X が登場したことで、デザイナーは新しい局面を迎えているかもしれません。

全画面であるという前提のないモバイルナビゲーションを再構築する時期が迫ってきました。

しかし、まだ11月上旬に発売したばかりで戸惑っているデザイナーの方も多いのではないでしょうか。

そこで今回は、モックアップ投稿サイトDribbleの投稿を参考にした、iPhone X時代のモバイルナビゲーションアイデアに関する3つの考察をご紹介します。

従来のiPhoneの使い勝手とは違うからこそ考えて欲しいことをまとめてみました。
　　

iPhone X 時代のモバイルナビゲーションアイデア 3つの考察

SamsungのGalaxy S8やAppleのiPhone Xのように、ベゼルレスでスクリーンに没入できるスマートフォンは、今後ますます増えて来るはずです。

WebデザイナーとしてWebコンテンツの開発に励んでいるクリエイターの中には、モバイルページのデザインをどのように行うべきか、試行錯誤を重ねている方も多いと思いますが、いよいよモバイルサイトのデザインも次のステージに行く必要が出てきそうです。

没入体験を壊さず、ほぼ全画面のスクリーンを活かすWebデザインを行うには、果たしてどのような点に気をつけていけばよいのでしょうか？

ここでは、iPhone X 登場から現在までに見るDribbbleで公開されているモックアップのモバイルページデザインを参考にしながら、iPhone X
時代のモバイルナビゲーションアイデアを考えてみましょう。
　　

1. ハンバーガーメニューはいよいよ終わり？


Medical app UI design on dribbble

Webデザインの世界では*「ハンバーガーメニューは絶滅危惧種だ」と言われて久しく、確認できる中では少なくとも2014年5月にはTechChrunchにて「ハンバーガーメニューを避けるべきだ」*という意見が表出していました。

ハンバーガーメニューは「押すまでメニューの中身が見えない」という理由から多くのWebデザイナーやアプリデザイナーが避けていたにも関わらず、生き残っていたのは、ひとえに*「それでも便利だったから」*にほかなりません。

確かに、左上や右下の端っこにハンバーガーメニューがあっても特に邪魔になりませんし、ハンバーガーメニューを設置すれば様々な隠しメニューを表示できるので、デザイナー目線で考えるとハンバーガーメニューは非常に便利な存在でした。
※ユーザー目線で考えたときには、また別の意見が出てくるでしょう

ハンバーガーメニューを設置しているWebサイトやアプリのほとんどは左上や右下に配置していますが、これはほとんどのスマートフォンでなんとか親指でタップできるエリアにあります。

ところが、iPhone XはiPhone 7やiPhone 8よりも少し長く、そもそも四辺の端を意識した構成になっていません。もし、この場所にハンバーガーメニューを置いたりしたら、とても使いにくくなってしまうのは想像に難くないでしょう。


WALLET APP on dribbble

実際、Dribbleで公開されているモックアップのほとんどのデザインで、ハンバーガーメニューが消えています。便利だったからという理由で長い間使われていたハンバーガーメニューは、いよいよ本格的にガラパゴス化してしまいそうです。
　　

2. ボトムエリアの使い方が鍵

総務省による調査によれば、モバイルデバイスでインターネットを閲覧する場所は自宅に次いで移動中が多く、外出先ではパソコンに比べて約10倍の頻度でスマートフォンを使っている実態が明らかになっています。


画像引用元：TechCrunch:blank

iPhone X はiPhone 8よりも少し長い大きさですが、外出先では片手で使うことも多いでしょう。親指が届くエリアはiPhone X の下の部分であると考えられるので、スクリーン下部に何らかのメニューを置くのが得策かもしれません。


WALLET APP on dribbble

しかし、下部に5つほどのタブナビゲーションを施す従来型は、次第に減ってきています。上のモックアップの左側の画面のようにボトムナビゲーションを置く形は、まだしばらく続きそうですが、ボトムナビを置いてしまうことで「全画面であること」のメリットを活かしきれていないと感じるデザイナーは多いのではないでしょうか。


iPhone X Web Navigation Idea on dribbble

最近になって登場しているのは、上のモックアップにように下部にハンバーガーメニューに代わるメニューボタンを配置しているアプリやWebサイトのデザインです。マテリアルデザインの亜種とも呼べるボタン（あの「プラスのボタン」などと呼ばれるFloating Action Buttonを彷彿とさせます）はデザインを損ねることもないので、これからますます流行しそうです。
　　

3. iPhone Xで流行しそうな3つの画面タイプ

iPhone Xの*「全画面であること」のメリット*を活かすには、どのような画面が考えられるでしょうか。

Dribbbleでよく見られるタイプには、大きくわけて次の3つのタイプがあります。
　　

A. 全画面タイプ


iPhone X Web Navigation Idea on dribbble

アプリのデザインなどで増えそうなのは、全画面であることを活かした全画面タイプのデザインです。

全画面タイプの特徴は、グラデーションなどで埋め尽くされた背景の上にUIが乗っかっているものです。UI同士のつなぎ目が気にならない美しいデザインは、まるで１つのアート作品のようです。
　　

B. 上下スプリットタイプ


iPhone X - Calendar App Concept on dribbble

アプリやモバイルページでは、上下スプリットタイプのデザインも増えそうです。上下スプリットタイプのデザインであれば、写真などのメインコンテンツを上に、そのほかの詳細情報を下に持って来ることができます。さらに、全体性としてのデザインを損ねることもありません。


Shop Exploration on dribbble

こちらのデザインも、ある種のマテリアルデザインを想起させるデザインになっています。
分割ライン上にボタンを置くことで、邪魔にならないナビゲーションを設置することもできます。
　　

C. カード型タイプ


iPhone X - City Guides Concept on dribbble

たくさんの情報量がある場合に便利なのが、カード型タイプのコンテンツ表示です。上のように横にスワイプするタイプもあれば、新しいApp Storeアプリのように縦にカードを流しながら、詳細を表示したいカードをタップすることで画面を拡大するようなUIもよく切られます。


iPhone X - Todo Concept on dribbble

カード型画面は、上に挙げた全画面タイプや上下スプリットタイプと組み合わせることでさらに洗練されたデザインになるでしょう。カードを拡大したり縮小したりすることで、まるでサイトマップを立体的に移動しているような感覚になります。