ブランド追跡ページの構築ガイド

お客様が配送業者の追跡リンクをクリックするたびに、自社サイトから離れてしまいます。これはエンゲージメント、ブランディング、サポート負荷の軽減にとって大きな機会損失です。ブランド追跡ページを用意すれば、お客様を自社ドメインに留めながら、より良い体験を提供できます。実際に構築してみましょう。

なぜブランド追跡ページが必要なのか

配送業者の追跡ページの問題点

お客様を配送業者の追跡ページに誘導すると、以下のようなことが起こります。

  • 自社のブランド体験から離脱してしまう
  • 御社のプロモーションではなく、配送業者の広告が表示される
  • 御社のサポートチームに簡単に連絡できない
  • 追跡ページが分かりにくい場合、配送業者ではなく御社が不満の対象になる

ブランド追跡ページのメリット

メリット効果
お客様を自社サイトに留めるページ再訪率 +15%
サポートチケットの削減追跡関連の問い合わせ -40%
アップセルの機会関連商品の提案が可能
ブランドの一貫性プロフェッショナルな体験の提供
データ収集顧客エンゲージメントの把握

アーキテクチャ

お客様が追跡リンクをクリック
         ↓
自社のブランド追跡ページ
         ↓
JavaScriptが自社APIから追跡データを取得
         ↓
自社APIがWhereParcelを呼び出し → 標準化されたデータを返却
         ↓
追跡タイムライン＋ブランド要素をレンダリング

ステップ1：バックエンドAPIエンドポイント

WhereParcelへのリクエストをプロキシするAPIエンドポイントを作成します。

// routes/tracking.js
const express = require('express');
const router = express.Router();

router.get('/api/track/:trackingNumber', async (req, res) => {
  const { trackingNumber } = req.params;

  try {
    // 追跡番号で注文を検索
    const order = await db.orders.findByTracking(trackingNumber);

    // WhereParcelから追跡データを取得
    const tracking = await fetch('https://api.whereparcel.com/v2/track', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.WHEREPARCEL_API_KEY}:${process.env.WHEREPARCEL_SECRET_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        trackingItems: [{ carrier: order?.carrier || 'auto', trackingNumber }],
      }),
    }).then(r => r.json());

    res.json({
      order: order ? {
        id: order.id,
        items: order.items.map(i => ({
          name: i.name,
          image: i.imageUrl,
          quantity: i.quantity,
        })),
      } : null,
      tracking: tracking.data,
    });
  } catch (error) {
    res.status(500).json({ error: 'Unable to fetch tracking data' });
  }
});

module.exports = router;

ステップ2：追跡ページのHTML構造

追跡ページの基本構造を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配送状況の確認 | YourStore</title>
  <style>
    /* ステップ4でスタイルを定義 */
  </style>
</head>
<body>
  <header class="tracking-header">
    <a href="/" class="logo">
      <img src="/logo.svg" alt="YourStore" />
    </a>
    <a href="/support" class="support-link">お困りですか？</a>
  </header>

  <main class="tracking-container">
    <!-- 検索フォーム（URLに追跡番号がない場合） -->
    <div id="search-section" class="search-section">
      <h1>配送状況を確認する</h1>
      <form id="tracking-form">
        <input
          type="text"
          id="tracking-input"
          placeholder="追跡番号を入力してください"
          required
        />
        <button type="submit">追跡する</button>
      </form>
    </div>

    <!-- 結果表示 -->
    <div id="results-section" class="results-section" style="display:none">
      <div id="status-banner" class="status-banner"></div>
      <div id="order-items" class="order-items"></div>
      <div id="tracking-timeline" class="tracking-timeline"></div>
    </div>

    <!-- ローディング表示 -->
    <div id="loading" class="loading" style="display:none">
      <div class="spinner"></div>
      <p>追跡情報を取得しています...</p>
    </div>
  </main>

  <footer class="tracking-footer">
    <p>&copy; 2026 YourStore. All rights reserved.</p>
  </footer>

  <script src="/tracking.js"></script>
</body>
</html>

ステップ3：フロントエンドJavaScript

追跡データの取得とレンダリングを実装します。

// public/tracking.js

const STATUS_CONFIG = {
  pending: { label: '準備中', icon: 'clock', color: '#6b7280' },
  info_received: { label: '情報受付済み', icon: 'file', color: '#3b82f6' },
  picked_up: { label: '集荷済み', icon: 'package', color: '#3b82f6' },
  in_transit: { label: '配送中', icon: 'truck', color: '#f59e0b' },
  out_for_delivery: { label: 'お届け中', icon: 'map-pin', color: '#8b5cf6' },
  delivered: { label: 'お届け済み', icon: 'check-circle', color: '#10b981' },
  exception: { label: '例外発生', icon: 'alert', color: '#ef4444' },
};

// URLから追跡番号を取得
const urlParams = new URLSearchParams(window.location.search);
const trackingNumber = urlParams.get('tn');

if (trackingNumber) {
  document.getElementById('tracking-input').value = trackingNumber;
  fetchTracking(trackingNumber);
}

// フォーム送信
document.getElementById('tracking-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const tn = document.getElementById('tracking-input').value.trim();
  if (tn) {
    // リロードせずにURLを更新
    window.history.pushState({}, '', `?tn=${tn}`);
    fetchTracking(tn);
  }
});

async function fetchTracking(trackingNumber) {
  const loading = document.getElementById('loading');
  const results = document.getElementById('results-section');
  const search = document.getElementById('search-section');

  loading.style.display = 'flex';
  results.style.display = 'none';

  try {
    const response = await fetch(`/api/track/${trackingNumber}`);
    const data = await response.json();

    if (!response.ok) throw new Error(data.error);

    renderResults(data);
    results.style.display = 'block';
  } catch (error) {
    results.innerHTML = `
      <div class="error-message">
        <h2>追跡情報が見つかりませんでした</h2>
        <p>追跡番号をご確認のうえ、もう一度お試しください。</p>
      </div>
    `;
    results.style.display = 'block';
  } finally {
    loading.style.display = 'none';
  }
}

function renderResults(data) {
  const { tracking, order } = data;
  const config = STATUS_CONFIG[tracking.status] || STATUS_CONFIG.pending;

  // ステータスバナー
  document.getElementById('status-banner').innerHTML = `
    <div class="status-icon" style="background: ${config.color}20; color: ${config.color}">
      ${config.label}
    </div>
    <h2>${getStatusMessage(tracking.status)}</h2>
    ${tracking.estimatedDelivery
      ? `<p class="eta">お届け予定日: ${formatDate(tracking.estimatedDelivery)}</p>`
      : ''}
  `;

  // 注文商品（データがある場合）
  if (order?.items?.length) {
    document.getElementById('order-items').innerHTML = `
      <h3>ご注文の商品</h3>
      <div class="items-grid">
        ${order.items.map(item => `
          <div class="item-card">
            <img src="${item.image}" alt="${item.name}" />
            <span>${item.name}</span>
            <span class="qty">x${item.quantity}</span>
          </div>
        `).join('')}
      </div>
    `;
  }

  // タイムライン
  document.getElementById('tracking-timeline').innerHTML = `
    <h3>配送履歴</h3>
    <div class="timeline">
      ${tracking.events.map((event, i) => `
        <div class="timeline-event ${i === 0 ? 'latest' : ''}">
          <div class="timeline-dot"></div>
          <div class="timeline-content">
            <div class="event-time">${formatDateTime(event.timestamp)}</div>
            <div class="event-status">${event.description}</div>
            ${event.location ? `<div class="event-location">${event.location}</div>` : ''}
          </div>
        </div>
      `).join('')}
    </div>
  `;
}

function getStatusMessage(status) {
  const messages = {
    pending: 'ご注文の準備を進めています',
    picked_up: '荷物が集荷されました',
    in_transit: '荷物を配送中です',
    out_for_delivery: '本日お届け予定です',
    delivered: '荷物がお届け済みです',
    exception: '配送に問題が発生しています',
  };
  return messages[status] || '荷物を追跡しています';
}

function formatDate(dateStr) {
  return new Date(dateStr).toLocaleDateString('ja-JP', {
    year: 'numeric', month: 'long', day: 'numeric', weekday: 'long',
  });
}

function formatDateTime(dateStr) {
  return new Date(dateStr).toLocaleString('ja-JP', {
    month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit',
  });
}

ステップ4：CSSスタイリング

自社ブランドに合わせたスタイリングを適用します。

:root {
  --brand-primary: #4f46e5;
  --brand-secondary: #818cf8;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --border: #e5e7eb;
}

.tracking-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.status-banner {
  text-align: center;
  padding: 2rem;
  background: var(--bg-secondary);
  border-radius: 12px;
  margin-bottom: 2rem;
}

.status-icon {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.timeline-event {
  position: relative;
  padding-bottom: 1.5rem;
}

.timeline-dot {
  position: absolute;
  left: -2rem;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  border: 3px solid var(--bg-primary);
}

.timeline-event.latest .timeline-dot {
  background: var(--brand-primary);
}

.event-time {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.event-status {
  font-weight: 500;
  color: var(--text-primary);
}

.event-location {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

ステップ5：エンゲージメント要素の追加

追跡ページの価値を最大化するための仕組みを追加しましょう。

関連商品のアップセル

function renderRecommendations(order) {
  if (!order) return;

  return `
    <section class="recommendations">
      <h3>こちらの商品もおすすめです</h3>
      <div class="product-grid">
        ${getRelatedProducts(order.items).map(product => `
          <a href="${product.url}" class="product-card">
            <img src="${product.image}" alt="${product.name}" />
            <span class="product-name">${product.name}</span>
            <span class="product-price">${product.price}</span>
          </a>
        `).join('')}
      </div>
    </section>
  `;
}

フィードバックの収集

お届け完了後に、配送体験についてのフィードバックを収集します。

if (tracking.status === 'delivered') {
  resultsHTML += `
    <section class="feedback-section">
      <h3>配送体験はいかがでしたか？</h3>
      <div class="rating-buttons">
        <button onclick="submitRating(5)">とても良い</button>
        <button onclick="submitRating(4)">良い</button>
        <button onclick="submitRating(3)">普通</button>
        <button onclick="submitRating(2)">改善の余地あり</button>
      </div>
    </section>
  `;
}

SEOのメリット

ブランド追跡ページはSEOにも好影響をもたらします。

  • サイト滞在時間の増加 — お客様が追跡を何度も確認するため
  • 直帰率の低下 — お客様が自社ドメインに留まるため
  • 内部リンクの強化 — 商品ページ、ブログ、サポートページへの導線を設置可能
  • ブランド権威の向上 — プロフェッショナルな追跡体験が信頼構築につながる

まとめ

ブランド追跡ページは、最もROIの高いプロジェクトの一つです。サポートチケットの削減、顧客エンゲージメントの向上、アップセル機会の創出、そしてプロフェッショナルな体験の提供を実現できます。WhereParcelのAPIが追跡データを提供するので、御社はフロントエンド体験の構築に専念できます。

関連リソース：