サイトのスタイル変更 restyling
Experience Modernization Agentを使用して、移行時にデザインを適用したり、既存のEdge Delivery Services プロジェクトの外観を変更したりします。 ソースサイトの外観を忠実にコピーし、意図的に新しいデザインに置き換えることは、異なるリクエストです。 必要な状態。
外観はプロジェクトのコードにあります。グローバル CSSはデフォルトコンテンツの外観を設定し、各ブロックには独自のCSSとJavaScriptがあります。 JavaScriptではブラウザーでマークアップを再構築できるため、同じセマンティックコンテンツを再構築せずにデザインできます。 サイトの構築および更新方法を参照してください。 したがって、純粋に視覚的なスタイル変更を行うと、Gitのコードが変更され、オーサリングされたコンテンツは単独のままになります。
このガイドは、リスタイルをリードする人向けです。 デザイナーが開発者がレビューする個別の視覚的な変更を行う場合は、視覚的な変更を行うから始めます。
何が変化し、何が残るかを同意する prepare
プロジェクト を接続し、変更する権限を確認します。 ベースラインコードのリビジョンを保存し、変更する前に影響を受けるコンテンツを保持します。
以下を指定します。
- コンテンツ ソース： テキスト、画像、リンク、メタデータ、意味を保持するか、新しいコンテンツを承認する必要がある既存のページ。
- 設計参照：特定のFigma コンポーネントまたはフレーム、許可された参照web サイト、スクリーンショット、または設計仕様。 そのバージョンに名前を付け、重要なデスクトップとモバイルの状態を示します。
- スコープ： グローバル トークン （色、タイポグラフィ、間隔のCSS カスタム プロパティ）と、既定のコンテンツ、選択したブロック、ページ、またはサイト全体。
- 変更できないもの： コンテンツ、URL、オーサリングモデル、アクセシビリティ動作、統合。
- 出力：作成者が編集できるコンテンツ、プロジェクトで使用する ストレージオプション 、または必要な場合は静的デザインプロトタイプ。
スクリーンショットやリファレンスサイトでは、インタラクションやレスポンシブルールを未指定のままにすることができます。 サイト全体に適用する前に、1つのサンプルページで解決する。
参照、プロトタイプ、配信 design-output
エージェントは、ソースサイト、Figma、および提供された参照からの設計作業をサポートします。 Figmaの読み込みとガイド付き再設計は、リクエストが必要なときにプロジェクトに対して有効にする オプション機能です。 入力と出力が異なるため、同じように機能すると仮定しないでください。
- 1つのFigma ブロックに対して、そのコンポーネントまたはノードリンクを指定します。 新しいページの場合は、ファイル全体ではなく特定のフレームを指定します。
- Figma importには、ファイルを読み取るためのFigma アクセストークンと権限が必要です。 Figma デザインからの作業を参照してください。
- 新しいデザインは、静的なHTML デザインプレビューでページのコピーに表示され、方向を選択するのに役立ちます。 作成者は、それらのコピーを編集することはできません。コピーは、サイトのドキュメントやExperience Manager ページではありません。
- 作成者が結果を編集する必要がある場合は、プロジェクトで使用するストレージオプションでサイトコンテンツとブロックモデルを確認し、 ドキュメントベースのコンテンツ またはExperience Manager オーサリング の説明に従って確認します。
ガイド付きの再設計 guided-redesign
ガイド付きリニューアルでは、サイトやページのセットを、新しいデザインに段階的に移行します。 Stardust アドオン stardust@excat-extendedによって提供されます。 エージェントは現在のデザインをキャプチャし、必要な方向を記録し、レビュー用に前後のプロトタイプを作成し、承認されたデザインをブロックやコンテンツに変換します。 単一のページやブロックのスタイルを変更するのではなく、複数のページをまたいでリデザインするために使用できます。 エージェントは、リデザインの作業ファイルと進捗状況をリポジトリに保持するので、後の会話で続行できます。
名前でステージを知る必要はありません。 例えば、「ホームページと製品ページをより軽く、よりエディトリアルなスタイルで再設計する」などの結果を記述すると、担当者が手順を提案します。 また、次の手順を直接実行することもできます。
ガイド付き再設計を有効にすると、フロントエンドのデザイン品質ガイダンスを各ページに適用するデザインクラフトアドオンも有効になります。 続行する前に、各ステージを確認し、以下の説明に従ってデプロイ結果を検証します。
移行中にスタイルを変更 during-migration
このパスは、コンテンツが既存のweb サイトから来たものの、ターゲットデザインが異なる場合に使用します。
- コンテンツの保存場所を含め、 プロジェクトと移行の範囲を完了します。
- ターゲットデザインシステムを定義します。タイポグラフィ、カラー、間隔、デフォルトコンテンツ、再利用可能なブロックです。 既存のプロジェクト規則を適切な場所で再利用する。
- Figmaの場合、 アクセスを設定し、特定のコンポーネントノードから必要なブロックまたはバリエーションを作成します。 「Figmaのブロックでデザインを変更する」および「Figmaからブロックを作成する」を参照してください。
- 各テンプレートのサンプルページをそのブロックコレクションに移行します。 ライブサイトをコンテンツソースとして、Figmaまたは承認済み参照をデザインソースとして保持します。
- コンテンツとソース web サイト、外観をターゲットデザインと比較します。 新しくデザインされたページを、古いサイトの外観と比較しないでください。
- 作成者が結果を編集でき、各画面幅で機能することを確認します。 必要に応じてコンテンツマッピングまたはモデルを修正し、一括で続行します。
次に例を示します。
https://www.example.com/products/tentsの移行中にhttps://www.figma.com/design/AbC123/Brand-Refresh?node-id=12-345に承認済みデザインを適用します。 ライブページはコンテンツソースです。参照により、新しい外観が定義されます。 テキスト、リンク、メタデータ、有意義な画像を保存します。 最初に1つのサンプルページを確認します。 Adobe Experience Workspaceでコンテンツを制作、編集。 アップロード、プッシュ、または公開しないでください。
サンプル URLを独自のURLに置き換えます。Experience Manager オーサリングの場合は、コンテンツがJCRに保存されているとします。
新しいページにソース Web サイトがない場合は、Figmaから新しいページを作成を参照してください。特定のフレームには、テキストとアセットだけでなく、デザインも含まれます。 これは、既存のweb サイトコンテンツを新しいデザインにマッピングするのとは異なります。
既存のサイトのスタイル変更 existing-site
新しい移行は必要ありません。
-
既存のプロジェクトと目的のブランチを接続します。 担当者に、プロジェクトのデザイン規則、ブロック、オーサリングモデルの読み取りを依頼します。
-
影響を受けるテンプレートとバリエーションをカバーするベースラインページを特定します。 現在の外観と重要なやり取りを記録します。
-
変更の範囲と今後の要件を明記します。 次に例を示します。
https://www.figma.com/design/AbC123/Brand-Refreshの承認済みデザインを使用して、この既存のプロジェクトのスタイルを変更します。/と/productsのグローバルカラーとタイポグラフィ、およびカードのプレゼンテーションを変更します。 コンテンツ、URL、モデル、分析、キーボード動作、統合を保持します。 トークンとブロックを再利用します。 提案された範囲を最初に表示します。コンテンツを再インポートしたり、コンテンツをアップロード、プッシュ、公開したりしないでください。サンプル URLとパスを独自のURLに置き換えます。
-
最初に変更がグローバルになる場所で、共有トークンとグローバルスタイルを更新します。 必要な場合にのみ、ブロック固有のスタイルを適用します。
-
デザインの派生に使用したページだけでなく、影響を受けるすべてのサンプルページをプレビューします。 モバイルの幅、長い見出し、不足しているオプションコンテンツ、様々なバリエーションを含めます。 グローバルトークンの変更は、元の例の外部のページに影響を与える可能性があるので、それらを含めます。
-
設計に構造的またはモデルの変更が必要な場合は、別個の明示的な決定を行います。 作成者のコンテンツをサイレントに書き換えるのではなく、既存のコンテンツを新しい構造に移動させる方法を計画します。
-
コードの差分とプロジェクトのチェックを確認してから、既存のプロジェクトのワークフローをプッシュして配信します。 スタイルの変更はコードです。ブランチが
mainに結合されるとすぐにライブサイトに到達するので、まずブランチのプレビューURLで影響を受けるページを確認してください。 変更内容の公開方法を参照してください。
検証と復元 validate
スタイルの変更は、コンテンツが正しいままであり、承認されたデザインは各画面の幅で機能し、インタラクションは引き続き使用でき、作成者はサンプルページを編集、保存、再び開くことができるときに行われます。 コントラスト、フォーカス、読み上げ順序、画像の意味、プロジェクトのパフォーマンス要件を確認します。 類似性スコアでは、これを判断できません。
結果が間違っている場合は、影響を受けるページまたはブロックを特定し、問題がトークン、共有スタイル、ブロックスタイル、構造、コンテンツマッピングであるかどうかを特定します。 そのレイヤーを修正し、影響を受けるすべてのバリエーションを再確認します。 Figma アクセス エラーの場合は、再試行する前に、ノード リンク、ファイル権限、トークン、およびFigma インポートがプロジェクトで有効になっていることを確認してください。
プロジェクトのGit ワークフローを使用して、不要なコードを元に戻します。 変更したリモートコンテンツは個別に復元します。コードの復元では、アップロードを元に戻しません。 リスタイルがサインオフされるまでベースラインを維持します。
承認済みの参照とそのバージョン、変更されたファイル、影響を受けるページ、モデルとコンテンツの変更、チェック結果、既知のギャップ、コードとコンテンツの回復方法を、 プロジェクトの引き継ぎを使用して引き継ぎます。