ナビゲーションバー

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間:3分
  • モバイルアプリのナビゲーションバーを使用して、ランチャー画面、画面、設定、および通知にアクセスします。

    図 : 1. ナビゲーションバーコンポーネント階層
    ナビゲーションバーコンポーネント階層。
    ナビゲーションバーは、次のコンポーネントで構成されています。
    • ナビゲーションバー
    • ナビゲーションバーのタブ
    • [画面] タブ
    • [ランチャー] タブ
    • [保存済み] タブ
    • [通知] タブ
    • [設定] タブ
    [その他] タブ付きの [ナビゲーションバー] タブ

    ナビゲーションバーは、各モバイルアプリの下部に表示されます。ナビゲーションバー内にナビゲーションバータブを作成できます。ユーザーは、ナビゲーションバー内のランチャー画面と通常の画面にアクセスできます。

    注:
    各モバイルアプリのナビゲーションバーには、[ 通知 ] および [設定 ] ナビゲーションバーのタブが事前設定されています。これらのタブの内容の詳細については、「 モバイルアプリ構造」を参照してください。保存されたタブもあり、ユーザーの保存されたレコードを示すページが表示されます。
    ユーザーが [その他] タブをタップすると表示されるリスト

    ナビゲーションバーに 5 つ以上のタブを追加すると、[ その他 ] ( [その他] アイコン) タブが表示されます。[その他] タブをタップして、追加のタブを表示するリストビューを開きます。

    [画面] タブとランチャー画面タブ

    図 : 2. 画面ナビゲーションタブ
    画面ナビゲーションタブ

    [画面] タブを使用して、カレンダー、カスタムマップ、リスト、マップ、またはモバイル Web 画面に直接アクセスできるようにします。

    図 : 3. ランチャー画面のナビゲーションタブ
    ランチャー画面のナビゲーションタブ

    ランチャー画面タブを使用して、ユーザーが画面ランチャーの要素にアクセスできるようにします。

    ランチャー画面はダッシュボードです。他の画面や情報へのショートカットを提供します。ショートカットは、アイコン、カード、メディアセクション、またはスコア数で追加できます。

    ナビゲーションバーの一般的なガイドライン

    ナビゲーションバーを構成するときは、次の一般的なガイドラインを考慮してください。
    タブの数
    • ナビゲーションバーには最大 5 つのタブが表示されます。タブが 5 つ以上ある場合は、その他のタブと呼ばれるオーバーフロー タブ ( その他アイコン) が追加されます。
    • ナビゲーションバーを 5 つのタブに制限して、すべてのタブが常に表示されるようにします。
    タブタイプ
    • デフォルトでは、ナビゲーションバーには [設定] タブと [通知] タブが含まれています。これらのタブを削除することは可能ですが、ユーザーがアプリの重要な情報や機能にアクセスできなくなる可能性があります。
    • [設定] タブと [通知] タブを削除するのではなく、ナビゲーション バーに表示される順序を変更することを検討してください。
    • [設定]、[通知]、および [保存済み] タブは特定のページに移動するため、各タブは 1 つだけ必要です。複数の画面タブとランチャー画面タブを使用できますが、使用するタブは 5 つ以下にすることをお勧めします。
    指定されたユーザーに特定のタブを表示
    • ユーザー基準権限を適用して、ユーザーが自分の作業に関連するタブのみを表示するようにします。詳細については、「モバイルアプリでのユーザー基準の権限」を参照してください。
    • ユーザーが [設定] タブと [ナビゲーション] タブを使用できる必要があります。
    タブ名
    • ナビゲーションタブには、コンテキストを示すわかりやすい名前を付けます。[ホーム] や [アプリ] などの一般的な名前は避けてください。
    • タイトルには大文字を使用して目立たせます。たとえば、[オープンタスク] などです。
    タブ名の長さ
    • ナビゲーションバーに表示されるときにタイトルが途切れないように、タイトルの長さを制限します。
    • 複数の言語をサポートしている場合は、サポートする各言語のタイトルの長さを考慮してください。
    • アプリケーションをテストするときは、ナビゲーションバーに完全に表示されないタイトルに注意してください。
    アイコン構成
    • ナビゲーションバーのアイコンの色は、アプリケーションのテーマによって決まります。
    • 視覚的に一貫性があり、アプリケーションのその部分に表示される機能や情報を最もよく表すアイコンを選択します。
    • ユーザーが必要なものをすばやく見つけられるように、複数のナビゲーションタブに同じアイコンを使用しないでください。
    オーダー
    タブの順序は、重要度レベルでリストする必要があります。この順序は、左から右に記述する言語と右から左に記述する言語で異なります。