3D Whisky E-commerce

プロジェクト概要

このプロジェクトは、私にとって初めて制作する本格的なWebアプリケーションとして開始しました。長年のウイスキー愛好家として、美しいボトルデザインやその背景にある職人技への深い敬意を持っており、この情熱を技術的な挑戦と組み合わせて表現したいと考えました。

ウイスキーの3Dモデルを360度回転させながら閲覧し、購入できるモダンなECサイトとして設計しました。伝統的なウイスキーボトルの美しさを現代のデジタル技術で再構築し、没入感のあるショッピング体験を提供します。

開発への想いとして、単一の技術領域に留まらず、フロントエンド・バックエンド・インフラまで幅広い技術スタックを経験したいという強い思いがありました。React Three Fiberによる3D描画から、Stripeを使った決済システム、AWS S3/CloudFrontでのファイル配信、PostgreSQLでのデータ管理まで、現代的なWebアプリケーション開発で必要とされる技術を包括的に学習・実装することを目標としました。

 

技術仕様

• Frontend: TypeScript, Next.js 14, React Three Fiber
• Backend: Next.js 14 API Routes, Prisma ORM
• Database: Neon PostgreSQL
• Cache: Upstash Redis
• Payment: Stripe
• Storage: AWS S3 + CloudFront CDN
• Auth: Auth.js v5 (OAuth対応)
• Hosting: Vercel

 

主な特徴

インタラクティブな3D体験

このプロジェクトの最大の特徴は、React Three Fiberを活用した高品質な3Dレンダリング技術の実装です。ウイスキーボトルの美しいフォルムやラベルの細部まで忠実に再現し、ユーザーがマウスやタッチ操作で360度自由に回転させながら商品を確認できる体験を実現しました。

従来の静的な商品画像では伝わりにくいボトルの立体感や質感を、3D技術によって実際に手に取るような感覚で体験できます。また、ホバー時の滑らかなアニメーションや直感的な操作感にもこだわり、デスクトップからモバイルまで全てのデバイスで快適に操作できるレスポンシブな3D表示を実装しています。

3D技術を単なる視覚的効果として使うのではなく、ウイスキーという商品の特性を最大限に活かす実用的なツールとして設計したことで、従来のECサイトでは実現できない新しいショッピング体験を提供しています。

 

本格的なEC機能

実際の商用サイトと同等の機能を持つECシステムの構築を行いました。決済処理にはStripeを統合し、クレジットカード情報の暗号化からPCI DSS準拠まで、セキュアな購入体験を実現しています。

ユーザビリティの面では、アカウント登録なしでも購入可能なゲスト機能を実装し、購入のハードルを下げる工夫を施しています。一方で、登録ユーザーには購入履歴の管理機能やデジタルコンテンツのダウンロードリンク提供など、継続利用を促進する機能も備えています。

また、複数の商品を一度に購入できるショッピングカート機能により、実際のECサイトと遜色ない購入体験を提供。商品の追加・削除・数量変更から税計算まで、ECサイトに必要な基本機能を包括的に実装し、実際のビジネス要件に対応できる技術力の習得を目指しました。

 

エンタープライズレベルのセキュリティ

安全性への責任感を重視し、セキュリティを最優先事項として設計しました。認証システムにはOAuth 2.0を採用し、GoogleやGitHubアカウントでの安全なログインに加え、従来のメール認証も併用することで、ユーザーの選択肢を広げながらセキュリティレベルを保持しています。

API保護の観点では、Redisを活用したレート制限機能を実装し、悪意のあるリクエストやDDoS攻撃から システムを守る仕組みを構築しました。また、Content Security Policy（CSP） を厳格に設定することで、XSS攻撃やコードインジェクション攻撃を防御し、ユーザーのブラウザ環境での安全性を確保しています。

デジタルコンテンツの配信においては、AWS S3の署名付きURL機能を利用し、購入者のみが限定期間内でファイルにアクセスできる仕組みを実装。これにより、不正ダウンロードを防ぎながら、正当な購入者には快適なダウンロード体験を提供しています。セキュリティ対策を単なる技術要件としてではなく、ユーザーとビジネスを守る重要な責任として捉え、包括的なセキュリティ設計を心がけました。

 

スケーラブルなインフラ構成

モダンなクラウドサービスを組み合わせた、スケーラブルで高パフォーマンスなインフラを構築しました。ファイル配信にはAWS S3とCloudFrontのCDN組み合わせを採用し、3Dモデルファイルや画像を世界規模で高速配信できる仕組みを実装。特にファイルサイズが大きくなりがちな3Dアセットを効率的に配信するため、地理的に分散されたエッジサーバーを活用し、ユーザーの場所に関わらず一貫した高速体験を提供しています。

データベースにはNeon PostgreSQLを選択し、サーバーレス環境での自動スケーリングとデータ永続化を実現。従来のデータベース管理の複雑さを解消しながら、商品情報やユーザーデータの安全な管理を可能にしています。また、Upstash Redisによるキャッシュレイヤーを導入することで、頻繁にアクセスされるデータの高速読み込みとセッション管理やレート制限機能を効率的に処理できる環境を整備しました。

ホスティングプラットフォームにはVercelを採用し、トラフィック増加に応じた自動スケーリングとゼロダウンタイム展開を実現。これらのインフラ選択により、個人プロジェクトでありながらエンタープライズレベルの可用性とパフォーマンスを持つシステムを構築することができました。

 

主な機能

デモアカウントなしで体験可能

• ✅ 3Dモデルのインタラクティブ操作
• ✅ 商品閲覧機能
• ✅ ショッピングカート操作

デモアカウント必要

• 🔒 アカウント登録・ログイン
• 🔒 Stripeテスト決済
• 🔒 購入後ファイルダウンロード
• 🔒 プロフィール管理

 

まとめ

このプロジェクトは、技術的な挑戦と自分の趣味を融合させた初めての本格的な開発体験となりました。フロントエンドからインフラまで幅広い技術領域を経験することで、現代的なWebアプリケーション開発の全体像を理解し、実践的なスキルを身につけることができました。