デザインスタジオでコンポーネントを可視化する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
デザインスタジオは、組織内のすべてのコンポーネントを一元管理できるインターフェースとして機能します。
コンポーネントとそのさまざまなバリエーションを並べて可視化し、コンポーネントのフィールド構成をテストしながらリアルタイムで変化を確認できます。さらに、Design Studioはデータソースからのコンテンツも表示するため、インターフェースを使ってバックエンドをテストできます。
デザインスタジオの開設:
-
ナビゲーションヘッダーでDesignをクリックしてください。
Design Studioでコンポーネントを可視化する際、フィールドの設定方法に従ってレンダリングし、優先順位は以下の通りです。
-
フィールドの標準値はContent Editorに保存されています。
-
コンポーネントのフィールド値は、Studioの右側パネルContentタブで設定されています。これらの値を編集して、Design Studioでコンポーネントとそのバリアントをテストしてください。
注意これらの構成は、ページビルダーでコンポーネントを追加する際に保存できません。
-
フィールドに標準値や設定値がない場合、フィールドはDesign Studioに可視化用に保存された状態でレンダリングされ、ビジュアライゼーションデータソースはContent Editorの専用フォルダに保存されます。これらの可視化値とデータソースは、Design Studioでのみ使用するために保存されます。
可視化値をカスタマイズしてください
管理者または上級ユーザーの役割向けに、可視化値のカスタマイズが可能です。
Componentsはテンプレートに基づいて構築され、フィールドを含みます。コンポーネント構築に使われるテンプレートに基づき、これらのフィールドの一部にはテキスト、特定の画像、日付などの標準的な値が与えられます。他のフィールドは空のままにし、コンポーネントがページに挿入された後にページビルダーで設定されます。
デザインスタジオはデフォルトでビジュアライゼーションの値を設定しています。これらの値はコンポーネントと共に保存されず、ページ上でコンポーネントを使う際には表示も利用もできませんが、Design Studioでの可視化のためのプレースホルダーとして使われます。しかし、管理者や上級ユーザーは、ブランドに合わせて可視化値をカスタマイズし、使用時のコンポーネントの見た目をより明確にすることができます。
可視化値をカスタマイズするには:
-
ナビゲーションメニューでDesignをクリックします。次に、左側のサイドバーでComponentsを選択します。
-
左パネルの左上で「 Settings
」をクリックします。 -
Visualization valuesパネルでフィールドのリストを閲覧し、必要に応じて可視化値を編集してください。
-
クリックSave。
可視化データソースの更新
一部のコンポーネントはデータソースに接続して初めて可視化可能です。これらのコンポーネントを可視化するために、Design Studioは環境内で初めて起動時に生成される可視化データソースを使用し、単一のフォルダ内にコンテンツ項目として保存しています。
これらの可視化データソースは、あなたの可視化値で埋められます。つまり、以前にブランドに合わせて可視化値を更新している場合、生成される可視化データソースはこれらの変更を再利用し、レンダリングされるコンポーネントができるだけブランドに近いものになります。
また、Content Editorのソースフォルダ内の既存の可視化データソースを手動で更新することも可能です。しかし、可視化値を更新すると、新たに生成されたデータソースが手動の変更を上書きしてしまいます。