添削サービスプラットフォーム · 決済 + 管理画面を含むフルビルド
INNOTE
書類作成・面接・論述の添削をオンラインで提供する教育コンサルティングプラットフォームINNOTE(インノート)のウェブサイトを、サービスの購入・オンライン決済から会員の購入履歴、管理画面まで、制作の全工程を担って構築しました。
添削サービスプラットフォームオンライン決済管理画面Next.js
01
プロジェクト概要
INNOTE(インノート)は(株)JC教育が運営する教育コンサルティングプラットフォームで、大学入試・海外留学・就職を準備する人のための1:1個別添削サービスを提供します。
書類作成、面接、論述など、目的別の添削サービスをオンラインで選び、決済して利用できます。
AIの自動生成ではなく専門家が直接行う添削を、オンラインで購入・管理できるサービスにするため、ウェブサイトを新たに構築しました。
本プロジェクトでSilmarilは、画面設計とフロントエンドからオンライン決済、会員の購入履歴、管理画面まで、ウェブサイト制作の全工程を担当しました。
02
担当と貢献
- サービス紹介・購入から決済・購入履歴まで続くユーザーフローの設計とフロントエンドの構築
- 書類作成・面接・論述・その他に分かれた添削サービスのカタログと詳細ページの実装
- オンライン決済(Iamport/PortOne)の連携 — サービス購入・決済フローの構築
- 会員機能と「購入履歴の確認」など注文管理画面の実装
- 運営側がサービス・注文・コンテンツを直接管理する管理画面(アドミン)の設計・構築
- サポートチャット(チャネルトーク)の連携と相談導線の構成
- レスポンシブデザインとNext.js(App Router)での構築・デプロイまで全工程を担当
03
主な機能
01
添削サービスカタログ
書類作成・面接・論述・その他に分類し、訪問者がサービスを探して選べるようにします。
02
オンライン決済
Iamport(PortOne)決済を連携し、サービスの購入をオンラインで完結します。
03
会員・購入履歴
ログイン会員が自分の購入・利用履歴を確認できます。
04
管理画面
運営側がサービス・注文・お知らせなどを直接管理するアドミンを構築しました。
05
相談導線・チャネルトーク
相談CTAとチャット連携で、訪問者の問い合わせをすぐに受け付けます。
06
レスポンシブ・高速
デスクトップ・モバイルのどちらでも素早く動く最新のウェブで構築しました。
04
課題と解決
購入から添削までを一つの流れに
- 状況
- 添削サービスは紹介で終わらず、選択・決済・利用・履歴確認まで続く必要があります。
- 課題
- 訪問者がサービスを選び、決済した後、自分の履歴まで確認できる流れを滑らかにする必要がありました。
- 行動
- カタログ→詳細→決済→購入履歴へ続く導線を設計し、オンライン決済(Iamport)を連携しました。
- 結果
- 訪問者がオンラインで添削サービスを購入し、利用履歴まで確認できる購入フローを完成させました。
運営を自社で
- 状況
- サービス・注文・お知らせが増えるほど、開発者なしで運営側が直接管理できる必要がありました。
- 課題
- コード修正なしにコンテンツと注文を扱える運用ツールが必要でした。
- 行動
- サービス・注文・お知らせなどを管理する管理画面(アドミン)を併せて設計・構築しました。
- 結果
- 運営側が管理画面でサービスと注文を直接管理できるようにし、運用の自律性を確保しました。
信頼を与える添削プラットフォーム
- 状況
- 「専門家1:1、AI不使用」というサービスの強みを、オンラインでも明確に伝える必要がありました。
- 課題
- 教育コンサルティングらしい信頼感と専門性をサイト全体に込める必要がありました。
- 行動
- サービスの強み・プロセス・合格事例を明確に見せる情報設計と、抑制されたデザインで構成しました。
- 結果
- 単なる購入サイトを超えて、サービスの専門性と信頼を伝えるプラットフォームとして完成させました。
05
技術スタック
フレームワーク・言語Next.js (App Router) · React · TypeScript
UI・スタイルTailwind CSS · レスポンシブデザイン
決済Iamport(PortOne)オンライン決済 · サービス購入・購入履歴
管理画面運用向け管理画面(サービス・注文・お知らせ管理)
連携チャネルトーク サポートチャット · Google Tag Manager
インフラVercelデプロイ
06
成果・インパクト
- 添削サービスをオンラインで直接購入・決済し、履歴まで確認できる自社販売チャネルを完成させました。
- 運営側が管理画面でサービス・注文・お知らせを直接管理し、開発者なしでも運営が回るようにしました。
- 画面設計・フロントエンド・決済・会員・管理画面まで、ウェブサイト制作の全工程を一つのチームが担い、一貫して構築しました。
- レスポンシブな最新のウェブで、デスクトップ・モバイルのどちらでも同じ購入・利用体験を提供します。