はじめに
ECサイトで「カートに入れる」ボタンを押すと、画面が一瞬白くなって、数秒待たされてから「カートに追加しました」と表示される。買い物を続けるには「買い物を続ける」ボタンを押して、また画面の切り替わりを待つ。運営しているサイトがこの動きになっていて、「なんとなく使いにくい気がする」と感じている方は多いはずです。
この待ち時間と画面の切り替わりをなくす仕組みが、Ajaxカートです。この記事では、Ajaxカートが何をしてくれるのか、従来のカートと何が違うのか、そしてShopify（ショッピファイ。ECサイトの土台になるサービス)でどう実現できるのかを、技術者ではない方にも分かるように解説します。
Ajaxカートとは何か
ひとことで言うと「ページを移動しないカート」
Ajaxカートは、商品の追加・数量変更・削除といったカート操作を、ページを移動せずにその場で完結させる仕組みです。ボタンを押した瞬間にカートアイコンの数字が増え、画面の横からカートパネルがスライドして出てくる。ユーザーは今見ているページにとどまったまま、次の商品を探しに行けます。買い物の流れを中断させないカート、という言い方もできます。
Ajaxという言葉の意味
Ajax（エイジャックス）は技術用語ですが、考え方はシンプルです。通常のWebページは、何か操作をするたびにサーバーからページ全体を取得し直します。これに対してAjaxは、必要なデータだけをサーバーとやり取りする方式。カートで言えば、「商品がカートに入った」という情報さえ受け取れれば十分で、ヘッダーもフッターも商品説明も読み込み直す必要はないんですよね。ページ全体ではなく差分だけを更新する。この違いが、待ち時間の差になります。
なぜ待ち時間が消えるのか
従来の方式でユーザーが待たされていたのは、カート処理そのものではなく、ページ全体を作り直して読み込む時間でした。Ajaxカートではやり取りするデータが「カートの中身」だけになるため、通信量が大幅に減り、画面の描き直しも変わった部分だけで済みます。処理の中身は同じでも、運ぶ荷物が小さくなるぶん速くなる、という理屈です。
従来のカートと何が違うのか
従来のカートの流れ
商品ページで「カートに入れる」をクリックすると、画面が白くなって読み込みが始まり、カートページへ移動するか、同じページが再読み込みされます。買い物を続けるには「続けて買い物する」をクリックして、また画面の切り替わりを待つ。商品を3つカートに入れるだけで、この待ち時間を3回繰り返すことになります。
Ajaxカートの流れ
「カートに入れる」をクリックすると、すぐにカートアイコンの数字が増え、ミニカートがスライドして表示されます。そのまま画面を閉じれば、いま見ていたページで買い物の続きができる。気になる商品をテンポよくカートに入れていける状態です。
操作のたびにページ全体を再読み込み。画面が白くなり、数秒の待ち時間が毎回発生する
必要なデータだけをやり取りし、画面の一部だけを更新。ページはそのままで待ち時間はほぼゼロ
図を一言でまとめると、「ページごと取り替えるか、変わった部分だけ描き直すか」の違いです。
なぜいまAjaxカートが重要なのか
スマートフォンでの買い物が主流になった
日本のECサイトでは、半分以上のユーザーがスマートフォンから買い物をしています。モバイル回線でページ全体を毎回読み込むと、通信量が増えて表示も遅くなりがちです。必要最小限のデータだけをやり取りするAjaxカートは、回線が細い環境ほど効果がはっきり出ます。
大手ECの体験が基準になっている
大手のECサイトやD2Cブランドの多くは、すでにカート操作をAjax化しています。ユーザーは「カートに入れてもページが変わらない」体験に慣れており、それが無意識の基準になっている状態。操作のたびにページが再読み込みされるサイトは、比較されたときに「使いにくい」と感じられやすくなっています。
ページ遷移の数だけ離脱が起きる
画面の切り替わりと待ち時間は、ユーザーが買い物をやめる小さなきっかけになります。特に複数の商品をカートに入れてもらいたいサイトでは、1回ごとの待ち時間が積み重なるため、Ajaxカートの有無が購入完了率の差になって表れることがあります。
Shopifyでどう実現するか
Storefront APIという窓口を使う
ShopifyはStorefront API（外部のサイトからShopifyのカートや商品情報を操作するための窓口）を提供していて、これを使えばAjaxカートを実装できます。標準のShopifyテーマにも部分的にAjax化されたものはありますが、ヘッドレス構成（表側のサイトをNext.jsなどで自作し、裏側のデータ管理だけShopifyに任せる構成)にすると、カート体験を細部まで自由に設計できるようになります。
実現できるカートUIの例
Ajax化すると、カートの見せ方の選択肢が広がります。代表的なのは、ヘッダーのカートアイコンから中身がドロップダウンで見える「ミニカート」、画面の右側からスライドして出てくる「スライドカート（ドロワーカート）」、商品一覧の横にカートを常時表示しておく「ページ内カート」の3つ。扱う商品や買われ方に合わせて、どの形が合うかを選んでいきます。
まとめ
Ajaxカートは、カート操作からページの再読み込みをなくし、買い物の流れを途切れさせないための仕組みです。必要なデータだけをやり取りするという構造上、スマートフォンとの相性もよく、ShopifyならStorefront APIを通じて実現できます。
効果の大きさと具体的な工夫、そして裏側の仕組みは、続きの2記事で解説しています。