--- title: "設計コンポーネント" slug: "design-components" abstract: "SitecoreAIのデザインを使って目標を定義し、作業を調整し、キャンペーンを期限内かつブランドに沿った形で納品します。" --- # 設計コンポーネント SitecoreAIでは、**デザイン** はデザイナー、開発者、コンテンツ作成者がデジタル体験の構成要素を作成、探索、管理する直感的な単一のワークスペースです。このインターフェースはデザインスタジオ、コンポーネント、フォーム、ブランドキットを一か所にまとめ、サイト間で一貫したデザインと機能を保証します。 **Design**を使えば、チームはページビルダーで使用するコンポーネントを簡単に作成、設定、公開できます。ビジュアライゼーションの価値を追加し、バリアントを生成し、ブランドに合ったコンポーネントやフォーム、ブランドキットを再利用して、一貫したデジタル体験を迅速かつ自信を持って構築できます。 アクセスするには、ナビゲーションメニューで **「デザイン**」をクリックしてください。 ![Screenshot of the Design tab.](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/Design_tab_overview.png) ## 設計オプション **デザイン**の左側のサイドバーには、デザイン要素の作成、管理、スタイリングのためのコアツールとアクションが提供されています。 ### 概要 トータル、ドラフト、ライブコンポーネントやフォームを含むすべてのデザイン作業を一か所で閲覧できます。 - コンポーネントやフォームの数を確認しましょう。 - 「 **すべてを見る** 」をクリックすると、フォームやコンポーネントの全リストを開きます。 - まずは[AIで可視化値を](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") カスタマイズしたり、[バリアントを作成](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/design-studio/generate-variants-of-a-component-with-ai.html "Generate variants of a component with AI")したりして始めましょう。 - [Agentic Studioの機能にアクセスするにはAgentic studioウィジェット](https://doc.sitecore.com/sai/ja/users/sitecoreai/sitecoreai/navigating-the-interface.html#UUID-2e2a8a4e-363b-7de4-a7e0-1bf77d3e048c_section-id235183034116784 "Agentic studio widget")を使ってください。 > !重要エージェント機能を使用するには、Sitecore Cloud PortalでStreamが有効になっていること、そして自分がStreamユーザーとして追加されていることを確認してください。まだStreamが有効になっていない場合は、Cloud Portalで「Streamを有効にする」をクリックし、画面上の指示に従ってください。 ### デザインスタジオ [Design Studio](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/design-studio.html "Design studio")を使って、サイトのコンポーネントを表示・テストしたり、AIを使って既存のコンポーネントのバリエーションを作成したりできます。 - [コンポーネントを中央管理されたワークスペースで可視化し、テストしましょう。](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/design-studio/visualize-components-in-the-design-studio.html "Visualize components in the Design studio") - [デザインや内容のバリエーションを試してみて。](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/design-studio/experiment-with-components-in-inspect-mode.html "Experiment with components in Inspect mode") - [AIツールを使って新しいコンポーネントバリアントを生成しましょう。](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/design-studio/generate-variants-of-a-component-with-ai.html "Generate variants of a component with AI") - [コンポーネントのコードにアクセスしてください。](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/design-studio/view-and-edit-the-code-from-a-component.html "View and edit the code from a component") ### 形態 サイトデザインに合ったシンプルで使いやすい [フォーム](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/forms.html "Forms") を作成しましょう。 - [フォームを一から作成するか、既製のテンプレートを使うのも良いでしょう。](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/forms/create-a-form.html "Create a form") - [フィールドの種類](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/forms/designing-forms/work-with-field-items.html "Work with field items")や[レイアウト](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/forms/designing-forms/work-with-form-layouts.html "Work with form layouts")を簡単に変更できます。 - ユーザーデータを保存する代わりに [ウェブフック](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/forms/working-with-forms-dashboards/work-with-the-webhooks-dashboard.html "Work with the webhooks dashboard") を使ってフォームを他のツールにConnectしてください。 - [ページビルダーでフォームを有効化し、直接使用してください。](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/forms/activate-a-form.html "Activate a form") ### ブランドキット [ブランドキットを使って](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/brand-kits.html "Brand kits")、AI生成コンテンツがブランドガイドラインに合致しているか確認しましょう。 - まずは、組織向けの[ブランドキット](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/brand-kits/create-a-brand-kit.html "Create a brand kit")を作成することで[ブランド知識](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/brand-kits/brand-knowledge.html "Brand knowledge")を構築しましょう。 - [ベストプラクティスに従って](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/brand-kits/guidelines-for-uploading-brand-documents.html "Guidelines for uploading brand documents")[ブランド文書をアップロードしてください](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/brand-kits/create-a-brand-kit.html "Create a brand kit")。 - [ブランドキットにアクセスできるユーザーを追加または削除できます。](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/brand-kits/manage-brand-kit-access.html "Manage brand kit access") - [ブランドキットの名前の変更、編集、削除やソースドキュメントの管理が可能です。](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/brand-kits/manage-a-brand-kit-and-its-sources.html "Manage a brand kit and its sources")