> For the complete documentation index, see [llms.txt](https://help.adalo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.adalo.com/ja/component-basics/screen-navigation.md). # ナビゲーションコンポーネント ### 概要 ナビゲーションとは、ユーザーが画面間を移動するための手段です。Adaloは、さまざまなレイアウトや用途に合わせて設計された5つの事前構築済み（標準搭載）ナビゲーションコンポーネントを提供しています。また、長方形（Rectangle）、テキスト、画像などの基本コンポーネントを使用して、完全にカスタムしたナビゲーションを作成することも可能です。 本ガイドでは、どのコンポーネントを使用する場合にも適用されるナビゲーションの基本とベストプラクティスについて説明します。各コンポーネントには、以下にリンクされた個別の設定ガイドがあります。 {% embed url="" %} #### 事前構築済みナビゲーションコンポーネント **Side Navigation（サイドナビゲーション）**— 画面の横からスライドして表示される垂直パネル。多くの移動先を持つアプリや、デスクトップスタイルのレイアウトに便利です。 **Top Navigation（トップナビゲーション）**— 画面上部に固定される水平バー。セクション内のコンテンツを整理したり、ボトムナビゲーションの補助として機能します。 **Bottom Navigation（ボトムナビゲーション）**— 画面下部に固定される水平バー。モバイルアプリで最も一般的なナビゲーションパターンです。3〜5個の主要な移動先に最適です。 **App Bar（アプリバー）**— 通常、画面タイトル、戻るボタン、アクションアイコンを配置する上部バー。主要なナビゲーションというよりは、階層構造やコンテキストを示すために使用されます。 **Tab Bar (Legacy)（タブバー・レガシー）**— ボトムタブナビゲーションの古いバージョンです。現在も機能しますが、新しいアプリでは代わりに Bottom Navigation を使用する必要があります。 *** ### はじめに * アプリには、移動先となる画面が少なくとも2つ以上必要です。 * どの画面を主要な移動先にするかを決定します — これらがナビゲーションタブになります。 * タブの並び順を計画します：最も重要な項目を左（または上）に、最も重要度の低い項目を右（または下）に配置します。 *** ### Adaloにおけるナビゲーションの仕組み #### 基本的なパターン どのコンポーネントを選択した場合でも、ナビゲーションの設定は同じ基本手順に従います。 1. **コンポーネントを画面上にドラッグ**します。 2. **各タブを設定**します — 移動先ごとにアイコン、ラベル、リンクを設定します。 3. **リンクのトランジション（画面遷移アニメーション）を None（なし） に設定**します。ナビゲーションは、新しいページに移動するのではなく、タブを切り替えているように感じられる必要があります。 4. コンポーネントを**コピー**して、他のメイン画面に**貼り付け**ます。 5. 各画面で**「Active Tab（アクティブなタブ）」を更新**し、ユーザーが現在いる画面と一致するようにします。 デフォルトのコンポーネントには適切な初期設定が用意されています。ほとんどのアプリにおいて主な作業は、リンクの設定、各画面へのコピー、そしてアクティブタブの指定となります。 #### カスタムナビゲーションの作成 ナビゲーションの見た目を完全にコントロールしたい場合は、基本コンポーネントを使ってイチから構築できます。 1. **Rectangle（長方形）**をドラッグインして、ナビゲーションバーの背景として配置します。 2. タブラベル用の **Text（テキスト）**コンポーネントと、アイコン用の **Image（画像）**コンポーネントを追加します — これにより、組み込みのアイコンセットだけでなく、好きなアイコンを使用できます。 3. デザインに合わせてすべてを配置し、スタイリングします。 4. 各アイコンとテキストのペアをドラッグコピーしてタブのスロットに配置し、移動先ごとにラベルとアイコンを更新します。 5. すべてのナビゲーション要素を1つに**グループ化（Group）**します。 6. グループの**「Fix position（位置を固定）」を to bottom（下部に固定）**（または上部、サイド）に設定し、ユーザーがスクロールしても固定されたままになるようにします。 7. グループ全体を**コピー**して、他のメイン画面に**貼り付け**ます。 8. 各画面で、ユーザーがどの画面にいるのかがわかるように、アクティブなタブのスタイルを調整します。 カスタムナビゲーションを使用すると、アイコン、レイアウト、色、エフェクトを自由にコントロールできます。これには角丸デザイン、異なるトランジションを持つ中央の samme アクションボタン、その他のUIパターンが含まれます。 *** ### ベストプラクティス **リンクのトランジションは常に None（なし）に設定する。**ナビゲーションは新しいページに遷移するのではなく、タブを切り替えているように感じられる必要があります。これは、事前構築済みコンポーネントとカスタム構築の両方に適用されます。 **ボトムナビゲーションは詳細ページでは非表示にする。**ユーザーが詳細画面やサブ画面にタップして進む場合、通常ボトムナビゲーションは消えます。これは想定通りの挙動です — 詳細ページは階層のより深い場所にあり、主要な移動先ではないためです。 **詳細ページには、視覚的に区別できるサブナビゲーションを使用する。**詳細ページに独自のナビゲーションが必要な場合（例：セクション内のタブなど）、ユーザーが階層を理解できるように、メインナビゲーションとは明確に異なる見た目にしてください。 **ボトムナビゲーションの項目は5つ以下に抑える。**これは標準的なモバイルUXのガイドラインです。移動先がそれ以上ある場合は、トップタブやサイドナビゲーションの使用を検討してください。 **トップタブはボトムナビゲーションをうまく補完する。**ボトムナビが主要な画面を処理している場合、トップタブは1つの画面内でコンテンツを整理できます（ビュー、カテゴリー、データセット間のフィルタリングなど）。 *** ### 制限事項 * ナビゲーションコンポーネントは各画面に手動でコピー＆ペーストする必要があります — 1つのコピーに対する変更は、他の画面へ同期されません。 * アクティブタブの状態は画面ごとに手動で設定する必要があります — タブの追加や並び替えを行った場合は、すべてのコピー（各画面の設定）を更新する必要があります。 * カスタムナビゲーションにはグループ化と位置の固定（Fix position）が必要です — いずれかの手順を忘れると、スクロール時にレイアウトが崩れる原因となります。 --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://help.adalo.com/ja/component-basics/screen-navigation.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.