モバイルアプリでは、記事ファイルや画像のサイズはパフォーマンスに影響を及ぼします。なるべくサイズの大きい記事ファイルの使用は避け、画像サイズと表示品質の適切なバランスを取ることをお勧めします。

画像の最適化ビデオ

画像の最適化ビデオ
このビデオでは、AEM Mobile アプリのパフォーマンスを改善する 4 つの方法について説明します。(2017 年 1 月録画)

コレクションの背景の画像の最適化

主要なターゲットデバイスのサイズで背景の画像を作成し(縦置きの iPad アプリの場合は 1536x2048 の JPG 画像など)、JPG 画像の画質レベルを中に設定することをお勧めします。

背景の画像は画面領域に合わせて中央配置でサイズ調整されるので、背景の画像のサイズがデバイスのサイズに合わない場合は、画像の端が欠けて表示されます。

背景の画像には、JPG または PNG 形式を使用できます。ほとんどの場合、JPG は小さい画像ファイルで高い画質を得ることができます。 

ただし、次のような場合は JPG ではなく PNG を使用することを検討してください。

  • 画像に透明部分が含まれている場合(背景色を透かして見せる場合など)。
  • 画像に小さいカラーパレットが含まれている場合。通常、PNG 画像は JPG 画像に比べて圧縮に優れています。
  • 画像にテキストまたはベクトルオブジェクトが含まれている場合。通常、PNG 画像は JPG 画像に比べて鮮明に表示されます。

 

サイズと画質の適切な組み合わせを見つけてください。例えば、標準の背景の画像は、5 MB ではなく 200 KB 程度にする必要があります。

背景の画像が指定されているブラウズページ

カードの画像およびバナーの最適化

カードの画像表示領域の最大サイズに基づいてカードとバナーの画像を作成し、画質レベルを中に調整することをお勧めします。サイズと画質の適切な組み合わせを見つけてください。

アドビのテストでは、大きいサイズの JPG 画像を低い画質設定で使用すると、モバイルアプリの画質バランスに最も適したサイズになりました。透明部分またはテキストを含む画像の場合は、PNG 画像を使用してください。

カードの画像は、カードで使用される際に中央配置でサイズ調整およびトリミングされます。そのため、画像がデザイン時の意図とは異なるものになる可能性があります。画像の中央部分に目立った特徴のあるアートワークをデザインしてください。カードのサイズやカードの画像の縦横比を変更した場合はすべて、カード上での画像の表示のされ方に影響します。

全幅のカードが使用されているブラウズページ

記事と動的バナーでの HTML コンテンツの使用に関するガイドライン

HTML 記事に含める画像ファイルのサイズには注意が必要です。大きい画像は Web ブラウザーでは正しく表示されますが、モバイルアプリでは記事のダウンロード速度に影響を及ぼします。画像は圧縮してください。ターゲットデバイス上で画像が鮮明に表示される適切な圧縮設定を見つけてください。

AEM Mobile Article Packager を使用して HTML 記事または動的バナーを作成する場合は、HTML ファイルのフォルダーを Packager にドラッグ&ドロップすると、アセットが使用されていない場合でも、結果となる記事ファイルにはそのフォルダー内のすべてのファイルが追加されることに注意してください。記事ファイルを生成する前に、HTML ファイルが合理化されていることを確認する必要があります。例えば、同じ画像の複数のインスタンス(PSD、JPG、PNG の画像など)を追加する場合は、HTML で使用されない画像は必ず削除するようにしてください。

コンテンツ管理システム(CMS)を使用して記事ファイルを作成する場合は、記事ファイルに大きい画像または使用されていないアセットが含まれていないことを確認してください。

詳しくは、AEM Mobile 用の HTML 記事の作成を参照してください。

InDesign ベースの記事で使用される画像

埋め込みのビデオファイルのサイズを変更または最適化するか、埋め込む代わりにビデオをストリーミング再生することを検討します。

InDesign を使用して固定レイアウトの記事を作成する場合は、記事の書き出し時にすべての非インタラクティブアセットが自動的にリサンプリングされるため、InDesign レイアウトでは大きい画像の使用について特に気にする必要はありません。

インタラクティブオーバーレイの場合は、リサンプリングされないオーバーレイとリサンプリングされるオーバーレイの違いを理解することが重要です。

  • リサンプリングされるオーバーレイ(スライドショー、ボタン、スクロール可能フレーム)は、非インタラクティブコンテンツと同様に圧縮されます。
  • リサンプリングされないオーバーレイは、記事の書き出し時に圧縮されません。作成時に使用したサイズでそのまま書き出されます。リサンプリングされないオーバーレイには、ビデオおよびオーディオファイル、画像シーケンス、パンとズーム画像、オーディオコントローラーファイルが含まれます。リサンプリングされないオーバーレイでは、ファイルのサイズと品質に注意する必要があります。

詳しくは、インタラクティブオーバーレイの概要を参照してください。

HTML 記事でのフォントの共有

すべての HTML 記事で同じフォントセットを繰り返し読み込む代わりに、オンデマンドサービスポータルを使用して、アプリに含めるフォントを指定できます。その後、使用するフォントのリストをコピーするオプションをクリックし、CSS または HTML ファイルにこのリストを含めることができます。共有フォントを参照することで、アプリへの HTML 記事のダウンロード時間を短縮できます。次の記事を参照してください。

AEM Mobile アプリのカスタマイズ:カスタムフォントの使用を参照してください。

AEM Mobile 用の HTML 記事の作成:HTML 記事用の共有フォントの使用

HTML 記事でのアセットの共有

コンテンツ管理システム(CMS)を使用して AEM Mobile 用の記事を記述する場合は、Shared Content API を使って、複数の記事間で共有されるコンテンツをバンドルできます。画像、JavaScript、CSS ファイルの共有は、アプリのパフォーマンスが向上し、一貫性を保つことができる優れた方法です。On-Demand Services API を使って共有コンテンツを利用するを参照してください。

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

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