> For the complete documentation index, see [llms.txt](https://docs.flosum.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flosum.com/devops/devops-ja/shii-uiux-heno/shii-ui-nosukurnshotto.md).

# 新しい UI のスクリーンショット

## ![](https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FG5ZbxX918xOHwbAwAJ4n%2FSummary2-Small-Icon.svg?alt=media\&token=da26a67f-ff7f-47b3-8669-06be960dc2d7) 概要

この記事では、各サイドバーメニューのセクションごとに、旧および新しい Cloud DevOps UI のスクリーンショットを紹介し、新しい UI にすばやく慣れることができます。また、ブランチの次の項目に関する新しい UI を扱う、2 つの展開可能なセクションも含まれています:

* **ブランチ > コンポーネント** タブ: [#branch-components-tab](#branch-components-tab "mention")
* **ブランチ > アクティビティ** タブ: [#branch-activities-tab](#branch-activities-tab "mention")

コード ビューアーには多くのユーザー体験の改善が含まれており、詳しくは別の記事で説明されています。次のリンクを参照してください。

* [改善されたコードビューア](/devops/devops-ja/shii-uiux-heno/saretakdobya.md)

{% hint style="info" %}
この比較に含まれる各スクリーンショットは同じウィンドウサイズを使用しているため、新しい UI と旧 UI を同じ条件で比較できます。並べて見ると、新しい UI は画面スペースをより効率的に使い、窮屈さを感じさせずにより多くの情報を表示します。
{% endhint %}

## 組織

その **組織** 新しい UI と旧 UI の両方にあるページでは、DevOps テナントに接続されている Salesforce 組織の表が表示されますが、新しい UI では表のレイアウトが改善されています。

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FH1D0EY1TupYDH8xbDFjE%2FUiScreenshotComparison-S01-new.png?alt=media&amp;token=2fb799a1-7d98-47ed-b1dc-31e988e2d68a" alt=""><figcaption><p>新しい UI</p></figcaption></figure>

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FNcQHWB1zH6YvxHNQTfIT%2FUiScreenshotComparison-S01-old.png?alt=media&amp;token=e17db6ad-e677-4caa-a5dd-e299fa798838" alt=""><figcaption><p>旧 UI</p></figcaption></figure>

## ダッシュボード

その **ダッシュボード** ページは、新しい UI と旧 UI の間でスタイルにわずかな変更があるだけです。

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FhGgXg3cxPw8BNuJWZr5N%2FUiScreenshotComparison-S02-new.png?alt=media&amp;token=5ed2db25-2a27-416e-8013-bd33cdabf91d" alt=""><figcaption><p>新しい UI</p></figcaption></figure>

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FFYok6Ch8WdwI9Ba3imfT%2FUiScreenshotComparison-S02-old.png?alt=media&amp;token=7a11ef31-dd2f-4f36-a91f-0ba9e46c5afc" alt=""><figcaption><p>旧 UI</p></figcaption></figure>

## コード → ブランチ

その **コード** ページは現在 **ブランチ**と呼ばれており、セクションの目的をよりよく表す名前になっています。新しい UI では、ブランチ表に改善されたレイアウトとより明確な列ラベルでより多くの情報が表示されるため、開かなくても各ブランチの最も重要な詳細を一目で確認できます。

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FqJzPu61Zq5Y62itXJgEf%2FUiScreenshotComparison-S03-new.png?alt=media&amp;token=33252e82-f1ac-45f3-8b39-aa88ff127c2f" alt=""><figcaption><p>新しい UI</p></figcaption></figure>

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FNvU5BWWeZg66JBfkklpS%2FUiScreenshotComparison-S03-old.png?alt=media&amp;token=9096f8e3-30c9-4c47-9d63-20e2351890f7" alt=""><figcaption><p>旧 UI</p></figcaption></figure>

<details>

<summary>ブランチ コンポーネント タブ</summary>

ブランチ コンポーネント タブは、一目でより多くの情報を表示し、よく使うボタンをより適切な場所に配置するよう再設計されました。 **コンポーネント** タブは現在、2 つの選択可能な表ビューに整理されています: **コンポーネント** と **破壊的変更**。新しい **概要** タブ右側のセクションには、主要なブランチ情報と関連アクション用のボタンが表示されます。

次の新しい UI のスクリーンショットでは、 **ブランチ > ブランチ > コンポーネント** タブで移動した項目が強調表示されています。各項目には番号が付けられており、以下の一覧で各番号が何を指すかを説明しています。

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FSw5UwuGkvosjNCIj0pG9%2FUiScreenshotComparison-S03-2-new.png?alt=media&amp;token=a4b24b1c-c4a3-47df-9ac3-3452403554a7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FED7QuNBwNpDBPChdTEDt%2FUiScreenshotComparison-S03-3-new.png?alt=media&amp;token=cf00be23-90cf-4611-b2e2-8bb72a29387f" alt=""><figcaption></figcaption></figure>

1. **コンポーネント**：ブランチ **コンポーネント** 表は、 **コンポーネント** 表ビューを選択することで表示されます。
2. **+ コンポーネントを追加**：このボタンは **概要** セクションで。
3. **+ プル リクエストを作成**：このボタンは **3 点** ドロップダウン メニューから **概要** セクションで。
4. **破壊的変更**：ブランチ **破壊的変更** 表は、 **破壊的変更** 表ビューを選択することで表示されます。
5. **+ 変更前を追加**：このボタンは、 **破壊的変更** 表ビューが選択されている場合にのみ表示されます。
6. **+ 変更後を追加**：このボタンは、 **破壊的変更** 表ビューが選択されている場合にのみ表示されます。

</details>

<details>

<summary>ブランチ アクティビティ タブ</summary>

ブランチ アクティビティ タブは、ブランチのアクティビティ情報の整理を簡素化するよう再設計されました。 **アクティビティ** タブは現在、3 つの選択可能なビューに整理されています: **ブランチ**, **パイプライン**、および **状態図**。各ビューは以下のスクリーンショットに表示され、付随する一覧で説明されています。

次の新しい UI のスクリーンショットでは、 **ブランチ > ブランチ > アクティビティ** タブのさまざまなビューが強調表示されています。各ビューには番号が付けられており、以下の一覧で各番号が何を指すかを説明しています。

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FElMzBiel8BRiqbc8lN1Q%2FUiScreenshotComparison-S03-4-new.png?alt=media&amp;token=72773f27-f791-47b6-815b-c5e894faf4dc" alt=""><figcaption></figcaption></figure>

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FW0wxRsvmx0e939NqJbP6%2FUiScreenshotComparison-S03-5-new.png?alt=media&amp;token=1795a897-c307-4576-8bfb-a7cbd74c3751" alt=""><figcaption></figcaption></figure>

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FLAsxx9qxCYadIjwQutB2%2FUiScreenshotComparison-S03-6-new.png?alt=media&amp;token=7ff38e99-b60a-4661-b649-b730d091d4b8" alt=""><figcaption></figcaption></figure>

1. その **ブランチ** ビューでは、ブランチのジョブ アクティビティのタイムラインが表示され、以前は旧 UI の **ジョブ** 表でした。
2. その **パイプライン** ビューでは、ブランチのパイプライン ジョブ アクティビティのタイムラインが表示され、以前は旧 UI の **パイプライン** 表でした。
3. その **状態図** ビューでは、ブランチに流入するソースと、そこから出ていくターゲットが表示されます。以前は旧 UI の **状態図** タブでした。

</details>

## プルリクエスト

その **プルリクエスト** ページの表が更新され、ステータスの状態が簡素化されています。表には各プル リクエストの詳細がより多く表示されるようになり、 **クローズ** と **マージ済み** のプル リクエストを引き続き表示します。ステータスは 3 つだけに絞られました。

**新しいステータス**

* **オープン**：旧 UI のすべてのステータス（**作成済み**, **レビュー依頼済み**, **変更依頼済み**, **承認済み**）をカバーし、対応が必要なプル リクエストを示します。
* **マージ済み**：以前は表に表示されていなかったこのステータスは、ソース ブランチをターゲット ブランチにマージすることでプル リクエストが完了したことを意味します。
* **クローズ**：以前は表に表示されていなかったこのステータスは、マージされずにプル リクエストがクローズされ、ソース ブランチとターゲット ブランチが変更されなかったことを意味します。

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FBwsLGq2bLKa8TxC13rWQ%2FUiScreenshotComparison-S04-new.png?alt=media&amp;token=e8b39529-7a12-4b70-b848-f4bedf730aa2" alt=""><figcaption><p>新しい UI</p></figcaption></figure>

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F27cqT3la6CRlWwF37no6%2FUiScreenshotComparison-S04-old.png?alt=media&amp;token=655d8454-71d3-42dc-a6e5-e020193ce1a0" alt=""><figcaption><p>旧 UI</p></figcaption></figure>

## パイプライン

新しい UI と旧 UI の両方で、 **パイプライン** ページには利用可能なパイプラインの表が表示されますが、新しい UI では各パイプラインの詳細がより多く表示されます。

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FblYGxZ4kHnVOdjTMlFdq%2FUiScreenshotComparison-S05-new.png?alt=media&amp;token=8cc048ad-ead1-4c34-a0dd-74f32586db08" alt=""><figcaption><p>新しい UI</p></figcaption></figure>

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F1hbsizY2osTxq5Io1o9M%2FUiScreenshotComparison-S05-old.png?alt=media&amp;token=716c1e3d-ab93-4f39-96c1-88a04aaf7cef" alt=""><figcaption><p>旧 UI</p></figcaption></figure>

## 設定

新しい UI では、 **設定** のオプションが 1 つのページから個別のメニュー項目に移動しました。これで、サイドバーメニューから各設定ページを直接開くことができます。サイドバーメニューには現在、次の設定が含まれています:

* Git 連携
* AI 設定
* ユーザーストーリーの統合
* 環境変数
* プル リクエスト設定

{% tabs %}
{% tab title="Git 統合" %}

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FNqJqOV9yjS5P47qKBP4P%2FUiScreenshotComparison-S06-new-1.png?alt=media&amp;token=e19c6309-7a8f-4f64-a3da-8f43be6a9d8f" alt=""><figcaption><p>新しい UI</p></figcaption></figure>
{% endtab %}

{% tab title="AI 設定" %}

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FJf1p3LX5lQgCDjCeko4H%2FUiScreenshotComparison-S06-new-2.png?alt=media&amp;token=760fb12d-d12e-4168-a46f-01750725787e" alt=""><figcaption><p>新しい UI</p></figcaption></figure>
{% endtab %}

{% tab title="ユーザーストーリーの統合" %}

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F0TqHhCSm6hsxYrT6H8HP%2FUiScreenshotComparison-S06-new-3.png?alt=media&amp;token=40713153-a73b-4176-bb4f-3c81cdb5ec3d" alt=""><figcaption><p>新しい UI</p></figcaption></figure>
{% endtab %}

{% tab title="環境変数" %}

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FPWOeyxGqF2fAOmv6ecxE%2FUiScreenshotComparison-S06-new-4.png?alt=media&amp;token=c50d3874-1ec3-4f24-9268-8ab3b7eae994" alt=""><figcaption><p>新しい UI</p></figcaption></figure>
{% endtab %}

{% tab title="プル リクエスト設定" %}

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FFnj7cJ6Q3IXJekWX9aOE%2FUiScreenshotComparison-S06-new-5.png?alt=media&amp;token=5fd01ffc-ab11-4600-97ed-b58c8f679be8" alt=""><figcaption><p>新しい UI</p></figcaption></figure>
{% endtab %}
{% endtabs %}

<figure><img src="https://225042527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FYevdRWpx3zhxO3tlDCno%2FUiScreenshotComparison-S06-old.png?alt=media&amp;token=24327c90-99cf-46ef-900a-b382b824199c" alt=""><figcaption><p>旧 UI</p></figcaption></figure>


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.flosum.com/devops/devops-ja/shii-uiux-heno/shii-ui-nosukurnshotto.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
