アプリの手法を決定する

アプリの起動時のユーザーエクスペリエンスはどうするか。ブラウズページのレベルの数はいくつにするか。アプリの方向は縦置きにするか横置きにするか、スマートフォンとタブレットで別々の方向を使用するか。ブラウズページの外観はどうするか。

異なる種類のアプリエクスペリエンスを作成できます。既存のアプリを見てアイデアを得ます。使用事例や例の一覧については、AEM Mobile のインスピレーションが得られるリソースを参照してください。

 

フローチャート

アプリのデザインに関するビデオ

Andrei Ganci と Martin Hecko による、Adobe MAX 2015 カンファレンスの次のセッションをご覧ください。

非常に優れたモバイルアプリエクスペリエンスの設計(英語)(1:15:32)

タブレット用とスマートフォン用に個別のデザインを使用するかどうか

プロジェクトを作成する場合は、1 つの最上位レベルのコレクションをスマートフォンとタブレットの両方で使用するか、または異なる最上位レベルのコレクションを使用するかを決定します。タブレットとスマートフォンで別個の最上位コレクションを使用する主な理由は、タブレットとスマートフォンに別個のコンテンツを追加することです。例えば、タブレット用のアプリには横向きの記事を追加し、スマートフォンには縦向きの記事を追加するような場合です。AEM Mobile のプロジェクトを作成するを参照してください。

タブレットとスマートフォンで同じコンテンツを使用し、別個のブラウズページのレイアウトを指定するには、スマートフォンおよびタブレット用に異なるレンディションでレイアウトテンプレートを作成します。詳しくは、カードとレイアウトの作成:レイアウトレンディションを参照してください。

スマートフォンおよびタブレットに異なるデザインまたは異なるコンテンツを使用するかどうかを決定する
スマートフォンおよびタブレットに異なるコンテンツを使用するかどうかを決定します。

アプリのコンテンツを作成する

アプリで使用する記事、バナー、コレクションを追加するには、オンデマンドポータルの「コンテンツとレイアウト」セクションを使用します。コンテンツやコレクションをプロジェクトに追加すると、異なるデザインのブラウズページを調べるのに便利です。

記事ファイルに使用する形式を決定します。例えば、リフロー可能な HTML 記事や、ソース InDesign ドキュメントに基づく固定レイアウトの記事を作成できます。詳しくは、AEM Mobile コンテンツのオーサリング方法を参照してください。

コレクションを作成するときに、ブラウズページ(レイアウトとカードを含みます)またはコンテンツビュー(コレクションの最初の記事を表示します)のどちらで開くかを決定する設定を選択します。

プロジェクトに記事を追加する
プロジェクトに記事を追加します。

「ホーム」コレクションを作成する

ユーザーがアプリを起動したときの最初のエクスペリエンスとなる、「ホーム」コレクションにするコレクションを指定します。ホームコレクションといっても特別なものではありません。最上位コレクションの最初のアイテムにする必要があるだけです。

ホームコレクションにアイテムを追加します。バナー、記事、他のコレクションの任意の組み合わせを追加できます。カードおよびレイアウトを作成するときに、これらのアイテムの外観を決定します。

ユーザーが左右にスワイプして最上位レベルのアイテム間を移動できるようにする場合は、「左右のスワイプによるコンテンツのナビゲートを有効にする」オプションを選択します。このオプションを選択しない場合、ユーザーは異なるコンテンツに移動するにはカードをタップするか、アプリメニューを使用する必要があります。

最上位レベルのコンテンツを決定する

プロジェクトを作成するときに、最上位レベルのコレクションをスマートフォンとタブレットで同じにするか変えるかを決定します。最上位コレクションをスマートフォンとタブレットの両方で同じにすると、「デフォルト」という名前のコレクションがポータルの「コレクション」セクションに表示されます。スマートフォンとタブレットで異なる最上位コレクションを使用すると、「デフォルトのスマートフォン」および「デフォルトのタブレット」という名前のコレクションが「コレクション」セクションに表示されます。

これらのコレクションを使用して、最上位レベルのコンテンツを決定します。この最上位レベルコレクションの最初のアイテムは、ホームコレクションにする必要があります。他のすべてのアイテムは、アプリメニューに表示されます。さらに、ホームコレクションで「左右のスワイプによるコンテンツのナビゲートを有効にする」オプションを選択すると、ホームコレクションから左右にスワイプして他の最上位レベルコレクションを循環移動できます。

詳しくは、AEM Mobile でのコレクションの管理を参照してください。

注意:

最上位レベルコレクションはブラウズページとしてアプリに表示されませんが、それでも製品 ID とコレクションの画像を指定する必要があります。

コレクションの管理
この例では、最上位レベルのコレクション(「デフォルトのタブレット」)の最初のアイテムは「ホーム」コレクションです。

アプリメニューの表示
アプリメニューには、(プロジェクト設定で指定した)ブランド画像、最上位コレクションに追加したアイテム、およびアカウントオプションが表示されます。

コンテンツのマップで項目をドラッグ&ドロップし、アプリケーションの構造を変更できます。

カードとレイアウトを作成する

コレクションのブラウズページの外観を決定するには、各コレクションにレイアウトを適用します。各レイアウトは、コンテンツを表すカード、バナー、記事または他のコレクションで構成されます。コレクションの種類ごとに異なるレイアウトを作成できます。

カードの作成について詳しくは、カードとレイアウトの作成を参照してください。

5 列レイアウトのブラウズページの例
5 列レイアウトのブラウズページの例

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

リーガルノーティス   |   プライバシーポリシー