TEXTBOOK SECTION / AI LEARNING

分析と改善

Square API × Next.js 実践EC開発|自社ECを低コストで作る、決済・在庫・注文管理の設計と実装の「応用編:本格ECへ拡張する」より、分析と改善を解説。生成AI、AI活用、DX、業務改善を実践しながら学べるオンライン教材です。

5応用編:本格ECへ拡張するEC

OVERVIEW

この節で学べること

概要を表示する
項目内容
教材名Square API × Next.js 実践EC開発|自社ECを低コストで作る、決済・在庫・注文管理の設計と実装
応用編:本格ECへ拡張する
分析と改善
カテゴリEC
学習内容生成AI、AI活用、DX、業務改善を実践しながら理解するための教材です。

TABLE OF CONTENTS

目次

CONTENT

ここから

第28章では、実店舗、催事、ポップアップ販売に対応するための設計を学びました。

売り場が増えると、在庫、受取場所、決済方法、販売期間を分けて管理する必要がありました。

この章では、公開後のECを改善するための分析と改善を扱います。

ECは、公開して終わりではありません。

公開後に数字を見て、どこでお客様が止まっているのかを確認し、少しずつ改善していく必要があります。

アクセスがある
  ↓
商品を見る
  ↓
カートに入れる
  ↓
決済へ進む
  ↓
購入完了

この流れのどこで止まっているかを見ることで、改善すべき場所が分かります。

攻略本風に言えば、第29章は「売上が止まっている場所を見つける探索ステージ」です。


29.1 ECで見るべき指標

ECで見るべき指標は、売上だけではありません。

売上は最終結果です。

大切なのは、売上に至るまでの途中の数字です。

アクセス数
  ↓
商品詳細閲覧数
  ↓
カート追加数
  ↓
決済開始数
  ↓
購入完了数

この流れを分解すると、どこで離脱しているか分かります。

たとえば、アクセスは多いのに購入が少ない場合です。

アクセス数:
1,000

商品詳細閲覧数:
300

カート追加数:
20

購入完了数:
3

この場合、商品詳細までは見られています。

しかし、カート追加が少ないです。

つまり、商品ページに課題がある可能性があります。

商品説明が弱い
価格に不安がある
送料が分かりにくい
購入ボタンが見つけにくい
写真が少ない

ECでまず見るべき指標は、次の通りです。

・アクセス数
・商品詳細閲覧数
・カート追加数
・決済開始数
・購入完了数
・購入完了率
・平均注文単価
・売上
・リピート購入数
・問い合わせ数

最初から大量の指標を見る必要はありません。

まずは、購入までの流れを追います。

見られているか
興味を持たれているか
買う直前まで進んでいるか
実際に買われているか

EC分析の基本は、次の一言です。

売れているかではなく、どこで止まっているかを見る。

29.2 アクセス数

アクセス数は、ECサイトにどれくらい人が来ているかを見る指標です。

アクセス数が少ない場合、そもそも商品を見てもらえていません。

アクセスが少ない
  ↓
商品が見られない
  ↓
カートに入らない
  ↓
売上が発生しにくい

アクセス数を見るときは、全体だけでなく、ページ別に見ます。

トップページ
商品一覧ページ
商品詳細ページ
コラム記事
ギフトページ
催事ページ

たとえば、トップページのアクセスは多いのに商品詳細が見られていない場合です。

トップページ:
1,000PV

商品詳細ページ:
100PV

この場合、トップページから商品ページへの導線が弱い可能性があります。

商品一覧ボタンが分かりにくい
おすすめ商品が見えない
ファーストビューで商品が伝わっていない

アクセス数を見るときは、流入元も確認します。

・Google検索
・SNS
・LINE
・広告
・直接アクセス
・他サイトからのリンク

流入元によって、改善内容が変わります。

Google検索から多い:
SEOページを強化する

SNSから多い:
OGP画像や着地ページを改善する

LINEから多い:
キャンペーンや再購入導線を見る

ただし、アクセス数だけを増やしても売上にはつながりません。

関係のない人がたくさん来ても、購入されにくいからです。

アクセス数が多い
  でも購入者ではない
  → 売上につながりにくい

アクセス数は入口の数字です。

売上を見るためには、その後の行動もセットで確認します。


29.3 商品詳細閲覧数

商品詳細閲覧数は、商品ページがどれくらい見られているかを表す指標です。

ECでは、商品詳細ページが購入判断の中心になります。

商品一覧を見る
  ↓
気になる商品をクリック
  ↓
商品詳細を見る
  ↓
購入するか判断する

商品詳細閲覧数が少ない場合、商品一覧やトップページから商品詳細への導線が弱い可能性があります。

商品一覧の写真が弱い
商品名が分かりにくい
価格が見えにくい
詳細を見るボタンが目立たない
おすすめ商品が見つからない

商品詳細閲覧数を見るときは、商品ごとに比較します。

商品A:
500回閲覧

商品B:
80回閲覧

商品C:
20回閲覧

よく見られている商品は、入口として強い商品です。

人気商品
検索されている商品
SNSで反応がある商品
ギフト向きの商品

反対に、見られていない商品は、表示場所や説明を見直します。

一覧の下に埋もれている
写真が魅力的ではない
商品名で価値が伝わっていない
カテゴリが分かりにくい

GA4では、ECの商品閲覧などを測るための推奨イベントとして

view_item

などが用意されています。Googleの公式ドキュメントでは、ECイベントを設定することで、人気商品やプロモーション、商品配置が収益に与える影響を把握できると説明されています。(

Google for Developers

)

商品詳細閲覧数を改善する施策です。

・商品一覧の写真を変える
・商品名を分かりやすくする
・おすすめ商品枠に出す
・カテゴリページからリンクする
・コラム記事から商品へつなげる
・SNS投稿から直接商品ページへ送る

商品詳細閲覧数は、購入前の関心度を示す数字です。

まず商品を見てもらえなければ、購入には進みません。


29.4 カート追加率

カート追加率は、商品詳細ページを見た人のうち、どれくらいがカートに入れたかを示す指標です。

商品詳細閲覧数:
100

カート追加数:
10

カート追加率:
10%

計算式です。

カート追加率
=
カート追加数 ÷ 商品詳細閲覧数

カート追加率が低い場合、商品ページに課題がある可能性があります。

・商品説明が足りない
・写真が少ない
・価格に納得できない
・送料が分からない
・在庫状況が分かりにくい
・購入ボタンが見つけにくい
・ギフト対応が分からない

カート追加率を改善するには、購入前の不安を減らします。

価格
送料
配送日
保存方法
返品条件
ギフト対応
支払い方法

購入ボタンの近くに、必要な情報を置きます。

税込価格
送料
配送予定
在庫状況
購入ボタン

GA4のECイベントでは、商品をカートに追加した行動を測る

add_to_cart

が推奨イベントとして用意されています。

view_item

add_to_cart

を比べると、商品を見た人のうち何人が購入意思を示したかを確認できます。(

Google for Developers

)

カート追加率を見るときは、商品別に確認します。

閲覧は多いがカート追加が少ない商品:
説明や価格に課題がある可能性

閲覧は少ないがカート追加率が高い商品:
見てもらえれば売れやすい可能性

後者の商品は、トップページやSNSで露出を増やす価値があります。

見られれば買われる商品
  ↓
露出を増やす
  ↓
売上につながりやすい

カート追加率は、商品ページの説得力を見るための数字です。


29.5 決済開始率

決済開始率は、カートに入れた人のうち、どれくらいが決済画面へ進んだかを見る指標です。

カート追加数:
100

決済開始数:
50

決済開始率:
50%

計算式です。

決済開始率
=
決済開始数 ÷ カート追加数

カートに入れたのに決済へ進まない場合、カート画面に課題がある可能性があります。

・送料が高く見える
・合計金額が分かりにくい
・支払い方法が分からない
・購入ボタンが分かりにくい
・会員登録を求められて離脱する
・配送日が不明

カート画面で大切なのは、購入前の最終不安を減らすことです。

商品小計
送料
割引
合計金額
配送予定
支払い方法

表示例です。

商品小計:5,400円
送料:800円
合計:6,200円

通常、ご注文から3〜5営業日以内に発送します。

[購入手続きへ進む]

GA4では、チェックアウト開始を測る推奨イベントとして

begin_checkout

があります。GoogleのEC計測ドキュメントでは、

view_item

add_to_cart

begin_checkout

purchase

などのイベントを使って購入行動を測る設計が示されています。(

Google for Developers

)

決済開始率を上げる改善例です。

・送料を早めに表示する
・送料無料条件を表示する
・ゲスト購入を残す
・購入ボタンを分かりやすくする
・支払い方法を明記する
・不安をFAQで解消する

カート画面は、購入者が一度「買おう」と思った後の場所です。

ここで離脱する場合は、かなりもったいない状態です。


29.6 購入完了率

購入完了率は、決済へ進んだ人のうち、実際に購入完了した人の割合です。

決済開始数:
100

購入完了数:
70

購入完了率:
70%

計算式です。

購入完了率
=
購入完了数 ÷ 決済開始数

購入完了率が低い場合、決済画面や決済後処理に課題がある可能性があります。

・決済画面で不安になった
・支払い方法が合わなかった
・カード決済に失敗した
・Square画面への遷移が分かりにくい
・エラー表示が分かりにくい
・戻るボタンで迷った

本書の構成では、Squareの安全な決済画面へ進む設計です。

そのため、購入ボタン周辺で次のように説明しておくと安心です。

決済はSquareの安全な画面で行います。

購入完了率を見るときは、注文DBとSquare側の決済状況も確認します。

自社DB:
決済開始注文数

Square:
決済完了数

自社DB:
paid注文数

ここにズレがある場合、Webhookや注文ステータス更新の問題かもしれません。

Squareでは決済完了
でも自社DBはpending
  ↓
Webhook処理を確認

GA4では、購入完了を測る推奨イベントとして

purchase

が用意されています。ECイベントでは、購入行動や売上、商品情報を計測できるようにすることが推奨されています。(

Google for Developers

)

購入完了率は、ECの最終地点に近い数字です。

ここが低い場合は、売上への影響が大きいので優先的に確認します。


29.7 離脱ポイント

離脱ポイントとは、購入者がどこでページを離れたかを見る考え方です。

ECでは、次のどこかで離脱します。

トップページ
商品一覧
商品詳細
カート
決済開始
決済画面
注文完了前

離脱ポイントを見ると、改善すべき場所が分かります。

トップページで離脱:
何の店か伝わっていない可能性

商品一覧で離脱:
商品が選びにくい可能性

商品詳細で離脱:
説明や価格に不安がある可能性

カートで離脱:
送料や合計金額に不安がある可能性

決済で離脱:
支払い方法や決済画面に課題がある可能性

離脱ポイントは、数字だけでなく、実際の画面とセットで確認します。

数字を見る
  ↓
該当ページを開く
  ↓
購入者目線で確認する
  ↓
改善する

たとえば、商品詳細ページで離脱が多い場合です。

確認すること:
商品説明は十分か
写真は分かりやすいか
価格は見やすいか
送料は分かるか
購入ボタンは見つけやすいか
FAQはあるか

カート離脱が多い場合です。

確認すること:
送料が急に出ていないか
会員登録を強制していないか
合計金額が分かりやすいか
決済ボタンが見つけやすいか

離脱ポイントは、犯人探しではありません。

改善の地図です。

どこで止まっているか
  ↓
なぜ止まっているか
  ↓
何を直すか

この順番で考えます。


29.8 GA4との連携

GA4は、Google Analytics 4のことです。

サイトに訪問した人が、どのページを見て、どんな行動をしたかを確認するための分析ツールです。

ECでは、GA4を使って購入までの行動を計測できます。

Googleの公式ドキュメントでは、ECイベントを設定することで、ユーザーの買い物行動を測定し、人気商品、プロモーション、商品配置が収益に与える影響を確認できると説明されています。(

Google for Developers

)

ECで計測したい代表的なイベントです。

view_item:
商品詳細を見た

add_to_cart:
カートに追加した

begin_checkout:
決済を開始した

purchase:
購入完了した

Next.jsでGA4を使う場合、まずGoogle Tagを設置します。

そして、商品詳細表示やカート追加などのタイミングでイベントを送ります。

商品詳細ページを表示
  ↓
view_item

カート追加ボタンを押す
  ↓
add_to_cart

購入手続きへ進む
  ↓
begin_checkout

注文完了
  ↓
purchase

イベント送信のイメージです。

type Ga4EventName =
  | 'view_item'
  | 'add_to_cart'
  | 'begin_checkout'
  | 'purchase';

type Ga4Item = {
  item_id: string;
  item_name: string;
  price: number;
  quantity: number;
};

/**
 * 役割: GA4へECイベントを送信する
 * 入力: イベント名と商品情報
 * 出力: なし
 */
function sendGa4EcommerceEvent(
  eventName: Ga4EventName,
  items: Ga4Item[]
): void {
  if (typeof window === 'undefined') {
    return;
  }

  window.gtag?.('event', eventName, {
    currency: 'JPY',
    items,
  });
}

実装時は、個人情報をGA4に送らないよう注意します。

送ってはいけない:
氏名
メールアドレス
電話番号
住所
注文者情報

GA4には、行動データを送ります。

個人情報を送る場所ではありません。

送る:
商品ID
商品名
価格
数量
購入金額

送らない:
個人情報

GA4は、購入者の動きを見るための道具です。

注文管理DBとは役割が違います。

GA4:
行動を見る

注文DB:
実際の注文を管理する

29.9 Search Consoleとの連携

Search Consoleは、Google検索で自分のサイトがどのように表示され、クリックされているかを確認するためのツールです。

Google Search Consoleの公式ページでも、Search ConsoleはGoogle検索での表示回数、クリック、掲載順位などを測定し、検索パフォーマンスを確認できるツールとして説明されています。(

グーグル

)

ECでは、Search Consoleを使って次のことを確認します。

・どんな検索キーワードで表示されているか
・どのページが検索からクリックされているか
・表示回数はあるのにクリックされていないページはどれか
・検索順位が上がっているか
・商品ページがインデックスされているか

Search ConsoleのPerformance reportでは、クリック数、表示回数、CTR、平均掲載順位などを確認できます。Googleのヘルプでは、CTRはクリック数を表示回数で割った値、平均掲載順位はサイトの最上位結果の平均順位として説明されています。(

Google ヘルプ

)

Search Consoleで見るべき指標です。

クリック数:
検索結果から何回クリックされたか

表示回数:
検索結果に何回表示されたか

CTR:
表示されたうち何%がクリックしたか

平均掲載順位:
検索結果でどのあたりに出ているか

たとえば、表示回数は多いのにクリックが少ない場合です。

表示回数:
5,000

クリック数:
50

CTR:
1%

この場合、titleやdescriptionが弱い可能性があります。

何の商品か分かりにくい
クリックしたくなる理由が弱い
検索意図とズレている

改善例です。

変更前:
商品一覧|金七商店

変更後:
本枯節ギフト一覧|お中元・内祝いに使いやすい食品ギフト|金七商店

Search Consoleでは、商品ページだけでなく、コラム記事も確認します。

だしの取り方
本枯節とは
食品ギフト おすすめ
お中元 食品 高級

検索から来ている記事があれば、その記事から商品ページへの導線を強化します。

検索されているコラム
  ↓
関連商品へのリンクを追加
  ↓
商品詳細へ誘導

Search Consoleは、検索入口を改善するための道具です。

GA4と組み合わせると、検索から購入までを見やすくなります。

Search Console:
検索で見つかっているか

GA4:
サイト内でどう動いたか

注文DB:
実際に購入されたか

29.10 改善施策の優先順位

最後に、改善施策の優先順位を決めます。

ECでは、直したいところがたくさん出てきます。

写真を変えたい
文章を直したい
トップページを変えたい
広告を出したい
LINEを強化したい
商品を増やしたい

しかし、全部を一度にやると、何が効いたのか分からなくなります。

一度に全部変更
  ↓
売上が上がった
  ↓
何が効いたか分からない

改善の基本は、購入までの流れで一番詰まっている場所から直すことです。

アクセスが少ない
  → SEO、SNS、広告、コラムを改善

商品詳細閲覧が少ない
  → トップページ、商品一覧、カテゴリ導線を改善

カート追加率が低い
  → 商品ページ、写真、説明、価格、FAQを改善

決済開始率が低い
  → カート、送料、合計金額、ゲスト購入を改善

購入完了率が低い
  → 決済、Webhook、エラー、支払い方法を改善

優先順位を決めるときは、次の3つで考えます。

1. 売上への影響が大きいか
2. 改善にかかる手間が小さいか
3. すぐ検証できるか

たとえば、購入ボタンの文言変更や送料表示の改善は、比較的すぐできます。

小さな修正
  ↓
すぐ反映
  ↓
数字を見る

一方で、サイト全体のデザイン変更や会員機能追加は、時間がかかります。

大きな修正
  ↓
時間がかかる
  ↓
効果検証も難しい

最初は、小さく試せる改善から始めます。

・購入ボタンを分かりやすくする
・送料を早めに表示する
・FAQを商品ページに追加する
・商品写真を差し替える
・人気商品をトップに出す
・コラムから商品リンクを追加する

改善後は、必ず数字を見ます。

改善前:
カート追加率 5%

改善後:
カート追加率 8%

結果:
改善効果あり

改善は、感覚ではなく数字で判断します。

ただし、数字だけでなく、購入者の声も大切です。

問い合わせ内容
レビュー
SNSコメント
店舗での声
催事での反応

数字と現場の声を合わせると、改善の精度が上がります。


第29章のまとめ

ECは、公開して終わりではありません。

公開後に数字を見て、どこで購入者が止まっているかを確認し、少しずつ改善していくことが大切です。

この章で覚えておきたいポイントは、次の通りです。

1. ECでは売上だけでなく、購入までの途中指標を見る
2. アクセス数は入口の数字であり、売上とは別に考える
3. 商品詳細閲覧数は、商品に興味を持たれているかを見る指標である
4. カート追加率は、商品ページの説得力を見る指標である
5. 決済開始率は、カート画面の分かりやすさを見る指標である
6. 購入完了率は、決済や最終導線の状態を見る指標である
7. 離脱ポイントを見れば、改善すべき場所が分かる
8. GA4では、view_item、add_to_cart、begin_checkout、purchaseなどを計測する
9. Search Consoleでは、検索表示、クリック、CTR、掲載順位を見る
10. 改善施策は、売上への影響が大きく、すぐ試せるものから始める

分析と改善の基本は、次の一言にまとめられます。

売れていない理由を感覚で決めず、数字で場所を特定する。

アクセスが足りないのか。

商品ページで止まっているのか。

カートで離脱しているのか。

決済で失敗しているのか。

数字を見れば、次に直すべき場所が見えてきます。

第30章では、ここまで作ってきたECシステムを、実際の案件としてどう提案し、どのように収益化していくかを整理していきます。

FAQ

よくある質問

分析と改善は医療関係者向けだけの内容ですか。
医療分野の例が含まれる場合もありますが、医療関係者だけに限定した内容ではありません。生成AI、AI活用、DX、業務改善、プロトタイプ開発など、一般的なAI学習の事例として読める内容です。
AI初心者でも読めますか。
はい。AIをこれから学ぶ方、数学が苦手な方、仕事でAIを使いたい方にも読み進めやすいように、教材の章と節の流れに沿って整理しています。
サムネイル画像は必ず表示されますか。
はい。教材にcoverUrlが設定されている場合はその画像を表示し、未設定の場合は代替サムネイル画像を表示します。
Square API × Next.js 実践EC開発|自社ECを低コストで作る、決済・在庫・注文管理の設計と実装のほかの章も読めますか。
はい。教材トップから章立てを確認でき、前後の節へもページ下部のナビゲーションから移動できます。