モバイルデザインのベストプラクティスの確認
学習の目的
この単元を完了すると、次のことができるようになります。
- ベストプラクティスを考慮した、モバイルデザイン開発のアプローチを 2 つ挙げる。
- SFRA をモバイルデザインのベストプラクティスにマッピングする方法を説明する。
- モバイルの実装を計画することが重要な理由を説明する。
- レスポンシブデザインのベストプラクティスを 3 つ挙げる。
- モバイルユーザーインターフェースのベストプラクティスの重要性を説明する。
Mobile Design Best Practices (モバイル設計のベストプラクティス)
モバイルショッピングが爆発的に増えていることに疑問の余地はありません。これも、オンラインでのクレジットカードの利用に対する買い物客の不安が払拭されたことと、インテリジェントなモバイルデバイスが普及したことという 2 つの事実が重なったためです。実際、大半の買い物客が初めてオンラインブランドとやりとりするのはモバイルデバイスからです。
多くのマーチャントの主な目標は、高いコンバージョン率、つまり、ショッピング買い物カゴがその使命を果たして購入まで進むことです。このためには、モバイル重視のストアフロントデザインと、モバイルファーストのショッピング体験を推進する必要があります。つまり、ファンクショナルアーキテクトであるあなたには、一流のカスタマー体験を実現するために、確固たるモバイル戦略を使用するようチームを導くことが求められます。
ここでのベストプラクティスとはどのようなものなのでしょうか? そして、マーチャントの成功を実現させる適切な方法やテクノロジーを使用するモバイル実装を誘導するにはどうすればよいのでしょうか?
デザインのアプローチ
モバイルデザインには数通りの見方があります。では、デスクトップファーストの体験とモバイルファーストの体験を比較する一般的なアプローチから見ていきましょう。この一般的な見方から、主な開発アプローチが浮上します。
デスクトップ指向
大半のストアフロントは、そもそもデスクトップ指向として設計されています。オンライン販売が登場した頃はデスクトップが利用されていたためです。この結果、レスポンシブ、モバイル、アダプティブという 3 つの主な開発アプローチが生まれました。この 3 つのアプローチを理解すれば、マーチャントへの助言やチームへの指示がしやすくなります。
| デザイン | 利点 | 欠点 |
|
応答性 |
|
|
|
モバイル |
|
|
|
アダプティブ (アプリケーション) |
|
|
モバイルファースト
現在成長している市場はモバイルリテールで、市場の形勢を変えています。ここで注目されるのが、最小デバイスのデザインから始めて拡大していくモバイルファーストです。レスポンシブとアダプティブのどちらのアプローチも、このテクノロジー上に構築できます。デスクトップで買い物する場合はデスクトップ用の機能を使用し、スマートフォンやタブレットで買い物するときはモバイル機能を使用できます。根幹のコードが自動的に適切な機能セットに切り替わります。
モバイルストアフロントデザインのベストプラクティスは、レスポンシブまたはアダプティブの手法を使用するモバイルファーストです!
Commerce Cloud ストアフロントリファレンスアーキテクチャ (SFRA) は、基本的なモバイルファーストカートリッジを備え、そのうえにレスポンシブ、アダプティブ、LINK テクノロジーなど他のカートリッジを読み込めるため、このベストプラクティスに対応します。
レスポンシブデザイン
レスポンシブデザインを使用する実装では、他のベストプラクティスも検討する必要があります。まず、プロジェクトのドキュメントで、定義済みの画面サイズの各ブレークポイントで表示がどのように変わるのかを明確に定義する必要があります。
デザインにブレークポイントを指定
ブレークポイントとは、ストアフロントに定義したウィンドウサイズで、これを区切りにレスポンシブテンプレートが変更されます。一般的なブレークポイントは 1280px、1024px、768px、320px ですが、これだけではありません。各レスポンシブブレークポイントをデザインに組み込みます。スマートフォンの場合とタブレットの場合を検討します。
ページのウエイトの最少化
レスポンシブデザインでは、ブレークポイントごとに情報の表示が異なりますが、コンテンツはほぼ同じです。画像などのメディアも同様です。画像を Web 用に最適化し、できる限り軽量にして、ネットワーク経由ですぐに表示されるようにします。ご存知のとおり、モバイルブレークポイントで画像が表示されなくても、サーバーから要求されていることがあります。
インタラクションモデルの回避
デスクトップのインタラクションモデルがモバイルデバイスにきちんと変換されるとは限りません。そのため、ここで重要な点は、モバイルのブレークポイントではポップアップウィンドウ、モーダル、フロート表示の状態の使用を避けることです。
モバイルのユーザーインターフェース
買い物客の体験を常に最優先に考えます。モバイルで買い物することが多くなるにつれ、極めて便利な機能に気付く買い物客が増えてきます。そして、どのサイトでもこうした体験を期待するようになります。期待外れのサイトは見捨てられます。
Salesforce B2C Commerce のストアフロントの実装を手伝う場合、次のベストプラクティスに注意を払うと、モバイルでの買い物客の体験を向上させることができます。
- 購入までに必要なタップの回数を減らします。ワンタッチ注文手続きによって手作業によるデータ入力が不要になるため、イライラが解消され、買い物カゴの放棄も減少します。
- サードパーティアプリケーションによる最先端の暗号化とクラス最高の詐欺防止を利用して決算処理を強化します。自分のお金が安全に処理されると買い物客に認識してもらう必要があります。
- 買い物客のために複数の支払方法を用意します。買い物客が取引しやすくします。
- メディアのインタラクションを最適化します。すべての UI 要素についてデバイス固有の基準に従い、買い物客がそのデバイスに期待する体験を得られるようにします。
- タップする UI は指先で操作しやすいようにします。たとえば、ボタンを指でタップできる大きさにします。
- ナビゲーションはできるだけシンプルに。不要な手順は排除します。
- たとえば、ワンページ買い物カゴを使用して簡単に購入できるようにします。
- ソーシャルメディアに接続します。友人に話したくなるようなショッピング体験にするのです。
通常こうした点は設計者の仕事ではありますが、それでも買い物客の体験を向上させることの重要性を理解しておく必要があります。これらの対策が、コンバージョン率を高め、マーチャントに満足してもらううえで大きな役割を果たします。