モバイルサイトの最適化がeコマース売上向上の鍵

これはShopifyの商人として何を意味するのか？

つまり、モバイルユーザーを念頭に置いて店舗を最適化していなければ、潜在的な販売機会の57％を逃していることになる。

You see, up until recently, conversions didn’t really occur on small screens. Users would likely browse on mobile, then complete the purchase later on desktop. But this has changed. Mobile has reached a tipping point and is now the primary eCommerce medium. Therefore, it’s now more important than ever to craft a greater mobile experience for customers visiting your store because:

1. 53％のモバイル買い物客は、ウェブサイトが3秒以内に読み込まれないと放棄する。
2. Mobile media activity beats laptop and other forms of media

しかし、ご心配なく。私たちは、ウェブ開発やモバイルトラフィックの世界に慣れていない方にとって、これが困難で難しく思えるかもしれないことを理解しています。私たちは、このような状況に光を当て、モバイル向けにストアを最適化することで売上を積み上げるために必要な知識を提供します。

この記事では、PageFlyアプリを使ってモバイルに最適化されたShopifyページを作成する方法と、実際のコンテンツがSEOフレンドリーであることを確認するためのステップバイステップのヒントをご紹介します。

もちろん、より多くのセールスを成立させるためだ。

始めよう。

モバイル最適化とは何か？

簡単に言うと、モバイルサイトの最適化とは、モバイルからの訪問者がサイトにアクセスした際に、そのデバイスに最適化された体験を提供できるようにすることです。そのため、サイトのデザイン、画面サイズ、ロード時間などを考慮し、スマートフォンやタブレットからサイトを機能的かつ使いやすいものにする必要があります。

もしこれらの要素が無視されれば、見込み客はおそらくあなたのサイトをすぐに立ち去り、お金を持って去っていくだろう。それには理由があります。あなたは、あなたのことを念頭に置いて構築されていないウェブサイトを許容しないでしょう。

幸いなことに、Shopifyのページを最適化することで、閲覧からチェックアウトに至るまで、顧客に最高のショッピング体験を提供できる方法がたくさんあります。

モバイル最適化のベストプラクティス

最高の結果を得るために、これらのヒントを考慮に入れ、できるだけ早く実行する。

ページ速度

モバイルユーザーは、長いローディング時間や反応の悪いリンクに対してあまり我慢しない。

Start by checking your page speed with Pagespeed Insights from Google. Paste your website URL into the box and hit the ‘Analyze’ button. This will give you a breakdown of how your page is performing in terms of speed on mobile and desktop.

例えば、人気ビジネス誌Forbesのモバイルスピードは29点であるのに対し、デスクトップのスピードは100点満点中89点と健闘していることがわかります。この数値を改善し、モバイルページの速度をグリーンにするためにできる調整を見てみましょう。

テキストを表示する

避けたいことのひとつは、ユーザーがページのテキストを読むためにズームやスクロールを強いられることです。

つまり、モバイルかどうかを検知し、それに合わせて自動的に縮尺を調整するのです。あなたが一番避けたいことは、見込み客があなたのコピーを読むために横方向にスクロールし続けることです。PageFly Advanced Page Builderfor Shopifyは、これを実現してくれます。

クリッカブルにする

モバイル向けに最適化する場合、クリックしやすさは重要です。ユーザーはマウスを持たず、人によって大きさが異なる指を使うことを忘れないでください。ボタンは大きくすべきですし、モバイルの観点からうまく機能しない限り、ドロップダウンメニューの使用は制限した方がよいでしょう。

Khara KapasがどのようにShopifyストアをモバイルフレンドリーに変更したかをご覧ください。

画像の最適化

Faster loading images mean faster page speeds for your site. Before you upload images to your online store, optimize them using tinypng. This will compress the image size without reducing quality. Tinypng lets you add up to 20 images at a time then download them into a zip file which you’ll then need to extract the images from.

また、Shopifyのマーチャントであれば、画像を最適化するためのアプリを自由に使うことができます。画像を最適化することで、Google検索で上位にランクインするのに役立つ無料のShopifyアプリ、SEO Image Optimizerをお勧めします。このShopify SEOアプリは、画像の読み込み時間を短縮するための最善の策です。正しいアプリでコンバージョンを増やす方法については、ベストShopifyアプリのブログ記事をご覧ください。

また、ウェブに適した画像フォーマットの選択も考慮する必要があります。

• PNG形式は、ラインアート、アイコングラフィック、ロゴ、テキストの多い画像を小さなファイルサイズで保存するのに最適です。
• JPEGフォーマットはリアルな写真に適しており、圧縮されているため、ウェブ上では一般的な選択です。
• GIFは一般的にウェブ上でのパフォーマンスに問題があるが、最適化することで多少改善される。

ポップアップを避ける

ポップアップはEメールの受信や販売促進に最適です。しかし、モバイルデバイスではポップアップを無効にするのがベストです。考えてみれば、ポップアップはデスクトップでも十分に煩わしいものですが、モバイルでは画面が小さく、終了しようとするときに間違って押してしまう可能性が高いため、ポップアップに対処するのはさらに大変です。

見込み客にこのような経験をさせる必要はない。すべてができるだけスムーズで手間のかからないものであるべきだ。

カート、チェックアウト、決済の最適化

これは非常に重要です。顧客が商品をカートに入れたり、チェックアウトをナビゲートしたり、支払いをしたりするのに苦労するようでは、合理的なブラウジング体験を提供する意味がありません。カートに入れるボタンは行動喚起であり、大きく、明確で、ページの他の部分とは対照的な色であることを確認してください。閲覧からチェックアウトまでのプロセス全体を見て、できるだけスムーズに流れるようにしましょう。  

ランディングページから商品ページ、そしてカートに至るまで、Crazybabyはミニマルなサイトデザインとは対照的に、大胆な赤のCTAで迷いがないようにしている。

モバイルを第一に

ほとんどの企業は、既存のウェブサイトをモバイルでアクセスしやすいように短縮している。しかし、時代の変化とともに、この習慣も変化していかなければなりません。競合他社よりも優位に立つためには、モバイル向けに特化したページを構築すべきなのです。

列を縦に並べ替え、ボタンを指でクリックできるようにし、ポップアップを削除し、すべてのインタラクティブ機能を小さなスクリーンで使えるように再設計する。そうすることで、オーディエンスは自分たちのことを特別に考えて作られた合理的なサイトを目にすることになり、その結果、リピーターとしてあなたに報いてくれるはずだ。

プロからのアドバイス：モバイルの観点からサイトのレイアウトをチェックするには、以下の手順に従ってください。

1. モバイルでプレビューしたいウェブサイトを開く
2. Chrome で Ctrl + Shift + C キーを押して開発者コンソールウィンドウを開く。
3. デベロッパー・ウィンドウの一番上のツールバーに移動し、ウィンドウ・リサイザーを押して、モバイルでサイトをプレビューしてください。結果は以下のようになります。

PageFlyテンプレートを使用する

PageFlyをご存知でない方は、ドラッグ＆ドロップでShopifyの完全カスタム商品ページを作成できる強力なページビルダーアプリです。PageFlyには、ウェブとモバイル用に入念に最適化された40種類以上のテンプレートが用意されており、Googleで上位に表示され、店舗へのトラフィックを獲得するのに最適な選択となっています。

PageFlyのサイトにアクセスし、テンプレートを閲覧することで、そのスピードを試すことができる。人気のテンプレート「Carona」をGoogle pagespeedで検証してみよう。

モバイルスピードは100点満点中96点。当然ながら、これらのテンプレートを使用し、独自の画像やコンテンツを追加すると、ページ速度に影響が出る。上記のtinypngで画像を常に最適化するようにしてください。ファイルサイズが大きい画像はサイトの表示速度を遅くします。

画像とカスタマイズしたコピーを追加した後、再度テストを実行してください。Googleは、テストを実行した後、あなたのページをさらに最適化するための提案リストを提供する機能を組み込みました。テスト結果の直下にある「機会」と「診断」で確認できます。

続きを読む モバイルフレンドリーな店舗を構築する際に見落とされがちな要素 

それでは、PageFlyのツールを使ってShopifyストアをモバイルフレンドリーにするためのビデオをご覧ください。

結論

おさらいしよう：

• ページ速度をテストする
• テキストを表示する
• クリッカブルにする
• 画像の最適化
• カート、チェックアウト、決済の最適化
• モバイルを第一に
• 最適化済みのPageFlyテンプレートを使用する

これらのステップに従うことで、キャッシュを獲得できるモバイルページを作成することができるはずです。今、多くの消費者が携帯端末を通して購入していることを常に念頭に置き、モバイル最適化を優先してください。そうすれば、Shopifyオンラインストアのコンバージョンを確実に増やすことができます。

ランディングページを使って売上を伸ばしていますか？eコマースのランディングページのベストプラクティスガイドをチェックして、サイトへのトラフィックを促進するための最も効果的なマーケティングツールの1つを使用する方法を学びましょう。そしてもちろん、モバイルサイトの最適化に真剣に取り組み、競合他社よりも優位に立つために、これらのヒントを今すぐ実践してください。