自社ECサイト開発：AI提言を反映する仕組みの実装

AI提言をサイトに反映する：技術的な挑戦

ECサイトリニューアルの最大の目的は、AIの提言を自動的にサイトに反映することでした。

これは、技術的には簡単ではありませんでした。

課題1：リアルタイム性

AIの分析結果を即座に反映

• AIが価格最適化を提言 → 数秒でサイトに反映
• 在庫データが更新 → リアルタイムで表示更新
• 遅延は許されない

課題2：信頼性

間違った情報を表示してはいけない

• 価格が間違っていたら大問題
• 在庫数が不正確だと顧客クレーム
• 100%の精度が必要

課題3：パフォーマンス

多数のアクセスでもサクサク動く

• 1秒でも遅いと離脱率が上がる
• 同時アクセス数の増加に耐える
• 高速レスポンスが必須

システムアーキテクチャ

全体像

┌──────────────┐
│ AIエンジン    │ ← データ分析、予測、提言生成
└──────┬───────┘
       │
       ↓
┌──────────────┐
│ APIゲートウェイ│ ← AI提言を受け取り、処理
└──────┬───────┘
       │
       ↓
┌──────────────┐
│ データベース   │ ← 商品情報、在庫、価格を保存
└──────┬───────┘
       │
       ↓
┌──────────────┐
│ Next.js      │ ← フロントエンド（ユーザーが見る）
│ (SSR/ISR)    │
└──────────────┘

データフロー

1. AIが分析

• 売上データ、在庫データ、競合価格を分析
• 最適価格、在庫予測、推奨商品を算出
• 毎分実行

2. APIに送信

• AIエンジンからAPIゲートウェイに送信
• JSON形式でデータ転送
• RESTful API

3. データベース更新

• APIがデータベースを更新
• トランザクション処理で整合性確保
• 即座に反映

4. フロントエンド表示

• Next.jsがデータベースから最新データ取得
• ISR（Incremental Static Regeneration）で高速表示
• ユーザーに提示

機能1：リアルタイム価格最適化

AIの価格提言アルゴリズム

入力データ

• 現在の在庫数
• 過去30日の販売数
• 競合他社の価格（3社）
• 季節要因（気温、イベント）

最適価格の算出

# 簡略化した例
def calculate_optimal_price(product):
    base_price = product.cost * 1.3  # 原価の130%

    # 在庫調整
    if product.stock < 5:
        price_adj = 1.1  # 在庫少 → 10%値上げ
    elif product.stock > 50:
        price_adj = 0.95  # 在庫多 → 5%値下げ
    else:
        price_adj = 1.0

    # 競合価格調整
    avg_competitor_price = get_avg_competitor_price(product)
    if base_price > avg_competitor_price * 1.1:
        price_adj *= 0.98  # 競合より高い → 2%値下げ

    # 需要予測調整
    demand_forecast = predict_demand(product)
    if demand_forecast > 10:  # 高需要予測
        price_adj *= 1.05  # 5%値上げ

    optimal_price = base_price * price_adj
    return round(optimal_price, -2)  # 100円単位に丸める

価格更新API

エンドポイント: POST /api/prices/update

リクエスト:

{
  "product_id": "JKT-BLK-M",
  "optimal_price": 23000,
  "reason": "在庫少数・高需要予測",
  "confidence": 0.85
}

処理フロー:

1. バリデーション

   • 価格が原価を下回っていないか確認
   • 価格変動が±30%以内か確認
   • 異常値を検出

2. 価格変更の記録

   • 変更前の価格を履歴に保存
   • 変更理由をログに記録
   • トレーサビリティ確保

3. データベース更新

   • トランザクション開始
   • 商品価格を更新
   • コミット
   • 整合性保証

4. キャッシュ無効化

   • CDNキャッシュをパージ
   • Next.jsのISRを再生成トリガー
   • 即座に反映

フロントエンド表示

商品ページ（Next.js）

// app/products/[id]/page.tsx
export async function generateStaticParams() {
  const products = await prisma.product.findMany();
  return products.map(p => ({ id: p.id }));
}

export const revalidate = 60; // ISR: 60秒ごとに再生成

export default async function ProductPage({ params }) {
  const product = await prisma.product.findUnique({
    where: { id: params.id },
    include: { priceHistory: true }
  });

  return (
    <div>
      <h1>{product.name}</h1>
      <div className="price">
        ¥{product.price.toLocaleString()}
      </div>
      {product.priceHistory[0]?.price !== product.price && (
        <div className="price-change">
          <span className="old-price">
            ¥{product.priceHistory[0]?.price.toLocaleString()}
          </span>
          <span className="discount">
            {Math.round((1 - product.price / product.priceHistory[0]?.price) * 100)}% OFF
          </span>
        </div>
      )}
    </div>
  );
}

機能2：在庫可視化とアラート

リアルタイム在庫更新

tameFTPからの在庫データ

楽天: 5個
Amazon: 3個
auPAY: 2個
─────────
合計: 10個

在庫統合API

エンドポイント: POST /api/inventory/sync

処理:

async function syncInventory(sku: string) {
  // 各モールから在庫取得
  const rakutenStock = await getRakutenStock(sku);
  const amazonStock = await getAmazonStock(sku);
  const aupayStock = await getAuPayStock(sku);

  // 合計在庫
  const totalStock = rakutenStock + amazonStock + aupayStock;

  // データベース更新
  await prisma.inventory.update({
    where: { sku },
    data: {
      rakuten: rakutenStock,
      amazon: amazonStock,
      aupay: aupayStock,
      total: totalStock,
      updatedAt: new Date()
    }
  });

  // 在庫少数アラート
  if (totalStock < 10) {
    await sendLowStockAlert(sku, totalStock);
  }

  // キャッシュ更新
  await redis.set(`inventory:${sku}`, totalStock, 'EX', 300);
}

フロントエンド表示

在庫表示コンポーネント

function StockDisplay({ sku }: { sku: string }) {
  const { data: stock } = useSWR(`/api/inventory/${sku}`, {
    refreshInterval: 30000 // 30秒ごとに更新
  });

  if (!stock) return <div>在庫確認中...</div>;

  return (
    <div className="stock-info">
      {stock.total > 10 && (
        <span className="stock-available">在庫あり</span>
      )}
      {stock.total <= 10 && stock.total > 0 && (
        <span className="stock-low">
          残り{stock.total}個
        </span>
      )}
      {stock.total === 0 && (
        <span className="stock-out">
          売り切れ
          {stock.nextArrival && (
            <span className="restock-date">
              {stock.nextArrival}入荷予定
            </span>
          )}
        </span>
      )}
    </div>
  );
}

機能3：AIパーソナライゼーション

顧客行動の記録

イベントトラッキング

// クライアント側
async function trackEvent(event: {
  type: 'view' | 'add_to_cart' | 'purchase';
  productId: string;
  userId?: string;
}) {
  await fetch('/api/events', {
    method: 'POST',
    body: JSON.stringify(event)
  });
}

// ページ閲覧時
useEffect(() => {
  trackEvent({
    type: 'view',
    productId: product.id,
    userId: user?.id
  });
}, []);

AIレコメンデーション

協調フィルタリング

# サーバー側（Python）
from sklearn.metrics.pairwise import cosine_similarity

def get_recommendations(user_id, n=5):
    # ユーザーの購入履歴取得
    user_purchases = get_user_purchases(user_id)

    # 類似ユーザーを探す
    similar_users = find_similar_users(user_purchases)

    # 類似ユーザーが購入した商品
    recommended_products = []
    for similar_user in similar_users:
        products = get_user_purchases(similar_user)
        recommended_products.extend(products)

    # スコア計算
    product_scores = calculate_scores(recommended_products)

    # 上位n件を返す
    return product_scores[:n]

フロントエンド表示

おすすめ商品セクション

export default async function RecommendedProducts({ userId }) {
  const recommendations = await fetch(
    `${AI_API_URL}/recommendations/${userId}`
  ).then(r => r.json());

  return (
    <section className="recommendations">
      <h2>あなたへのおすすめ</h2>
      <div className="product-grid">
        {recommendations.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </section>
  );
}

機能4：商品説明の自動生成

ChatGPT APIによる説明文生成

プロンプト設計

async function generateProductDescription(product: Product) {
  const prompt = `
以下の商品情報から、魅力的な商品説明を400文字程度で生成してください。

【商品情報】
商品名: ${product.name}
カテゴリ: ${product.category}
価格: ${product.price}円
特徴: ${product.features.join(', ')}

【要件】
- 顧客のベネフィットを強調
- SEOを意識したキーワード配置
- 読みやすい文章構成
- HTMLタグなし、プレーンテキスト
`;

  const response = await openai.chat.completions.create({
    model: 'gpt-4',
    messages: [
      { role: 'system', content: 'あなたはECサイトの商品説明を書くプロのコピーライターです。' },
      { role: 'user', content: prompt }
    ],
    temperature: 0.7,
    max_tokens: 500
  });

  return response.choices[0].message.content;
}

生成結果の検証

品質チェック

function validateDescription(description: string): boolean {
  // 文字数チェック
  if (description.length < 200 || description.length > 600) {
    return false;
  }

  // NGワードチェック
  const ngWords = ['最高', '絶対', '必ず'];
  if (ngWords.some(word => description.includes(word))) {
    return false;
  }

  // HTMLタグがないことを確認
  if (/<[^>]*>/.test(description)) {
    return false;
  }

  return true;
}

パフォーマンス最適化

1. キャッシング戦略

多層キャッシュ

CDN（Cloudflare）
  ↓ キャッシュミス
Next.js ISR
  ↓ キャッシュミス
Redis
  ↓ キャッシュミス
データベース

キャッシュ時間

• CDN: 5分
• Next.js ISR: 1分
• Redis: 30秒

2. データベース最適化

インデックス

-- 商品IDでの高速検索
CREATE INDEX idx_products_id ON products(id);

-- SKUでの高速検索
CREATE INDEX idx_products_sku ON products(sku);

-- 価格範囲検索
CREATE INDEX idx_products_price ON products(price);

-- カテゴリ検索
CREATE INDEX idx_products_category ON products(category_id);

3. 画像最適化

Next.js Image Optimization

import Image from 'next/image';

<Image
  src={product.imageUrl}
  alt={product.name}
  width={800}
  height={600}
  quality={85}
  loading="lazy"
  placeholder="blur"
/>

監視とアラート

パフォーマンス監視

Vercel Analytics

• ページ読み込み時間
• Core Web Vitals
• エラー率

Sentry

• エラーログ
• スタックトレース
• ユーザー影響範囲

ビジネスメトリクス

Google Analytics 4

• ページビュー
• コンバージョン率
• 離脱率

カスタムダッシュボード

• リアルタイム売上
• 在庫状況
• AI提言の実行状況

運用開始後の成果

定量的な成果

パフォーマンス

• ページ読み込み時間：3秒 → 0.8秒
• コンバージョン率：2.5% → 3.5%（+40%）
• 離脱率：15%低下

業務効率

• 商品ページ作成：1時間 → 5分（95%削減）
• 価格変更：30分 → 自動（100%削減）
• 完全自動化達成

定性的な成果

顧客満足度

• レビュー評価：4.2 → 4.7
• リピート率：+25%
• 顧客の声「使いやすくなった」

社内評価

• 運用負担の劇的な軽減
• データ活用の実感
• チーム全体のモチベーション向上

---

次回予告

次回は、「全システムの連鎖：データ駆動型EC運営の完成形」をお届けします。

tameFTP、SKU管理、財務システム、そしてECサイト。すべてのシステムがどのように連携し、シームレスなデータ駆動型EC運営を実現したのか。その全貌をご紹介します。

---

🎯 AI×ECコンサルティングサービスのご案内

現在、株式会社QUESTではAI×ECコンサルティングサービスを10社限定で募集しています。

このブログシリーズでご紹介している「データ駆動型ECコンサルティング」を、あなたのビジネスにも適用しませんか？

対象となる企業様

• 楽天、Amazon、auPAYマーケット等での販売を行っている
• データ分析や在庫管理に課題を感じている
• AIを活用した業務効率化に関心がある
• 売上向上のための戦略的なコンサルティングを求めている

まずは無料相談からお気軽にお問い合わせください。

---

この記事のポイント

• ✅ AIエンジン→API→データベース→Next.jsの4層アーキテクチャ
• ✅ リアルタイム価格最適化、在庫可視化、AIパーソナライゼーションを実装
• ✅ ChatGPT APIで商品説明を自動生成、作業時間95%削減
• ✅ 多層キャッシュ戦略でページ読み込み0.8秒、コンバージョン率+40%
• ✅ Next.js ISR、Redis、CDNの組み合わせで高速レスポンス実現
• ✅ 完全自動化達成、顧客満足度向上、レビュー評価4.7に