DESIGN

徐々に変化しているスマホの収納ナビゲーションUIデザインについて書いてみた

ブログは始めて3回目の投稿です。
スマホの「収納するタイプのナビゲーションデザイン」についてまとめてみました。

Facebookが横スライドタイプの収納ナビゲーション(Facebookアプリの右下タップすると画面がスライドしてコンテンツが現れるアレ)を採用し始めてから、スライドナビゲーションが流行り、今でもいろんなアプリで同じタイプのナビゲーションが採用されています。

別に否定する訳ではないですが、あまりにも何でも収納できる便利なデザインなので、「とりあえずナビゲーションは横スライドで!」という考えに陥りがちです(俺だけかもしれないけど・・・ 

「スマホになると画面狭いからだいたいパターン決まってくるよね!」なんてことを言われると、「た、確かに・・・いや、待て待て。それは違うはずだ・・・」と思いつつも自分の中でハッキリした根拠がなかったので、”収納ナビゲーション”に絞ってリサーチして、まとめてみました。

世界感を重視したタイプのナビゲーション


mindieの画面キャプチャ

App Name : Mindie

この画面はMindieという「撮った動画に音楽を付けられる」という著作権ギリギリなサービスのアプリなのですが、左上の”M”ボタンを押すと左からリズムの良いアニメーションとともに、収納していたコンテンツが現れます(写真)

アプリ自体、動画を画面いっぱいに見せるデザインに重点を置いていて、ナビゲーションをタップした時のアクションに画面移動がなかったり、アニメーションとコンテンツが表示された時のデザインが、アプリの世界感を引き立てるような演出になっています。

画面全体を覆うタイプのナビゲーション


kickstarter のキャプチャ

App Name : Kickstarter

デザイン力が高く尊敬するサービス、Kickstarterのアプリです。

ヘッダー中央の部分(写真だと”Staff Picks”と矢印の領域)をタップすると、矢印がクルクルまわるアニメーションとともに画面を覆うナビゲーションが現れます。(写真) (矢印がクルクルまわるアニメーションがやや素早いお陰で、ナビゲーションを開くときにストレスを感じにくくなっています。)

収納画面の自由度が高いため、Kickstarterがやっているようにナビゲーションデザインの工夫が他のタイプより自由にできます。

Kickstarterのアプリはページによって固定的に表示するコンテンツを変えたりと、細かい工夫がされていて個人的にかなり勉強になるアプリです。さわったことがない方はぜひ1度触ってみて下さい。

ドロップダウンタイプのナビゲーション


vineの画面キャプチャ

App Name: Vine

キャプチャはTwitterが買収したVine。個人的に横スライドの次に普及している収納ナビゲーションタイプだと思っています。

メリットは”画面遷移”がないこと、と、出現のアニメーションが軽快なものが多く、ストレスを感じずに気持ちよく収納したコンテンツを発見できる点だと思います。

収納しているコンテンツが多すぎると画面を覆ってしまって良さが出ないし、収納しているコンテンツに下層構造があると相性が良くなかったりすると思います。

Vineはナビゲーションを引っ込める時のアニメーションにこだわりがあり、iamはiOS7のレイヤーデザインを上手く反映したアニメーションデザインです。

STORYS.JPの吹き出しタイプのナビゲーション


storys.jpの画面キャプチャ

App Name : STORYS.JP

STORYS.JPのアプリ画面です。アプリ専用のトークストーリー機能はぜひぜひ使ってみたい機能です。

STORYS.JPのナビゲーションはFacebookと似ているのですが、収納の仕方が横スライドではなく、タップすると右下から”シュッ”と吹き出しが現れます。

少しフォントサイズが小さいかなと思いますが、おそらく画面全体を覆うと「違うページに遷移した」と思ってしまいストレスを感じてしまうのでそれを軽減するためかなと思います。

スライドタイプのナビゲーションも画面の下部にボタンが


antenna

App Name : Antenna

ultra visualの画面キャプチャ

App Name : Ultra Visual

デザインというより傾向なのですが、
横スライドタイプのナビゲーションは、「ヘッダーの左or右」についていることが多かったのですが、最近リリースしたアプリやアップデートしたアプリを見ると「スマホ画面の下」に配置していることが多くなって来ているように感じています。

紹介しているAntennaのアプリはもともとヘッダーにナビゲーションがあったのですが、アップデートを経て下部に配置するデザインになりました。

Ultra Visualはもともと下部についていて、これはタップすると下から収納しているコンテンツが現れる仕様になっています。

この傾向はiPhone5からスマホの画面幅が縦に伸びた影響だったり、もともと上についていると指の短いユーザーさん(特に女性のユーザーさん)には少しツラい。ということを踏まえた傾向なのかなと思っています。

Airbnbのスロット?タイプのナビゲーション


airbnbの画面キャプチャ

App Name : Airbnb

AirbnbのiOSアプリのナビゲーションは画期的でした。

画面だと分かりづらいのでぜひ実機で見て欲しいのですが、上下にスワイプすることで「旅行」と「ホスト」という2種類の収納コンテンツと、タイムラインを切り替えられる仕様になっています。

「旅行=旅行をする時の部屋を探したい」という時と「ホスト=部屋を貸し出したい」というユーザーさんの状況でナビゲーションと画面が切り替わるようになっています。

iOS7が登場する前に、Airbnbのようなナビゲーションデザインは話題になりましたが、それをサービスの特徴に落とし込む設計力はスゴいなあと思いました。

<番外編>スマホサイトもアプリライクなナビゲーションに


squareの画面キャプチャ

サイト:Square

ficc kyoto blogの画面キャプチャ

サイト:FICC kyoto blog

ナビゲーションの動きがあるのはスマホだけじゃありません。紹介しているSquareやFICC kyoto blogのスマホサイトは他のスマホサイトとは線を引く、アプリライクなスマホサイトデザインとなっています。

Squareはレスポンシブデザインでタブレットとスマホの画面サイズの時にはナビゲーションが下部に来るようになっています。そして、メニューボタンを押すとアニメーションとともに画面全体に収納したコンテンツが表示される仕様です。

FICC kyoto blogのサイトは「これスマホアプリ?」と思ってしまうような作りになっています。 メチャクチャイカしてるのでまだ見たことがない方は、ぜひスマホからアクセスして見ていただけるとそのスゴさが分かります(オープニングがメチャクチャカッコいい!)




今回は以上です。

見てみるといろんな考え方があり、これからも新しいナビゲーションの在り方が出て来る可能性は全然ありますね。固定観念に捕らわれず解を提示していきたいところです。

最近のアプリは静的なデザインだけでなくアニメーションの動きも重要なのでぜひ動きと一緒に紹介したいところなのですが、この手の記事を書く機会が多くなったら導入します(笑)

「いやいや、ここはこうだよ!」とか、「次はこういうまとめあったら見たい!」などなどありましたらぜひソーシャルでお声かけ下さい〜!

では。


SHARE THIS

TAKUMI KAI

タクミ カイ

90年生まれ。九州宮崎出身のデザイナー。
良い感情を作るために体験をデザインします。

OTHER POSTS