Shopify ストアをモバイル向けに最適化する方法

公開: 2023-05-19

オンライン購入の主要なプラットフォームとして、モバイルはまだデスクトップを上回っていません。しかし、それは近づいています。

モバイルデバイスはすでにすべての e コマーストラフィックの半分を占めており、2023 年にはすべての e コマース売上の 43.4% を牽引すると予測されています。訪問者の 4 分の 3 が、モバイルに最適化されていない Web サイトに戻ることをよく考えています。それをまた。デフォルトでは、Google は検索結果に含めるために、最初にサイトのモバイルバージョンをインデックスに登録するようになりました。

これは、Shopify ストアがモバイル向けに最適化されていない場合、ランキングが期待どおりに上がらないことを意味します。

最適化は、サイトの応答性を高めるだけではありません。直観的なインターフェイスと優れたエクスペリエンスを見込み客に提供し、買い物中に広い画面がないことを補います。シームレスなカスタマージャーニーを提供し、デスクトップの利便性を再現するには、選択を慎重に検討する必要があります。

モバイル向け Web サイトをデザインするときに基本をカバーする方法は次のとおりです。

Shopify ストアをモバイルデバイス向けに最適化するためのヒント

ページの読み込み時間に注意する

何をするにしても、Shopify ストアの速度の最適化を無視しないでください。モバイルでは、タブが読み込まれるのを待っている間に別のタブに切り替えるオプションがありません。いずれにせよ、彼らがそうする可能性が高いというわけではありません。

ページの読み込み速度が 1 秒を超えると、ユーザーが Web サイトから直帰する確率が 32% 増加します。さらに、Shopify サイトの SEO にも影響します。ページの読み込み時間は、Google の検索ランキングのアルゴリズムに反映されます。ページの読み込み時間を最適化するには、高品質のホスティングの選択、画像の圧縮、コンテンツ配信ネットワーク (CDN) の活用など、いくつかの方法があります。

ナビゲーションを簡素化する

選択肢の多さと意識的なショッピングパターンにより、顧客は購入を決定する前に他の場所を閲覧する機会を逃すことがなくなりました。デスクトップでは、ナビゲーションオプションに対応するための追加の画面スペースがあり、複数のタブを同時に開くことができるため、これは非常に簡単です。

携帯電話では、適切なコンテンツやナビゲーションバーにアクセスするためにスクロールやスワイプが必要になるため、少し不便です。折りたたみ可能な粘着ナビゲーションバーのようなものも同じ役割を果たします。

素晴らしい方法は、すべてのページにハンバーガーメニューを掲載することです。ブレッドクラム、スマート検索機能、モバイル対応の商品フィルターも、ユーザーがモバイルで Shopify ストアを移動するのに役立ちます。一例として、Color Cord はスクロールしやすいユーザーエクスペリエンスを実現するためにこれらの機能を実装しています。

商品写真撮影

人は目で買い物をする傾向があります。実際、オンライン購入者の 75% は購入を決定する際に製品の写真に依存しており、これは他のどこよりもモバイルで当てはまります。

健康補助食品、農産物、調味料などの製品のモバイル Shopify ストアを運営している場合は、顧客が製品のラベルや成分を閲覧できるように、便利な高解像度ズームが有効になっていることを確認してください。顧客がモバイルを使用しているからといって、品質に対する意識が少しでも低下するわけではありません。

人間の訪問者向けに最適化できたので、検索エンジンボットのことも忘れないでください。ファイルサイズを削減し、代替テキストを組み込み、キーワードを豊富に含むファイル名を使用することで、SEO 用に画像を最適化します。たとえば、ファイル名double-waist-wide-leg-jeans は、 productphoto1よりも SEO にとって価値があります。

Pixie Market Shopify ストアの写真がモバイル用に最適化されました

小さな画面に合わせてビデオを調整する

動画は e コマースのショッピングエクスペリエンスの大きな部分を占めています。買い物客は、大量のテキストを確認する前に、利用可能な製品ビデオをクリックするのが自然です。

デモと製品のショーケースビデオは、顧客が製品が自分に適しているかどうかをよりよく理解するのに役立ちます。オンサイトビデオは SEO の価値も高めることができます。 Google の検索結果ページのビデオカルーセルには YouTube 動画が含まれますが、ビデオリッチスニペットはトラフィックをサイトに誘導します。 Shopify サイトでの滞在時間が改善されるという間接的なメリットもあります。顧客はビデオを見るためにページに長く滞在するようになるため、ページのランキングが向上する可能性があります。

Shopify ストアにビデオを統合している場合は、モバイル向けに最適化されていることを確認してください。ビデオプレーヤーにアクセスするのが不便だったり、常に不具合が発生したりすると、買い物客のフラストレーションが増大するだけであり、カートが放棄される原因になります。

テキストの配置方法を再考する

伝統的に、店舗オーナーは、オンラインショッピングに関しては、詳細が少ないよりも詳細が多い方が良いと考えています。コピーは SEO にも役立つため、Shopify では、キーワードを使用してテキストを最適化する機会が増えれば増えるほど、オーガニックランキングを構築できる可能性が高くなります。

ただし、モバイルに関しては、画面スペースを圧迫する誘惑に抵抗する必要があります。すでに述べたように、ショッピングやブラウジングの多くは視覚的な体験です。テキストが多いほど、見込み客が製品の写真にアクセスするまでにスクロールする必要が増えます。

ここで、コピーの収益が減少します。製品説明を追加することは重要ですが、ユーザーエクスペリエンスを犠牲にしてはいけません。製品ページの適切な目標は、説明に約 200 ～ 300 語を含めることです。テキストを箇条書きで分割すると、より視覚的にアピールできることを覚えておいてください。

製品名、価格、仕様、行動喚起など、モバイルユーザーにとって絶対に必要な情報を Shopify ストアに含めます。たとえば、カテゴリページでさらにテキストを追加する必要がある場合は、折りたたみ可能な説明とメニューを検討してください。

また、フォントサイズをデスクトップ標準の 12 ポイントから大きくすることも検討してください。顧客がスクロール中にズームインしたりズームアウトしたりする必要がないように、14 ～ 16 ピクセルが理想的です。テキストには従来のフォントを選択してください。通常とは異なるものは、特定のデバイスでは正しく表示されない可能性があります。

CTAを常に見えるようにする

適切な CTA 戦略は、Shopify ストアでのページ上のコンバージョンを強力に促進することができます。モバイルでは、ユーザーのスクロールに追従する固定 CTA ボタンを試してみるのも良いでしょう。これにより、ユーザージャーニーが合理化され、プロンプトが表示されないためにユーザーがストアを離れるリスクが軽減されます。

A/B テストを行った結果、修正された方がより効果的であることがわかった場合は、それが目立つようにしてください。乱雑に感じられず、より多くの余白に囲まれた CTA は、コンバージョンを大幅に増加させる可能性があります。

タップしやすいように、CTA を十分な大きさにします。 Shopify ストアのすべてのボタンに対してこれを実行すると、モバイルユーザーが機能にアクセスするためにデバイスをいじる必要がなくなります。

CTA に何を伝えたいかについても考えてみましょう。製品の内容に応じて、従来の「カートに追加」や「今すぐ購入」をやめて、「Get the Look」や「Treat Yourself」などのよりクリエイティブなもの、さらには「Hurry!」などのカスタマイズされたものを選択することもできます。今すぐ手に入れましょう！在庫に限りのある商品のため。

ポップアップを廃止する

ポップアップは、デスクトップ上であってもページに有害な追加のように感じられることが多く、モバイルサイトのビジネスにとっては一般に悪影響を及ぼします。画面上にランダムに表示されるポップアップバナーが突然画面上のコンテンツを覆ってしまうと、煩わしい場合があります。おそらく UX の不具合により、ユーザーがすぐに取引を終了できない場合、簡単に売り逃してしまう可能性があります。この例が多すぎると直帰率が高くなり、ページのオーガニックランキングに悪影響を与える可能性があります。

モバイルユーザーは Shopify ストアを閲覧しているため、ニュースレターにサインアップする可能性は高くありません。アカウントにサインアップするときに、電子メールでチャンスを提供します。また、強調したい割引がある場合は、ポップアップバナーではなく、CTA の下に簡単なメモを追加します。これは、ユーザージャーニーを継続し、顧客を目的の場所、つまりチェックアウトカートに誘導するのに役立ちます。

モバイル向けにチェックアウトを最適化する

Shopify ストアのオーナーがモバイルユーザーのチェックアウトを合理化していないため、どれだけのお金が手元に残っているかに驚くでしょう。オンライン買い物客の平均カート放棄率は 70% 近くです。見込み顧客をサイトに呼び込むためにあらゆる労力を費やしたのに、これは本当に無駄です。

買い物客のチェックアウトを簡単にする方法はたくさんあります。フォームに入力する必要がある情報の量を最小限に抑えることが最優先事項です。より多くのデータを要求すると時間がかかり、プライバシー上の懸念がさらに高まり、ユーザーが拒否する可能性が高くなります。新しいユーザーが Google または iOS アカウントでサインアップできるようにする、ユーザーがこれを有効にしている場合はブラウザからフォームデータを自動的に取得するなどのオプションを検討してください。

より多くの地域固有の支払いオプションを顧客に提供し、インターフェースでこれを強調表示します。 Shopify サイトが安全であることを示すために、チェックアウトプロセス全体に信頼アイコンを追加することもできます。モバイルユーザーにとってセキュリティは依然として最大の懸念事項であり、31% もの人が携帯端末で購入しない理由がセキュリティであると回答しています。

Shopifyのエキスパートと協力して優れたモバイルストアを構築

私たちは、Web サイトがモバイルファーストに設計され、デスクトップに最適化される段階に急速に近づいています。 Web デザインの分野に精通した専門家の助けを借りて、e コマースサイトを将来も保証します。 Coalition では、約 800 の Web サイトを構築し、クライアントに 5 億ドルを超える収益をもたらしてきました。

モバイルファーストの Shopify ストアを最初からセットアップしたい場合でも、既存のストアを最適化してそこからさらに SEO 価値を高めたい場合でも、私たちがお手伝いいたします。私たちの仕事をご覧いただくか、今すぐ無料相談にお問い合わせください。