2re funの新しいプロジェクトとして、コーヒー・紅茶・雑貨を扱うオンラインストア「SoraStore」を公開しました。今回は、SoraStoreがどんなコンセプトのサイトなのか、どんな技術スタックで作っているのか、開発でこだわったポイントは何かを、この2re blogでまとめておきます。
SoraStoreとは
SoraStoreは、「暮らしを豊かにする、こだわりの逸品を。」をコンセプトにした、コーヒー・紅茶・雑貨などを扱う会員制のオンラインショップです。産地や製法にこだわった商品だけを取り扱う、という架空のECサイトを題材に、実際に動く会員登録・ログイン機能を備えたストアとして構築しました。(rail-order.2re.fun)
単なるデザインカンプではなく、会員登録・ログインをした上で商品を注文できる、実際に触れる状態までドメインを取得して公開しているのが2re funの各プロジェクトに共通するこだわりで、SoraStoreも例外ではありません。
サイトの特徴
SoraStoreでは、実際のECサイトを意識して次の3つの特徴を持たせています。
- 厳選された商品:産地や製法にこだわった、上質な商品だけを取り揃えるという世界観でストアを設計
- 会員限定のご注文:注文には会員登録・ログインが必須で、ログイン後はマイページから注文状況を確認できる導線を用意
- 丁寧な梱包でお届け:商品ページやトップページの文言で、購入後の体験まで含めた安心感を伝える設計にした
トップページでは「無料で会員登録」「ログイン」の2つの導線を上部に配置し、初めて訪れたユーザーがまず会員登録に進むか、既存ユーザーとしてログインするかを迷わず選べるようにしています。
技術スタック
SoraStoreは、次の技術スタックで構築しています。
フロントエンド
- Next.js
- TypeScript
バックエンド・インフラ
- Ruby on Rails(会員登録・ログイン・注文管理などのAPI)
- Docker / Docker Compose
2re funの他プロジェクト同様、フロントエンドとバックエンドを分離した構成にしており、会員登録・ログイン・注文状況の確認といった、実際のECサイトで必要になる機能をひと通り実装しています。
開発でこだわったポイント
SoraStoreの開発では、次の2点を特に意識しました。
会員登録必須の注文フロー
実務のECサイトでよくある「会員登録・ログインをしないと注文できない」という制約をあえて設け、認証まわりの実装(サインアップ・ログイン・マイページでの注文状況確認)を一通り作り切ることをテーマにしました。
落ち着いたトーンのUIデザイン
コーヒーや紅茶といった商品の世界観に合わせて、ストーン系の落ち着いた配色とシンプルなレイアウトを採用しました。「厳選された商品」「会員限定のご注文」「丁寧な梱包でお届け」という3つの特徴を3カラムで並べ、サイトの価値がひと目で伝わる構成にしています。
他のプロジェクトと同じく、企画・設計からClaude Codeを開発パートナーとして活用し、人気の高い技術構成をリサーチした上で実装・インフラ構築・ドメインでの公開までを一人で進めています。開発の進め方の詳細は「2re fun はHPやシステムを公開します。」でも紹介しています。
今後の展望
現時点のSoraStoreは、トップページと会員登録・ログイン・商品一覧の基本的な導線までを公開している段階です。今後は、商品詳細ページやカート機能、注文履歴の表示などを充実させ、より実際のECサイトに近い形に育てていく予定です。
SoraStoreを含む2re funの各プロジェクトはhttps://2re.fun/から一覧できます。開発の進捗や技術的な意思決定については、引き続きこの2re blogで発信していきますので、あわせてチェックしてみてください。