customer-accounts

顧客アカウント

概要

顧客アカウントを利用すると、購入者は住所を保存してチェックアウトを迅速化し、注文履歴を確認し、配送状況を追跡し、プロフィールを管理できます。Shopify、WooCommerce、BigCommerce など、主要な e コマースプラットフォームにはすべてこの機能が組み込まれており、カスタム開発をしなくても、アカウント登録、ログイン、住所録、注文履歴を利用できます。主な検討事項は、アカウントを任意にするか必須にするか、また、追加機能でプラットフォームのデフォルトのアカウントページを拡張するかどうかです。

このスキルを使用するタイミング

• 新しいストアフロントで顧客登録とログインを有効にするとき
• 注文履歴や追跡機能を備えたアカウントダッシュボードをカスタマイズするとき
• リピーターのチェックアウトを迅速化するため、住所録を追加するとき
• ゲストチェックアウトのユーザーを登録済み顧客に移行するとき
• ウィッシュリストや「後で見る」機能を追加するとき

基本手順

ステップ 1：プラットフォームを特定し、顧客アカウントを有効にする

プラットフォーム	アカウントシステム	推奨される拡張機能
Shopify	標準の顧客アカウント（クラシックまたは新規）	アカウントページを拡張する Customer Accounts Concierge または Flits
WooCommerce	マイアカウントページ（標準搭載、カスタマイズ可能）	YITH WooCommerce Wishlist、会員限定コンテンツ向けの WooCommerce Memberships
BigCommerce	顧客アカウントポータル（標準搭載）	段階別アクセス向けの Customer Groups、ロイヤルティ機能との連携向けの LoyaltyLion
カスタム／ヘッドレス	JWT セッションと bcrypt パスワードハッシュを使用して構築	認証とアカウント UX を完全に制御する場合に必要

---

ステップ 2：プラットフォームごとの設定

---

Shopify

Shopify では、クラシックアカウントと、新しい新規顧客アカウント（すべてのプランで利用可能）の 2 種類のアカウント体験が提供されています。

アカウントを有効にして、アカウント体験を選択する：

1. Settings → Customer accounts に移動します
2. 次のいずれかを選択します。
   • クラシックアカウント：従来のメールアドレスとパスワードによるログイン。Liquid テーマでアカウントページをカスタマイズできます
   • 新規顧客アカウント：メールリンクによるパスワードレスログイン。Shopify が管理する Shopify ホストのページ（すばやく設定できますが、カスタマイズ性は低くなります）
3. アカウントを任意（推奨）または必須に設定します

クラシックアカウントの設定：

1. Settings → Customer accounts でクラシックアカウントを有効にします
2. アカウントページは /account に表示され、レイアウトはテーマで制御されます
3. Online Store → Themes → Customize → Customer account pages でアカウントページをカスタマイズします
4. 主なページ：ログイン、登録、アカウント概要、注文詳細、住所

アカウントを任意にする（強く推奨）：

• ゲストチェックアウトを常に許可し、購入前に登録を強制しないでください
• チェックアウト後に「アカウントを作成して詳細を保存」という案内を表示します
• 顧客が過去の注文に使用したものと同じメールアドレスで登録すると、Shopify が「ゲストからアカウントへの移行」フローを自動的に処理します

アカウントページの拡張：

アカウント機能を強化する場合（ウィッシュリスト、ロイヤルティポイント、ソーシャルログイン、追跡情報付きの最近の注文など）：

• App Store から Flits をインストールします。包括的なアカウントページのカスタマイズが可能です
• または Customer Accounts Concierge をインストールします。ウィッシュリスト、最近閲覧した商品、再注文機能が追加されます

---

WooCommerce

WooCommerce には、注文履歴、住所、プロフィール管理を含む マイアカウント ページが組み込まれています。

マイアカウントを設定する：

1. WooCommerce → 設定 → アカウントとプライバシー に移動します
2. 次の項目を設定します：
   • ゲスト購入：「アカウントなしで注文できるようにする」にチェックを入れます
   • アカウント作成：必要に応じて、チェックアウト中にアカウントを自動作成します
   • アカウントの消去：「お客様がアカウントの削除をリクエストできるようにする」を有効にします
3. マイアカウントページは /my-account/ に自動作成されます

マイアカウントのタブをカスタマイズする：

デフォルトのタブは「ダッシュボード」「注文」「ダウンロード」「住所」「アカウント詳細」「ログアウト」です。タブを追加または削除するには：

1. 子テーマの functions.php で woocommerce_account_menu_items フィルターを使うか、YITH WooCommerce Customize My Account Page などのプラグインをインストールして、カスタムタブを追加します
2. フィルター内の配列を変更してタブの順序を変更します

アドレス帳：

1. WooCommerce → 設定 → アカウント → お客様が複数の住所を保存できるようにする に移動します
2. お客様は マイアカウント → 住所 で複数の住所を追加・編集できます
3. WooCommerce はデフォルトの住所をチェックアウトに自動入力します

ウィッシュリスト：

• YITH WooCommerce Wishlist（無料版／プレミアム版）をインストールします
• 商品ページに「ウィッシュリストに追加」ボタンを追加し、マイアカウントにウィッシュリストページを追加します

購入後にゲストを登録済みユーザーに切り替える：

アカウントが有効になっているものの任意設定の場合、WooCommerce は注文確認メールに「アカウントを作成」の案内を自動的に表示します。

---

BigCommerce

BigCommerce には、顧客ポータルが組み込まれています。

有効化と設定：

1. ストア設定 → ストアの設定 → 表示 → 顧客アカウントへのアクセス に移動します
2. ゲスト購入を許可するには、「任意」に設定します
3. アカウントページはテーマで管理されます。Stencil テーマエディターでカスタマイズします

顧客グループ：

段階的なアクセス、B2B 価格設定、または会員限定カテゴリーには、顧客グループを使用します：

1. 顧客 → 顧客グループ → グループを追加 に移動します
2. グループ固有の価格設定、カテゴリーの表示設定、または配送ルールを設定します
3. 顧客を手動でグループに割り当てるか、購入履歴に基づいて自動割り当てします

アドレス帳：

• 顧客アカウントポータルに標準搭載されています
• お客様は複数の住所を保存し、チェックアウト時に選択できます

---

カスタム／ヘッドレス

ヘッドレスのストアフロントでは、安全な認証を備えた完全なアカウントシステムを構築します：

// lib/auth.ts
import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';
import { z } from 'zod';

const registerSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8).max(128),
  firstName: z.string().min(1).max(100),
  lastName: z.string().min(1).max(100),
  acceptsMarketing: z.boolean().default(false),
});

// POST /api/customers/register
export async function register(req: Request, res: Response) {
  const input = registerSchema.parse(req.body);

  const existing = await db.customers.findByEmail(input.email.toLowerCase());
  if (existing) return res.status(409).json({ error: 'An account with this email already exists' });

  const passwordHash = await bcrypt.hash(input.password, 12);  // Cost factor 12 minimum
  const customer = await db.customers.create({ ...input, email: input.email.toLowerCase(), passwordHash });

  await sendVerificationEmail(customer);
  const token = jwt.sign({ sub: customer.id, type: 'customer' }, process.env.JWT_SECRET!, { expiresIn: '7d' });

  res.status(201).json({ customer: omit(customer, ['passwordHash']), token });
}

// POST /api/customers/login
export async function login(req: Request, res: Response) {
  const { email, password } = req.body;
  const customer = await db.customers.findByEmail(email.toLowerCase());

  // Use the same error for both "not found" and "wrong password" to prevent email enumeration
  if (!customer || !customer.passwordHash) return res.status(401).json({ error: 'Invalid email or password' });
  if (customer.status === 'disabled') return res.status(403).json({ error: 'This account has been disabled' });

  const valid = await bcrypt.compare(password, customer.passwordHash);
  if (!valid) return res.status(401).json({ error: 'Invalid email or password' });

  const token = jwt.sign({ sub: customer.id, type: 'customer' }, process.env.JWT_SECRET!, { expiresIn: '7d' });
  res.json({ customer: omit(customer, ['passwordHash']), token });
}

// Address book CRUD — GET /api/customers/me/addresses
export async function listAddresses(req: AuthRequest, res: Response) {
  const addresses = await db.customerAddresses.findMany({ where: { customerId: req.customerId } });
  res.json({ addresses });
}

// POST /api/customers/me/addresses
export async function addAddress(req: AuthRequest, res: Response) {
  const existing = await db.customerAddresses.findMany({ where: { customerId: req.customerId } });
  const input = { ...addressSchema.parse(req.body), customerId: req.customerId };

  if (input.isDefault || existing.length === 0) {
    await db.customerAddresses.updateMany({ where: { customerId: req.customerId }, data: { isDefault: false } });
    input.isDefault = true;
  }

  const address = await db.customerAddresses.create({ data: input });
  res.status(201).json({ address });
}

// GET /api/customers/me/orders — paginated order history with tracking
export async function listOrders(req: AuthRequest, res: Response) {
  const page = parseInt(req.query.page as string) || 1;
  const limit = Math.min(parseInt(req.query.limit as string) || 10, 50);

  const [orders, total] = await Promise.all([
    db.orders.findMany({ where: { customerId: req.customerId }, skip: (page - 1) * limit, take: limit, orderBy: { createdAt: 'desc' }, include: { lineItems: true, shipments: true } }),
    db.orders.count({ where: { customerId: req.customerId } }),
  ]);

  res.json({ orders, pagination: { page, limit, total, totalPages: Math.ceil(total / limit) } });
}

---

ステップ 3：チェックアウト後のアカウント作成を設定する

アカウント作成を促すのに最も効果的なタイミングは、購入前ではなく、初回購入の成功直後です。

Shopify： 顧客アカウントが有効になっているものの任意設定の場合、注文確認ページに「アカウントを作成」ボタンが自動的に表示されます。オンラインストア → テーマ → カスタマイズ → 注文状況ページ でメッセージをカスタマイズします。

WooCommerce： WooCommerce → 設定 → アカウント で「ご注文ありがとうございます」ページのメッセージをカスタマイズするか、Checkout Field Editor プラグインを使ってチェックアウト後のアカウント作成案内を追加します。

メッセージの例：「次回のチェックアウトをスムーズにするため、情報を保存しましょう」は、「アカウントを作成する」よりも効果的です。行動ではなく、そのメリットに焦点を当てましょう。

ベストプラクティス

• アカウント作成は常に任意にします — 購入前の登録を決して強制しないでください。購入後の登録率は購入前より大幅に高くなります
• 可能であればソーシャルログイン（Google、Facebook）を提供します — モバイルユーザーの手間を大幅に減らします。Shopify では Single Sign-On (SSO)、WooCommerce では WooCommerce Social Login などのアプリを利用します
• 保存済みの住所をチェックアウトに自動入力します — アカウントの主な価値はチェックアウトの迅速化です。デフォルトの住所が自動入力されることを確認します
• ゲスト購入者に、チェックアウトから 24 時間後にアカウント作成を案内する再エンゲージメントメールを送信します — タイミングが重要です
• GDPR／CCPA に準拠したアカウント削除を有効にします — すべてのプラットフォームが対応しています。「アカウントを削除」するオプションを簡単に見つけられるようにしてください。データ消去のワークフローについては、プラットフォームのドキュメントを参照してください

よくある落とし穴

問題	解決策
アカウント作成後、過去の注文が顧客に表示されない	Shopify では、ゲストチェックアウトでの過去の注文は、顧客が同じメールアドレスで登録すると紐付けられます。Settings → Customer accounts でアカウントの紐付けが有効になっていることを確認してください
海外の顧客の住所検証に失敗する	州／都道府県を必須にしないでください。州や都道府県がない国も多くあります。WooCommerce では国に応じてフィールドの表示を切り替えられます
JWT トークンの有効期間が長すぎる	セキュリティを高めるには、有効期間が15分のアクセストークンとリフレッシュトークンを使用するか、安全な HttpOnly Cookie を使ったサーバーサイドセッションを使用してください
重複した顧客レコードを統合する方法がない	Shopify と WooCommerce はどちらも管理画面で顧客の統合に対応しています。独自に構築する場合は、注文と住所を統合するツールを構築してください

関連するスキル

• @customer-segmentation
• @customer-lifetime-value
• @personalization-engine