AEM スタイルシステムによるコンテンツベロシティの促進

最終更新日: 2024-01-29

この記事では、AEM スタイルシステムを使用して、組織のデザイナー、コンテンツ作成者および開発者が、顧客が期待するスピードと規模でエクスペリエンスを作成し提供できるようにする方法を説明します。

概要

AEM スタイルシステムには、主なメリットが次の 4 つあります。

  • テンプレート作成者が、コンポーネントまたはページのコンテンツポリシーでスタイルクラスを定義できます。
  • コンテンツ作成者が、ページ全体に適用するスタイルや、ページ上のコンポーネントの編集時に適用するスタイルを選択できます。
  • 作成者が代替の視覚的バリエーションをレンダリングできるようにすることで、コンポーネントとテンプレートの柔軟性が高まりました。
  • コンポーネントのバリエーションを提示するためのカスタムコンポーネントや複雑なダイアログを開発する必要性が、軽減されるか完全になくなります。

初期設定と使用

5 段階から成る設定は、標準のコンポーネント開発ワークフローとよく似ています。

リーダー デザイナー 開発者/アーキテクト テンプレート作成者 コンテンツ作成者
そのコンポーネントのコンテンツと目標を決定します。 コンテンツの視覚的かつ経験的な表示を決定します。 エクスペリエンスをサポートする CSS と JS を開発します。使用するクラス名を定義し指定します。 開発者が定義した CSS クラス名を追加することで、スタイル設定されたコンポーネントのテンプレートポリシーを設定します。スタイルごとに、ユーザーにとってわかりやすい名前を付けてください。 ページをオーサリングする際に、必要に応じてスタイルを適用し、望ましいルックアンドフィールを実現します。

これは初期設定ですが、多くのお客様は、このプロセスを効率化することで高い俊敏性を実現しています。例えば、CSS を DAM にアップロードすると、デプロイメントを行わなくてもスタイルを更新できます。他には、完全に機能する一連のユーティリティクラスを持っているお客様もあります。それらを使用すれば、デプロイメントや開発を行わなくても利用できるコンポーネントやスタイルを開発できます。

スタイルシステムには、次のような異なる種類があります。

  1. レイアウトスタイル

    • デザインとレイアウトに多面的な変更を加えます。

    • 明確に定義された識別しやすいレンディションに使用します。

  2. 表示スタイル

    • スタイルの基本的な特性を変更しないマイナーなバリエーション

    • 例えば、カラースキーム、フォント、画像の向きなどを変更します。

  3. 情報スタイル

    • フィールドの表示/非表示を切り替えます。
メモ

これらの機能のデモについては、Will Brisbane と Joseph Van Buskirk によるカスタマーサクセスウェビナーを視聴することをお勧めします。

ベストプラクティス

  • まずデフォルトのスタイルを固める
    • スタイルシステムを適用する前にページにドロップしたときの、コンポーネントのレイアウトと表示
    • これが最もよく使用されるレンディションです。
  • 可能な限り、効果のあるスタイルオプションのみを表示する
    • 効果のない組み合わせが見つかった場合は、それが悪影響を及ぼさないようにします。
    • 例えば、画像の位置を指示するレイアウトスタイルに、画像の位置を制御する効果的でない表示スタイルを伴う場合。
  • 表示スタイルの組み合わせよりもレイアウトスタイルを選択する
    • 品質チェックが必要な並べ替えの数を減らします。
    • ブランドの標準に確実に準拠します。
    • コンテンツ作成者によるオーサリングを簡素化します。
    • 一貫性のあるサイトブランドアイデンティティの作成に役立ちます。
  • スタイルの組み合わせを控えめにする
    • カテゴリー間とカテゴリー内の両方で
  • 然るべき時間を割いて組み合わせスタイルを徹底的にテストする
    • 望ましくない効果を避けるのに役立ちます。
  • スタイルのオプションと並べ替えの数を最小限に抑える
    • オプションが多すぎると、ルックアンドフィールに関してブランドの一貫性が失われる可能性があります。
    • 目的の効果を得るために必要な組み合わせに関して、コンテンツ作成者の混乱を招く可能性があります。
    • 品質チェックが必要な並べ替えが増えます。
  • ビジネスユーザーにとってわかりやすいスタイルラベルおよびカテゴリを使用する
    • 「プライマリ」や「セカンダリ」ではなく「青」や「赤」
    • 「バリエーション A」や「バリエーション B」ではなく「カード」や「ヒーロー」
    • これは、一部のお客様にとってはどちらかというと当たり前のことかもしれません。デザインチーム、ビジネスチームおよびコンテンツチームは、プライマリカラーとセカンダリカラーが何で、テストするバリエーションが何なのかを熟知しています。ただし、柔軟性と将来の変更の可能性を考慮して、具体的な用語を使用した方が効率的な場合があります。

重要な留意点

スタイルシステムを適用すれば、複雑なダイアログが必要になるケースは少なくなりますが、ダイアログがなくなるわけではありません。 これらは作業の簡素化に役立ちますが、スタイルシステムを作成するのではなくコンポーネントのプロパティやダイアログを使用したい場合もあります。

スタイルシステムは、開発の観点からプロセスを効率化できます。 1 つのスタイルシステムで、同じコンテンツの複数の外観を実現できます。 同様に、オーサリングの観点からは、作成者をトレーニングしたり、どこにどのコンポーネントを使用するかを作成者が覚えておいたりする必要がないので、オーサリングのスピードを速めることができます。

作業がとてもすっきりします。コアコンポーネント内の HTML は非常に詳細です。 これをすべて CSS レベルで行うと、コンポーネントの作成が速くなり、コードも明快になります。

最後に、スタイルシステムの使用はサイエンスというよりもアートです。 ここで説明したように、多くのベストプラクティスがありますが、組織の設定は柔軟にカスタマイズできます。

詳しくは、Will Brisbane と Joseph Van Buskirk によるアドビのカスタムサクセスウェビナーをご視聴ください。

戦略とソートリーダーシップについて詳しくは、カスタマーサクセスハブを参照してください。

このページ