制作期間：2025年10月〜継続中(初期構築後も機能追加・改善を継続)　公開日：2026年1月8日

サイト：リザプロ教育研究所

どんな課題があったのか／ご要望

サブスクリプション制で限定の記事や動画を掲載したい、どのコンテンツがどれだけ見られているかを追跡したい、というご要望からスタートしました。

主な機能

コンテンツ配信・会員限定コンテンツ

・記事・動画コンテンツを一覧表示し、公開日・カテゴリタグで整理

・鍵アイコンで会員限定コンテンツを可視化し、非会員にも「見えているけど見られない」価値を伝える設計

・新着順表示で最新コンテンツをすぐ把握できる

会員登録・二段階認証

・メールアドレスとパスワードだけで登録を開始できるシンプルな導線

・Supabase AuthによるOTP(メール／電話番号)二段階認証で、なりすましログインを防止

・ログイン時も同様に認証コードでの確認を行い、安全性を担保

サブスクリプション課金・決済

・月額サブスクリプション制。入会月は無料、翌月から課金という分かりやすい料金設計

・支払いスケジュール(本日の支払い・翌々月以降の金額)を画面上で明示し、ユーザーが安心して登録できる

・毎月自動でカード決済、継続課金を管理

制作アプローチ

母親に寄り添うような、温かみのあるデザインを意識しつつ、shadcn/uiを活用してスピーディに実装。要件定義後はワイヤーフレームを省略してデザインを直接作成し、実装フェーズではAI(Claude)と協働しながら開発を進めました。Feature-Sliced Designを採用し、スピードと保守性を両立させています。

制作フロー

要件定義 → デザイン作成 → 開発 → リリース → 継続改善

※ワイヤーフレーム作成を省略しスピード重視で進行。公開後も継続的に機能追加・改善を実施中(直近の更新は先週)。

使用技術・ツール

・Next.js 15 — フロントエンド/バックエンドフレームワーク

・TypeScript — 型安全な開発言語

・Tailwind CSS・shadcn/ui — UIスタイリング・コンポーネントライブラリ

・Supabase — 認証・データベース

・microCMS — 記事コンテンツ管理(ヘッドレスCMS)

・Feature-Sliced Design — フロントエンドのアーキテクチャ設計

・Vitest・Playwright — テスト(ユニット・E2Eテスト)

Credit

クライアント：リザプロ株式会社

デザイン：梅田友里彩(GiFT, inc.)

開発：五百蔵直樹、村田瑞樹(GiFT, inc.)