こんにちは！noteを書くのが今回が初めてになります。UIUXデザイナーを志している大嶋泰斗です。現在は大学を休学しながらデザインの勉強をしたり、並行して自分で実装できる力をつける為にプログラミングも勉強しています。

最近はsketchを使ってUIのトレースをしてみたり、実際にコードを書いてパーツを作ってみたりしています。

今回は、Appleが出しているHIG（ヒューマンインターフェースガイドライン）や、それに関連する記事から、IOSにおける主要なナビゲーション（画面遷移）について事例を用いながら簡単にまとめてみました！

一つのアプリは一つの機能のために作られている

ユーザーは何かの目的のもとアプリを起動します。つまりアプリはその目的達成にフォーカスするべきなのです。関係のない機能は削ぎ落とし、できるだけシンプルにする。

たくさんの機能を用意しておくよりも、解決したい問題を最速で正しく解決できることが求められています。（こばかなさんの#kobaka7_sketch参照）

実際にアプリのファーストビュー（開いたときのはじめの画面）を見て見るとわかりやすいです。

IOSには元からカメラや写真、ミュージック、電話、メッセージとアプリがインストールされていますが、これらは基本的にファーストビューでタスクが完結できるように作られています。

特に注目すべき点は「写真を撮る」と「写真を管理する」はそれぞれ別にアプリが存在し、「音楽を探す」と「音楽を聴く」についてもアプリを分けてつくられていることです。

ここから原則として「一つのアプリは一つの機能のために作られている」ことが分かります。

そのため、アプリ内の機能も全てそれを補完するために実装されています。

ナビゲーションの役割は、それらの機能を繋ぎ、アプリの目的地まで、ユーザーを誘導することなのです。

ナビゲーションは意識せず使えるくらい自然な配置へ

HIGによると、ユーザーはナビゲーションの存在に気づかないことが多々あるといいます。そこでUIUXデザイナーとして実現すべきことは、ユーザーがアプリを使う際に、操作の中で自然と使ってもらえるものを作ることです。

言うまでもなく、過度にUIを乱したり、注意を逸らすようなナビゲーションは避けるべきでしょう。ユーザーの行動を想定し、ユーザーがタブを選ぶのに集中しなくても使えるくらい自然は配置がいいとされます。

Facebook、Twitter、Instagramと全て新着通知に関する配置は左から二番目のタブに設置されています。これによって、私たちは意識して探すことなく、新着通知が来ているかどうかを知ることが出来ます。

投稿ボタンは右上、プロフィールは一番右、タイムラインはファーストビュー（一番左のタブ）など、統一されたナビゲーションにより、UIに集中するのではなく、本質的なアプリの使い方が出来るのだとと思います。

HIGに記載がある、ナビゲーションの種類は3つです。

・Hierarchical Navigation（階層型）
・Flat Navigation（並列型）
・Content-Driven or Experience-Driven Navigation（コンテンツ主従型）

1. Hierarchical Navigation(階層型)

"Make one choice per screen until you reach a destination. To go to another destination, you must retrace your steps or start over from the beginning and make different choices. "

これは階層型のナビゲーションで、階層を潜ることで、タスクを進行させます。また、「戻る」ことで、また違う選択を自由に選び直すことができます。
このナビゲーションは、設定やSafari、メールアプリなどで使われています。

利点は、階層によって情報が整理されているので、ユーザー自身が今どこで何をしているのかを把握しやすいことです

また、階層構造により、優先順位の高いタスクから進めることができます。

これにより、そのアプリのメインタスクの流れの中で自然に、サブタスクを進行することができます。

例えば、Twitterの場合、主な「タイムラインを見ること」と「近況を投稿すること」です。

タイムラインを見ることがメインタスクの時、「投稿の詳細を見る→いいねを押す」という動作はメインタスクの中で行うことができます。

しかし、「投稿する」はどうでしょうか？メインタスクの流れを一旦止める必要があります。この時に出てくるのが、「モーダルビュー」です。

モーダルとは、ページ下部から上がってくるビューのことです。このように下部から上がってくることで、ユーザーの行動を強制するため、「投稿する」や「キャンセル」など、「出口」となるボタンを必ず明示的に設置する必要があります。（詳しくは英語の公式ドキュメントをご覧ください。）

モーダルはメインタスクの中でサブタスクが発生した時に有効です。例えば、「タイムライン」を見るという動作を一旦止めて、「投稿する」ことができます。

基本的にサブタスクをスムーズに行うために使われ、ユーザーの行動に合わせた動作をします。

この階層型のナビゲーションは、ファーストビューにある層から、階を潜ることでタスクを実現していきますが、この時、これらのタスクは、上下関係にある必要があります。

しかし、全てのタスクを階層構造にすることが必ずしも最適であるわけではありません。

そんな時は、次のナビゲーションが参考になると思います。

2. Flat Navigation（並列型）

"Switch between multiple content categories. "

並列したカテゴリーを扱い、マルチにタスクを処理するためのナビゲーションです。今回はApp storeとミュージックを例として使用しています。

これは階層型と違い、ゴールに対して入り口を一つに絞らず、複数の切り口からゴールまでの道のりを提示する事ができるナビゲーションです。

Appstoreでの目的は”アプリのインストール”。
ユーザーとの接点を想定し、タブバーを使って、”おすすめ”や、”検索”、”アップデート情報”を並列して置いています。これにより、多様なユーザーのニーズに対応ができます。

このように下にタブバーを設けることで、カテゴリごとにタスクの処理をしています。これも同様に、どのタブから始めても最終的には、全てアプリの目的地へと繋がるようになっています。

利点としては、並立した導線（入口）を複数設けることで、同時にタスクの処理ができることです。

例えば、タイムラインを見ていて、気になったことを検索したいときに、「タイムライン」のタブをリフレッシュすることなく（場所を保存したまま）、違うタブで「検索」が実現できます。

他にも、新着の通知やプロフィールの編集、メッセージなどが別タブになっていることが多いです。

まとめとしては、階層構造に収まるかどうか、しっかりと情報を整理すること、またユーザーにとっての利便性を考慮し、並行して行いたいタスクを別タブで操作できるようすることが大切です！

3. Content-Driven or Experience-Driven Navigation（コンテンツ主従型）

”Move freely through content, or the content itself defines the navigation. Games, books, and other immersive apps generally use this navigation style.”

もっとも自由にユーザー自身が選択することできる、もしくはコンテンツ側で挙動を定義しているナビゲーションがこちらです。決まった型や構造はなく、作成者の意図がフルに反映されます。これはゲームや本、また他の没入型のアプリなどで一般的に使われます。（ユーザーの挙動例 HIGより）

例えば、ダンジョン型のゲームアプリなです。ダンジョンでは、ステージをクリアするごとに場面が進みます。

ここでユーザーは「敵を倒す」か「リタイアする」というゲーム側で定義された以外の行動では、場面を変えることが出来ません。（画面遷移を起こせない）

このナビゲーションはゲームアプリに多く、必ずしも今までと同じように、あるタスクを行うために最適な導線を敷くことが目的ではないので、上で紹介した二つのナビゲーションとは少し考え方が違います。

まとめ

・アプリは原則として、「一つのタスクを最適な形で遂行すること」を目的として作られている。
・ナビゲーションは情報を整理し、肥大化しないように気をつける。 （情報の階層化、切り分け）
・ナビゲーションを使うことに集中しなくても使えるくらい、行動の中に自然と配置する
・メインタスクとサブタスクはモーダルをうまく使ってスムーズな設計を作る。
・ユーザーの行動を想定して、期待にそった使い方ができるように「階層型」と「並列型（タブ）」による遷移を使い分ける。
・タブバーはユーザーの場所に関係なく、行動を切り替え、同時並行でタスクを進行できる。

感想

今までsketchを使ってUIをトレースしてきましたが、HIGを使って体系化された文章からも学んだことで自分の中で知識が整理されました。

今回、noteを書いていて、もっと学んで身に付けたい事ができたので都度noteに書いて発信していこうと思います。主要SNSのナビを見ていると気づくことが多かったので、また、次回まとめてみます！

最後まで読んでいただき、ありがとうございました！

参考にさせて頂いた記事
・IOSにおけるヒューマンインターフェースの原則 
・Human Interface Guidelines

＊今回の記事の内容に間違いや、気になるところがありましたらご指摘いただけますと幸いです。