Web3教育プラットフォームMVP — フロントエンド開発とAPI設計
Web3教育プラットフォームの初回MVP開発で、唯一のフロントエンドエンジニアとして、UI実装、Web3オンボーディング、APIエンドポイント設計、Prismaスキーマ調整を担当。非技術ユーザーにも理解しやすい導線を意識し、ウォレット接続から証明書発行までを一続きの体験として実装した。
期間：2023年4月〜2024年4月
この実績が活きるご相談
0→1のプロダクト立ち上げで、仕様が動きながら固まっていく状況や、UXと技術制約をつなぎながら実装まで進めたい相談に近い実績です。
- MVPで何をどこまで作るかを整理したい
- 実装しながら要件やAPI設計も調整したい
- 複雑な導線を、初回ユーザーでも迷いにくい体験にしたい
背景
クライアントは、ブロックチェーンベースの学習証明書を発行するWeb3教育プラットフォームについて、初回MVPの公式リリースを準備していました。初回公開でありながら、ウォレット連携や証明書発行などの複雑な機能を最初から含む構成で、非技術ユーザーにも理解しやすいオンボーディングと、失敗時に復帰できる設計が必要でした。
課題
仕様が変化する分散チームの中で、非技術ユーザーにも理解しやすいWeb3オンボーディングを実装し、ウォレットログインから証明書発行までを、失敗時や再訪時も含めて一貫したフローとして成立させる必要がありました。
- 非技術ユーザーには、ウォレット接続や署名などWeb3特有の操作が分かりにくい
- 外部ツールや仕様変更の影響を受けやすい
- トランザクション失敗やネットワーク不一致から復帰できる設計が必要
- ウォレットログインと証明書発行を、一続きのユーザーフローとして扱う必要がある
- 時差のある非同期チームで、変化する仕様と技術的な判断を共有する必要がある
実施内容 / 進め方
フロントエンドとUI実装
- Next.js、TypeScript、Reactを用いてフロントエンド全体を設計・実装
- Figmaのデザインを、アクセシブルで一貫性のあるReactコンポーネントへ反映
- 再利用可能なコンポーネントと柔軟なデータ取得ロジックを設計し、将来の機能追加に対応しやすい構成を整備
API・データフロー・状態管理
- フロントエンド側のUXとデータフロー要件に合わせ、APIエンドポイントとPrismaスキーマを調整
- データの機密性と保持要件に応じて、Context API、ローカルステート、localStorage、NextAuth session、Prisma on GCPを使い分け
- Node.jsで一部のAPIロジックを実装し、フロントエンドで扱いやすいレスポンス構造へ調整
Web3オンボーディングと復帰設計
- MetaMask、Wagmi、Viemを用いて、ウォレット接続、署名、スマートコントラクト連携を実装
- ウォレットログインから証明書発行までを一続きのユーザーフローとして構成
- トランザクション失敗、ネットワーク不一致、再試行、再訪時の処理再開に対応
- 必要な場合には、再訪時に証明書発行処理を自動で再開する設計を実装
テストと基本的なSEO対応
- JestとReact Testing Libraryを用いて主要コンポーネントのユニットテストを実装
- 外部ライブラリとの統合が複雑なため、単純で分離しやすいロジックを中心に検証
- metaタグ、sitemap生成、semantic HTMLなど、Next.jsで基本的なSEO対応を実装
- CEOが定義した見出し構造を各ページへ反映
非同期チームでの仕様調整
- Slack、GitHub、Figma、Notionを使い、CEO、CTO兼バックエンドエンジニア、デザイナーと非同期で連携
- フローダイアグラムと記録を用いて、変化する仕様と意思決定の経緯を共有
- 技術的なトレードオフを早い段階で示し、メリットとデメリットを添えた代替案やフォールバックを提案
工夫した点 / 設計上のポイント
非技術ユーザー向けのWeb3導線
ウォレット接続から証明書発行までを一つの体験として整理し、各段階で必要な操作と状態が分かるように設計しました。
UXとデータ構造の連携
画面上の状態遷移に合わせて、APIレスポンス、データ保持、永続化の方法を調整し、フロントエンドとバックエンドの境界をまたいで実装可能な構成を作りました。
失敗時と再訪時の復帰
トランザクション失敗、ネットワーク不一致、再試行、再訪時の再開を考慮し、途中で問題が起きても処理へ戻れるフローを実装しました。
分散チームでの意思決定
フローダイアグラムと非同期の記録を使い、時差のある環境でも仕様変更と技術判断の経緯を追えるようにしました。
結果
- ウォレット接続から証明書発行までを一つのフローとして実装し、トランザクション失敗、ネットワーク不一致、再訪時の再開に対応
- UX要件と将来の機能追加を考慮した、再利用可能で拡張しやすいフロントエンド基盤を構築
- Notion、Slack、フローダイアグラムを用い、時差と仕様変更のある環境でも職能間の認識を揃えながら開発を進行
- 技術的なトレードオフと代替案を早期に提示し、変化する要件の中でチームが優先順位を判断できるよう支援