---
title: "デザインスタジオでコンポーネントを可視化する"
slug: "visualize-components-in-the-design-studio"
abstract: "Design studioは、可視化の値や可視化データソースを用いてコンポーネントの可視化とテストを行うためのインターフェースです"
---
# デザインスタジオでコンポーネントを可視化する

デザインスタジオは、組織内のすべてのコンポーネントを一元管理できるインターフェースとして機能します。

コンポーネントとそのさまざまなバリエーションを並べて可視化し、コンポーネントのフィールド構成をリアルタイムで確認しながらテストできます。さらに、Design Studioはデータソースからのコンテンツも表示するため、インターフェースを使ってバックエンドをテストすることもできます。

デザインスタジオの開設:

-   ナビゲーションヘッダーで **「デザイン**」をクリックします。

Design Studioでコンポーネントを可視化する際、フィールドの設定方法に従ってレンダリングし、優先順位は以下の通りです。

-   コンテンツエディターに保存されたフィールドの標準値です。
    
    ![Standard values in the Content Editor](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/standardvalue.png)
    
-   スタジオの右側パネル「 **コンテンツ** 」タブでコンポーネントに設定されたフィールド値。これらの値を編集して、デザインスタジオでコンポーネントとそのバリアントをテストします。
    
    ![Configuration values in the Studio](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/Screenshot_2025-10-22_at_16_37_00.png)
    

> !注意これらの構成は、ページビルダーのページにコンポーネントを追加する際に保存することはできません。
> 
> -   フィールドに標準値や設定値がない場合、デザインスタジオで可視化用の値を保存した状態でレンダリングされるか、ビジュアライゼーションデータソースはコンテンツエディターの専用フォルダに保存されます。

可視化値やデータソースはデザインスタジオでのみ使用するために保存されます。

![Visualization values in the Design studio](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/Screenshot_2025-10-22_at_16_18_44.png)

## 可視化値をカスタマイズしてください

> !注 [管理者または上級ユーザー](https://doc.sitecore.com/xmc/en/developers/xm-cloud/en/creating-users-in-sitecoreai.html) の役割で可視化値のカスタマイズが可能です。

コンポーネントはテンプレートに基づいて構築され、フィールドを含みます。コンポーネント作成に使われたテンプレートに基づき、テキスト、特定の画像、日付など標準値が割り当てられています。他のフィールドは空のままにされ、コンポーネントがページに挿入された後にページビルダーで設定されます。

Design Studioはデフォルトでビジュアライゼーション値を設定しています。これらの値はコンポーネントと一緒に保存されず、ページ上でコンポーネントを使う際には表示も利用もできませんが、Design Studioでは可視化のためのプレースホルダーとして使われます。しかし、管理者や上級ユーザーはブランドに合わせてビジュアライゼーション値をカスタマイズし、コンポーネントの使用時にどのように見えるかをより明確に把握できます。

可視化値をカスタマイズするには:

1.  ナビゲーションメニューで **「デザイン**」をクリックします。そして左側のサイドバーで**「コンポーネント**」を選択します。
    
2.  左パネルの左上隅で「 **Settings** :mdiCogOutline:」をクリックしてください。
    
3.  **ビジュアライゼーション値**パネルでフィールドのリストを閲覧し、必要に応じてビジュアライゼーション値を編集してください。
    
4.  **「保存**」をクリックします。
    

## 可視化データソースの更新

一部のコンポーネントはデータソースに接続されて初めて可視化可能です。これらのコンポーネントを可視化するために、Design StudioはDesign Studioが環境内で初めて起動した際に生成され、単一のフォルダ内にコンテンツ項目として保存されるビジュアライゼーションデータソースを使用しています。

これらの可視化データソースは、あなたの可視化値で埋められます。つまり、以前にブランドに合わせて可視化値を更新している場合、生成される可視化データソースはこれらの変更を再利用し、レンダリングされるコンポーネントができるだけブランドに近いものになります。

また、コンテンツエディターのソースフォルダ内の既存の可視化データソースを手動で更新することもできます。ただし、可視化値を更新すると、新たに生成されたデータソースが手動の変更を上書きしてしまいます。