Payment Gateway
マーケティングサイト、認証、加盟店ダッシュボードを網羅し、Reactでエンドツーエンド構築された暗号資産決済ゲートウェイの忠実なフロントエンド再現。
React 18
Vite
React Router 6
SCSS
Swiper
概要
このプロジェクトは、企業が暗号資産決済を受け入れるための暗号資産決済ゲートウェイであるCryptomusのフロントエンド再現です。サービスを訴求するマーケティングサイト、ログイン・会員登録フロー、認証済み加盟店ダッシュボードという3つの異なるサーフェスにわたり、プロダクトの全インターフェースを再構築しています。UI構築プロジェクトであるため、実際の決済処理ではなくインターフェースとフロントエンドの振る舞いをカバーしており、単一のランディングページにとどまらずプロダクト全体を網羅しています。
課題
暗号資産決済ゲートウェイは、一見シンプルに見えて非常に大規模なプロダクトです。公開エリアでは技術的なサービス内容をわかりやすく説明して訴求する必要があり、料金体系、手数料率、対応通貨、決済処理ツール、導入実績などを網羅しなければなりません。一方、非公開エリアは専用のナビゲーションや状態管理を持つ実働ダッシュボードです。Cryptomusのようなシステムを忠実に再現することは、フロントエンドにとって真の挑戦となります。多数の画面、全く異なる2つのシェル、全体にわたる一貫したテーマ設定、あらゆる画面幅でのレスポンシブな挙動が求められます。目指したのは、1〜2ページを大まかに模倣することではなく、その広範な仕様を正確に再構築することでした。
役割とアプローチ
マーケティングページからダッシュボードに至るまで、フロントエンドの全領域を独力で構築しました。構造上の重要な判断は、本アプリを1つの屋根の下にある2つのプロダクト（公開マーケティング体験と認証済みダッシュボード）として扱い、共通要素を下層で共有しつつそれぞれに独自のレイアウトシェルを割り当てた点です。スタイルシートの干渉を防ぎつつ各サーフェスを参照元に忠実に一致させられるよう画面ごとにスタイリングを整理し、テーマ設定やダッシュボードのサイドバーといった横断的な関心事はReactコンテキストに引き上げてアプリ全体で一貫性を保ちました。
技術スタック
主な機能
ギャラリー
課題と解決策
主な課題は、広範な構成全体で一貫性を維持することでした。本プロダクトはマーケティングサイトと実際に動作するダッシュボードにまたがっており、実質的に異なるUIクロムを持つ2つの別個のアプリケーションです。これを解決するため、公開サイト用と認証済みダッシュボード用でレイアウトシェルを分離し、React Routerのネストされたルーティングを介して構成することで、共通コンポーネントを共有しながらも各サーフェスに適切なヘッダー、フッター、ナビゲーションを適用できるようにしました。
画面数の多い大規模UIの保守性を維持することも重要な焦点でした。1つの肥大化したスタイルシートにまとめるのではなく、各ページが参照元と正確に一致するようSCSSを画面単位に分割しました。また、テーマやサイドバーといった横断的な状態はコンテキストに集約し、ページごとに再実装することなく全体で均一に動作するようにしました。国際電話番号入力やカルーセルなどの細部には特化型ライブラリを採用し、不要な車輪の再発明を避けつつ完成度を高めています。
成果
完成したのは、マーケティング、認証、ダッシュボードの各サーフェスにわたり再構築された、暗号資産決済ゲートウェイ向けの完全かつレスポンシブなフロントエンドです。再現プロジェクトとして、マルチシェルルーティング、大規模な画面別スタイリング、共有テーマ設定、コンポーネント再利用など、この規模のプロダクトにおいて最も重要となるフロントエンドスキルを、簡略化されたデモではなく実用的で複雑な商用インターフェース上で実証しています。
同様のプロダクト課題をお持ちですか？
現在のプロダクト状況、達成したい成果、直面している制約についてお聞かせください。それらをもとに適切な第1マイルストーンを策定します。
Webアプリケーション開発サービス