レスポンシブデザイン

最終更新日： 2025年2月18日
  • 適用対象：
  • Experience Manager as a Cloud Service

作成対象：

  • 管理者
  • 開発者

レスポンシブデザインを使用すると、同じエクスペリエンスを複数のデバイスで、複数の向きで効果的に表示できます。

ヒント
このドキュメントでは、開発者向けのレスポンシブデザインの概要と、AEM での機能の実現方法について説明します。次のその他のリソースを使用できます。

概要

エクスペリエンスが表示されるクライアントの表示域に適応するようにエクスペリエンスをデザインします。レスポンシブデザインを使用すると、同じページを複数のデバイスで、縦、横の両方の向きで効果的に表示できます。以下の画像は、ビューポートサイズの変更に対するページの応答方法の例を示しています。

  • レイアウト：ビューポートが小さい場合は 1 列レイアウトを使用し、ビューポートが大きい場合は複数列レイアウトを使用します。
  • テキストサイズ：ビューポートが大きい場合は、（見出しなどの適切な箇所で）大きいテキストサイズを使用します。
  • コンテンツ：小型デバイスに表示する場合は、重要なコンテンツのみを表示します。
  • ナビゲーション：他のページにアクセスするためのデバイス専用のツールを提供します。
  • 画像：ウィンドウのサイズに応じて、クライアントの表示域に適した画像レンディションを提供します

レスポンシブデザインの例

複数のウィンドウサイズと向きに適応可能な HTML5 を生成する Adobe Experience Manager（AEM）アプリケーションを開発します。例えば、次のようなビューポートの幅の範囲が、様々なデバイスタイプと向きに対応します。

  • 幅 480 ピクセル以下（スマートフォン、縦置き）
  • 幅 767 ピクセル以下（スマートフォン、横置き）
  • 幅 768～979 ピクセル（タブレット、縦置き）
  • 幅 980 ～ 1,199 ピクセル（タブレット、横置き）
  • 幅 1,200 ピクセル以上（デスクトップ）

レスポンシブデザインの動作の実装について詳しくは、次のトピックを参照してください。

デザインの際には、エミュレーター ​を使用してページを様々な画面サイズでプレビューします。

開発の前に

Web ページをサポートする AEM アプリケーションを開発する前に、デザインについていくつかの決定を行う必要があります。例えば、次の情報が必要になります。

  • ターゲットとするデバイス
  • ターゲットの表示域サイズ
  • ターゲットの表示域サイズごとのページレイアウト

アプリケーション構造

次のような一般的な AEM アプリケーション構造により、すべてのレスポンシブデザイン実装をサポートできます。

  • ページコンポーネントは /apps/<application_name>/components の下にあります。
  • テンプレートは /apps/<application_name>/templates の下にあります。

メディアクエリの使用

メディアクエリによって、ページレンダリング用の CSS スタイルを選択的に使用できます。AEM 開発ツールおよび機能を使用すれば、アプリケーションでメディアクエリを効果的かつ効率的に実装できます。

W3C グループが、この CSS3 機能と構文について示した、メディアクエリに関するレコメンデーションを提供しています。

CSS ファイルの作成

CSS ファイルでは、ターゲットとしているデバイスのプロパティに基づいてメディアクエリを定義します。次の実装方法は、各メディアクエリのスタイルを管理するのに効果的です。

  • クライアントライブラリフォルダーを使用して、ページのレンダリング時に組み立てられる CSS を定義します。
  • 各メディアクエリおよび関連するスタイルを、それぞれ個別の CSS ファイルで定義します。メディアクエリのデバイスの特徴を表したファイル名を使用すると便利です。
  • すべてのデバイスに共通するスタイルを、個別の 1 つの CSS ファイルで定義します。
  • クライアントライブラリフォルダーの css.txt ファイルで、組み立てられた CSS ファイル内で必要とされる順に CSS ファイルを並べます。

WKND チュートリアルではこの実装方法を使用して、サイトデザインのスタイルを定義しています。WKND で使用される CSS ファイルは、/apps/wknd/clientlibs/clientlib-grid/less/grid.less にあります。

AEM ページでのメディアクエリの使用

WKND サンプルプロジェクトと AEM Project アーキタイプは、ページポリシーを介した clientlibs を含むページコアコンポーネントを使用します。

独自のページコンポーネントがページコアコンポーネントに基づいていない場合は、クライアントライブラリフォルダーをその HTL または JSP スクリプトに含めることもできます。これにより、レスポンシブグリッドが機能するために必要なメディアクエリを含む CSS ファイルが生成され、参照されます。