English
前稿では、ボットによる異常なトラフィックで停止したECサイトを、AIエージェントとともに復旧した事例を紹介した。
今回は、同じ週に取り組んだもう一つのプロジェクトを取り上げる。4〜5年前にWordPressで構築したB2B発注サイトを、Next.jsとSupabaseを使った新しいシステムへ全面的に移行した事例である。
今回の再構築で特に重要だったのは、AIがコードを書く速度ではない。実装を始める前に、誰が使うのか、どの業務を残すのか、何を改善するのかをAIと徹底的に話し合い、要件を明確にしたことである。
地域レストランの発注を支えるB2Bサイト
筆者は、雑貨の輸入販売を行うMagnote Giftsとは別に、レストラン向けのテイクアウト容器を扱う卸売事業Bento Box & Moreを運営している。
この事業は、お好み焼きチェーン「鶴橋風月」の米国展開に関わったことから始まった。コロナ禍に2店舗目を出店する際、テイクアウト容器を大量に調達する必要が生じ、ギフト事業で培った輸入・販売の仕組みを生かして、自ら卸売を手掛けるという発想に至った。
Bento Box & Moreの発注サイトでは、レストランオーナーがログインし、弁当容器、丼容器、スープカップ、ナプキン、バッグなどを注文できる。サービス対象を地域のレストランに限定しているため、一般的なECサイトのようにアクセス数が多いわけではない。
一方で、顧客の多くは毎週同じ商品を繰り返し注文する。そのため、アクセス数の規模は大きくなくても、サイトが使いにくくなったり、正常に利用できなくなったりすれば、日々の受注業務に直接影響する。この点が、今回の再構築を判断するうえでの前提となった。
事業の変化によって増えていった運用負荷
旧サイトは、4〜5年前にWordPressを使って構築したものである。稼働を開始した当初は、レストランから注文を受け付けるという目的を十分に果たしていた。
しかし、事業を続ける中で商品や顧客が増え、管理の仕組みも少しずつ複雑になっていった。さらに、サイトを作った当初には想定していなかった作業も増えていた。
具体的には、注文が入るたびに会計ソフトへ内容を手作業で入力する必要があった。また、メーカーへの追加発注についても、過去の販売実績と現在の在庫を確認しながら、毎週メールを作成していた。
一つひとつは小さな作業だが、毎週繰り返されることで無視できない負担になる。同時に、日常業務の一部として定着してしまうと、その作業自体を見直す機会も少なくなる。
今回の再構築は、サイトを新しくするだけでなく、こうした日常的な業務を改めて見直す機会にもなった。
旧B2B発注サイトの画面。稼働開始時点では、レストランから注文を受け付けるという要件を十分に満たしていた。
実装の前に、AIと要件をすり合わせる
ここ最近、筆者はAIを単なるツールではなく、業務を一緒に進めるメンバーのように扱うようになった。その前提に立つと、最初に時間をかけるべきなのは実装ではなく、何を作るのかを明確にするための対話である。
今回の再構築では、誰がこのサイトを使うのか、顧客はどのようなタイミングで発注するのか、現在の業務の何を残すべきか、管理者は毎週どの情報を確認しているのかを、AIとの対話を通じて整理した。
自分の考えとAIの理解が十分に一致したと感じられるまで、実装には着手しなかった。
対話を通じて整理した主な要件は、次のとおりである。
- 既存の顧客データと商品データを引き継ぐ
- 移行に合わせて不要なデータを整理する
- 現在の受注業務を止めずに移行する
- 顧客が迷わず発注できるUIを実現する
- スマートフォンでの操作性を改善する
- 売上、顧客数、商品別販売数を確認できる管理者用ダッシュボードを新設する
- 在庫と販売実績をもとに、仕入先への追加発注を判断できるようにする
これらの要件を文書として整理し、Claude Codeに渡した。その段階で初めて実装を開始した。
Next.js、Vercel、Supabaseによる新しい構成
要件が明確になった段階で、どのような技術構成が適しているかをClaudeと検討した。
その結果、フロントエンドにはNext.js、ホスティングにはVercel、顧客・商品・受注データの管理にはSupabaseを採用することになった。
近年は、WordPressのようなCMSだけですべてを構築するのではなく、目的に応じて複数のマネージドサービスを組み合わせる方法も現実的な選択肢になっている。今回のプロジェクトは、こうした構成が小規模なB2B発注サイトでも有効かどうかを確認する機会でもあった。
筆者自身は、これらのサービスを本格的に運用した経験がなかった。そのため、アカウント開設に必要な手順の確認はClaudeの案内を受けながら進め、実装作業はClaude Codeに任せた。
筆者は全体の方向性を決め、設計や実装内容を確認し、必要に応じて修正を指示する役割を担った。自分の専門領域ではない技術を採用する場合でも、このように人間とAIの役割を分けることで、プロジェクトを前に進められる。
今回の再構築では、注文が入るとSlackへ通知が送られ、QuickBooks Onlineにも注文情報が自動で登録される機能を新たに追加した。これにより、これまで手作業で行っていた会計ソフトへの入力を減らし、注文を受けたあとの処理まで効率化できた。
Next.jsとSupabaseで再構築した新しい発注サイト。AIとの協働により、基本構成を半日で立ち上げた。
ダッシュボードと追加発注ワークフローを統合する
今回の全面的な再構築に合わせて、管理者向けのダッシュボードも新たに作成した。
ダッシュボードでは、直近3カ月や任意の期間を指定して、売上の推移、顧客数、商品別の販売状況などを確認できる。
さらに、以前から別のプロジェクトとして使っていた追加発注ワークフローも、この管理画面に統合した。
統合にあたっては、既存プロジェクトの内容をClaude Codeに読み取らせ、追加発注の判断に使っていたデータと業務ロジックを、新しい管理画面へ引き継いだ。
その結果、管理画面では売上と在庫の状況を確認するだけでなく、仕入先へ送る追加発注メールの下書きも生成できるようになった。
ただし、メールの送信まで完全に自動化したわけではない。AIとシステムが判断材料と下書きを準備し、最終的な内容の確認と送信は人間が行う設計にした。
すべてを自動化するのではなく、負担の大きい部分をAIに任せながら、取引先との関係に影響する最終判断は人間に残す。この境界線を決めることが、実務でAIを使ううえでは重要である。
AIの実装速度が上がるほど、要件定義が重要になる
完成したシステムは、当初想定していた形に非常に近いものとなった。
ただし、その理由をClaude Codeの実装速度だけで説明することはできない。より重要だったのは、実装を始める前に、何を作るのか、誰が使うのか、現在の業務の何を残すのかをAIと徹底的に話し合ったことである。
この準備があったからこそ、開発の途中で方向性が大きくずれることなく、実際の業務で使えるシステムに到達できた。
AIに実装を任せるとき、関心は「何を作らせるか」に向かいがちである。しかし、成果を左右するのは、その前にある要件整理の工程である。自分の頭の中にある業務上の課題や要望を、どこまで具体的な言葉にできるかが重要になる。
AIがコードを書く速度が上がるほど、人間には「何を作るべきか」を定義する力が求められる。
AIエージェントの実装能力が向上すれば、コードを書くこと自体は、これまでほど大きなボトルネックではなくなる。その一方で、誰のために何を作り、どの業務をどのように改善するのかを決める力の重要性は、さらに高まっていく。
企業がAIを使ったシステム開発を検討する際には、ツールの導入だけでなく、現場の業務を理解し、必要な要件を言葉にする力にも目を向ける必要がある。
藤本真也は、在米25年以上の経験を持つ経営者・エンジニアであり、Silicon Valley Japan Labを通じて、シリコンバレーの技術動向と日本企業の海外展開に関する分析を発信している。