レイアウトテンプレートとデザインについて説明するビデオ(英語のみ)

レイアウトテンプレートとデザインについて説明するビデオ(英語のみ)
レイアウトテンプレートとカードを使用して、モバイルアプリのルック&フィールをデザインします。(8 分)
Adobe

レイアウト、カード、ブラウズページの概要

レイアウトテンプレートによって、ブラウズページでのコレクションの表示方法が決まります。コレクション内のアイテムは、ブラウズページのレイアウトにカードとして表示されます。レイアウトテンプレートを作成する場合は、次の操作をおこないます。

  • 列数、マージンと綴じしろの値、セルの形状などのレイアウトのプロパティを定義します。
  • カードを作成し、カードの外観を定義します。
  • メタデータに基づいてマッピングルールを設定し、カードに関連付けるコンテンツを決定します。

ブラウズページの外観は、レイアウトのデザイン、カードのデザインおよびコレクションのアイテムのメタデータの設定によって決まります。

ブラウズページの 3 列レイアウト
このブラウズページでは、3 列のレイアウトが使用されています。レイアウトには全幅、2x1、1x1 のカードが含まれ、それぞれバナー、記事、他のコレクションを表します。

カードは、ブラウズページでのコンテンツの外観を決定します。レイアウトの設定に応じて、様々なサイズのカード上でサムネール画像の表示を変更できます。例えば、3x1 のカードで表示していたサムネール画像を、メタデータの更新時に 1x1 のカードに変えることができます。

カードレイアウト
黄色の領域は、セルの縦横比が異なる 3 列レイアウト(左)と 5 列レイアウト(右)に表示された同じ 2x2 カードを表します。

次の点に注意してください。

  • レイアウトテンプレート内で、タブレット、スマートフォン、Web 用にそれぞれ異なるレイアウト(「レンディション」とも呼ばれます)を定義できます。
  • グリッド上の特定の位置へのカードの固定は、まだサポートされていません。
  • マッピングルールを使用したコンテンツの順序の決定は、まだサポートされていません。マッピングルールは、カードに適用されるコンテンツを決定します。

レイアウトテンプレートを使用したカードとレイアウトの作成

ブラウズページオーサリングツールは、カードとレイアウトを作成するための新しい方法です。ブラウズページをデザインする際、現時点では、新しいブラウズページオーサリングツールか、既存の「カード」タブおよび「レイアウト」タブを使用できます。

ブラウズページオーサリングツールを使用すると、レイアウトの作成、カードのデザイン、コンテンツへのカードのマッピングに同じインターフェイスを使用できます。作成プロセスでは、既存のコレクションを指定して表示しながら、ブラウズページの設定を調整することができます。ターゲットデバイスのサイズ変更やグリッドのオン/オフのほか、カードの領域をクリックしてテキストまたは画像領域の設定を編集することも可能です。また、読み込んだコレクション内のアイテムを並べ替えることもできます。

作成済みのレイアウトを読み込んで、既存のレイアウトの設定に基づいて新しいバージョンを作成できます。

レイアウトテンプレートを使用するには、リリース 2015.8(2015 年 12 月)以降を使用して構築したアプリが必要です。

 

  1. コレクションを作成し、コンテンツを追加します。

  2. オンデマンドポータル(https://aemmobile.adobe.com)で、「コンテンツとレイアウト」>「レイアウトテンプレート」をクリックします。

  3. 「作成」をクリックして最初からレイアウトテンプレートを定義します。

  4. レイアウトのプロパティを定義します。

    レイアウトのプロパティを定義

    ブラウズページレイアウトツールの右側でレイアウト名を指定し、列数やマージン/綴じしろの間隔などのレイアウトのプロパティを定義します。

    コレクションを読み込む

    「コレクションを読み込む」をクリックしてコレクションを読み込むと、おこなった変更がターゲットコンテンツにどのように影響するかを確認できます。レイアウトを保存すると、コレクションにそのレイアウトを適用できます。また、コレクション内のアイテムを並べ替えることもできます。コレクションに対するこれらの変更は、レイアウトテンプレートの保存時に保持されます。

    プレビューメニュー

    プレビューメニューを使用して、横置きまたは縦置きを選択します。ターゲットデバイスのサイズを選択します。レイアウトに変更を加える際は、プレビュー用に異なるデバイスサイズを選択して、すべてのターゲットデバイスでデザインが機能することを確認します。

  5. カードを作成します。

    カードを作成

    プラス記号をクリックしてカードを作成します。右端のパネルでカード名を指定し、設定を変更します。右端のパネルのオプションは、選択したカードの領域によって変わります。

    テキスト領域を編集するには、左側のカードのプロパティを展開して、画像やテキスト領域など、編集するアイテムを選択します。カードのメタデータを表示しないようにするには、メタデータの横の非表示アイコンをクリックします。

    中央のプレビュー領域内でクリックして、その領域の設定を編集することもできます。プレビュー領域の上部の設定を使用すると、ズームの変更、レイアウトやカードの表示、コンテンツの表示/非表示を試すことができます。

  6. カードのマッピングルールを定義します。

    カードのマッピングルールを定義

    「マッピング」をクリックし、選択したカードの横の「ルールを追加」をクリックします。

    マッピングのプロパティを定義します。例えば、高重要度のバナーのルールを設定することができます。マッピングルールを設定する際、コレクション内のどのコンテンツがそのカードに割り当てられているかをプレビューできます。

    コレクション内のアイテムをドラッグし、順序を変更します。レイアウトテンプレートを保存すると、これらの変更が適用されます。

  7. (オプション)追加のレイアウト(「レンディション」と呼ばれます)を作成し、後述の方法で、タブレット、スマートフォン、Web 用にそれぞれ異なる外観の設定を定義します。

  8. レイアウトテンプレートを保存して閉じます。

    レイアウトテンプレートを保存すると、レイアウトがそのコレクションに割り当てられてない場合は、読み込んだコレクションにレイアウトテンプレートを適用することを促すメッセージが表示されます。

  9. レイアウトテンプレートをコレクションに割り当てます。

    レイアウトテンプレートを編集するときか、コレクションのプロパティを編集するときに、レイアウトテンプレートをコレクションに割り当てることができます。

    レイアウトをコレクションに割り当て

レイアウトの設定

レイアウトは、コレクションのブラウズページの外観を決めるのに役立ちます。

スマートフォンとタブレットで異なるレイアウトを使用する場合は、後述のように、レイアウトテンプレート内で複数のレイアウト(「レイアウトレンディション」と呼ばれます)を定義します。

以下のレイアウト設定を指定します。

セルの縦横比

このオプションは、セルの形状を変更するために使用します。表現形式は「幅:高さ」の比です。例えば、1:1 は正方形のセル、4:3 は高さより幅の方が大きいセル、3:4 は幅より高さの方が大きいセルです。3.5 のような正の値を指定すると、3.5:1 の縦横比が作成されます。

列数を指定します。カードにはレイアウトを超える列を含めることはできません。

綴じしろとマージンの単位

デバイス非依存ピクセル(DIP)とパーセンテージのどちらを使用して綴じしろとマージンの値を指定するかを示します。綴じしろはカードの間の間隔を決定します。マージンは、カードの外側のエッジとデバイスの表示領域の間の間隔を決定します。

レイアウトの背景色

ブラウズページの背景の色を指定します。この色はマージンと綴じしろに使用され、カードの透明度を通して表示できます。

背景の画像

このオプションを選択すると、コレクションの背景の画像に指定されている画像がブラウズページに表示されます。背景の画像とレイアウトの背景色の両方を指定した場合は、背景の画像が優先されます。背景の画像に透明部分が含まれている場合は、背景色が表示されます。背景の画像は全画面表示で、画面領域に合わせてサイズ調整されます。また、背景の画像は静的です。カードはコレクションの背景の前面でスクロールします。

カードの設定

カードを作成するときは、デザインの特性を指定し、範囲内のレイアウトセルの数を定義してから、他のプロパティを指定します。ただし、コンテンツとカードの関連付けは指定しません。この指定は、マッピングルールを設定するときにおこないます。

カードの実際の形状とサイズは、カードが適用されるレイアウトによって決まります。例えば、3x2 のカードを 3 列のレイアウトに適用した場合と、3x2 のカードを 12 列のレイアウトに適用した場合では、外観が大きく異なります。

設定を指定すると、読み込んだコレクションのコンテンツを使用して、プレビュー領域にカードの大体の外観が表示されます。

カードの設定を指定するときは、カード上の異なるアイテムが相互にやり取りする方法などの概念を理解することが重要です。

順序または階層

カードの背景がレイアウトの上位に配置されます。カードの画像領域は、カードの背景の上に配置されます。カードのテキスト領域は、カードの画像領域の上に配置されます。

カードの画像

コレクション、記事、バナーおよびコレクションの背景の画像は、カードの画像領域にちょうど収まるように、必要に応じて、中央配置、サイズ変更、トリミングされます。

カードは、コレクションのブラウズページに表示されます。カードのプロパティを使用すると、カードを半透明にして、コレクションの背景色または画像が見えるようにすることができます。カードの特定の部分を半透明にしてテキストの視認性を高めたり、カードの画像に色を付けることができますが、カードの画像は不透明です。

カードの形式

カード形式の「画像を左」または「画像を右」を指定するときは、カードを表示するレイアウトに、画像領域とテキスト領域のメタデータを並べて表示できる十分な余裕があることを確認してください。テキスト領域がトリミングされないようにするには、レイアウトのセルの縦横比の変更またはカードの幅の拡大が必要になる場合があります。

背景、境界線、マージン

カードには色および透明度を指定できます。カードの色は、カードの画像およびテキスト領域に対する背景の役割を果たします。

カードの背景は、画像、テキスト領域、境界線で覆われることがあります。画像とテキスト領域は、カードの背景の前面に配置されます。画像領域とテキスト領域のどちらにもマージンがあります。

マージンにより、画像領域とテキスト領域はカードの端から離れます。マージンを指定すると、カードの半透明の背景を見せることができます。画像の色と透明度の重ね合わせによって、画像の色合いが決まります。テキスト領域にもパディングがあり、ラベル(メタデータ)がテキスト領域の端から離れるように移動します。

また、テキスト領域にも透明度をサポートする色の背景があります。背景色を使用して、コントラストを加えたり、テキストの視認性を高めたりできます。

境界線は不透明であり、すべてのものがカードの端から離れます。カードのエッジを半透明にしてレイアウトの背景と相互作用するようにしたい場合は、画像領域またはテキスト領域のマージンを使用してください。カードの間に余白を設けるだけの場合は、レイアウトの綴じしろを使用します。

カードの設定オプション
カードの画像領域は、カードの背景の上に配置されます。カードのテキスト領域は、カードの画像領域の上に配置されます。

デバイス非依存ピクセル(DIP)

デバイス非依存ピクセル(DIP)は、アプリによって使用されるピクセルの抽象化であり、基盤のシステムによって物理ピクセルに変換されます。例えば、10 dip の境界線を指定すると、1024x768 SD iPad および 2048x1536 HD iPad で表示される相対サイズが同じになります。

メタデータフィールド

メタデータフィールドを定義するときは、1 つのテキストと最大 2 つのメタデータアイテムを、同じフィールドに含めることができます。例えば、メタデータフィールドを {{title}} by {{author}} と定義すると、カードの記事メタデータは「Fishing in Argentina by Jane Doe」などと表示されます。または、{{title}}{{author}} に異なるフィールドを作成し、メタデータがカードの異なる行に表示されるようにすることもできます。

カードにマッピングされるコンテンツ内に指定したフィールドのメタデータが含まれていない場合は、by {{author}} の「by」のような追加のテキストがフィールドに含まれていない限り、そのフィールドは無視されます。デフォルトでは、カードには 3 つのメタデータフィールドが含まれます。各メタデータフィールドの表示または非表示を切り替えるには、左端のペインの「目」のアイコンをクリックします。

{{Published Date (Default)}} メタデータアイテムを選択すると、デバイスのロケールと言語を使用して形式が決定されます。例えば、日付は、英語(米語)では MM/DD/YYYY、ドイツ語では DD/MM/YYYY で表示されます。

ポータルの「フォントとアプリのカスタマイズ」セクションを使用してアップロードしたカスタムフォントを選択できます。AEM Mobile アプリのカスタマイズ:カスタムフォントの使用を参照してください。

カードへのコンテンツのマッピング

マッピングルールを設定し、メタデータに基づいてコンテンツに適用されるカードを決定します。例えば、優先度が「高」に設定されている記事に大きいカードを適用するマッピングルールを作成し、優先度が「普通」に設定されている記事に小さいカードを適用するもう 1 つのマッピングルールを作成できます。

コンテンツの各部分について、マッピングルールが順番に評価されます。コンテンツのメタデータと一致した最初のマッピングルールが適用されます。コンテンツは指定されているすべてのルール設定を満たす必要があります。例えば、マッピングルールで種類がバナーに、重要度が高に設定されている場合、ルールが適用されるためにはコンテンツは高重要度のバナーである必要があります。

例えば、3x1 のカードと 1x1 のカードを作成したものとします。種類が記事で重要度が高の 1 番目のマッピングルールを作成します。1x1 カード用に、メタデータが指定されていない 2 番目のマッピングルールを作成します。この例では、3x1 のルールを 1x1 のルールより上に置く必要があります。そうしないと、高重要度の記事が 1x1 のカードに割り当てられます。

ルールの設定で使用されるメタデータは、大文字と小文字が区別されます。内部キーワード「blue」を含むルールを作成すると、内部キーワード「Blue」を含むコンテンツには適用されません。コンテンツに複数のキーワードが含まれる場合、その設定に従うためにはマッピングルールはただ 1 つのキーワードと一致する必要があります。

カードのマッピングではブラウズページ上でのコンテンツの順序は決まらないことに注意してください。カードにマッピングされるコンテンツだけが決定されます。

ルールの有効使用回数

「ルールの有効使用回数」オプションを使用すると、条件に一致する指定した数のアイテムにのみカードを適用できます。例えば、コレクション内の最初のアイテムにのみワイドカードを適用するマッピングルールを作成することができます。ルールの編集時に、ルールの有効使用回数/時々を選択し、このルールを適用するアイテムの数を指定します。

この例のルールでは、コレクション内の最初のアイテムにのみ大きいカードが適用されます。

要素のマッピング

「要素のマッピング」オプションを使用すると、条件に一致するカードの n 番目ごとにカードを適用できます。例えば、1 つおきのカードを作成する場合は、ルールに一致する最初のアイテムから 2 番目ごとのカードにルールを適用するカードを作成します。この例では、2 番目のアイテムから 1 つおきのアイテムが、条件に一致する次のルールに従ってフォーマットされます。

このルールでは 1 つおきのアイテムにカードが適用されます。条件を満たす次のルールは、それ以外の 1 つおきのアイテムに適用されます。

スマートフォンおよびタブレットのレイアウトレンディション

 

レイアウトレンディションを使用すると、柔軟なデザインが可能になり、タブレット、スマートフォン、デスクトップ Web Viewer で同じコレクションに対して異なる外観を定義できます。この新しい機能によって、サポートされるすべてのプラットフォームとデバイスでデザインコントロールを維持しながら同じコンテンツを提供できるようになりました。レイアウトテンプレートの作成時に、タブレット、スマートフォン、Web 用にそれぞれ異なるレイアウトやカードの設定を定義できます。その後、各ターゲットデバイスのレンディションの設定で、デバイスに応じてブラウズページの外観を指定できます。

レイアウトレンディションは最上位コレクションが 1 つのプロジェクトで特に便利ですが、最上位コレクションが 2 つあるプロジェクトで、スマートフォンとタブレットの両方に同じコレクションを使用する場合にも有用です。

次の例では、レイアウトテンプレート内のカードにタブレットとスマートフォンで異なる外観が設定されています。

レイアウトテンプレートを作成すると、最初にタブレットのレンディションのみが作成されます。これはデフォルトのレンディションで、スマートフォンまたは Web の新しいレイアウトが追加されない限り、タブレット、スマートフォン および Web に適用されます。スマートフォンまたは Web 用のレイアウト(「レンディション」とも呼ばれます)を追加すると、デフォルトのタブレットのレンディションから新しいレンディションに設定が引き継がれます。それ以降は、カードまたはレイアウトの設定に変更を加えると、そのレンディションにのみ変更が適用されます(カードマッピングルールはすべてのレンディションに適用されます)。

注意:

プロセスの初期段階でレイアウトを作成したものの、作成が早すぎた場合は、そのレンディションを削除し、すべてのレンディションに適用する設定を変更してから、レンディションを再作成することができます。

  1. レイアウトテンプレートを作成します。カードを作成し、マッピングルールを適用します。すべてのターゲットデバイスに適用する設定を指定します。

    ベストプラクティスとして、タブレットのレイアウトから始めて、カードとマッピングルールを追加し、すべてのデバイスに適用するカードとレイアウトの設定を変更することをお勧めします。その後、スマートフォンのレイアウトを作成し、スマートフォンにのみ適用する設定を変更します(Web についても必要であればおこないます)。こうすることで、各レンディションに同じ設定が指定されることを回避できます。

  2. スマートフォンのレンディションを作成するには、スマートフォン/レイアウトを追加をクリックし、「レイアウトを作成」をクリックします。「スマートフォン」が選択されている状態で、スマートフォン専用のカードとレイアウトの設定を指定します。

  3. デスクトップ Web Viewer のレンディションを作成するには、Web/レイアウトを追加をクリックし、「レイアウトを作成」をクリックします。「Web」が選択されている状態で、デスクトップ Web Viewer 専用のカードとレイアウトの設定を指定します。

  4. レイアウトテンプレートを保存し、コレクションに適用します。結果をテストします。

    レイアウトレンディションを使用するには、リリース 2015.8(2015 年 12 月)以降を使用して構築したアプリが必要です。

レイアウトを削除するには、クリックしてレイアウトのプルダウンメニューを表示し、ごみ箱アイコンをクリックします。デフォルトのレイアウトを削除することはできません。

ターゲットプレビューのサイズを変更するには、デバイスメニューから別のサイズを選択します。

デフォルトのレイアウトを変更するには、クリックしてレイアウトのプルダウンメニューを表示し、「デフォルトにする」を選択します。デフォルトのレイアウトは、指定されていない種類のデバイスで使用されます。例えば、スマートフォンとタブレットのレイアウトのみを作成している場合、スマートフォンのレイアウトをデフォルトにすると、スマートフォンのレイアウトが Web に適用されます。

メニューを使用して、プレビューオプションの変更、デフォルトの設定、レイアウトの削除をおこないます。

カードの順序

一般に、コレクション内でのコンテンツの順序によって、レイアウトでのコンテンツの順序が決まります。ただし、カードの配置でエッジに沿ったレイアウトにギャップがある場合、順序で下位にある小さいカードによってエッジのギャップが埋められる場合があるため、コンテンツの順序が変わる可能性があります。例えば、3 列グリッドの最初の記事が 2x1 のカードで、2 番目のアイテムが 3x1 のカードにマッピングし、3 番目のアイテムが 1x1 のカードにマッピングしているものとします。この場合、1x1 のカードは 2 番目のアイテムの上にある先頭行のギャップに表示されます。

カードの順序の設定
3 番目のアイテムが 2 番目のアイテムの前に移動して隙間を埋める

カードとレイアウトの削除

レイアウトまたはレイアウトテンプレートを削除するには、まずコレクションからレイアウトへの参照をすべて削除する必要があります。具体的には、コレクションを編集して、別のレイアウトを割り当てます。別のレイアウトをコレクションに適用したら、そのコレクションが公開済みの場合は再公開します。その後、レイアウトまたはレイアウトテンプレートの公開を取り消して、削除します。

レイアウトテンプレートの一部に含まれていないカードを削除するには、まずカードへの参照をすべて削除する必要があります。具体的には、レイアウトを編集して、カードを参照しているすべてのマッピングルールを削除または編集します。レイアウトのマッピングルールを削除または編集したら、そのレイアウトが公開済みの場合は再公開します。その後、カードの公開を取り消して、削除します(カードがレイアウトテンプレートの一部に含まれている場合は、いつでも削除できます)。

デフォルトのカードやデフォルトのレイアウトを削除することはできません。

別のプロジェクトにレイアウトをコピーする

同じアカウントで、あるプロジェクトから別のプロジェクトへレイアウトテンプレートをコピーできます。移行先プロジェクトに同じ名前のレイアウトテンプレートが含まれている場合は、既存のレイアウトを上書きするか新しいレイアウトをコピーするかを指定できます。

  1. コピーするレイアウトテンプレートを選択し、「レイアウトを別のプロジェクトにコピー」を選択します。

  2. アカウントで利用可能なプロジェクトのリストで、レイアウトのコピー先となるプロジェクトを選択します。

  3. ターゲットプロジェクト内の名前が同一のレイアウトをコピーしたレイアウトに置き換えるには、「上書き (ファイルが存在する場合)」を選択します。

    このオプションを選択しない場合は、コピーしたレイアウトと同じ名前のレイアウトがターゲットプロジェクトにある場合にエラーメッセージが表示されます。

  4. ターゲットにコピー」をクリックします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー