React + RechartsでEC売上データの可視化と業務自動化を支援

はじめに

本事例は、広告代理店様からのご依頼により、同社がマーケティング支援を行っているアクセサリーメーカー様向けに、ECサイト売上データの一元管理ダッシュボードを開発・提供したものです。メーカー様は楽天・Amazon・Yahoo!ショッピング等、大小10以上のECサイトに出品しており、各ECサイトの管理画面からCSVを手作業で取得・集計する業務が負担となっていたため、システム化をご依頼いただきました。

支援内容

主に以下の3つの機能を中心に支援しました。

• ECサイトからの売上データの収集
• グラフや表を用いての集計結果の表示
• EXCELダウンロード機能

売上データの自動収集

技術的手段と課題

• 主要ECサイト（楽天・Amazonなど）は公式のWeb APIを提供しており、トークンや認証情報の設定を行うことで、安定して売上データを取得可能でした。
• 一方で、一部の中小ECサイトではAPIの提供がなく、HTML画面からのデータ抽出（スクレイピング）を選択しました。
• スクレイピングについては、サイトの構造変更やアクセス制限を考慮し、定期的な監視とエラーハンドリング処理を設けました。

議論したこと・対応したこと

• 法的・倫理的観点から、スクレイピング対象のサイトについては利用規約を精査し、問題のない範囲での実装としました。
  • 特にAPI非公開のECサイトに対しては、情報取得に該当する利用規約の条項を確認し、明示的に禁止されていないことを確認した上で、対象範囲を限定した仕様としました。
  • 必要に応じて画面の取得間隔に制限を設けることで、対象サイトに過負荷を与えない実装としています。
  • クライアント様との議論の中で、「今後API提供が始まった場合にはスクレイピングから速やかに移行する方針」も確認・合意済です。
• 特にアクセサリーメーカー様の社内での「データ改ざん・誤取得があった場合の対処」を懸念されていたため、ログ保存や監視アラートの仕組みも導入しました。
  • ログ保存については、各ECサイトから取得したデータの取得タイミング、対象URL、取得結果の要約（件数・成功可否）などをサーバー側に保存し、過去の処理履歴を後追いできる仕組みとしました。
  • 監視アラートについては、データ取得時に失敗が一定回数続いた場合や、特定のサイトからのデータが極端に少ない場合にSlack通知が飛ぶように設定。担当者がすぐ気づいて対応できる体制としました。
  • また、データのハッシュ化と整合性チェックを一部データについて導入し、取得時と保存時で内容が変わっていないかを確認できるようにするなど、企業としての内部統制にも配慮しました。

集計結果の表示

現場の運用観点に寄せた対応

• 既存のEXCEL集計シートを提供いただき、実際に事務担当者がどの数値に注目しているのか、どう加工しているのかを細かくヒアリングしました。
• 担当者の「日次で変化を見る」「カテゴリ別に傾向を確認したい」「週単位・月単位で出力できると助かる」といった声をベースに、表示粒度やフィルター機能を設計しました。

Recharts（+React）を選定した理由

• 可読性・実用性：業務用ダッシュボードにふさわしい落ち着いたデザインと柔軟な表現力。
• 保守性と開発効率：Reactとの親和性が高く、状態管理や再利用性に優れる。
• 導入のしやすさ：軽量かつ公式ドキュメントも充実しており、早期リリースが可能。

実装時に工夫した点

• データ整形：カテゴリ別・サイト別に応じてデータを整形するロジックを実装し、Rechartsの入力形式に変換。
• 画面切り替え：タブUIで切り替え可能なグラフを構成し、用途別の視点を提供。
• スマホ対応：ResponsiveContainerを活用してモバイル端末でも快適に表示。

Rechartsを使ったサンプルコード

'use client'

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  TooltipProps,
  Legend,
  ResponsiveContainer,
} from 'recharts'

// 15日分のダミーデータ生成
const data = Array.from({ length: 15 }, (_, i) => {
  const day = i + 1
  const date = `2025-05-${day.toString().padStart(2, '0')}`
  return {
    date,
    ネックレス: Math.floor(Math.random() * 15000 + 5000),
    ピアス: Math.floor(Math.random() * 12000 + 3000),
  }
})

export default function SalesChart() {
  return (
    <div className="w-full h-[400px] bg-white rounded-xl shadow p-6 ">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          data={data}
          margin={{ top: 40, right: 30, left: 40, bottom: 0 }}
          barCategoryGap="10%"
          barGap={2}
        >
          <CartesianGrid strokeDasharray="3 3" vertical={false} />
          <XAxis dataKey="date" tick={{ fontSize: 10 }} interval={4} />
          <YAxis tickFormatter={(value) => `${value / 1000}`}
            label={{
              value: '(千円)',
              position: 'top',
              offset: 10,
              angle: 0,
              style: { textAnchor: 'start', fill: '#333', fontSize: 16 },
            }}
          />
          <Tooltip content={<CustomTooltip />} />
          <Legend />
          <Bar dataKey="ネックレス" fill="#4F46E5" />
          <Bar dataKey="ピアス" fill="#F59E0B" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}

const CustomTooltip = ({ active, payload, label }: TooltipProps<string, string>) => {
  if (!active || !payload || !payload.length) return null

  return (
    <div className="bg-white border border-gray-300 shadow-md p-2 rounded text-sm">
      <p className="text-black font-medium">{label}</p>
      {payload.map((entry, index) => (
        <p key={index} style={{ color: entry.color }}>
          {entry.name} : {Number(entry.value).toLocaleString()}円
        </p>
      ))}
    </div>
  )
}

描画イメージ

EXCELダウンロード機能

検討・議論したポイント

• 広告代理店様のマーケティングチームが都度独自の切り口で分析を行いたいというご要望があり、柔軟性の高いデータ提供方法としてEXCEL形式を選択。
• 当初はダッシュボードに分析機能そのものを実装する案もありましたが、予算と責任分担（メーカー様・広告代理店様のどちらが費用を負担するか）で議論があり、まずは費用を抑えた実装を優先しました。

技術的補足

• 出力するEXCELファイルは複数のシート構成となっており、日次・週次・月次のサマリー、カテゴリ別データ、商品別データなど、事前に広告代理店様と調整した構成で生成するようにしました。
• サーバーサイドでNode.js + ExcelJSを用いて柔軟なEXCELファイル生成を実現しています。

ダッシュボード導入のメリット

• 毎日2時間ほどかかっていた手作業の集計作業を完全自動化し、担当者の業務負荷を大幅に削減。
• 売上傾向が定量的に可視化されたことで、どの販路に注力すべきかの判断がしやすくなりました。
• Web上で常時確認可能な体制により、急な問い合わせ対応や社内報告も迅速に行えるようになりました。

実現できたこと

• 広告代理店様では社内エンジニアのリソースが限られていたため、初期開発は全て弊社で担当。要件整理・実装・テスト・初期運用まで一貫して支援しました。
• プロジェクトの中盤からは広告代理店様のエンジニアも合流され、徐々に内製化に向けた引き継ぎとドキュメント整備も行いました。
• 「最初からすべて任せる」のではなく、「段階的に一緒に作る」形で、チームとしてのスキル獲得・運用定着も意識した開発支援となりました。

サービスの横展開

• ダッシュボードは非常に好評を頂き、他のクライアント様（飲料メーカー、アパレルメーカーなど）への横展開が開始されました。
• 弊社ではシステムの所有権はご依頼主様に帰属する方針であるため、クライアント様自身が事業拡大・他社展開に活用しやすい点も高く評価されました。