AIでコンポーネントのバリエーションを生成する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
デザインスタジオは、マーケターと開発者がAI支援ツールを使って共同でコンポーネントを作成、プレビュー、洗練できるようにします。最も強力な機能の一つは、スタジオ環境内でAI駆動のデザインバリアントを直接生成できる能力です。
管理者 や上級ユーザー の役割向けに、AIによるバリアント生成が可能です。
変種を生成する
AIでコンポーネントバリアントを生成するには:
-
Design Studioで、バリアントを生成したいコンポーネントに対してOpen in Studioをクリックします。スタジオ内では、ドロップダウンメニューを使って別のバリアントや他サイトのバリアントを表示できます。
-
左側のサイドパネルでChat
をクリックするとAIチャットアシスタントが開かれます。 -
AIチャットで自然言語プロンプトを使い、コンポーネントのバリエーションを生成します。
プロンプトには以下のテンプレートを使うことをお勧めします:
アクション + Element + キー属性やスタイルの変化 + コンテキストまたはオーディエンス + トーンまたは視覚的意図
以下の文字も使用できます:
-
/ あらかじめ定義されたクイックアクションのリストから恩恵を受けるために。
-
@ コンポーネントから特定の要素を選択するために。
チャットキューには最大5つのプロンプトを入力できます。
-
-
.jpeg、.jpg、.png形式で最大3枚の画像をアップロードでき、それぞれ20MB以内で、バリアント作成の視覚的参照として利用できます。このファイルが検討されているか確認するために、プロンプトで参照してください。例えば、プロンプトは「添付画像に似たこのコンポーネントのバリエーションを作成してください」と書いてください。
-
FigmaのデザインからエクスポートしたJSONファイルなどをアップロードして、バリアント生成のガイドとして利用できます。プロンプト内でこのファイルを正確なデザイントークン名で参照し、正しく適用するようにしてください。例えば、プロンプトを「添付ファイルからprimary colorとborder radiusを使ってこのコンポーネントのバリエーションを作成してください。」と書いてみてください。
-
任意のポイントクリックでRestoreを操作すれば、生成されたバリアントの特定のバージョンに戻ることができます。
-
生成されたバリアントに満足したら、Code
をクリックしてコードを確認したり、レイアウト、色、内容を必要に応じて調整したりできます。
バリアント生成プロンプト
Design Studioで新しいコンポーネントのバリエーションを迅速かつ正確に生成するには、コーディングは不要です。明確に文脈をもって何を望んでいるかを説明してください:
-
要素やスタイルは正しい名称で呼び @。
例えば、「@CustomerRatingsをより際立たせる新しいバリアントを作成する。清潔でミニマルに保ち、環境に優しいECブランドにふさわしいものを選びましょう。」
-
クイックアクションテンプレートを活用するには /。
-
何を変えるべきか、何を変えないかを明確に示してください。
例えば、「ボタンを更新する」の代わりに、「モバイルでより見えやすくするためにコール・トゥ・アクションボタンを再設計する」と使いましょう。サイズを大きく、コントラストの高い色、丸みを帯びたエッジにします。コンポーネントの背景を変えないでください。」
-
以下のプロンプトの解剖学を使ってください:目標を定義する + 変えるものを指定する + 視覚的または音色の手がかりを追加する。
例えば、「バナーの新しいバージョンを作成」の代わりに、「信頼を重視する新しいバナーバリファレントを作成、柔らかい青色と顧客の口コミを医療ランディングページで使う」といった表現を使う。
詳細なプロンプトは、期待する成果を得る可能性を高めます。よく構成されたプロンプトは反復サイクルを短縮し、時間と労力を節約します。