> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# アプリのページの管理

> ページの追加、ページ間の移動、ナビゲーションに表示されるページの制御、そして Base44 でログインと可視性にページがどう関連するかを学びます。

ページは Base44 アプリのコア画面です。各ページには独自の URL パス (`/`、`/Home`、`/Products` など) があり、[アプリエディタ](https://base44.com/ai-app-builder) の上部にあるページのドロップダウンに表示されます。新しいページを追加したり、ページにアクセスしたり、メニューに表示されるページを決定したり、ログインやランディング体験に使用するページを決定したりできます。

<Frame caption="アプリページのナビゲーション">
  <img src="https://mintcdn.com/base44/Vo3HE1GylzgvScy8/images/pagesmenu.png?fit=max&auto=format&n=Vo3HE1GylzgvScy8&q=85&s=ac18ad8ad80fa68de964c773e69f0464" alt="Navigating your app pages" width="850" height="427" data-path="images/pagesmenu.png" />
</Frame>

***

## ページの追加

いつでもページを追加できます。最も速い方法は、AI チャットで欲しいページを説明することです。

### 新しいページの追加

1. アプリエディタに移動します。
2. AI チャットで、欲しいページを説明します。例えば:\
   `ヒーローセクション、会社についてのテキスト、お問い合わせボタンを含む新しい About ページを作成して。`

<Frame caption="AI チャットでアプリに新しいページを追加する">
  <img src="https://mintcdn.com/base44/vyZ6HEARIdqrgiI1/images/addpage.png?fit=max&auto=format&n=vyZ6HEARIdqrgiI1&q=85&s=48a9fca38617774a4d8fb518cd43d28d" alt="Adding a new page to your app with the AI chat" width="1302" height="956" data-path="images/addpage.png" />
</Frame>

### ページの複製

1. エディタで再利用したいページを開きます。
2. AI チャットで、複製したい内容を説明します。例えば:\
   `このページを複製して、同じレイアウトを保ちつつ、タイトルを "Pricing" に変更して。`
3. AI チャットが完了したら、ページのドロップダウンから新しいページを開いてコンテンツをカスタマイズします。

<Frame caption="AI チャットを使用してアプリでページを複製する">
  <img src="https://mintcdn.com/base44/tzxdHQgJZr0YYZrD/images/duplicatepage.png?fit=max&auto=format&n=tzxdHQgJZr0YYZrD&q=85&s=cabd6af12138c254a168d7c595521d07" alt="Duplicating a page on your app using the AI chat" width="1347" height="957" data-path="images/duplicatepage.png" />
</Frame>

***

## ページ間の切り替え

プレビューの上にあるページのドロップダウンからページ間を移動できます。

**アプリエディタでページを切り替えるには:**

1. アプリエディタに移動します。
2. ページのドロップダウンをクリックします。
3. 開きたいページをクリックします。

<Frame caption="アプリエディタでページを切り替える">
  <img src="https://mintcdn.com/base44/Vo3HE1GylzgvScy8/images/pagesdropdown.png?fit=max&auto=format&n=Vo3HE1GylzgvScy8&q=85&s=82ec30bde5c1918a52c1cfc6ff62aee5" alt="Switching between pages in the app editor" width="791" height="527" data-path="images/pagesdropdown.png" />
</Frame>

<Tip>
  ページの名前が分からない場合は、AI に依頼します: `このアプリのすべてのページと各ページの機能のリストを見せて。`
</Tip>

***

## ページの検索

アプリに多くのページがある場合、すべてのページ名を覚えておくのは難しい場合があります。ページのドロップダウンにページ名を入力し始めて、必要なものを検索します。

<Frame caption="ページのドロップダウンでページを検索する">
  <img src="https://mintcdn.com/base44/Vo3HE1GylzgvScy8/images/searchingforapage.png?fit=max&auto=format&n=Vo3HE1GylzgvScy8&q=85&s=748f170acf99d1f09eb019d4ec592b89" alt="Searching for a page in the pages drop-down" width="719" height="391" data-path="images/searchingforapage.png" />
</Frame>

<Tip>
  **ヒント:** AI チャットに、名前、URL パス、または目的で適切なページを見つけるのを助けるように依頼することもできます。例えば:

  * `チェックアウトページとして使われているのはどのページ?`
  * `/Success ルートを処理しているのはどのページ?`
  * `プロジェクトのリストを表示するページを見つけて。`
</Tip>

***

## ページナビゲーションの管理

明確なナビゲーションメニューは、人々がページ間を移動し、アプリのキーエリアを発見し、コンテンツがどのように整理されているかを理解するのに役立ちます。また、内部リンクが改善され、検索エンジンがアプリの構造を理解するのに役立ちます。

一部のアプリは 1 つのページから始まり、最初は表示されるナビゲーションメニューがありません。ページを追加するにつれて、AI にヘッダー、サイドバー、フッターメニューを作成してメインのルートに組み込むように依頼できます。

アプリにまだリンク付きのヘッダー、サイドバー、フッターがない場合は、AI チャットを使用してナビゲーションメニューを作成します。

<Tip>
  すべてのページに同じナビゲーションが欲しい場合は、メニューをグローバルにするように AI に依頼してください。例えば: `アプリのすべてのページにヘッダーナビゲーションを追加して。`
</Tip>

### ヘッダーメニューの追加

1. アプリエディタに移動します。
2. AI チャットで、欲しいメニューを説明します。例えば:
   * `/Home と /Products へのリンクを持つヘッダーナビゲーションバーを追加して。`
   * `Home と Contact を含むトップナビゲーションメニューを作成して。`
3. AI が完了したら、プレビューを確認して新しいナビゲーションが期待される場所に表示され、リンクをテストします。

<Frame caption="アプリの上部にナビゲーションメニューを追加する">
  <img src="https://mintcdn.com/base44/iEH4Y6BNLZQ0n0S-/images/navigationmenu.png?fit=max&auto=format&n=iEH4Y6BNLZQ0n0S-&q=85&s=b1b16b69281f4e976d3dcece6316a186" alt="Adding a navigation menu to the top of your app" width="1913" height="957" data-path="images/navigationmenu.png" />
</Frame>

### サイドバーメニューの追加

1. アプリエディタに移動します。
2. AI チャットで、必要なものを説明します。例えば:
   * `/Dashboard、/Reports、/Settings へのリンクを持つ垂直サイドバーナビゲーションを左側に追加して。`
   * `Privacy Policy と Terms of Service へのリンクを持つフッターナビゲーションを追加して。`
3. AI が完了したら、プレビューを確認して新しいナビゲーションが期待される場所に表示され、リンクをテストします。

<Frame caption="アプリに垂直サイドバーナビゲーションを追加する">
  <img title="Verticalsidebar" alt="Adding a vertical sidebar navigation to your app" src="https://mintcdn.com/base44/ZJy2_Y0URAmh8dUb/images/sidebar.png?fit=max&auto=format&n=ZJy2_Y0URAmh8dUb&q=85&s=be39a3556cca1518542ca2cadc398b42" className="dark:hidden" width="1912" height="954" data-path="images/sidebar.png" />

  <img title="Verticalsidebar" alt="Adding a vertical sidebar navigation to your app" src="https://mintcdn.com/base44/ZJy2_Y0URAmh8dUb/images/sidebar-1.png?fit=max&auto=format&n=ZJy2_Y0URAmh8dUb&q=85&s=5abec7be49c4b5275a10e2f79c08a81a" className="hidden dark:block" width="1912" height="954" data-path="images/sidebar-1.png" />
</Frame>

### メニュースタイルの変更

水平バー、タブ、または小さな画面で折りたたまれるハンバーガーメニューなど、アプリのレイアウトとオーディエンスに合わせて異なるナビゲーションスタイルを使用できます。

**AI チャットでナビゲーションスタイルを変更するには:**

1. アプリエディタに移動します。
2. AI チャットで、欲しいスタイルを説明します。例えば:
   * タブ: `メインのナビゲーションをページ上部のタブスタイルメニューに変更して。`
   * サイドバー: `ナビゲーションを左側の垂直サイドバーに移動して。`
   * ハンバーガーメニュー: `メインのナビゲーションを右側にパネルを開くハンバーガーメニューに変えて。`
3. AI が完了したら、プレビューを確認してナビゲーションが期待される場所に表示され、リンクをテストします。

<Tip>
  スタイルを組み合わせることができます。例えば、デスクトップではタブ付きの水平メニューを保ち、小さな画面ではハンバーガーメニューを使用します。AI プロンプトで両方の動作を明確に説明してください。
</Tip>

### メニュー項目の変更

ナビゲーションメニューが存在したら、リンクを追加、削除、または名前変更して、人々が適切なページにたどり着けるようにできます。新しい項目を追加する場合、リンクしたいページがすでに存在することを確認してください。

**AI チャットでメニュー項目を管理するには:**

1. アプリエディタに移動します。
2. AI チャットで、メニューをどのように変更するかを説明します。例えば:
   * `/Products ページを指す "Shop" リンクをメインナビゲーションに追加して。`
   * `/About にリンクする "About" 項目をトップメニューに追加して、Home の後に配置して。`
   * `ヘッダーナビゲーションから "Blog" リンクを削除して。`
   * `"Shop All" メニュー項目の名前を "All Products" に変更して。`
   * `メニューを Home、Shop、About、Contact の順に並べ替えて。`
3. プレビューを確認し、メニュー項目をクリックして、すべてが期待どおりに見え、動作することを確認します。

<Tip>
  アプリが複数のナビゲーション領域 (例: トップメニューとフッターメニュー) を使用している場合、プロンプトで具体的にしてください。例えば: `フッターリンクではなく、ヘッダーナビゲーションのみを更新して。`
</Tip>

***

## 非表示ページの操作

一部のページは、管理ダッシュボード、成功画面、コールバックページなど、内部用です。それらをナビゲーションや検索結果に表示せずに、アプリで利用できるようにしたい場合があります。

### メニューからページを非表示にする

ライブで機能的なままで、任意のページを表示されているメニューから削除できます。

**AI チャットでナビゲーションからページを非表示にするには:**

1. アプリエディタに移動します。
2. AI チャットで、非表示にすべきものを説明します。例えば:\
   `/Success ページをすべての表示されているナビゲーションから削除しつつ、チェックアウト後のリダイレクトとして機能させ続けて。`
3. リンクがヘッダー、サイドバー、フッターに表示されないことを確認します。

<Frame caption="アプリ上に内部の隠しページを作成する">
  <img src="https://mintcdn.com/base44/iEH4Y6BNLZQ0n0S-/images/internalpage.png?fit=max&auto=format&n=iEH4Y6BNLZQ0n0S-&q=85&s=d81a88ccfa77a42ad5d2a66fe1ac3497" alt="Creating internal hidden pages on your app" className="mx-auto" style={{ width:"94%" }} width="1170" height="948" data-path="images/internalpage.png" />
</Frame>

<Note>
  ナビゲーションから非表示にされたページは、誰かがその URL を知っていれば、または別の場所のアプリにボタンやリンクを追加すると、直接開くことができます。
</Note>

### 管理者専用エリアの作成

ダッシュボードや管理ツールなどの機密ページを、ナビゲーションの管理者セクションに配置してアクセスを保護することで、管理者のみが利用できるようにできます。

**AI チャットで管理者専用ナビゲーションエリアを作成するには:**

1. アプリエディタに移動します。
2. AI チャットで、必要な管理者セクションを説明します。例えば:
   * `管理者だけが見ることができる Admin セクションをサイドバーに追加して、/Wishlist ページをそこに移動して。`
   * `/AdminDashboard と /Reports へのリンクを持つ管理者専用エリアをヘッダーナビゲーションに作成して。`

<Frame caption="アプリ上に管理者専用エリアを作成する">
  <img src="https://mintcdn.com/base44/vyZ6HEARIdqrgiI1/images/adminaccess.png?fit=max&auto=format&n=vyZ6HEARIdqrgiI1&q=85&s=7058f1f0a828152f9803df3749a2a68c" alt="Creating an admin-only area on your app" width="1355" height="954" data-path="images/adminaccess.png" />
</Frame>

<Tip>
  **Act as** で管理者専用ページをテストするには、プレビューツールバーの **Act as** をクリックし、管理者ロールを選択して、管理者セクションとそのページが彼らに表示されることを確認してから、**Act as** を再度使用して管理者以外のロールに切り替え、管理者セクションがナビゲーションから隠れて、管理者専用ページが直接開けないことを確認します。
</Tip>

### 検索結果からページを非表示にする

Base44 は、検索エンジンがそれらを見つけられるように、すべての公開された公開ページを自動的にサイトマップ (`/sitemap.xml`) に含めます。"noindex" やページレベルの robots.txt コントロールなどのページごとの SEO スイッチはありません。

検索エンジンからページを除外するには、ページが公開されていないことを確認するか、アプリの公開部分からそのページにリンクを張らないようにしてください。

<Note>
  インデックスの仕組みの詳細については、[SEO ガイド](/Performance-and-SEO/SEO-and-search-visibility) を参照してください。
</Note>

***

## プライベートページを持つ公開ランディングページ

Base44 は現在、可視性設定だけを使って、一部のページを公開し、他のページをプライベートにすることをサポートしていません。代わりに、公開ランディングページと、人々をプライベートエリアのログインにリダイレクトするロジックの組み合わせを使用できます。

**他のページにログインが必要な公開ランディングページを設定するには:**

1. アプリの可視性設定でアプリを **Public (no login required)** に設定します。
2. AI チャットを使用してランディングページを作成します。例えば:\
   `ログインとサインアップボタンを持つランディングページを作成して、それをメインページにして。`
3. AI にアプリの残りの部分でログインを要求するように依頼します。例えば:\
   `ランディング以外のすべてのページでログインを要求して、ログインしていない訪問者をランディングページに戻すリダイレクトをして。`

<Warning>
  現在、ページごとの可視性設定を使用して、個々のページを公開またはプライベートとしてマークすることはできません。すべての可視性はアプリレベルで制御され、ルーティングとデータアクセスルールと組み合わせて使用されます。
</Warning>

***

## FAQ

ページ、ログイン、ナビゲーションについて詳しく学ぶには、以下の質問をクリックしてください。

<AccordionGroup>
  <Accordion title="人々がアプリを開いたときに最初に見るページを変更するには?">
    **ランディングページを変更するには:**

    1. アプリエディタで **Dashboard** をクリックします。
    2. **Settings** をクリックしてから **App Settings** をクリックします。
    3. **General Settings** の **Main Page** ドロップダウンで、デフォルトのランディングページとして使用したいページを選択します。

    AI チャットにランディングページの変更を依頼することもできます。
  </Accordion>

  <Accordion title="アプリのページ数に制限はありますか?">
    はい。Base44 アプリは最大 600 ページをサポートします。ただし、ページ数だけがビルドの安定性に影響する要因ではありません。アプリ内のファイルの総数と全体的なソースサイズも重要です。

    アプリに 600 を超えるページがある場合、または非常に多くのファイルまたはソースコード (例: 数千の JavaScript ファイルまたは数十メガバイトのソース) がある場合、次のような問題が発生する可能性があります:

    * ビルダーが利用できなくなる、または非常に遅くなる。
    * エディタやライブアプリでページが正しく読み込まれない。
    * 更新をビルドまたはデプロイするときの公開失敗またはメモリ不足エラー。
    * AI が不完全な編集を返す。

    **制限内に収まるようにするには:**

    1. 既存のページを確認し、必要なくなったものを削除します。
    2. 可能な場合、類似のコンテンツをより少ないページに統合します。
    3. すべてのアイテムに対して個別の静的ページを作成するのではなく、エンティティとフィルタリングされたビューを使用します。
    4. 特にアプリに多くのコンポーネントがある場合、全体的なファイル数とソースサイズを可能な限り少なく保ちます。

    アプリを 600 ページ未満に保ち、全体的なファイル数とソースサイズを管理することで、エディタの応答性を保ち、アプリを安定させることができます。
  </Accordion>
</AccordionGroup>

<Note>このページは AI を使用して翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。 </Note>