---
title: "AIでコンポーネントのバリエーションを生成する"
slug: "generate-variants-of-a-component-with-ai"
abstract: "Design Studioは、チームがAIを使って複数拠点で使えるブランドに合わせたコンポーネントバリアントを作成できるようにします。"
---
# AIでコンポーネントのバリエーションを生成する

デザインスタジオは、マーケターと開発者がAI支援ツールを使ってコンポーネントを共同で作成、プレビュー、改良できるようにします。最も強力な機能の一つは、スタジオ環境内でAI駆動のデザインバリアントを直接生成できる機能です。

> !注AIによるバリアント生成は [、管理者または上級ユーザー](https://doc.sitecore.com/xmc/en/developers/xm-cloud/en/creating-users-in-sitecoreai.html) の役割で利用可能です。

## 変種を生成する

AIでコンポーネントバリアントを生成するには:

1.  Design Studioでバリアントを生成したいコンポーネントに対して「**Studio in Studio**」をクリックします。Studioでは、ドロップダウンメニューを使って別のバリアントや他のサイトのバリアントを表示できます。
    
2.  左側のパネルで「 **Chat** :mdiStarFourPoints:」をクリックするとAIチャットアシスタントが開かれます。
    
3.  AIチャットで自然言語プロンプトを使い、コンポーネントのバリエーションを生成します。
    
    プロンプトには以下のテンプレートを使うことをお勧めします:
    
    行動 + 要素 + 主要な属性やスタイルの変化 + 文脈または聴衆 + トーンまたは視覚的意図
    
    以下の文字も使用できます:
    
    -   **/** 事前に定義されたクイックアクションのリストから恩恵を受けるために。
    -   **@** はコンポーネントから特定の要素を選択するために使います。
    
    チャットキューには最大5つのプロンプトを入力できます。
    
4.  最大3枚の画像を、.jpeg、.jpg、.png形式でアップロードでき、それぞれ20MBを超えません。これはバリアント作成の視覚的参照として使えます。このファイルをプロンプト内で参照し、考慮されているか確認してください。例えば、プロンプトを「添付画像に似たこのコンポーネントのバリアントを作成してください」と書いてください。
    
5.  FigmaデザインからエクスポートしたようなJSONファイルをアップロードして、バリアント生成の参考にできます。プロンプト内で正確なデザイントークン名を使ってこのファイルを参照し、正しく適用できるようにしてください。例えば、プロンプトは「添付ファイルの *原色* と *境界半径* を使ってこのコンポーネントのバリエーションを作成してください」と書いてください。
    
6.  いつでも **「復元** 」をクリックして生成されたバリアントの特定のバージョンに戻ることができます。
    
7.  生成されたバリアントに満足したら、「 **Code** :mdiCodeTags: 」をクリックしてコードを確認したり、レイアウト、色、内容を必要に応じて調整したりしてください。
    

## バリアント生成プロンプト

Design Studioで新しいコンポーネントバリエーションを迅速かつ正確に生成するには、コーディングは不要です。欲しいものを明確かつ文脈を説明すればいいのです:

-   要素やスタイルは正しい名前で **@を使って呼**びます。
    
    例えば、「@CustomerRatingsをより際立たせる新しいバリアントを作る。クリーンでミニマルに保ち、環境に優しいeコマースブランドに適したものにする。」
    
-   / **を使ってクイック**アクションテンプレートを活用してください。
    
    ![The quick actions templates](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/quickactions.png)
    
-   何を変えるべきか、何を変えないかを明確に示してください。
    
    例えば、「ボタンを更新する」の代わりに、「モバイルでより見えやすくするためにコール・トゥ・アクションボタンを再設計してください—より大きなサイズ、高コントラストの色、丸みを帯びたエッジ。コンポーネントの背景は変更しないでください。」
    
-   以下のプロンプトの解剖学を使ってください:目標を定義する + 変えるものを指定する + 視覚的または音色の手がかりを追加する。
    
    例えば、「バナーの新しいバージョンを作成」の代わりに、「信頼を重視する新しいバナーバリファレントを作成、柔らかい青色と顧客の口コミを医療ランディングページで使う」といった表現を使う。
    

詳細なプロンプトは期待する成果を得る可能性を高めます。よく構成されたプロンプトは反復サイクルを短縮し、時間と労力を節約します。