モバイルデバイス用にeコマースWebサイトを最適化する方法

eコマースウェブサイトを運営している場合、Googleで競合他社より上位にランク付けすることが、売り上げを伸ばすための鍵であることをご存知でしょう。

ただし、非常に便利な検索エンジン最適化の秘訣がない場合は、競合他社よりも上位にランクインする可能性は低くなります。

そして、それらの検索エンジン最適化の秘訣の1つは、ユーザーの行動が向かう方向を常に把握していることです。

2014年、comScoreのレポートによると、モバイルトラフィックがデスクトップからのトラフィックを上回っています。 2015年、Googleは、モバイル検索がデスクトップに勝利したことを公式に宣言しました。

ただし、トラフィックはeコマースサイトの目標到達プロセスの最初の段階にすぎません。

肉体的および精神的な摩擦が大きいため、小さな画面では変換はほとんど発生しませんが、現在、すべての電子メールの開封の半分以上が小さな画面で発生しています。

あなたのeコマースサイトへの訪問者は、マルチスクリーンアプローチを取り、モバイルでのみあなたの製品を閲覧するかもしれません。そして、後でデスクトップで購入を完了する可能性があります。

そのため、モバイルは補足的な露出源としてのみ見られています。商取引媒体ではありません。私は正しいですか?

いいえ。

モバイルは、主要な購入媒体として転換点に達しています。

モバイルは、デスクトップやタブレットと同じクリック数を受け取ります。モバイルテクノロジーの向上と、ユーザーがスマートフォンを使い慣れていることにより、モバイルトランザクションが大幅に増加しています。

ニール・パテルとの協議
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください

SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する

収益のギャップは縮まりつつあります。

モバイルの平均注文額(AOV)は、前年比で15%増加しています(デスクトップの場合は13%)。モバイルは、電子メール注文の30%、電子メール主導の収益の25%を占めています。

image19

eコマースウェブサイトにアクセスする顧客のために優れたモバイルエクスペリエンスを作成することがこれまで以上に重要になっています。理由は次のとおりです。

モバイルユーザーの53%は、ウェブサイトが3秒以内に読み込まれない場合、ウェブサイトを放棄します。
モバイルメディアの消費活動は、ラップトップやその他のメディアよりも優れています。
image23

悪いニュースは、モバイル小売Webサイトがまだユーザーの期待に応えていないことです。コンバージョンを悩ませているさまざまな問題があります。 eConsultancyが実施したテストの結果を15のWebサイトで確認してください。

image03

心配しないでください。モバイルゲームに追いつくことができます。

どうして?

開始するには:この投稿を読んでください。

この記事では、より多くの売り上げを達成するのに役立つモバイルeコマースの最適化手法をまとめました。

パーソナライズ:ショッピングと配送で地元に行く時が来ました
モバイルユーザーは地元のお店を探していることがよくあります。デロイトによると、スマートフォンを所有している消費者の58%は、すでに店舗関連の買い物にスマートフォンを使用しています。

そのためには、ユーザーにローカル情報を提供する必要があります。

また、モバイルでは、充実した個人情報に簡単にアクセスして、ユーザーの行動を理解できます。

GPSを介して顧客の位置にアクセスする許可を求め、その情報を利用してパーソナライズされたオファーを作成できます。

image21
また、位置情報を取得したら、ユーザーの地域に基づいて、配送期間やその他の情報をユーザーに直接提示できます。ここにいくつかの例があります。

ニューヨークへの推定2〜3日の発送時間。
近くの実店舗。
image18

また、モバイル買い物客の75%がモバイルクーポンを使用しています。実際、50%の人がアプリをダウンロードして割引を受けています。つまり、eコマースサイトに誘導するために、パーソナライズされたモバイルクーポンを顧客に提供する必要があります。

ユーザーの天気、時間、場所に基づいてプッシュ通知を送信できます(可能であれば、ユーザーの過去の行動とメッセージを重ねてみてください)。あなたの創造的なジュースを流すための2つの例を共有しましょう。

1. QuirkyとGEが協力して、モバイル制御のエアコンを作成しました。そして、彼らは毎日電子メールとテキストメッセージ(気象警報システム、ポンチョに基づく)を通して天気予報を送りました。

それで、彼らはいつエアコンを買うために宣伝メッセージを送ったのですか?

気温が75度を超えたときのみ。

それらの電子メールの60%とテキストメッセージのほぼ100%が開かれました。

2.ニューヨークのアイスクリーム店VanLeeuwenは、PayPalを介したモバイル決済を展開しました。

このアプリは、ジオロケーションを使用して、近くのオファーや売り上げを顧客に表示します。 Van Leeuwenは、支払いアプリからの収益が5%増加しました。

image27

ユーザーをさらにセグメント化し、新しいユーザーにウェルカムクーポンを提供できます。または、ロイヤルティループをトリガーする特別割引でリピーターを驚かせます。

膨大な数の更新によって顧客がオフになる可能性は常にあります。したがって、ユーザーが受け取りたい情報を管理するオプションをユーザーに提供することも検討する必要があります。

image32

eコマースサイトをモバイル向けに最適化し、非常に高速な読み込み速度を確保します

読み込み速度が遅いと、ユーザーエクスペリエンスが低下します。

 

ndはeコマースのウェブサイトに毎年数百万ドルの費用がかかります。

image33

モバイルでは、インターネット接続が遅くなり、ユーザーはより焦ります。ユーザーエクスペリエンスを向上させ、ユーザーのフラストレーションを軽減するには、eコマースサイトがすばやく読み込まれるようにする必要があります。また、コンテンツが関連性があり、読みやすいことを確認する必要があります(Googleでは基本フォントサイズを16 CSSピクセルにすることをお勧めします)。

Googleのモバイルフレンドリーなテストツールから始めるのがよいでしょう。

Mobiletest.meなどのエミュレートツールを使用することもできます。これは、eコマースWebサイトがさまざまなデバイスでどのように表示されるかを複製します。

image25

サイトのURLを入力したら、[移動]ボタンをクリックします。

image28

ウェブサイトのエミュレートされたバージョンを取得します。

image08

モバイルページを最適化するために覚えておく必要のあるその他の重要なポイントは次のとおりです。

1.ページから不要な単語をすべて削除する– Search Engine Landは、モバイル検索者がクエリに非常に具体的であることを発見しました。したがって、コンテンツは、購入サイクルの現在の段階に基づいて、ユーザーに最も関連性の高い情報のみを提供する必要があります。

image11

ユーザーの作業メモリが限られているため、モバイルで無関係な情報を提供する余裕はありません。あなたの見出しは短くてパンチのあるものでなければなりません。あなたが彼らへの利益を明確に述べた場合にのみ、あなたは読者の注意を引くことができます。

ロングフォームを使用する場合は、アコーディオンを使用して、コンテンツを顧客に一目で確認できるようにすることを検討してください。

image00

2.読み込み時間を短縮するためにHTMLlocalStorage仕様を使用する–ブラウザキャッシュとCDNは、モバイルでの読み込み時間を短縮するためにはうまく機能しません。

より良い解決策は、HTMLlocalStorage仕様または自動化されたモバイルアクセラレーションソリューションを使用することです。

また、画像はモバイル画面に適した適切なサイズと解像度である必要があります。ページ幅に基づいてアップロードされた画像を編集するには、Pixlrなどのツールを使用します。

WordPressを使用している場合は、WPSmushなどのプラグインを使用して、画像の品質を犠牲にすることなく画像を圧縮することもできます。

最後に、モバイルeコマースサイトを改善するための実用的なアドバイスを提供できるように、PatrickSextonのツールを紹介します。

varvy.com/mobileにアクセスし、Webサイトのアドレスを入力して、緑色の[テスト]ボタンを押します。

image13

これが私が得た結果です。

image06

また、下にスクロールすると、ウェブサイトを修正するための推奨事項が表示されます。

image29

3.ポップアップとサイドバーはありません–これらはどちらも無関係であり、ユーザーエクスペリエンスを妨げます。

モバイルデバイスでポップアップを閉じるのは困難です。

image15

また、サイドバーは小さな画面では気が散り、扱いにくいものです。

それで、選択肢は何ですか?

ツールがモバイルでポップアップを無効にするオプションを提供している場合は、すばらしいです。それ以外の場合は、コンテンツ内からポップアップをトリガーするリンクを使用できます。

image12

サイドバーを非表示にするコードは次のとおりです。このコードを追加するには、WordPressの[外観]>[エディタ]からウェブサイトのCSSファイルにアクセスする必要があります。

image05

重要な要素を折りたたんでください。また、CTAボタンは太字で具体的である必要があります。
デスクトップでは、顧客の反対意見に対処するのに十分なスペースがあります。ただし、CTAを上回っておくことをお勧めします。

モバイルでは、折り目を尊重することがさらに重要です。

ユーザーにカートを放棄してもらいたいですか?

初めての印象を悪くし、購入ボタンを折り目の下に隠します(落胆させるアクション)。

モバイルeコマースWebサイトが使用するソリューションの1つは、画面の上部(右隅)に買い物かごを追加することです。カートに追加されたアイテムの数と、ユーザーがチェックアウトするための簡単な経路が表示されます。

image22

また、必要に応じてチェックアウトするオプションをユーザーに提供するポップアップを起動することもできます。または、必要に応じて買い物を続けることもできます。

image30

私が言ったように、モバイル検索者は彼らが達成したいことを非常に明確にしていることがよくあります。彼らはおそらくすでにラップトップ/デスクトップであなたの製品の説明を読んでチェックアウトしています。

今、彼らがとる行動の数を減らすことによって、彼らにとって転換経路を摩擦のないものにするのはあなたの義務です。

そのため、「クイック購入」ボタンをテストして、チェックアウトするクリック数を減らします。

image01

検索結果ページから「バスケットに追加」オプションを提供することもできます。

image04

あなたが折り畳みの上に含めたいと思うかもしれない重要な要素はあなたのロゴと製品の評価です。あなたのロゴはあなたのブランドアイデンティティを確立し、レビュー/推薦状はあなたの価値の証拠であるため、見込み客への信頼を築くのに役立ちます。

最も重要な要素に優先順位を付けるための大きな比率は70/30です。最も重要な要素(ユーザーに最も関連性のある要素)の70%を上に置いておきます。

次はあなたのCTAです。親指にやさしく(サイズが大きい)、できれば周囲とは対照的である必要があります。 GrouponとeBayが「今すぐ購入」ボタンと「カートに追加」ボタンにどのように注目しているかを見てください。

image31

注:モバイルeコマースサイトでCTAのコピーを巧みに利用しようとしないでください。緊急性を強制し、「今すぐ購入」などのユーザーからのアクションを促進する必要がありますo

 

r「ウィッシュリストに追加」。

不要なフォームフィールドをすべて削除し、他の4つのヒントに従うことで、モバイルフォームの操作を簡素化します…
モバイルでも、PayPalはユーザーから11ページのスクロールを必要とします。

image09

この面倒なタイピングとタップのタスクを実行するよりも簡単なことを知っていますか?

あなたのウェブサイトを放棄します。

覚えておいてください:ユーザーエクスペリエンスは非常に重要です。

そのため、ユーザーに情報を要求するフィールドの数を制限する必要があります。この数を最も重要なフィールドに絞り込みます。

しかし、フォームを1つのまとまりのあるページにまとめることができない場合はどうでしょうか。

次に、ユーザーはすべてのフィールドに個別に集中します(全体像を見失います)。

したがって、すべてのフォームラベルは、コンテキストなしで簡単に理解できる必要があります。

image17

BaymardのJamieAppleseedは、良い例でそれを示しています。 「請求情報」と一緒に配置されている場合でも、フォームフィールドのラベルを「電話」にしないでください。代わりに、「Billing Phone」を読んで、コンテキストに依存しないようにする必要があります。

ここでは、モバイルフレンドリーなフォームの相互作用を確保するための4つのヒントを紹介します。

1.名前と住所は、オートコレクトに置き換えられる可能性が高くなります。したがって、次のコードを使用して、必要なフィールドで無効にします–

<input type =” text” autocorrect =” off” />

2.フォームフィールド間の不要なスペースには、ユーザーがスクロールするための意識的な意思決定が必要です。親指と指が大きいほど、より多くのスペースが必要になる場合があります。 ¼インチのスペースから始めて、テストして適切なバランスを見つけてください。

3.親指で手の届きやすい領域にフォームフィールドを配置します。

image02

AmazonがCTAボタンを簡単にアクセスできるゾーンに配置する方法を見てください。

image16

4.キーボードは、さまざまな入力フィールドで必要な情報に適応する必要があります。以下の例では、YPlanはクレジットカード情報を入力するための数字キーパッドに変わります。

image24

ウェブサイトのナビゲーションをスムーズにし、ゲストのチェックアウトオプションを提供します
eコマースサイトのモバイルナビゲーションでは、商品カテゴリやチェックアウトなどの重要なリンクのみが不動産を占有する必要があります。他のすべての重要でないリンクは、メニューバーの下で折りたたむ必要があります。


Best Buyがナビゲーションをデスクトップとモバイルでどのように異なるかを見てください(顧客データに基づいてリンクを優先しているに違いありません)。

image14

顧客が購入を決定すると、チェックアウトプロセスは退屈で退屈に感じる可能性があります。

顧客のやる気を維持するための優れた方法は、プログレスバーを表示することです。

image07

ユーザーに目立つように表示する必要がある次の重要なナビゲーション項目は、検索バーです。可能であれば、検索の提案、修正、オートコンプリートを提供して、面倒な入力からユーザーを保護します。

ユーザーからの以前の検索データは、最も関連性の高い提案を提供するための優れたステープルとして役立ちます。

image20

最後に、多くのeコマースWebサイトの所有者が苦しんでいる重要な誤謬について話したいと思います…

チェックアウト中にユーザーに新しいアカウントを作成するように強制します。これは、ユーザーが購入を完了するためのより高い労力に相当するため、良い習慣ではありません。

登録を余儀なくされた場合、ユーザーの23%がショッピングカートを放棄することをご存知ですか?

ユーザーエクスペリエンスをもう一度念頭に置いて、以下のBestBuyの例に沿って何かを試してみることをお勧めします。ユーザーは(チェックアウト時に)3つのクリック可能なヘッダーを取得し、さまざまな可能なパスの概要を示します。

image26

大手小売業者は、「登録」ボタンを削除した後、3億ドルの収益の増加を見ました。試してみる。

結論
eコマースサイトの閲覧からソーシャルメディアフィードのスクロールまで、垂直画面で費やされる時間は、水平画面で費やされる時間をすでに上回っています。ユーザーの親しみやすさと高度なテクノロジーにより、モバイルコンバージョンが増加しています。

image10

eコマースWebサイトの所有者は、eコマースサイトを最適化してこの機会を活用する必要があります。プロセスを5つの簡単な戦略に分解しました。

モバイルショッピング体験をパーソナライズします。
モバイルデバイス向けにWebサイトを高速化し、コンテンツがモバイル向けに最適化されていることを確認します。
70/30のトップヘビーなデザインを使用して、重要な要素に優先順位を付けます。そして、目立つ、説得力のある、明確なCTAボタンを使用します。
フォームの相互作用を摩擦のない状態に保ちます。
ゲストチェックアウトオプションと完璧なナビゲーションを提供します。
あなたがあなたのモバイルユーザーを満足させて、小さなスクリーンからより多くの売り上げを生み出すことができることを願っています。

コンバージョンの増加につながったモバイルでの最適化戦略をテストしましたか?