同じアプリを4つのナビゲーション構造で作り比べた

はじめに

以前「同じ画面を8つのUIデザインで作り比べた」という記事で、同じ画面仕様を質感の違うデザインコンセプト8つで比較しました。今回はそこから視点を変えて、見た目ではなく画面の組み方そのものを比較してみます。

同じアプリを、ナビゲーション構造だけ変えてAIに4パターン作ってもらいました。配色やフォントはあえて揃えていて、構造の違いだけが伝わるようにしています。

画面仕様

すべて同じ「プロジェクト管理ツール」のシェル画面です。ダッシュボード・タスク・メンバー・設定の4セクションを持つアプリを、バニラJS・外部ライブラリなしで実装しています。

実際にクリックして切り替えられるようにしているので、見た目だけでなく操作感の違いも触って確認できます。

1. サイドバー型

Slack・Notion・GitHubなど、セクション数が多い業務アプリの大半がこの構造です。すべてのセクションが常に一覧で見えているので、機能数が増えても迷いにくいのが利点です。一方で画面の横幅を常に消費するので、コンテンツ領域を広く使いたい画面では窮屈になります。このサイトにもサイドバーナビゲーションの実装例があるので、パーツ単位で使う場合はそちらも参考にしてください。

2. トップナビ型

セクション数が3〜5個程度に収まるアプリに向いています。サイドバー型よりコンテンツ領域を広く取れる反面、セクションが増えるとナビ自体が折り返したり、ドロップダウンで隠す必要が出てきます。コーポレートサイトやマーケティング系のWebアプリでよく見る構造です。

3. コマンドパレット型

LinearやRaycast、VS Codeのコマンドパレットに代表される構造です。画面領域をナビに割かない代わりに、キーボード操作に慣れたユーザーを前提にしています。初めて触る人には「どこに何があるか」が見えないので発見しにくく、キーボード操作に慣れた開発者向けツールでの採用が中心です。サイドバー型やトップナビ型と併用して、検索の補助手段として追加する使い方もよく見られます。

4. タブ型

1つの画面の中でビューを切り替えるのに向いた構造で、今回のように画面全体のセクション切り替えに使うと、グローバルナビとしての存在感がやや弱くなります。実際のアプリでは、グローバルナビ（サイドバーやトップナビ）と組み合わせて、その配下の画面内タブとして使われることが多いです。タブ単体の実装はタブUIの実装例にまとめています。

まとめ

同じアプリでも、ナビゲーション構造を変えるだけで使い勝手の方向性がはっきり変わります。セクション数が多いならサイドバー型、シンプルなアプリならトップナビ型、キーボード操作前提の開発者向けツールならコマンドパレット型、画面内の切り替えならタブ型、という住み分けが今回触ってみてあらためて納得できました。

実際のアプリでは1つの構造だけで完結することは少なく、サイドバー型のグローバルナビにコマンドパレットを検索用に追加したり、各セクションの中をタブで分けたりと、複数の構造を組み合わせるのが現実的です。最初にどの構造を骨格にするかを決めてから、残りを補助的に足していく順番で考えると設計しやすいと感じています。

モバイル幅での代替案としてはハンバーガーメニューの実装例もあるので、レスポンシブ対応を考えるときはそちらも見てみてください。画面の骨格に続けて、「同じ注文データを4つの表示形式で作り比べた」ではデータの並べ方そのものを比較しています。