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

# スペースナビゲーションのカスタマイズ

> DingTalk YiDAのカスタムナビゲーション機能で、企業アプリのユーザー体験を向上させる方法を解説します。機能概要、ユースケース、PC・モバイル・テーマ設定の詳細な構成手順を、専用版OA拡張パック向けにご紹介します。

> グレースケールリリース中

| **エディション権限**      | **Freeプラン** | **ベーシック版** | **プロフェッショナル版** | **専用版** | **専用版 - OA拡張パック** |
| ----------------- | ----------- | ---------- | -------------- | ------- | ----------------- |
| **ナビゲーションカスタマイズ** | 非対応         | 非対応        | 非対応            | 非対応     | 対応                |

## 1. はじめに

### 1.1 機能概要

ナビゲーションのカスタマイズにより、組織はさまざまな企業アプリに合わせてパーソナライズされたナビゲーション構造を構築できます。ユーザーは必要なアプリ、ページ、リンクをより迅速かつ簡単に見つけられます。

### 1.2 ユースケース

* カスタムレイアウト：アプリ管理者は業務ニーズに応じて、ナビゲーションメニューの階層、順序、コンテンツを自由に調整でき、最も頻繁に使用されるオプションを常に目立つ位置に配置できます。
* 満足度の向上：パーソナライズされたナビゲーションにより、ユーザーは必要な情報や機能を効率的に見つけられ、システムに対する満足度が向上します。

## 2. 手順

スペースナビゲーションのカスタマイズは現在、PC版ナビゲーション、モバイル版ナビゲーション、テーマ設定の構成に対応しています。

### 2.1 エントリ

<Steps>
  <Step title="ステップ1">
    アプリ管理者として [YiDAワークベンチ](https://www.yidaapps.com/workPlatform) にログインします。
  </Step>

  <Step title="ステップ2">
    右上の **プラットフォーム管理** ボタンをクリックし、プラットフォーム管理ページに移動します。
  </Step>

  <Step title="ステップ3">
    左側のメニューで **プラットフォーム専用カスタマイズ** > **スペース管理** に移動し、編集するスペースを選択して **編集** ボタンをクリックします。
  </Step>
</Steps>

4. **ナビゲーション & テーマ** を選択します。

### 2.2 PC版ナビゲーションの設定

PC版ナビゲーションの設定は、ナビゲーションメニュー、ナビゲーションロゴと名前、システムアクションの3つのエリアに分かれています。

#### 1. ナビゲーションメニューエリア

1. **追加** をクリックし、コンテンツタイプを選択します。ナビゲーションメニューエリアは現在、6種類のコンテンツタイプ（ポータル、アプリ、ページ、システムページ、カスタムリンク、ページグループ）に対応しており、最大50タブまで作成できます。

2. 利用可能なコンテンツタイプと対応するオプションは以下のとおりです。

| コンテンツタイプ | イラスト | 設定                                                                                                       |
| -------- | ---- | -------------------------------------------------------------------------------------------------------- |
| ポータル     |      | • 現在のスペース内のポータル<br />                                                                                    |
| アプリ      |      | • YiDAアプリ<br />• DingTalkアプリ<br /><br />                                                                 |
| ページ      |      | YiDAアプリ内の特定のページ<br /><br />                                                                              |
| システムページ  |      | • プロセスセンター（フルバージョン）<br />• マイタスク（未処理、処理済み、自分が起票、CCを含む）<br />• マイプロセス（プロセスの作成、プロセス監視などを含む）<br />• プロセスを作成 |
| カスタムリンク  |      | カスタムリンクの名前とURLを設定します。<br />リンクは常に新しいウィンドウで開きます。                                                          |
| グループ分け   |      | グループ名。                                                                                                   |

3. **確認** をクリックして、新しいナビゲーションメニュー項目を追加します。上部展開スタイルに対応しており、今後の階層拡張の余地を残しています。

グループを作成した場合、グループ内で **サブレベルを追加** を使用する際に、上記5種類のコンテンツタイプのいずれかを選択できます。

4. 各行のボタンをクリックすると、

現在のレベルのメニュー配下にサブメニューを追加できます。以下のとおりです。

クリックすると、

ポータル、アプリ、ページ、システムページ、カスタムリンクなどを追加できます。追加後、対応するメインメニュー配下でサブメニューを確認できます。

5. **モバイルへ同期** をクリックすると、まず現在のPC版ナビゲーションを保存してから同期します。

#### 2. ナビゲーションロゴと名前エリア

このエリアは主に **ナビゲーションロゴと名前** を設定するために使用します。例：

設定オプションの詳細は以下のとおりです。

<table>
  <tr>
    <td>**イラスト**</td>
    <td>**オプション名**</td>
    <td>**説明**</td>
  </tr>

  <tr>
    <td rowSpan={5} />

    <td>スペースナビゲーションロゴを表示</td>
    <td>オン／オフを切り替え可能</td>
  </tr>

  <tr>
    <td>スペースロゴ</td>
    <td>1 MB以内のjpg／jpeg／gif／png／svgファイルをスペースロゴとしてアップロードします。高さ32ピクセルを推奨します。</td>
  </tr>

  <tr>
    <td>ロゴのリダイレクトURL</td>
    <td>デフォルトあり</td>
  </tr>

  <tr>
    <td>スペース名を表示</td>
    <td>オン／オフを切り替え可能</td>
  </tr>

  <tr>
    <td>スペース名クリック時のリダイレクトURL</td>
    <td>デフォルトあり</td>
  </tr>
</table>

#### 3. システムアクションエリア

1. システムアクションエリアでは、右上のボタンの表示を設定できます。共有、タスク、プロフィール写真ボタンの表示と外観が含まれます。以下のとおりです。

コンテンツ設定：共有／タスク／プロフィール写真。

スタイル設定：アイコン+テキスト／アイコンのみ。

### 2.3 モバイル版ナビゲーションの設定

#### 1. ナビゲーションメニューの設定

* 第1階層ナビゲーションスタイル：**下部ナビゲーション** または **上部ナビゲーション** のいずれかを選択します。

* 下部ナビゲーションと上部ナビゲーションの両スタイルに対応し、最大2階層まで設定できます。

* 7種類のコンテンツタイプ（ポータル、アプリ、ページ、システムページ、カスタムリンク、スペースAIアシスタント、ページグループ）に対応し、最大50タブまで作成できます。

* タブが5つを超える場合、超過分は「その他」に折りたたまれます。

#### 2. モバイル版で利用可能なコンテンツタイプ

| コンテンツタイプ     | イラスト | 設定                                                                                                  |
| ------------ | ---- | --------------------------------------------------------------------------------------------------- |
| ポータル         |      | • 現在のスペース内のポータル<br />                                                                               |
| アプリ          |      | • YiDAアプリ<br />• DingTalkアプリ<br /><br />                                                            |
| ページ          |      | YiDAアプリ内の特定のページ<br /><br />                                                                         |
| システムページ      |      | • プロセスセンター（フルバージョン）<br />• マイタスク（作成者などを含む4つのタブ付き）<br />• マイプロセス（プロセスの作成、プロセス監視などを含む）<br />• プロセスを作成 |
| スペースAIアシスタント | /    | 設定が必要。1つのナビゲーションにつき1つのAIアシスタントのみ設定可能                                                                |
| カスタムリンク      |      | カスタムリンクの名前、URL、アイコン                                                                                 |
| グループ分け       |      | グループ名とアイコン。<br />グループ内で **サブレベルを追加** を使用する際は、上記5種類のコンテンツタイプのいずれかを選択できます。                            |

### 2.4 テーマ設定

設定オプションの詳細は以下のとおりです。

<table>
  <tr>
    <td>**オプション名**</td>
    <td>**説明**</td>
  </tr>

  <tr>
    <td>テーマカラー</td>

    <td />
  </tr>

  <tr>
    <td rowSpan={4}>スペースナビゲーションカラーモード</td>

    <td rowSpan={4} />
  </tr>

  <tr />

  <tr />

  <tr />

  <tr>
    <td>ページ背景色</td>
    <td>**元のページ背景を維持**<br />例：ポータルデザイナーで背景色を薄い青に設定した場合、左図のようになります。<br />スペース内のポータル背景はデザイナーの設定と一致します（右図参照）。<br />**統一グレー**<br />例：ポータルデザイナーで背景色を薄い青に設定した場合、左図のようになります。<br />スペース内のポータル背景はグレーに変わります（右図参照）。<br />**統一透明**<br />例：ポータルデザイナーで背景色を薄い青に設定した場合、左図のようになります。<br />スペース内のポータル背景は透明になり、スペース背景が表示されます（右図参照）。</td>
  </tr>

  <tr>
    <td>ポータルテーマカラー</td>
    <td>**元のポータルテーマカラーを維持**<br />例：ポータルデザイナーでアイコンやエントリなどのテーマカラーを設定した場合、左図のようになります。<br />スペース内で元のポータルカラースキームが保持されます（右図参照）。<br />**スペーステーマカラーに従う**<br />例：ポータルデザイナーでアイコンやエントリなどのテーマカラーを設定した場合、左図のようになります。<br />スペース内でスペーステーマカラーが統一的に適用されます（右図参照）。</td>
  </tr>
</table>