Experience Modernization Agentでの視覚的な変更 visual-changes
このガイドは、色、フォント、間隔、ブロックのレイアウトなど、サイトの見た目を変更するデザイナーや他のユーザー向けです。 Experience Modernization ConsoleでExperience Modernization Agentに対する変更を記述し、プレビューで確認して、レビュー用に開発者に送信します。 担当者がコードを記述するので、CSSやJavaScriptを記述する必要はありません。 ただし、変更はGit リポジトリを通じてサイトに反映されるため、作業をブランチにプッシュし、プルリクエストで渡すという基本的な仕組みが必要です。 これらの用語が初めての場合は、このガイドで使用されている単語を参照してください。
始める前に before-you-start
プロジェクトの責任者に、次の点を尋ねます。
- コンソールへのアクセス。 Adobe IDでログインします。 Experience Modernization Consoleを開くを参照してください。
- 作業中のサイト。 サイトのGit リポジトリをコンソールワークスペースに接続し、リポジトリへの書き込みアクセス権が必要です。 サイトの接続を参照してください。
- 作品の一部。 誰も同じファイルを同時に変更しないように、どのブロック、ページ、スタイルが自分のものであるかに同意します。 1人で始めて、次に作業を分割するを参照してください。
- 引き渡しの方法。 ほとんどのチームは、開発者があらゆる変更をレビューできるようにメインブランチを保護しています。 新しいPRを作成してプッシュするかどうかを尋ねます。 レビュー用に引き渡しを参照。
- Figma デザインの場合、ファイルを読み取ることができるFigma シート。 Figma デザインからの作業を参照してください。
プッシュするまで、作業は自分のコンソール ワークスペースに残ります。 プレビューで試した内容は、ライブサイトに自動的に到達しません。
変更可能な作業 what-you-can-change
Edge Delivery Services サイトでは、作成者がコンテンツを作成し、コードが外観を決定します。 したがって、視覚的な変更はサイトのコード（主にCSS）を変更し、作成者が入力したコンテンツをそのまま残します。 再度ページを読み込んだりアップロードしたりする必要はありません。
コードの各部分は、サイトの異なる部分に到達します。 変更を求める前に、どこまで変更するかを決めます。
--link-colorなどの名前が付けられます。バリエーション、セクションスタイル、テンプレートは、作成者が適用した場合にのみ有効になります。 担当者に、作業中のページに1つを適用して表示し、作成者に使用するタイミングを伝えるように依頼します。
一部のリクエストは、サイトの外観だけにとどまりません。 作成者が入力するフィールドを追加する、ブロックのコンテンツの構造化方法を変更する、カルーセルなどの動作を追加すると、ブロックのコンテンツモデルやロジックが変更されます。 必要な機能を記述し、開発者にこれらの決定を任せましょう。 ブロックの作成、更新、リファクタリング を参照してください。
一部のページへの変更の制限 impact
ブロックまたはグローバルスタイルを変更すると、ブロックを使用するすべてのページが変更されます。 質問する前に、担当者にブロックまたはスタイルが使用されている場所を尋ねます。例えば、「自分のワークスペースのどのページがカードブロックを使用しているか」などです。
変更を一部のページにのみ適用する場合は、代わりに次のいずれかを要求してください。
- ブロックの一部のインスタンスのみが異なって見える場合のブロックバリアント。
- ハイライト表示された領域など、ページの一部が独自の外観を必要とするセクションスタイル。
- すべての製品ページなど、ページの種類が独自の外観を必要とするページテンプレート。
あなたの言いたいことを伝える references
写真は多くの場合、説明文よりも正確です。 プロンプトで「ファイルを添付」（ペーパークリップアイコン）を使用して、次のファイルを添付します。
- 見たい結果、または問題のスクリーンショットと、見るべきものについての文。
- ブランドのスタイルガイドのページ（画像、WordまたはPowerPoint ファイルなど）。
すでに正しく表示されているサイトのページを指すこともできます。「/adventuresのカードを/magazineのカードのように見せる」 チームが使用できるデザインと参照サイトのみを使用してください。
担当者は会話間のブランドルールを覚えていない。 ボタンのスタイルや見出しのサイズなどのルールが決まったら、エージェントにプロジェクトの命令ファイルにルールを記述するように依頼して、会話のたびにルールに従います。 プロジェクトの手順とメモリ を参照してください。
Figma デザインからの作業 figma
担当者は、Figmaの読み込みアドオンを使用して、Figmaからデザインを読み取ることができます。 デザインの色、タイポグラフィ、間隔、変数をサイトのデザイントークンに、コンポーネントをブロックまたはブロックのバリエーションに変換します。
- Figmaで、🔗 コンソールの資格情報設定にリストされている読み取り専用スコープを使用して、個人アクセストークン を作成します。
- コンソールで、設定を開き、資格情報の下にトークンを入力し、保存を選択します。 新しいトークンが有効になるまでに数分かかる場合があります。
- Figmaで、1つのコンポーネントまたはフレームを選択し、そのリンクをコピーします。 リンクには、選択内容を識別する
node-idが含まれています。 - コンソールで、「このFigma コンポーネントに一致するようにティーザーブロックを更新する：
{Figma link}」などのリンクを含むプロンプトを送信します。 既存のデザイントークンを再利用します。」
知っておくべきこと：
- 一度に1つのコンポーネントまたはフレーム。 エージェントは、コンポーネントから1つのブロックを構築するか、フレームから1つのページを構築します。 次のリンクを送信する前に、各結果を確認してください。 Figmaからブロックを作成およびFigmaから新しいページを作成するを参照してください。
- トークン、ファイル。 個人用アクセストークンは、開くことができるすべてのFigma ファイルを読み取り、それ以外は何も読み取りません。 Figmaはそれを発行し、その制限を設定します。 各人が自分のトークンを保存します。 デザイントークン、エージェントがデザインから読み取る色と間隔とは関係ありません。
- お客様のFigma シート。 Dev シートまたはFull Figma シートが必要です。Figmaとデザインシステム を参照してください。 コンソールでステータス 429のFigma API エラーが報告された場合、トークンはFigmaの レート制限に達しています。
- アドオン。 Figma インポートは オプションの機能です。 プロジェクトでオンになっていない場合は、エージェントがオンにするよう提案します。
- デザイントークン。 新しいトークンと既存のトークンを比較します。 Figmaの値が既存のトークンとわずかに異なるだけの場合は、両方を維持するのではなく、どちらを維持するかを決定します。
ユーザーがエージェントでFigmaを使用する前に組織が承認したことについては、Figmaとデザインシステム を参照してください。
最初の変更 first-change
- コンソールのプレビューパネルでページを開きます。
- ビューポート メニューで、確認する幅をデスクトップ、タブレット、または モバイル から選択します。
- プレビューパネルの選択アイコンを使用して、検査モードをオンにします。
- 見出し、画像、ボタンなど、変更する要素を選択します。 このエレメントがプロンプトに追加されます。担当者はHTMLとページ上での位置を受け取り、そのエレメントへの変更を制限します。
- 変化とその範囲を説明し、プロンプトを送信します。 例：「このボタンに、こことすべてのページでプライマリスタイルを使用させる」
- エージェントが終了したら、プレビューが更新されていない場合は、プレビューを更新を選択します。 各ビューポート サイズで結果を確認してください。
- 何か正しくない場合は、「モバイルでは、テキストが画像に触れる」など、表示されている内容を言います。 一度に1つの変更を要求し、次の変更を要求する前に確認します。
変更を元に戻すには、担当者に変更を元に戻すように依頼します。 プッシュされていない変更をすべてファイルにドロップするには、Changes ビューを開き、ファイルの横にある Discard を選択します。 変更アクション を参照してください。
数回試してもエージェントに変更が届かない場合は、開発者に問い合わせるか、メニューバーの「サポートをリクエスト」を選択して、要求した内容と表示される内容を説明してください。 リクエストはエージェントを構築するチームに到達します。 会話がうまくいかない場合、コンソールで 手が必要ですか？ の下でヘルプを提供することもできます サポートを依頼を参照してください。
プロンプト例 example-prompts
- 「すべての見出しに、添付のスタイルガイドの見出しフォントを使用させる」
- 「カード内のカードに同じ高さのブロックを付け、下部にボタンを配置します。」
- 「暗いブランドカラーに白いテキストを含むティーザーブロックの
darkバリエーションを追加し、/adventuresの2番目のティーザーに適用します。」 - 「明るい背景と上下にスペースを持つ
highlightセクションスタイルを追加し、ホームページのニュースレターセクションに使用します。」 - 「モバイルでは、列を積み重ねて、画像をテキストの上に置きます。」
- 「自分のワークスペースのどのページがヒーローブロックを使用しますか？ この変化の後、それぞれの人がどのように見えるかを示してください。
- 「合意したボタンスタイルをプロジェクトの命令ファイルに書き込みます」
引き渡す前に確認する check
- ビューポート サイズ、特に モバイル を確認してください。
- 作業中のページだけでなく、同じブロック、スタイル、テンプレートを使用している他のページを確認します。
- 長い見出し、短い見出し、画像の欠落、多数のアイテムを含むリストなど、デザインが実際のコンテンツをどのように処理するかを確認します。
- テキストが背景に対して読みやすいままであることを確認します。 担当者に「ティーザーブロック内のテキストのカラーコントラストをWCAG AAに照らし合わせて確認してください」と依頼できます。
- プッシュした後、プルリクエストにリストされているプレビューURLを開き、そこに表示されているページを確認します。 「 コンソールプレビューがサイトと異なる」を参照してください。
レビュー用に渡す hand-over
- 「 コード変更をプッシュ 」の説明に従って、新しいPRを作成してコードをプッシュします。 変更に属するファイルのみをステージングし、「角丸とカード用シャドウ」などのプレーン文で説明します。
- 通知で「PRを表示」を選択し、プルリクエストのリンクをレビューする開発者に送信します。
レビュアーが要求する変更を行うには、同じブランチで作業を続け、現在のブランチにプッシュします。プルリクエストは更新されます。
開発者がマージすると、変更はライブサイトに到達します。 ページ上のテキストまたは画像も変更した場合、それはコンテンツの変更です。ページがアップロードおよび公開されたときにのみサイトに到達します。 それを行う著者に同意します。 コンテンツの変更を調整を参照してください。
このガイドで使用する単語 glossary
--link-colorなどのCSS カスタムプロパティとして保存されます。main ブランチを使用しています。セクション、ブロック、デフォルトコンテンツについては、 コンテンツ構造のシェイプ で詳しく説明しています。