個人開発Webアプリ
色彩検定の慣用色名学習アプリ「いろポン！」
案件概要
色彩検定の慣用色名を、クイズ形式で繰り返し学べるWebアプリ「いろポン！」を個人で開発・運営しています。 自身の色彩検定1級の学習経験をもとに、通勤中などのスキマ時間にも取り組める学習サービスを企画。色と名前を結びつけるクイズに加え、成績の確認や苦手色の復習機能を実装しました。 Next.js・TypeScriptを用いたアプリ開発から、ユーザー認証、学習データの保存、有料プランの決済、microCMSによるブログ機能まで、サービスを提供・運営するための仕組みを構築しています。 企画・機能設計、フロントエンド・バックエンド・API開発、データベース設計・連携、認証・決済連携、CMS連携と運営・改善を担当しています。主な画面はサービス紹介・料金プラン、級別クイズ、慣用色名一覧、ログイン、マイページ、成績・学習履歴・苦手色、復習クイズ、アカウント・購入情報、ブログ一覧・カテゴリ一覧・記事詳細です。
自分が担当した範囲
実装内容・工夫
- スキマ時間に取り組めるクイズ設計：色から名前を選ぶ問題と、名前から色を選ぶ問題を用意しました。出題数や学習範囲を選択でき、まとまった時間が取れないときにも取り組める構成にしています。
- 学習データを活用した振り返り・復習：回答履歴などの学習データを保存し、マイページで成績や苦手な色を確認できる機能を実装しました。学習結果の確認から復習へつながる導線を設けています。
- 複数のログイン方法への対応：Auth.jsを使用し、Google・LINE・メール認証に対応しました。ユーザーのアカウントに学習データや購入情報を紐づけています。
- 決済と有料機能の利用権限の連携：Stripe CheckoutとWebhookを連携し、決済完了後に有料機能の利用権限を更新する仕組みを実装しました。購入状態はサーバー側で管理し、有料機能へのアクセスを制御しています。
- microCMSと連携した情報発信：ブログ記事・カテゴリをmicroCMSで管理し、Next.js側で一覧・詳細ページを表示しています。記事ページのメタ情報や構造化データにも対応しました。
使用技術・制作ツール
サイトURL
色彩検定の慣用色名学習アプリ「いろポン！」
https://www.iropon.com/
採用・協業について相談する
CMS構築、バックエンド開発、フロントエンド開発、運用 / 保守に関する採用・業務委託・協業のご相談を受け付けています。この制作実績について確認したい点がある場合も、内容を添えてご連絡ください。