9 つの簡単なステップで WooCommerce サイトをモバイル対応にする方法
公開: 2021-03-27WooCommerce サイトをモバイル画面に合わせるのは簡単です。 ただし、ほとんどの WooCommerce 所有者は、正しい方法でそれを行う方法を知りません. また、なぜそれがそれほど重要なのか理解していない人もたくさんいます。
WooCommerce は、すべてのオンライン ストアの 28.19% 以上を支えています。 上位 100 万の e コマース サイトの 22% が WooCommerce を使用しています。
ホスティング裁判所
人々の買い物の傾向は、過去 10 年間で変化しました。 スマートフォンを介したインターネットの使用は、彼らの行動を再形成します。 したがって、WooCommerce オンライン ストアをお持ちの場合は、サイトのデザインと機能をあらゆる種類の画面にうまく適合させる必要があります。
さて、私たちは助けるためにここにいます。 このブログは、モバイルで WooCommerce を開発するための究極のガイドになります。 始めましょう。
WooCommerce サイトをモバイル対応にするもの
スマートフォンやタブレットですぐに閲覧できるサイトです。 サイト全体が画面に収まり、右から左にスクロールする必要がなく、テキストと画像が動的にリフローおよびサイズ変更されます。
ブライアン・コール、ケイシー・プリンティング
デスクトップまたはラップトップの画面に加えて、スマートフォンまたはタブレットの画面で必要なすべての機能を備えたモバイルレスポンシブ Web サイトにアクセスできます。 ただし、この点に関しては、似たような用語がいくつかあります。 また、モバイル ファースト、モバイル フレンドリー、アダプティブ デザインなどの言葉も耳にするかもしれません。
これらの用語はすべて、モバイルでのウェブサイトの視認性を向上させるという同じ目標に向けられています。
ただし、モバイル アプリを作成して、すべてのモバイル ユーザーをそこに連れて行くことはできます。 また、アダプティブ デザインとは、さまざまなバージョンの Web サイトをあらゆる画面に合わせて開発することを意味します。 一方、サイトでモバイル ユーザー エクスペリエンスを開発する場合、このアプローチをモバイル フレンドリーと呼ぶことができます。
モバイルでの mCommerce の台頭と WooCommerce の重要性
昨年、全世界のスマートフォン ユーザー数は 35 億人に達すると予測されていました。 そして、2021 年には 38 億に達しようとしています。その数を比較すると、2017 年には 27 億でした。
高曲線は成長を続けており、減速の兆しはありません。 何十億もの人々がスマートフォンを使用しているため、明らかに mCommerce の台頭は最終的なものでした。 人々は、デスクトップやラップトップと比較して、これまで以上にモバイルから買い物をするのが好きです。
Business Insider は、2020 年末までに m コマースが 2,840 億ドルに達すると予測しています。 これは、米国の e コマース市場全体のほぼ 45% を占めています。 したがって、パンデミック後の時代は、人々の買い物行動に変化をもたらします。
上のグラフを見ると、小売の e コマースの売上高の割合が、昨年の 14.5% から 18.1% に増加することが容易に理解できます。 Insider Intelligence は、2024 年までに m コマースの量が 25.5% の複合年間成長率 (CAGR) に達し、e コマースの総売上高の 44% に達すると予測しています。
したがって、これらすべての統計とデータが意味することは 1 つだけです。
WooCommerce ウェブサイトを運営していて、すべてのモバイル ユーザーがオンライン ストアで簡単に買い物できるようにしたい場合、どのような方法が最適でしょうか? 彼らのためにモバイル対応のエクスペリエンスを開発する必要があります。
モバイル対応の WooCommerce サイトを開発する方法
- Google モバイル フレンドリー テストでクイック チェックを実行してみましょう
- 画像の最適化を開始
- リード生成ポップアップについて再考する
- モバイルフレンドリーな WordPress テーマの使用を開始する
- シンプルなメニューとサイト ナビゲーションを開発する
- モバイル最適化 WordPress プラグインに行く
- ページ速度を上げる
- サイトのデザインをシンプルに保つ
- 最も簡単なチェックアウト プロセスが必要です
1. Google モバイル フレンドリー テストでクイック チェックを実行してみましょう
まず、あなたの WooCommerce サイトが現在どの程度モバイルに対応しているかを調べます。 したがって、最も簡単な方法は、無料の Google モバイル フレンドリー テストを受けることです。 これはとても簡単です。
必要なことは、Google モバイル フレンドリー テスト ページにアクセスして、そこに URL を入力することです。 ウェブサイトがモバイル対応かどうかが表示されます。 青色は、準備ができていることを示します。 赤色が表示された場合は、適切な対策を講じる必要があります。 また、モバイル画面でサイトがどのように表示されるかのプレビューも表示されます。
そのため、Google は開発者向けに特別なモバイル フレンドリーなテスト API をリリースしています。 開発者は、この自動化ツールを使用して 2 つのことを達成できます。 彼らです -
- より多くのページをすばやくテスト
- サイトで最も重要なページを監視すれば、ブラウザー ツールを手動で切り替える必要はありません。
2. 画像の最適化を開始する
製品画像は、ビジネスの最大の成長要因になる可能性があります。 オンライン ショッパーの 75% 以上が、ショッピング前に商品写真に惹かれました。 したがって、この戦略は WooCommerce ストアと切り離すことができないはずです。
しかし、ここで非常に重要なことが 1 つあります。 画像はスペースを消費し続けますが、顧客にとっては良いことです。 その結果、画像が多すぎると、サーバーが大きくなり、読み込みに時間がかかります。 ページの読み込み速度が遅くなる可能性があります。
また、遅いサイトはモバイルで遅くなります。 また、高解像度の画像が小さな画面用に最適化されていない場合、顧客には画像の断片またはぼやけたバージョンしか表示されません。
この問題を解決する最善の方法は、画像最適化ツールを使用することです。 私たちのウェブサイトでは、非常にシンプルで強力なフォト オプティマイザ Tiny PNG を使用しています。
ただし、モバイル上の WooCommerce に画像の最適化を適用する方法は他にもたくさんあります。 自動画像オプティマイザー WordPress プラグインをインストールできます。 また、遅延読み込みの助けが得られる場合もあります。 訪問者が Web サイトにアクセスすると、この機能はユーザーのブラウザーに、必要になるまで画像を読み込まないように指示します。 これにより、ユーザーはより速いランディング ページを体験でき、画像の読み込みに適切な時間が得られます。
WordPress リポジトリには、信頼できる遅延読み込みプラグインがいくつかあります。
3. リード生成ポップアップについて再考する
ポップアップは世代をリードする実証済みの方法です。 そして、サインアップとニュースレターの変換を増やすために最も使用されているチャネルの 1 つかもしれません。 ただし、サイトの訪問者にアンケートを実施すると、気に入るかどうかにかかわらず、ほとんどの場合、次のように言われます。ポップアップは迷惑です。 それにもかかわらず、上位 10% の最もパフォーマンスの高いポップアップは、平均 9.28% のコンバージョンを達成しています。
したがって、ポップアップを使用する必要があります。 しかし、計画を立てて。 それらはまたあなたのサイトを重くするからです. したがって、モバイル画面では、ポップアップがユーザー エクスペリエンスを台無しにする可能性があり、最終的には直帰率が高くなります。
携帯電話を使用して Web サイトにアクセスしているときに、すでにそのことを経験しているかもしれません。 ポップアップがコンテンツを完全に見る方法をブロックすると、完全に混乱することがあるため、奇妙な動作をすることもあります。 たとえば、それらを削除しようとしましたが、削除しないか、削除するオプションが見つかりません。
そのため、WooCommerce サイトのポップアップの数が少ないとよいでしょう。 さらに、最小限のものを使用する必要があります。 また、サイトをよりモバイル対応にするために、ポップアップを削除して、ウェブページの下部にスティッキー フォームとして配置することもできます。
4. モバイルフレンドリーな WordPress テーマの使用を開始する
これは、WordPress の人気の高いポイントの 1 つです。 オープンであり、ウェブサイトを柔軟にするためにほとんど何でもできます。 したがって、WordPress で WooCommerce ストアを構築した場合、モバイル対応にするための多くのオプションがあります。
最善の方法の 1 つは、モバイル フレンドリーな WordPress テーマを選択することです。 オンライン ストアをデザインしているときに、他のものと比べてモバイルの見通しが優れている WordPress テーマを見つけることができます。
現在、WordPress には数多くのレスポンシブ テーマがあります。 それらでさえ、定期的に更新を公開していないか、そのデザインが欠けています。 そのため、現在の WordPress テーマがモバイル対応でない場合は、最初に最新の更新を確認してください。 それでもモバイルでの見栄えが悪い場合は、よりモバイルに適した軽量の WordPress テーマを使用する必要があります。
5. シンプルなメニューを開発して WooCommerce サイトをモバイル対応にする
電話画面では、複雑なメニューをナビゲートするのが少し難しいか、快適ではありません. たとえば、以下の 2 つの異なる Web サイトの外観を確認してください。
最初の画面はモバイル対応です。 ナビゲーション メニューが右上にあることがわかります。 訪問者がクリックしたときにのみ展開されます。 一方、2 番目の画面には、ブラウザーが表示できるほぼすべての要素が保持されます。 画面を消費するすべてのタブ、多くのコンテンツがランディング ページを埋め尽くすなど。
上の画像を見ればすぐわかります。 メニューは簡略化されています。 クリックするだけで、必要なすべてのページが表示されます。 ただし、WooCommerce ストアは自由に設計できます。 しかし、メニューとナビゲーションをシンプルに保つことで、サイトをモバイル フレンドリーなものに変えることができます。
6.モバイル最適化WordPressプラグインに行く
モバイル最適化プラグインは、オンライン ストアのモバイル対応を強化するのに役立ちます。 おそらくこれは、モバイル ユーザーのユーザー エクスペリエンスを向上させる最も簡単な方法の 1 つです。 さらに、前述の方法から実行できるすべてのアクションであるこのタイプのプラグインは、作業を簡単にするだけです.
すでにモバイル対応の WordPress テーマを使用している場合でも、直面する可能性のある問題がいくつかある可能性があります。 調整の問題、読み込みの遅さ、全体的な応答性の不一致があります。 これは、更新が複雑なプロセスであるためです。 場合によっては、WordPress テーマ用に設計したとおりに動作しないことがあり、それらの問題を修正するには時間がかかります.
したがって、WooCommerce ストアのモバイル対応外観のバックアップとして立つには、モバイル最適化プラグインをインストールして有効にすることができます。 さらに、これらのタイプのツールは、モバイルからのソーシャル共有を処理したり、モバイル ユーザーのやり取りを追跡したり、その他多くのことを行うことができます。
したがって、この点に関して多くのプラグインが見つかります。 一般的な名前には、Jetpack、WordPress Mobile Pack、AMP for WP、Responsive Mobile Menu などがあります。
7.モバイルユーザー向けにページ速度を上げる
速度は間違いなくランキング要因ですか? はい。
ジョン・ミューラー、グーグル
WooCommerce ストアのページ速度を上げるための措置を直接講じる必要があります。 平均して、読み込みに 3 秒以上かかると、モバイル ユーザーの 53% が Web サイトを離れました。 別の意見では、2 秒の遅延で直帰率が最大 87% 増加する可能性があります。
そのため、携帯電話を使用してウェブサイトにアクセスしている間、明らかに人々は急いでいます。 また、ページの速度が理想的な読み込み時間に対応していない場合は、できるだけ早く必要な手順を実行する必要があります.
オンライン ストアのページ速度の測定を開始するには、次のいずれか適切なツールを使用できます。
Google PageSpeed インサイト
ツールがページ速度を分析した後、詳細なレポートが表示され、合計スコア、平均読み込み時間、ml 秒あたりの最初と最大のコンテンツ ペイント時間などが示されます。また、ページを作成するための提案も提供されます。もっと早く。
ここで、2 つのことを覚えておく必要があります。 1 つは、スコアが大きいほど、ページの速度が向上することです。 しかし、軽量の Web サイトだけがより大きなスコアを獲得します。 2 つ目は、サイトが消費するデータベースが大きいほど、スコアも低くなります。 WooCommere ストアの規模に応じて対策を講じる必要があります。
GTMetrix
このツールを使用して WooCommerce サイトを分析すると、より幅広いデータ セットが得られます。 Google PageSpeed Insights の互換性のある代替品になる可能性があります。
8. サイトのデザインをシンプルに保つ
上記のすべてのヒントとは別に、これは最も重要なステップです。 「最も単純なことは達成するのが最も難しい」という、よく覚えているかもしれない一般的なフレーズです。 ただし、サイトのデザインをナビゲートしやすくし、がらくたを切り取り、余分な要素を削除し、目標のみに集中すればするほど、WooCommerce サイトはモバイル対応になります.
これを行うには、以下のヒントに従うことができます –
- 世界中のすべての主要な WooCommerce Web サイトにアクセスして調べてください。
- できるだけシンプルな WordPress テーマを選択してください。
- レイアウトが過飽和にならないようにしてください。
- テーマカラーを選択し、トーンを維持します。
- 訪問者を顧客に導くサイトを作りましょう。 宣伝するものを作成しないでください。
したがって、Amazon や eBay のデザインには従わないことをお勧めします。 彼らは巨人であり、飽和状態のサイトの読み込みを高速化する独自のネットワークとリソースを持っているため. また、彼らは独自の種類のビジネス倫理とシステムを持っており、あなたにとって理解や適応が困難です.
したがって、あなたは自分のビジネスと見通しを誰よりもよく理解しています。 これにより、シンプルで目標を達成するのに役立つ独自のデザインパターンを開発する価値があります.
あなたも好きかもしれません: eコマースに WooCommerce を使用するトップ Web サイト
9. モバイル対応の WooCommerce には、最も簡単なチェックアウト プロセスが必要です
チェックアウト プロセスは、多くの場合、ユーザーに苦労を与えます。 Baymard のレポートによると、ユーザーの 18% が長いチェックアウト プロセスのためにカートを放棄しました。 十分な支払い方法が見つからない場合、ユーザーの 7% は同じことをします。 それに加えて、彼らの 17% は、注文コストを事前に計算または確認できないことにも不満を持っていました. これは、チェックアウト プロセスが複雑なため、ユーザーのほぼ 50% がカートを離れたことを合わせたものです。
したがって、ユーザーに携帯電話からチェックアウトしてもらいたい場合は、プロセスがより簡単になるはずです。 ヒントに従って、モバイル対応の WooCommerce サイトの簡単なチェックアウト プロセスを作成できます –
透過的なチェックアウト プロセスの基本
- 目に見えて魅力的なCTAボタンを選びましょう。 この部分では、きっとアマゾンをフォローできます。
- 顧客が先に進む前にすべてを理解できるように、十分な製品の詳細と情報を提供するようにしてください。
- 取引プロセスを透明に保ちます。 これは、配送料、付加価値税、税金など、顧客が支払う費用の詳細な内訳を示すことを意味します.
モバイル対応の e コマース チェックアウト システムの開発
Clique のクリエイティブ ディレクターであり、Smash Magazine の寄稿者である Derek Nelson は、モバイル ユーザー向けの WooCommerce のより良いチェックアウト プロセスを開発するのに役立ついくつかの方法を見つけました。
彼は、チェックアウトプロセスで最小限の情報を求めるべきだと提案しました. 重要なフィールドのみを含めることができます。
次に、ゲストの支払いオプションを承認すると、より良い結果が得られます。 つまり、ランダムな訪問者は、登録さえせずに WooCommerce サイトから直接購入する必要があります。 これは、ビジネスの大きな成長につながる可能性があります。 登録ボタンはしばしばトランザクションを妨げ、UIE は主要な e コマース ブランドのケースをテストし、登録ボタンのみを削除すると、そのブランドの売り上げが大幅に増加しました。
さらに、プロセスに情報を入れ、小さなメモやチェックアウト ページの広告などの気を散らすものをすべて削除する必要があります。 そして、支払いの進行状況を顧客に段階的に示すことは、より信頼できるアイデアになります.
ただし、強力なモバイル対応のチェックアウト プロセスを作成するために、ショッピング カートの放棄を減らす効果的な方法に関する十分に調査されたブログを読むことができます。
WooCommerce サイトのモバイル対応の開発のクローズ アップ
WooCommerce ベンチャーの最初から、モバイル対応の Web サイトのアイデアを維持する必要があります。 そうすれば、時間とお金の両方を節約できます。 したがって、ヒントを1つずつ実行し、この点に関して定期的に調査を行うことができます.
ただし、モバイル ユーザーにとって非常にアクセスしやすい WooCommerce ストアを構築することの重要性を理解していただけたと思います。 モバイル対応の WooCommerce サイトを支援するには、Dokan Multivendor が最も強力なソリューションの 1 つです。 Dokan を使用して e コマース ショップの運営に成功しているブランドの一部を確認できます。
ヒントの適用中に問題が発生する可能性がある場合は、忘れずにお知らせください。 私たちは助けるためにここにいます。 いつも。