Amela
GurumeBox株式会社様 新規プラットフォーム立ち上げストーリー
ℹ︎機密保持のため、企業名・プロジェクト名・システム画像は仮名およびモックに置き換えています。

産地直送グルメのECを、ゼロから内製で。

GurumeBox(グルメBOX) は、全国の生産者の旬の味を直送するフードデリバリーEC。スマホ中心の購買行動に応える、見やすく・探しやすく・買いやすいストアフロントです。

ブランド体験・モバイル最適化・発見性・スムーズな購入導線 ─ 食のECに必要な4軸を同時に満たすプラットフォームを、ゼロから4ヶ月で内製構築した、新規プラットフォーム立ち上げストーリー。

立ち上げ
0→1
新規ブランドECをゼロから
初回描画
<1.5
Vite + Vue 3 SPA
最適化
モバイル
主要流入に合わせた設計
取扱
6+カテゴリ
精肉・海鮮・スイーツほか
GurumeBox
すべて 精肉 海鮮
01
CLIENT
お客様について

食の流通を牽引する、国内有数の「GurumeBox」様。

GurumeBox株式会社様は、全国の生産者と消費者を直接つなぐ産地直送グルメのプラットフォームを展開。精肉・海鮮・野菜果物・スイーツ・ドリンクなど多彩なカテゴリの「旬の味」を、こだわりを持つ食卓へ届けています。

事業拡大にあたり、ブランドの世界観を伝えながら、スマホ中心の購買行動にフィットする自社ECストアフロントを必要としていました。AmelaはこのECをゼロから内製で構築するパートナーとして伴走しました。

取扱カテゴリ
6+
産地直送エリア
全国
モバイル最適化
100%
BUSINESS FLOW — ご利用の流れ
STEP 01
商品を探す
カタログ・カテゴリ・検索から旬の味を発見
STEP 02
詳細・レビュー確認
写真・価格・レビューで納得して選ぶ
STEP 03
カート・会員登録
カートに追加し、スムーズに会員登録
STEP 04
購入・産地直送
決済後、生産者から直送でお届け
02
CHALLENGE
解くべき設計課題

プラットフォームに求められた、4つの構造要件。

いずれも技術選定の問題ではなく、ブランド価値・購買体験・売上に直結する事業要件。ゼロからの新規構築で「同時に成立させる」設計が必要でした。

ブランドECの新規立ち上げ
自社ECを持たない状態から始めれば、ブランドの世界観を伝える基盤をゼロから設計する必要がある。
モバイル中心の購買
PC前提のUIで作れば、主要流入であるスマホでの体験が損なわれ、購入率が下がる。
商品の探しやすさ
商品点数が増えれば、発見性を設計しない限り回遊が低下し、買いたい商品にたどり着けない。
登録〜購入の離脱
導線設計を誤れば、会員登録や決済の途中でカゴ落ちが多発し、機会損失となる。
03
ARCHITECTURE
共に築いた構成

食のECを、4つの領域で「拡張可能な基盤」へ。

ブランド体験・モバイル最適化・発見性・購入導線の4領域を、Vue 3 + TypeScript の高速SPAでゼロから内製で構築しました。コンポーネント化により、運営が更新しやすい基盤を実現しています。

Amela
EXECUTION
4ヶ月
期間
8人月
総工数
${''}
領域 ①
ブランド体験
課題
ブランドの世界観を伝えるECを新規に立ち上げる必要
解決策
Vue 3 SPAでゼロから構築
リッチなヒーロー・カテゴリ・レビュー表現でブランド訴求
領域 ②
モバイル最適化
課題
主要流入であるスマホで快適に購入できる体験が必要
解決策
レスポンシブ・モバイルファースト
あらゆる画面サイズで崩れない一貫したUI
領域 ③
発見性
課題
商品点数の増加に対し、探しやすさを設計する必要
解決策
カテゴリ・SALE・レビュー導線
回遊を促す絞り込みと評価の可視化
領域 ④
購入導線
課題
会員登録〜決済の離脱を抑える導線を設計する必要
解決策
シームレスな登録〜決済導線
Pinia状態管理でカート〜注文確定を一貫制御
FRONTEND
Vue 3 TypeScript Pinia Tailwind CSS Vvee-validate
TOOLING
Vite ESLint Prettier
04
IMPACT
プラットフォームが生み出す価値

GurumeBox様の「事業成長」が、加速する。

この基盤は技術指標ではなく、ブランド価値・購入率・運用効率といったビジネスアウトカムを継続的に生み出します。

ブランドを伝えるECを持てる基盤
世界観を表現するストアフロントで、商品価値を最大化できる。
スマホで買い切れる体験
主要流入のモバイルで、ストレスなく購入まで到達できる。
回遊を最大化する設計
カテゴリ・SALE・レビューで、出会いと購入を増やす。
更新しやすい運用に集中できる
コンポーネント化で、運営が手早く商品・訴求を更新できる。
🛒
STAKEHOLDER
利用者
一般的に
✕ PC前提のECで、スマホでは探しにくくなりやすい
GurumeBox では
✓ スマホで快適に商品を発見・購入できる
事業インパクト
回遊・購入率の向上
🚜
STAKEHOLDER
生産者・出店者
一般的に
✕ 販路が限られ、全国の消費者に届けにくい
GurumeBox では
✓ 産地直送ECで全国の食卓へ届けられる
事業インパクト
新規顧客の獲得
🛠️
STAKEHOLDER
運営
一般的に
✕ 商品・訴求の更新に手間がかかりやすい
GurumeBox では
✓ コンポーネント化で更新が容易
事業インパクト
運用コストの削減
STAKEHOLDER
ブランド
一般的に
✕ 世界観が伝わらず、価格競争に陥りやすい
GurumeBox では
✓ リッチなストアフロントで世界観を表現
事業インパクト
ブランド価値の向上
05
DEMO
3つのシナリオ

実際に動くデモで、GurumeBox の体験を。