このプロジェクトについて
ECサイトで「カートに入れる」ボタンを押すたびに画面全体が読み込み直され、そのたびに数秒待たされる。この積み重ねが、ユーザーの買い物のリズムを途切れさせ、離脱の原因になります。運営側から見ると、「商品は見てもらえているのにカートに入れてもらえない」「カートに入れたのに購入まで進んでもらえない」という形で数字に表れる問題です。
このプロジェクトでは、Shopify（ショッピファイ。ECサイトの土台になるサービス）が提供するStorefront API（外部のサイトからShopifyの機能を呼び出すための窓口）を使い、ページを一切移動せずにカート操作が完結する「Ajaxカート」を実装しました。商品を追加すればその場でカートアイコンの数字が増え、画面の横からカートパネルがスライドして出てくる。従来のテーマで毎回発生していたページの再読み込みが、操作の流れから丸ごとなくなります。
仕組みとしては、Next.js（ネクストジェイエス。Webサイトを作るための土台）で作ったフロント側がAPIに「商品を追加して」とお願いし、返ってきた結果を画面の一部だけに反映する、という構成です。ページ全体を取得し直さないので、待ち時間は体感でほぼゼロ。「サクサク動く」という印象がそのまま買い物の続けやすさにつながりました。
詳しく学ぶ
Ajaxカートについて、3つの記事で詳しく解説しています。初めての方は順番に読むと理解が深まります。
Ajaxカートとは？
まずは基本から。Ajaxカートの考え方、従来のカートとの違い、なぜ重要なのかを解説します。
カートUXの改善ポイント
Ajaxカートの効果と、ユーザーに喜ばれる細かな工夫。モバイル対応のポイントも解説します。
Shopify Cart APIの仕組み
Storefront APIへの問い合わせ、状態管理、楽観的UI更新など、裏側の組み立てを解説します。
構成図
クリック
画面全体が読み込み直され、待ち時間が発生
従来の方式では、ボタンを押すたびにページ全体を作り直すため、毎回待ち時間が発生していました。
クリック
即時反映・ページはそのまま
新しい方式では、必要なデータだけをAPIとやり取りし、画面の変わる部分だけを描き直します。ページはそのままなので、ユーザーは買い物を中断されません。
主な成果
- 待ち時間の解消: カート操作のたびに発生していたページ再読み込みがなくなり、操作は体感ほぼ即時に
- カート追加率の向上: 気軽に追加できるようになったことで、2点目・3点目をカートに入れる行動が増加
- 購入体験の改善: 買い物の流れが途切れないことが、そのまま満足度と購入完了率につながる
使用技術
- Shopify Storefront API (GraphQL)
- Next.js (App Router)
- React Context / Zustand
- TypeScript