ECサイト

Verdant Farm

お茶の一袋一袋に、そのロットだけのストーリーを。QRコードをかざすだけで、購入者に届きます。

Verdant Farm — ECサイト
クライアント
ラムドン省の有機茶・農産物ブランド
サービス
Webサイト制作
開発期間
12週間
年
2025

プロジェクト概要

対応範囲

コンテンツ戦略UIデザインECサイトテクニカルSEO

有機栽培の茶園から始まったこのブランドは、マルシェやSNSを通じて安定した固定客を獲得していたものの、自社の販売チャネルを持っていませんでした。商品情報は掲載場所ごとに表記がばらばらで、注文は手書きで記録され、お客様から最も多く寄せられる「このお茶はどこで、いつ摘まれたのか」という質問にも、簡単に確かめられる答えを用意できていませんでした。

プロジェクトでは、茶園のストーリーを伝え、スマートフォンでも高速に表示され、有機茶関連のキーワードで検索結果に存在感を示せるECサイトを目指しました。さらに、パッケージのQRコードを読み取るだけで、手元にある商品ロットそのものの歩みを確認できるようにしました。

課題

01

ばらばらなロットデータ

摘採日、製茶日、検査結果はノートの記録やスマートフォンの写真に散らばっており、トレーサビリティページに掲載する前に標準化する必要がありました。

02

美しくも重い写真

高解像度の茶畑の写真はブランドの資産ですが、元データのまま使うとモバイル回線ではページの表示が大幅に遅くなってしまいます。

03

競争の激しいキーワード

有機茶関連のキーワードには大手ECモールが多数参入しており、正面から競うのではなく、ニッチに絞ったコンテンツ戦略が求められました。

GREEN TECHのソリューション

フロントエンドはNext.jsとTailwind CSSで構築し、商品ページと記事ページは静的生成を採用、Cloudflareのエッジネットワークから配信して表示速度を高めました。バックエンドではNestJSとPostgreSQLが注文、在庫、ロットデータを管理し、各ロットには専用のトレーサビリティページにつながるQRコードを発行しています。画像は最新のフォーマットに圧縮し、スクロールして表示範囲に入ったときだけ読み込むようにしました。茶園ならではのビジュアルの魅力を損なわずにページを軽量化し、ユーザーにとっての速さと通信量の節約を両立しています。

主な機能

QRコードによるロット追跡

パッケージのコードを読み取ると、その商品ロットの産地、摘採日、加工日、検査結果を確認できます。

モバイルに最適化したストア

カート、包装サイズの選択、決済まで、スマートフォンを片手で快適に操作できるよう設計しています。

SEOに強いコンテンツ

お茶の淹れ方ガイド、産地のストーリー、商品ページに構造化データを実装し、わかりやすい内部リンク構造を整えています。

使いやすい管理画面

茶園のスタッフが技術的な知識なしで、新しいロット、商品、記事を管理画面から自ら更新できます。

導入の成果

1.3秒

モバイルでのページ表示

+46%

6か月後の自然検索流入

+22%

リピート購入率

Webサイトによって、ブランドはSNSに全面的に頼るのではなく、自社の販売チャネルを主体的に運営できるようになりました。QRトレーサビリティページはお客様の間で最も話題にのぼる接点となり、有機栽培へのこだわりを示す具体的な証拠にもなっています。軽量なインフラにより、月々の運用コストも小規模な農業事業者に見合う水準に抑えられています。

使用技術

React / Next.js
Tailwind CSS
NestJS
PostgreSQL
Cloudflare
今すぐお問い合わせ!

次のプロジェクトのアイデアをお持ちですか?

貴社の目標をぜひGREEN TECHにお聞かせください。ご要望を分析したうえで最適なソリューションをご提案し、詳細なお見積りを無料でお送りします。

無料相談はこちら

お問い合わせ

貴社のプロジェクトを
今日から始めましょう

協業のご相談

または、こちらへ直接メールでご連絡ください:

  • 24時間以内にスピーディーに対応。
  • 専門家と直接やり取りが可能。
  • 明確な戦略をご提案。