Shopifyのチェックアウトのカスタマイズは可能? 売上に直結する改善ポイント

カゴ落ちを防ぎ、ECのコンバージョンを上げるためには、チェックアウト(注文確定)画面の改善が重要です。
今回は、EC売上を上げる際にもっとも重要な決済まわりの画面構成について解説します。
ECプラットフォームのShopifyは2023年秋バージョンでチェックアウト画面を更新しましたので、その詳細にも触れていきます。

→豊富なEC構築実績を持つShopify PlusパートナーのBiNDecがご相談を承ります。

チェックアウトはEC購買ファネルの最重要箇所!

  • カートに商品を入れたままの離脱を防ぎたい
  • リターゲティングをするにも限界を感じている
  • 商品詳細画面への集客をしているのにコーンバージョンにつながらない

などの悩みはありませんか?
ECサイトのチェックアウト画面(注文確定画面、または購入画面とも言います)は、購入が行われる最終局面です。購入ボタンを押さなければいくらサイトの閲覧やカゴに追加が増えたとしても売上が立ちません。

一般的にECサイトのコンバージョンはファネル(じょうご)型で考えます。

チェックアウト画面はこのファネルの一番下にあり、絞りこまれてきた顧客が残る画面です。長年カート落ちについてレポートを出している米調査会社のBamard Institueによれば、2023年のカート落ちの平均は70.19%。商品追加から購入にいたるユーザーは3割以下です。
買う気がある客を購入に導くことは買う気がない客に商品説明をするところから始めるよりはるかに働きかけによる成果が出やすいため、「まあまあ買う気」になっている顧客を取りこぼさずに購入してもらうことは、ECの売上改善ではもっとも最初に取り組むべき作業。チェックアウトやカートの改善は、購入者の倍以上いる7割以上の取りこぼし客に働きかけるものになります。

→豊富なEC構築実績を持つShopify PlusパートナーのBiNDecがご相談を承ります。

売れないチェックアウト画面の特徴とは

では、チェックアウト画面が原因で売れなくなる理由はどんなことでしょうか。チェックアウト画面は、機能することは大前提。店頭でお金を払ってお店を出るときと比較すればわかるように、本来は、チェックアウト画面はおもてなしの場面なのです。
ECサイトで購入する顧客は、トラブルに見舞われてサポートセンターに問い合わせたり、抽選に応募するモチベーションを持った顧客とは異なり、ちょっとした使いづらさでも購入を断念しがちです。
以下に売れなくなるチェックアウト画面のよくある問題と対策をいくつか紹介しましょう。

顧客情報の入力フォームが適切でないサイト

送付先住所について、郵便番号や住所を「ここは全角で入力してください」「ここは半角で入力してください」などそれぞれの入力方法をユーザーに求めてくるのがよくある例です。何度かエラーが出てしまうと、購入モチベーションも下がってきます。請求先住所も同じなのに2度入力させるなどは言語道断です。

Webブラウザには、「自動フォーム入力」の機能があり、フォーム側でautocomplete属性を使っていれば、正しい箇所に保存された名前、メールアドレス、住所、電話番号などまで自動で入力できるようになっています。しかし、このような機能を使わずに、あるいは自社のデータベース設計の都合などからフォーム欄の区切りなども独自仕様になっていると、住所も名前も入力できない、郵便番号や電話番号がいくつもの入力欄に分かれていて正しく入力されないなど、顧客側に煩雑な入力作業を発生させてしまいまます。

また、本来は購入に不要な情報、性別や年齢や勤務形態といったプライバシーに関わる情報を必須項目にすることも不適切です。
ブラウザやスマホの戻るボタンを使うと入力内容が消えるECサイトは、ストレスをかけるのでサイト側での改善が必要です。様々な情報をすべて入れ直しとなると顧客側の精神的ダメージから、サイトに対するネガティブな印象も生まれかねません。

決済方法の選択肢に乏しいサイト

ECサイトでもっとも使われる決済方法はクレジットカードですが、対象とする顧客層や初回購入でクレジットカード利用に不安を感じる層などに対してそれ以外の決済方法も用意しましょう。自分が使いたい決済方法が選べないと、この段階で購入を諦めざるを得ない購入者もいます。
若者向けの商品を販売している場合は後払いやコンビニ払いなど、自分のクレジットカードを持っていなくても支払える決済手段、高年齢層向けでは着払いなど商品と交換で現金やクレジットカードで支払える決算手段が求められる傾向にあります。また、高額商品ではBNPLなどのスマホ登録での分割払いを用意するなども有効です。
ターゲットの属性ごとのおすすめ決済方法については下記の記事もご覧ください。

クレジットカード情報を与えるのが不安になるサイト

ECサイトは急速に増え続けています。その一方で、フィッシングサイトと呼ばれる個人情報やクレジットカード情報を盗み取る悪意のあるサイトも急増しています。ファッション系ECを例に挙げれば、SNSの商品の広告リンクをたどっていくと販売サイトが表示されるものの、購入しても商品が届かない、メールアドレスやカード番号だけが盗まれるといったことが頻発しています。

そのため、購入する前のユーザーは、サイトの見た目はもちろん、ドメイン、サイトのクチコミ、カートのシステムなど、あらゆる面でサイトが安全そうかどうかを調べ、どこか不安な点があれば購入を止めるしかありません。D2Cでは独自ドメインも問題です。.jp以外のドメインは、まず信頼度は下がりますし、.jpでも.comでもないトップレベルドメインを使用しているとどの国の企業か、どんな業種かなどがわかりづらく、ユーザーの不安度は増すと言えます。

さらにサイト名などで評判を検索しますから、ネット上に「商品が届くのが遅かった」「サポートから連絡が来ない」などのクチコミが拡散されれば、「不安なサイト」認定されてしまうことに注意しなければなりません。ECサイトのセキュリティ対策に関する詳細は下記の記事もご覧ください。

配送方法、送料、返品条件に対する不満

配送料や税金、手数料などがチェックアウトの最終画面で表示され、その高さにひるんで離脱するというケースもあります。送料を無料にすることはできなくても、あらかじめ手数料などについての説明や「○○○円以上お買い上げて手数料無料」などのサービスを提案すると、チェックアウト時に離脱してしまう可能性を下げられるでしょう。

決済で外部サイトへ移動した際の遅延やエラー

オンライン決済を完了させる際に、購入確定ボタンを押したあと画面が止まってしまうサイトは決済システムの改善が必要でしょう。このようなサイトはユーザーを不安にさせます。
スマホの利用者が増加したことで、ECでの購入もPCよりスマホが上回り、誰も場安定したWi-Fi環境で購買を行うとは考えられません。そのため、モバイルフレンドリーな決済が可能かも検証しておくべきです。

また、決済システムとの契約形態によっては、信頼の低いサイトがクレジットカード会社から防犯のため決済拒否(不正検知)されてしまうケースもあり、すぐにサイト側で解決できない問題もあります。

Amazon Payチームも、いま紹介した内容と共通するアドバイスを発表していますし、そのソースである前出のBaymardは、カート落ちした理由についてのユーザーのアンケート結果を公開しています。
このアンケートで目に引くのは、購入しようとしたが、チェックアウトの手順が長すぎる/複雑すぎるので離脱した、という回答者が17%も居たことです。もしもECサイトがシンプルで使い勝手のよいチェックアウトフローを提供していたら、離脱した70%のうちの17%が購入したかもしれず、それは購入者が30%以上も増えることを意味します。

このようなユーザーの声を踏まえると、チェックアウト画面は、予測不能な費用の増加がなく、スピーディーで使いやすく、余分な情報の入力が不要、すぐに購入できかつセキュリティに安全だと感じるものであるべき、と言えます。

このようなチェックアウト画面で購買者にかかる負担や、決済時に起こるトラブルを自社EC担当者側ではっきりと認識していないケースもあるかもしれません。まずは、当たり前と思っている自社のチェックアウト画面に離脱ポイントが発生していないか、また、UIが古く使いづらくないかを検討してみることをおすすめします。

→豊富なEC構築実績を持つShopify PlusパートナーのBiNDecがご相談を承ります。

Shopifyのチェックアウトの特徴とカスタマイズのポイント

グローバルで成長し続けているECプラットフォームのShopfiyは、チェックアウトのUI/UXに優れていることでも高い評価を得ています。ビッグスリー(MBB=*)と呼ばれる、3つの大手戦略コンサルティング会社の調査によると、Shopifyのチェックアウトは他の競合ECプラットフォームよりも、コンバージョン率が最大36%、平均15%上回っているという結果が出ています。そこに大きく貢献しているのが、ワンページチェックアウトです。

チェックアウトページのコンバージョン率比較

引用:Shopify Checkout is the best-converting in the world. Here’s why.
*=McKinsey&Company、Bain&Company、Boston Consulting Groupの3社

ワンページチェックアウトへの移行

従来のECでのチェックアウトフローでは、注文確定のボタンを押すまでに、個人情報入力→送料計算→到着日確認→クレジットカード情報の入力と、何ページかの画面遷移をすることがほとんどでした。しかし、すでに紹介したように、チェックアウトのそれぞれの段階では離脱が起こりやすくなります。
Shopifyでは、これらの遷移を排除して、1ページでチェックアウトをすべて完了する「ワンページチェックアウト」を2023年9月25日に利用開始しました。契約プランの「Basic」、「Advanced」、「Plus」のすべてのストアサイトで利用できます。
Shopifyのワンページチェックアウト

ワンページチェックアウトは、カート内容の確認から支払い詳細、配送住所・請求住所、その他の配送オプションまで1ページで確認できます。情報を入れていくとリアルタイムで必要な項目が更新され、追加の情報入力欄が表示されるため、従来は3ページ程度使っていた内容をすべてひとところで確認でき、購入の確定ボタンを押すまでのユーザー側の労力が大幅に削減できます。

また、チェックアウトページは拡張が可能です。ECサイトのニーズに併せて拡張アプリと併用でき、Shopify Plusプランのユーザーであれば、チェックアウトエディタで画面のカスタマイズが可能です。

Shopifyでチェックアウトをカスタマイズする際の注意点

Shopifyではチェックアウトエディタを使えばカラーやロゴに始まりチェックアウト画面に表示させる要素などをカスタマイズできます。ただし、カスタマイズはブランディングの向上とコンバージョンアップが目的です。あれこれ加えて逆効果にならないよう以下の点に注意しましょう。

なるべくシンプルにする

これまで解説したように、いろいろな機能があればユーザーが購入者が喜ぶわけではないことは、チェックアウト画面に限って言えば確かなことです。「配送希望日」を追加するのは役立つかもしれませんが、サブスク情報や関係のない製品のプロモーションが入ると混乱する人も多いでしょう。メルマガ登録などもある意味これに当たる可能性もあり、考慮する余地があります。
確認しなければならない項目が多いと離脱が増えるので、なるべくシンプルな構成で、すぐに購入ができる状態を目指しましょう。

多言語対応をする

Shopifyはグローバルに利用されているプラットフォームで、多言語に対応しています。自動生成で英語、ドイツ語、スペイン語、フランス語、イタリア語、日本語、ポルトガル語(ブラジル)、中国語(簡体字)に対応しています。サイト内での通貨の切り替えにはアプリなどによって導入できます。本格的に越境ECに取り組む場合は倉庫や在庫管理を含め出荷体制が整っていなければなりませんが、まずは国内対応のみでも、日本語が母語のユーザー以外の顧客を取り込みたいときには有効な方法です。

ストアポリシーを追加する

返金ポリシーやプライバシーポリシー、特商法に基づく表記などを含むストアポリシーは、日本語では個別に用意する必要があります。Shopifyは、ポリシーテンプレートを用いて英語ではストアポリシーをすぐに生成可能ですが、日本語では別途用意する必要があります。必要な人がチェックアウト前にストアポリシーが閲覧できるようにリンクを追加しておくことが大切です。

必ずテスト注文をする

Shopifyはテストモードでチェックアウト機能の確認をすることができます。コードをいじってカスタマイズ公開後、もしもチェックアウト部分に不具合があれば、売上が下がるどころかゼロになってしまいます。ECの最重要箇所のカスタマイズは細心の注意を払って手を入れましょう。

→豊富なEC構築実績を持つShopify PlusパートナーのBiNDecがご相談を承ります。

Shopifyでマーケティングを加速するチェックアウトのカスタマイズとは?

シンプルが鉄則のチェックアウト画面でも例えば会員登録による特典付与、ポイントの利用、ディスカウント、配送オプションなど、顧客サービスのために追加したいオプションや、購入後に表示するマーケティング情報など、チェックアウト画面をさらに充実させたい場合はあります。
Shopifyの場合、Shopify Plusプランのストアでは、これらのチェックアウトのカスタマイズが可能になります。

カスタマイズは管理画面から行うものと、チェックアウト拡張(Checkout Extensibity)を使って行えるカスタマイズがあります。管理画面の場合は、管理画面→チェックアウトの[チェックアウトのカスタマイズ]コーナーから[カスタマイズ]ボタンをクリックして行います。
管理画面からのチェックアウトカスタマイズ

Shopifyチェックアウトのカスタマイズ機能(開発者用)

一方、チェックアウト拡張機能(Checkout Extensibility)は、以前のチェックアウトカスタマイズ機能であるcheckout.liquidから移行され、よりカスタマイズのしやすさを備えた機能です。利用にはプログラミングの知識が必要です。
エクステンションには次のような機能があります。

  • Checkout UI extensions…商品情報、配送、支払い、注文内容のまとめなどの項目をチェックアウト画面に追加できます。購入する商品に関連する商品の提示、サンプル(プレゼント)追加オプションなども可能になります。
  • Checkout Branding API…チェックアウト画面のカラーやフォント、ロゴ追加などの外環をカスタマイズします(執筆時ではβ版)。
  • Shopify Functions…チェックアウト時のバックエンドの機能をカスタマイズすることで、決済手段や自動ディスカウント、地域や国ごとの配送ルールの使い分け、Shopify Functions APIではチェックアウト関連のアプリの開発などが行えます。
  • Post-purchase checkout extensions…購入完了後のページに、カスタムのUIやコンテンツを追加することができます(執筆時はβ版)。
  • Web pixel app extensions…顧客の行動データをマーケティングキャンペーンの最適化や分析のために集計します。

Checkout Extensibilityは、2023年夏から利用可能になり、Shopifyパートナー、開発者向けに公開されています(一部の機能はβ版で限定公開になっています)。
チェックアウト拡張機能(Checkout Extensibility)への移行ガイド

→豊富なEC構築実績を持つShopify PlusパートナーのBiNDecがご相談を承ります。

欲しい機能を追加可能な便利なチェックアウト関連のアプリ

Shopifyのチェックアウトまわりに便利な機能を使いすることは、アプリを使うことでも可能です。Shopifyのアプリストアから、Checkout UI拡張機能やShopify Functionsを追加すれば、商品のオファーやポイントの利用、カスタムフィールド、割引、行動データ集計などを、チェックアウト画面に追加できます。

欲しい機能を追加可能な便利なチェックアウト関連のアプリ

アプリの利用はShopify Plus限定です。また、アプリを追加する際も自社ECの機能との整合性や運用方法をしっかり確認できる開発者と共にカスタマイズを進めてください。

買いやすく便利なECサイトに! BiNDec

今年アップデートされたShopifyのワンページチェックアウトは、どのプランを利用していてもすべてのShopifyのストアで利用できるようになっています。様々な調査やデータの裏付けから、ワンページチェックアウトは従来の数ページにかかるチェックアウトよりも購買確率は上がることがわかっています。これを聞いて、他のシステムを利用しているEC担当者の中には、いますぐにでも自社ECもShopifyのようなチェックアウトを実装したいと考えた方も多かったのではないでしょうか?

また、Shopify Plusプランを利用しているストアではチェックアウト画面を自社ブランディングに沿ったデザインに変更したり、提供したいポイント画面などのオプションを追加するカスタマイズが可能です。しかし、ECの最重要箇所であるチェックアウト画面をカスタマイズにする際は、必ず専門知識を備えた開発者が行い、テストを経て公開することが必要です。

BiNDecは、Shopify PlusパートナーのWEBLIFEが提供するEC構築・運用サービスです。Shopify Plusを使ったECサイト運用や、最新のチェックアウトに対応したカスタマイズのご相談にも専門知識をもったパートナーがお答えします。ぜひお気軽にご相談ください。
BiNDecのオンライン相談に申込む

POINT

  • ECの売上改善には、チェックアウト(注文確定)画面の改善が有効
  • Shopifyはチェックアウトを1ページにまとめるワンページチェックアウトをリリースした
  • Shopify Plusはチェックアウト拡張機能(Checkout Extensibility)でチェックアウトのカスタマイズ開発が可能

資料を無料ダウンロード