モバイルのためのベストプラクティス

Cloudinary技術ブログ公式翻訳

#デザイン

#Cloudinary

クラスメソッド

2019.03.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

私たちは普段視覚の世界で生活しており、消費者からはメディアの豊富なWebコンテンツが求められているため、画像やビデオの読み込み速度はユーザーエクスペリエンスの重要な要素です。モバイルコンテンツに対する顧客満足度を向上させるには、デジタル資産の品質やフォーマット、サイズに重点を置く必要があります。 Cloudinaryを使用すると、モバイルのWebやアプリのパフォーマンスを向上させるだけでなく、SEO対策やカスタマーエクスペリエンスの向上など、シンプルに最適化を実現できます。

モバイル最適化とは？

モバイル最適化とは、特定のモバイル端末からWebサイトまたはアプリにアクセスするユーザーに対して、魅力的で合理化されたエクスペリエンスを設計することです。「レスポンシブデザイン」や「モバイルフレンドリー」と同じような意味で使用されることがありますが、最適化されたモバイルサイトやアプリは、画面サイズの調整だけでなく、ネットワーク条件、端末の種類を考慮して、特定のモバイルユーザーに対して総合的に意味のあるエクスペリエンスを提供します。ビジュアルコンテンツはデスクトップよりもモバイルではるかに多く使用されているため、メディアはモバイル最適化において最も重要な部分となります。

モバイル向けWebの最適化

モバイル向けWebサイトの最適化は、CloudinaryのURL変換機能と、画像と動画の両方に対応したビルトインのレスポンシブソリューションによって簡単に実現できます。

画像最適化

Cloudinaryを使用して画像を最適化する方法は次の通りです。

f_auto,q_autoパラメータをすべての画像URLに追加することで、見かけ上劣化させることなく、最も最適化された形式と品質をユーザーに提供します。詳しくは、このブログ投稿を参照してください。
以下の方法で、画像のサイズ変更またはレスポンシブソリューションを利用します。
- レイアウトサイズを設定していて、正確な幅または高さが決まっている場合は、画像のサイズを変更します。
- レスポンシブデザインを実装、つまり、アプリケーション環境に合わせてコンテンツのサイズや解像度、レイアウトを調整します。
  - w_auto,dpr_auto,c_limitパラメータを追加することで、CloudinaryのJavaScriptのレスポンシブソリューションを利用して画像サイズを変更します。また、Cloudinaryのライブラリをインポートして、画像タグにcld-responseクラスを含めます。詳しくは、このブログ投稿を参照してください。
  - あるいは、代わりにレスポンシブブレークポイントを使用します。 Cloudinaryは、<picture>タグまたはsrcsetに必要なURLを生成できます。詳しくは、このブログ投稿を参照してください。

明示的にサイズ変更と解像度調整をした場合、最終的な画像URLは次のようになります。

https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_500,dpr_2.0,c_limit/happy-pup.jpg

この画像では、これらの単純なURLパラメータを使用してファイルサイズを1.23 MBから126 KBに減らすことができました。

動画の最適化

サイズ、フォーマット、品質にも注目して、Cloudinaryで動画を最適化しましょう。

デザインに合わせて動画サイズを変更します。例えば、動画URLに w_800,c_limitパラメータを追加すると、元のサイズの方が小さい場合を除き、動画の幅が800ピクセルに変更されます。800の値をご利用の動画の最大幅に変更するだけです。

https://res.cloudinary.com/demo/video/upload/w_800,c_limit/dog.mp4

このリサイズパラメータを使用して、この動画サイズは9.1 MBから669 KBに縮小されました。

デフォルトでは、Cloudinaryで動画に非明示的に適用された変換（例えば、上述のサイズ変更など）にも、変換された動画が配信される際に、動画コーデック自動（vc_auto）設定が含まれます。 vc_autoは、対象のファイルの種類に対して、品質70（q_70）および一般的に使用されている映像および音声設定を適用します。そのため、追加のパラメータを指定せずに元の動画を手軽に表示させるには、URLにvc_autoを追加します。詳しくは、Cloudinaryのドキュメントを参照してください。

https://res.cloudinary.com/demo/video/upload/vc_auto/dog.mp4

vc_autoだけで、ファイルサイズは9.1 MBから821 KBに縮小しました。

さらに最適化するには、高度に最適化された動画コーデックをサポートするブラウザに向けて、H.265、VP9、およびH.264を切り替えるHTMLマークアップを追加します。例：

<video controls>
<source src="https://res.cloudinary.com/demo/video/upload/vc_h265,w_1280,c_limit/dog.mp4" type="video/mp4; codecs=hevc">
<source src="https://res.cloudinary.com/demo/video/upload/vc_vp9,w_1280,c_limit/dog.webm" type="video/webm; codecs=vp9">
<source src="https://res.cloudinary.com/demo/video/upload/vc_auto,w_1280,c_limit/dog.mp4" type="video/mp4"> 
</video>

このマルチコーデックの手法により、この9.1MBの動画はH.265 / MP4では489 KB、VP9 / WebPでは540 KB、H.264 / MP4では821 KBになりました。詳しくは、このブログ投稿を参照してください。

20秒を超える動画の場合は、ユーザーのネットワーク状況に合わせて適宜動画の品質を調整する、アダプティブビットレートストリーミングの利用を検討してください。

モバイルWebの最適化のまとめ

モバイルWeb用に画像を最適化するには、URLにf_auto,q_autoパラメータを追加し、Cloudinaryのレスポンシブソリューションを採用します。
モバイルWeb用に動画を最適化するには、vc_autoパラメータを追加します。さらに最適化するには、ブラウザがCloudinaryの自動トランスコーディング機能で最適なコーデックを選択できるように、HTMLマークアップを使用して異なるソースを指定します。さらに、w_800,c_limitパラメーターを使用して、800をご利用の動画の最大幅に設定し、動画をリサイズすることもできます。
より長い動画の場合は、アダプティブビットレートストリーミングを使用します。

iOSおよびAndroidアプリの最適化

CloudinaryのiOSおよびAndroid SDKは、シンプルかつ包括的な最適化および配信機能を提供し、ネイティブアプリとのシームレスな統合を可能にします。

CloudinaryのiOS SDKを使用して、ほんの数行の簡単なコードで、画像や動画をアップロード、操作、最適化、配信することができます。
CloudinaryのAndroid SDKは、MediaManagerクラスを特徴とし、すべてのメディア関連の操作を設定、処理するためのメソッドを提供します。

以下では、これら2つのSDKを使用してネイティブアプリの品質、フォーマット、メディアサイズを最適化する方法について説明します。

画像最適化

画像のリサイズや、レスポンシブアプリデザインの導入は、iOSとAndroidの両方で重要です。Cloudinaryのネイティブアプリ向けのレスポンシブソリューションは、メディアアセットの様々なバリエーションを作成する際の多くの複雑さを簡素化します。

Androidの場合：、Cloudinaryの圧縮アルゴリズムとGoogleの最適化された画像形式、WebPを使用して、軽い画像をユーザーに提供します。画像のURLにq_auto,f_webpパラメータを追加するか、SDKで変換を適用してAndroid画像を簡単に圧縮できます。

https://res.cloudinary.com/demo/image/upload/f_webp,q_auto/fat_cat.jpg

この画像では、ファイルサイズを445 KBから21 KBに縮小できました。

iOSの場合：、このプラットフォームはWebPをサポートしていないため、品質を最適化し、非可逆圧縮を適用します。つまり、q_auto,fl_lossyパラメーターを画像のURLに追加するか、SDKで変換を適用します。

https://res.cloudinary.com/demo/image/upload/q_auto,fl_lossy/fat_cat.jpg

最適化後、画像は445 KBから32 KBに縮小しました。

さらに、ユーザーが作成したコンテンツを扱う場合は、アップロードと配信にかかる時間を短縮するために画像の前処理を行います。

動画の最適化

次のように動画を最適化します。

ネイティブアプリの場合：上述の「モバイル向けWebの最適化」の説明のように、URLで明示的に新しい動画コーデックを対象とします。
iOS 11以降の場合：H.265のMP4がサポートされていることを活用し、f_mp4,vc_h265,w_1280,c_limitパラメータを使用して動画をリサイズします。1280の値は動画の最大幅に設定してください。

https://res.cloudinary.com/demo/video/upload/f_mp4,vc_h265,w_1280,c_limit/cat.mp4

この動画では、iOS最適化によりファイルサイズが3.6 MBから1.6 MBに縮小されました。

Android 4.4以降の場合：WebMで高度に最適化されたVP9動画コーデックを提供し、f_webm,vc_vp9,w_1280,c_limitパラメータを使用して動画をリサイズします。1280の値は動画の最大幅に設定してください。

https://res.cloudinary.com/demo/video/upload/f_webm,vc_vp9,w_1280,c_limit/cat.mp4

この動画では、ファイルサイズを3.6 MBから1.3 MBに縮小できました。

選択したメディアプレーヤーが、CloudinaryのVideo Playerのように新しい動画コーデックをサポートしていることを確認してください。古い端末の場合は、vc_auto,w_1280,c_limitパラメータをCloudinaryのURLに追加し、一般的に使用されるコーデック形式をデフォルト設定とします。1280の値は動画の最大幅に設定してください。

アプリの長い動画では、アダプティブビットレートストリーミングも適しています。 Android向けのExoPlayerはDASHストリーミングソリューションをサポートし、iOS向けのAVPlayerはHLSをサポートします。

iOS / Androidアプリの最適化のまとめ

iOSの場合：画像にq_auto,fl_lossyパラメータを追加し、iOS SDKのビルトインのレスポンシブソリューションを導入します。 CloudinaryのVideo Playerを使用し、vc_h265,f_mp4パラメータを追加して動画サイズを変更します。
Androidの場合：画像にq_auto,f_webpパラメータを追加し、Android SDKのビルトインのレスポンシブソリューションを導入します。 CloudinaryのVideo Playerを使用し、vc_vp9,f_webmパラメータを追加して動画サイズを変更します。
新しい動画コーデックをサポートしていない古い端末の場合は、vc_auto,w_1280,c_limitパラメータに代替フォーマットを追加します。1280の値は動画の最大幅に設定してください。
アプリでより長い動画を再生するには、アダプティブビットレートストリーミングを使用します。

まとめ

最適化された画像や動画を提供することは、Webコンテンツ配信では不可欠です。デジタルメディアはモバイル端末で使用されることが多いため、満足度の高いエンドユーザーエクスペリエンスのために、Webおよびモバイルアプリの開発者は、それらの全端末を考慮しながら、モバイルWebサイトのデザインやアプリの最適化、配信戦略などを行う必要があります。 Cloudinaryを使用して、レスポンシブで最適化された高速なモバイルエクスペリエンスを手間がかからず簡単に実現できます。まずはこちらから無料でサインアップして試してみてください！

オリジナル記事：Best Practices for the Mobile World (Lillian Hsueh - Cloudinary)