ONEPLUS
Next.js（App Router）と TypeScript で構築した仮想のメンズアパレルECサイト「ONEPLUS」。
商品を“見つける → 選ぶ → 支払う”までを、情報設計とアクセシビリティに配慮したUIでスムーズに完了できるよう設計しました。Supabase と Stripe を連携し、本番想定の購入フローを動く形で再現しています。
モダンなフロントエンドとWebアプリケーション開発力をポートフォリオとして可視化することを目的に、ゼロから設計。
データベースからの商品取得と表示、会員登録・ログインなどの認証、決済までの一連のフローを Next.js＋TypeScript で実装しています。Jamstack 構成により軽量で保守しやすいアーキテクチャを選定。主要な実装は GitHub で公開しています。
- 概要
- 仮想ECサイト「ONEPLUS」（個人プロジェクト）
- 担当
- コーディング / フロントエンド実装 / 情報設計 / UIデザイン / DB設計 / ドキュメント
- 製作期間
- 約3ヶ月（設計2週 / 実装6週 / 検証・改善2週）
- 使用技術
- TypeScript / React / Next.js（App Router）/ Supabase（DB/Auth/Storage）/ Stripe（Checkout）/ Zustand / PGroonga
- 制作環境
- Visual Studio Code / Figma / Photoshop / GitHub / Vercel
- 主な機能
-
- ・認証（サインアップ／ログイン／ログアウト／パスワード再設定）
- ・商品検索（表記ゆれに配慮したシンプル検索）
- ・カート（追加／削除／数量変更、再訪問でも中身を保持）
- ・決済（Stripe Checkout のワンページ決済、完了時に注文データ保存）
- ・UI／アクセシビリティ（ドロワー／検索パネル／ドロップダウン／キーボード操作対応）
- デザイン・実装について
-
デザイン面は海外風のシンプルなECサイトを意識し、購入までの流れが短くなるようにページ構成と導線を設計しました。
役割ごとにコンポーネントを分け、TypeScript の型定義で保守性を確保しています。
商品詳細までは誰でも閲覧可能になっており、購入操作は認証を必須にし、ログインユーザーのみ商品を購入できるようにしています。 カート機能に関しては、Zustandで状態管理をし、persistミドルウェア ＋ localStorage により、ページリロードや再訪問でもカート状態を保持します。
UI・アクセシビリティに関しては、ドロワーや検索パネルは、Escキーで閉じられるようにし、フォーカストラップを実装。
ページ遷移後はメインコンテンツ（<main>）へフォーカスを移し、スクリーンリーダーがすぐ内容を読み上げられるようにしています。
背景（画面の外側）をクリックしても、開閉ボタンをもう一度押しても閉じられるようにして、操作の迷いを減らしました。 表示中は背景のスクロールを固定して背面ページの誤操作・表示ズレを防ぎ、画面幅の切り替えやページ遷移時には状態をリセットして誤作動を回避しています。
仮想のECサイトのため商品ラインナップを完全に揃えることは難しいのですが、今後は商品詳細ページでカラーバリエーションを選べたり、 在庫・配送ロジック、管理画面など運用機能の拡張を予定しています。
詳細は GitHub を見てください。