---
title: "インスペクトモードでコンポーネントを実験する"
slug: "experiment-with-components-in-inspect-mode"
abstract: "コンポーネントライブラリでは、標準値やモックデータでコンポーネントを可視化し、ページにコンポーネントを挿入せずに様々なデザインを試すことができます。"
---
# インスペクトモードでコンポーネントを実験する

コンポーネントライブラリのインスペクトモードは、ユーザーがページに追加せずにコンポーネントをプレビュー、操作、設定できるようにします。この機能は、さまざまなシナリオでコンポーネントの挙動や外観をテストしたいユーザーに理想的です。

コンポーネントライブラリでは、コンポーネントを可視化できます:

-   デフォルトの標準値で。
-   標準値が存在しないフィールドの [可視化値を](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/design-studio/visualize-components-in-the-design-studio/understanding-visualization-values-and-data-sources.html "Understanding visualization values and data sources") 用います。
-   右側のペインにある設定オプションを使ってください。これらのオプションを使って、ページにコンポーネントを挿入せずに様々なデザインを試すことができます。

> !注コンポーネントライブラリでテストした設定や内容の変更は保存できません。
> 
> 最終的なデザインやコンテンツ設定は、コンテンツエディターで行うか、コンポーネントをページに挿入した際のページビルダーの右側パネルで行う必要があります。

SitecoreAIはコンポーネントにレスポンシブデザインを適用しているため、コンポーネントライブラリで表示されるデバイスのサイズを調整できます。

コンポーネントのバリアントのスタイリングや内容をいじる方法:

1.  ナビゲーションヘッダーで **「Design**」をクリックし、 **Components** タブをクリックしてComponentsライブラリを開きます。
2.  左側のパネルで、試したいコンポーネントを見つけてクリックします。
3.  検査したいバリアントのカードにカーソルを合わせるとアクションボタンが表示され、その後「 **検査**」をクリックします。
4.  **インスペクト**モードでは、ドロップダウンメニューを使って別のバリアントや他サイトのバリアントを表示できます。
5.  トップツールバーでは、現在のコンポーネントを表示し、 **モバイル**、 **タブレットポートレート**、Desktopレス **ポンシブ**でレンダリングします。
6.  右側パネルの **「Content** 」タブでは、任意のフィールドの値を入力または編集できます。また、データピッカーを使って異なるデータでコンポーネントをレンダリングすることもできます:
    -   コンテンツが [ローカルデータソース](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/add-content-to-a-component.html "Add content to a component")から来ている場合は、データピッカーを使ってコンポーネントに割り当てられたコンテンツ項目を変更してください。
    -   もしGraphQLクエリを使って [外部データソース](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page/assign-a-data-item-from-an-external-data-source.html "Assign a data item from an external data source") からコンテンツを取得する場合、コードボックスでクエリを確認できます。
7.  右側パネルの **デザイン** タブで、 **[グリッドレイアウト](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-components-to-a-page/configure-a-component/grid-layout-settings.html "Grid layout settings")**、 **[スタイリング](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-components-to-a-page/configure-a-component/styling-and-advanced-styling-settings.html "Styling and Advanced styling settings")** 、 **[アドバンススタイリング](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-components-to-a-page/configure-a-component/styling-and-advanced-styling-settings.html "Styling and Advanced styling settings")** 設定のオプションを使ってバリアントのデザインを調整できます。
8.  コンポーネント**ライブラリに戻**るには「**インスペクトモード**終了」をクリックしてください。