デザインとデザイナー

最終更新日： 2023-11-07

注意

この記事では、クラシック UI を使用して web サイトを作成する方法について説明します。Adobeでは、Web サイトに最新のAEMテクノロジーを使用することをお勧めします（記事で詳しく説明）。 AEM Sitesの開発の手引き.

Designer は、AEM のクラシック UI を使用した web サイトのデザインを作成するために使用します。

メモ

Web アクセシビリティについて詳しくは、 AEMと Web アクセシビリティのガイドライン.

デザイナーの使用

デザインは、「ツール」タブの designs セクションで定義できます。

screen_shot_2012-02-01at30237pm

ここで、デザインの格納に必要な構造を作成し、必要なカスケーディングスタイルシート（CSS）および画像をアップロードできます。

デザインは、/apps/<your-project>の下に格納されます。Web サイトに使用するデザインへのパスは、ノードの cq:designPathプロパティjcr:contentで指定します。

chlimage_1-74

メモ

デザインモードでページに対して行われた変更はすべて、サイトのデザインノードの下に保持され、同じデザインを持つすべてのページに自動的に適用されます。

デザインを実現するには、次が必要です。

CSS - カスケーディングスタイルシート（CSS）は、ページの特定の領域の書式を定義します。
画像 - 背景、ボタンなどの機能に使用するすべての画像。

Web サイトを開発するときは、画像や CSS ファイルを /apps/<your-project> の下に格納し、以下のスニペットで記述されているように、現在のデザインに基づいてリソースを参照できるようにすることを強くお勧めします。

<%= currentDesign.getPath() + "/static/img/icon.gif %>

前述の例には、次のようなメリットがあります。

別々のデザインパスを使用しているサイトごとに、コンポーネントのルックアンドフィールを変化させることができます。
design/v1からdesign/v2.のように、デザインパスをサイトのルートにある別のノードに変更することにより、web サイトのデザインを簡単に変更できます。
ブラウザーから見える外部 URL は /etc/designs および /content のみなので、/apps ツリーの下に何があるかに興味を抱く外部ユーザーから保護することができます。前述の URL のメリットは、システム管理者がより高いセキュリティを設定する際にも役立ちます。アセットを公開する範囲を、少数の場所に制限しているからです。