6 チェックアウトページの例とそれらを最適化する方法

公開: 2022-12-05

ショッピングカートの放棄は、e コマースストアのオーナーにとって大きな問題であり続けています。

Baymard Institute によると、オンラインカートの平均放棄率は 69.99% で、これは買い物客の 10 人中 7 人が購入を完了していないことを意味します。

これは憂慮すべき統計ですが、モバイルユーザーの放棄率がさらに高く、85.65% であることを考えると、さらに憂慮すべきことです。

ストアを訪れたすべての人が購入するわけではありませんが、チェックアウトプロセスを可能な限りシームレスにすることで、カートの放棄率を減らすことができます (ただし、使用する e コマースプラットフォームによって、これがどれほど簡単かが左右される可能性があります)。

これらの6つのチェックアウトページの例をまとめて、それらの良い点と悪い点を強調しています.

次に、顧客のチェックアウトエクスペリエンスを改善し、最終的に収益とコンバージョン率を向上させる方法について説明します。

チェックアウトページの例と改善方法

1.ダーマロジカ

Dermalogica は、Shopify プラットフォームで運営されているプロフェッショナルグレードのスキンケアブランドです。このブランドは、スキンセラピストと消費者を対象としています。

Dermalogica は、シームレスなチェックアウトプロセスを確保するために多くのことを行います。

たとえば、エクスプレスチェックアウトオプションがあります。これは、急いでいる場合や、通常のチェックアウトフローでフォームフィールドへの入力に時間を費やしたくない場合に最適です。

derlogica.com のスクリーンショット、2022 年 11 月

長所

エクスプレスチェックアウト: 購入プロセスをスピードアップし、顧客がより迅速にチェックアウトできるようにします。
プログレスバー: 顧客は、購入完了まであとどれくらいか、完了までにあと何ステップかを正確に確認できます。
さまざまな支払いオプション: 買い物客は、クレジットカードなど、その地域でサポートされている一般的な支払い方法から選択できます。

短所

信頼バッジやセキュリティシールがない: 買い物客は、自分の個人情報が常に安全に保護されていることを確認したいと考えているため、一部の購入者にとっては、セキュリティバッジがないことを不快に感じる可能性があります。
フォームフィールドが多すぎる: 米国のオンラインショッパーの 17% が、チェックアウトプロセスが長すぎたり複雑すぎたりしたためにカートを放棄しました。このため、チェックアウトページで必須のフォームフィールドの数を減らすことをお勧めします。

2.ベルロイ

買い物客のエクスペリエンスを向上させるチェックアウトページはシンプルでクリーンであり、Bellroy はそれを実証しています。

これは、ユーザーをガイドするステップで構成された 1 ページのチェックアウトスタイルを採用しています。関連するすべての情報が前もって明らかになるので、最後に驚きはありません。

bellroy.com のスクリーンショット、2022 年 11 月

長所

フォームの検証とエラー通知: この機能を使用すると、ユーザーは各フィールドに正しく入力し、誤った情報でフォームを送信することを回避できます。
ゲストチェックアウト: 初めてのお客様は、購入を完了するためにアカウントを作成する必要はありません。その結果、チェックアウトがスムーズで手間がかからなくなります。
ワンページチェックアウト: ユーザーがページからページへジャンプして購入プロセス全体を完了する必要がないため、効率的です。この利便性は、より多くの購入を促進します。

コン

離脱意思ポップアップなし: 離脱意思ポップアップは、訪問者がサイトを離れようとしているときにカートに残っている製品を思い出させることで、訪問者を顧客に変えるのに役立ちます。

3. B&H フォトビデオプロオーディオ

Drupal CMS プラットフォームで動作する B&H Photo Video Pro Audio は、チェックアウトページで多くのことをうまく実行します。気を散らすものを最小限に抑えたクリーンなUIを備えています。

買い物客が商品をカートに追加すると、ポップアップウィンドウが表示され、詳細と推奨アクセサリーが表示されます。

買い物客は、チェックアウトページを離れることなく、カートからアイテムを簡単に編集および削除することもできます。

bhphotovideo.com のスクリーンショット、2022 年 11 月

長所

気を散らすものを最小限に抑えたクリーンな UI : 商品の詳細とショッピングカートに真っ向から焦点を当てた飾り気のないデザインです。
エクスプレスチェックアウト: 購入プロセスの摩擦を減らし、モバイルユーザーの全体的なユーザーエクスペリエンスも向上させます。
ゲストチェックアウト: 初めての方でも登録不要で購入できるので便利です。
ページのヘッダーにある安全なチェックアウトテキスト: これにより、買い物客は、支払い取引中に自分の情報が安全で安全であることを確認できます。
プログレスバー: この機能を使用すると、顧客は注文を完了する前に残りの金額を確認できるため、正常にチェックアウトするまでにどれだけ待つ必要があるかがわかります。
リソースへの簡単なアクセス: 買い物客は、ショッピングおよび返品ポリシーへのリンクを見つけることができます。また、購入プロセス中にサポートが必要な場合は、カスタマーケアおよび販売サポートの担当者とライブでチャットすることもできます。

コン

フォーム要素が多すぎる: モバイルでは、入力するフィールドが多すぎるためフォームが少し圧倒され、モバイルユーザーにとってトランザクションプロセスが遅くなり、煩雑になります。

4.FLOリビング

物事をシンプルに保つというテーマで、女性向けの天然サプリメントを販売する健康ブランドである FLO Living は、WooCommerce プラットフォーム上に構築された単一ページのチェックアウトデザインで優れた仕事をしています。

ドロップダウンメニューと自動入力ボックスにより、顧客のチェックアウトプロセスが簡素化され、ブランドカラーはサイトのチェックアウトページで維持されます。

flliving.com のスクリーンショット、2022 年 11 月

長所

ブランド要素を犠牲にしないシンプルなデザイン: クリーンでミニマルなデザインは、製品を輝かせ、デザイン自体ではなく製品に焦点を当てます。
自動入力ボックス: 顧客は、保存した住所からデータを入力することで、住所やその他の詳細をすばやく入力できます。
ゲストチェックアウト: これにより、買い物客が必要に応じて詳細をドロップする必要がなくなります。特に、1 回限りの購入者の場合です。

短所

限られた支払いオプション: FLO ではクレジットカードとデビットカードしか使用できません。これは、別の支払い方法を使用したい顧客にとってはオフになる可能性があります。
長いフォーム: 長いフォームは、できるだけ早く購入を完了したい一部のユーザーを先延ばしにする可能性があります。
セキュリティバッジなし: Web サイトのセキュリティバッジや認定を視覚的に示すものはなく、個人情報が安全で安全であることを顧客に安心させます。

5. ナイキ

Nike がチェックアウトページを釘付けにするのは当然のことです。

繰り返しますが、このブランドは Shopify プラットフォームを使用しています. また、アコーディオンスタイルのチェックアウトページは、ユーザーが気を散らすことなく支払いを完了するようにガイドします。

顧客がチェックアウトするのを思いとどまらせる隠れたコストはなく、注文の概要はチェックアウト中に簡単にアクセスできます。

nike.com のスクリーンショット、2022 年 11 月

長所

1 ページのチェックアウトスタイル: 注文を完了するためにページを切り替える必要はありません。
隠れた手数料なし: 商品ページに記載されている価格は、お客様がチェックアウト時に支払う金額です。これにより、チェックアウト時に予想外の費用が発生することによるお客様の混乱や不満を避けることができます。
ゲストチェックアウト: 初めての買い物客でも、注文のチェックアウトと支払いのためにアカウントを登録する必要がないため、プロセスがスピードアップし、コンバージョンが増加します。
配送オプション: 顧客は、場所と時間の制約に基づいて、チェックアウト時に希望の配送オプションを選択できるため、ショッピングエクスペリエンスが向上します。
ライブチャットボタン: ライブチャットサポートはいつでも利用でき、見込み顧客の質問にすばやく回答できます。
長いフォームフィールドは不要 : フォームフィールドは、注文を完了するために必要な情報に限定されているため、顧客はわずか数分で支払いを完了できます。

短所

信頼バッジなし: 個人情報や支払い情報のセキュリティに対する顧客の信頼を高めるために、サードパーティサービスのロゴや証明書はありません。ブランドの知名度だけで十分だと主張することもできますが、トラストバッジはチェックアウトページのベストプラクティスの 1 つです。
終了意思ポップアップなし: チェックアウトページに、買い物客に購入を完了させ、カートの放棄を防ぐための終了意思ポップアップはありません。

6. エッツィー

Etsy プラットフォームは多くの条件を満たしています。

そのチェックアウトページエリアはきれいで、使いやすいナビゲーションと進行状況バーがあり、注文の進行状況が視覚的に示されます。

フォーム要素は長すぎず、ゲストチェックアウトも提供します。

etsy.com のスクリーンショット、2022 年 11 月

長所

進行状況バー: 買い物客は、チェックアウトページの上部にある進行状況バーを使用して、チェックアウトプロセスの進行状況を確認できます。
隠れたコストなし: 顧客は注文完了プロセス全体で支払う金額を正確に把握しているため、チェックアウト時に驚くようなことはありません。
フォームの検証とエラー通知: ユーザーがフォーム要素を完了すると、検証チェックにより、注文をさらに進める前に正しい情報を入力したことが確認されます。
ゲストチェックアウト: ユーザーは購入を完了するためにアカウントを登録する必要がないため、チェックアウトプロセスが高速化され、コンバージョンが増加します。

短所

離脱意思ポップアップなし: チェックアウトページに離脱意思ポップアップが表示されず、買い物客に購入を迅速に完了させ、カートの放棄を防ぐことができます。
セキュリティバッジなし: サードパーティサービスのロゴや証明書はありません。これにより、安全な個人情報や支払い情報に対する顧客の信頼を高めることができます。
エクスプレスチェックアウトなし: ここにある他のウェブサイトの一部とは異なり、プロセスをスピードアップするためのエクスプレスチェックアウトオプションはありません (これは、Shopify と Etsy プラットフォーム間の本質的な違いによって引き起こされる制限である可能性があります)。たとえば、Shopify ストアでは、Shop Pay をエクスプレスチェックアウトオプションとして追加し、すべての Shopify ストアのストア支払いの詳細を使用できます。

eコマースチェックアウトページのクイックチェックリスト

e コマース Web サイトにはさまざまなニーズがありますが、理想的なチェックアウトページには、すべてのストアが考慮すべき特定の要素があります。

ゲストチェックアウトを許可する

多くの企業は、顧客が製品を購入する前にアカウントを作成するよう求めるという間違いを犯しています。

しかし、多くのバイヤーは製品を 1 回だけ購入するつもりであるため、戻ってこない可能性がある場合に詳細を残すことは意味がありません。

この煩わしさは、特に電子メールの確認などを行う必要がある場合に、顧客が購入を完全に行うことを妨げます.

ゲストチェックアウトオプションを使用すると、これらの顧客はアカウントを作成せずに購入できます。これは、両者にとってはるかに優れた選択肢です。

トラストシールを追加する

サイバー犯罪の増加に伴い、顧客は信頼できるストアから買い物をすることを好みます。

チェックアウトページのトラストシールまたは関連するトラストシグナルは、ストアの信頼性を高め、顧客が購入プロセスを完了するように促すのに役立ちます。

すべてのページにシールを表示することはお勧めしません。これは、顧客がスパムと見なすためです。

ただし、セキュリティを真剣に考えていることを顧客に示すために、チェックアウトページに少なくとも 1 つ表示する必要があります。

予期しないコストを回避

チェックアウトワークフローを作成するときは、注文の概要が完全であることを確認して、顧客が何を購入しているかをよく理解できるようにします。

次に、カートの放棄を増やす可能性のあるチェックアウト時に追加の費用を追加しないでください。

優れたカスタマーサポートを提供する

業界に関係なく、顧客は優れたカスタマーサポートを提供できるオンラインブランドから購入することを好みます。

チェックアウトページにサポートオプションを事前に表示することで、顧客ロイヤルティを獲得する可能性を高めることができます。たとえば、ライブチャットソフトウェアを即座に統合したり、カスタマーサポートにつながるライブチャットボタンを含めることができます。

これらの単純な改善は、顧客のニーズを満たし、コンバージョン率を向上させるのに大いに役立ちます.

プログレスバーを追加

チェックアウトページにプログレスバーを表示すると、買い物客が購入をすばやく完了できるようになり、最終的にはより高いコンバージョンにつながります。

複数の支払いオプションを有効にする

顧客は、選択した支払い方法で購入を完了することを好みます。

そのため、他の一般的な支払い方法の中でも特に、クレジットカード支払いを受け入れることができる支払いゲートウェイがあることを確認してください.

ページの速度を向上させる

顧客が e コマースストアから簡単に購入できるようにします。

ページの読み込みが遅い、またはまったく読み込まれないと、顧客が購入プロセスを放棄する可能性があります。

しかし、ウェブサイトを検索エンジンに適したものにし、読み込みを高速化する方法はいくつかあります。

たとえば、画像圧縮ツールを使用し、CSS ファイルと JS ファイルを組み合わせて、Web サイトページの読み込み時間を改善できます。

結論

チェックアウトプロセスをできるだけシンプルにし、商品をショッピングバスケットに入れた顧客が満足して帰ることができるようにすることだけが理にかなっています。

チェックアウトページを最適化する際に、これらのチェックアウトの例を唯一のインスピレーション源にしないでください。

この記事のヒントに従って、オンラインストアの効果的で安全なショッピングカートまたはチェックアウトページを設計してください。

その他のリソース:

あなた自身を刺激する5つの素晴らしいランディングページの例
インスピレーションのための14の優れたSEOフレンドリーなShopifyストアの例
eコマースマーケティング：決定版ガイド

注目の画像：tmnアート/シャッターストック

6 チェックアウト ページの例とそれらを最適化する方法