KeioNote ― シラバスから始まる学内教材マーケット

https://github.com/tao428/keionote
https://keionote-web.onrender.com/

Next.js

TypeScript

CSS

JavaScript

HTML

慶應生限定のシラバス連動型教科書・授業ノート手渡しフリマアプリ

田尾航太郎

推しアイデア

大学公式シラバスおよび「マイ時間割」とフリマ出品が完全連動する仕組み。履修曜日・時限のコマをタップするだけで、その授業の指定教科書と現在出品中の中古本一覧をシームレスに行き来できます。慶應生同士の手渡しのため、送料や面倒な梱包・発送手続きが一切不要な点が推しです。

作った背景

毎学期、数万円かかる教科書代は学生の大きな経済的負担です。一方で、先輩の家には使わなくなった綺麗な教科書が眠っています。同じキャンパスに通う学生同士が、手数料や送料をかけずに安全かつエコに教科書を受け渡しできる、慶應生のためのキャンパス内循環型エコシステムを目指しました。

推し技術

外部ライブラリに頼らず、Prismaで算出した中古相場の統計データ（平均・中央・最高・最安値）からインライン描画する「軽量SVG価格推移チャート」です。

プロジェクト詳細

1. アプリ概要

「KeioNote（慶応ノート）」は、慶應義塾大学の学生同士が不要になった指定教科書や授業ノートをキャンパス内で直接売買・手渡しできるクローズドなC2Cプラットフォームです。慶應の公式講義シラバスと完全にデータベース連動しており、「自分が受講する授業」から必要な教材をピンポイントで見つけ出すことができます。

2. インプット / アウトプット

  • インプット:
    • 公式シラバス情報（開講年度、学期、曜日・時限、担当教員、対象学部、学科、キャンパス、授業実施形態、授業言語、能動的学修形式）
    • ユーザー情報（所属学部・学科・学年・登録時間割）
    • 出品情報（タイトル、対象教科書、状態、販売価格、説明文、商品画像）
    • 手渡し希望場所（キャンパス内の具体的なランドマーク）
  • アウトプット:
    • シラバス複数条件AND検索の絞り込み結果
    • Apple Calendar風時間割グリッドおよびスライドイン型講義・フリマ情報Drawer
    • 過去の成約実績から算出される統計価格（平均値、中央値、最安値、最高値）と、価格変動トレンドを示すSVG折れ線グラフ
    • 取引決定後の売主・買主間のリアルタイムチャット調整画面

3. フロントエンド設計

  • 技術スタック: React (Vite) + TypeScript + Tailwind CSS (v4) + framer-motion (アニメーション)
  • UI/UX:
    • 慶應義塾カラー（紺: #001E62 / 赤: #C63527 / 黄: #F1C400）をあしらった、大学公式ポータルのような信頼感と清潔感のあるグラスモルフィズムデザイン。
    • 情報占有を防ぐために開閉式（トグル）にしたシラバス詳細検索サイドパネル。
    • AnimatePresence を活用し、現在いるページを黄色のアンダーラインで指し示すアクティブナビゲーションバー。

4. プロセス

  • シラバスからの出品フローの標準化: 「講義検索 ➡ 講義選択 ➡ 教科書選択 ➡ 出品情報入力」という3段階のステップに分解・統一することで、フリマ出品時に発生しがちな「教科書の版数違い」や「授業の紐付けミス」を完全に防止する安全な出品プロセスを構築しました。

5. バックエンド設計

  • 技術スタック: Node.js + Express (TypeScript)
  • 設計アーキテクチャ:
    • 堅牢でメンテナンス性の高いMVC構成を採用（routes, controllers, services, middlewares, prisma）。
    • セキュリティを担保するJWT認証/OTP認証機能を実装しつつ、デモ閲覧者がログインなしで全機能を即座に体験できるよう、ワンタップで切り替え可能な DEMO_MODE バイパス機能を完備。

6. 永続化して保存するデータ

PostgreSQLデータベース（Prisma ORM）を使用して以下のエンティティをリレーショナルに永続化：

  • User: ユーザープロフィール、評価平均、所属学部学科、権限（ADMIN / USER）
  • Lecture: 年度、学期、時限、実施形態などシラバス検索用の全講義データ
  • Textbook: 講義に紐づく指定教科書の書誌情報（タイトル、著者、出版社、ISBN、版数）
  • Item: 出品された教科書・ノート情報、コンディション、販売価格、ステータス（出品中 / 取り置き中 / 売却済）、閲覧数、お気に入り数
  • TimeTable: ユーザーが履修登録した授業の時間割スロット（User ➡ Lecture の多対多）
  • Transaction: 購入申請・取引ステータス、受渡場所（PickupLocation）、受渡日時
  • Chat / Message: 取引相手とのメッセージ履歴（時間割画面から遷移）
  • Review: 取引完了後の売主・買主の相互評価レーティングとコメント
  • Favorite / Notification / Report: お気に入り登録、取引・システム通知、違反商品の通報データ

7. このアプリの強み

  • 圧倒的な購買導線の短さ: 「時間割の空きゴマをタップする」または「曜日時限で絞り込む」だけで、必要な本と出品者が1秒で見つかります。
  • 送料・梱包コストの完全撤廃: キャンパスでの直接手渡し（「銀杏並木前」「創想館ロビー」など慶應生に馴染み深いスポットを指定可能）を前提としているため、梱包資材も郵送費用も一切かかりません。
  • 公式システムに匹敵するUI品質: AppleやNotionのような洗練されたカードUI、レスポンシブなサイドドロワー、相場トレンドのSVG描画など、Webフロントエンドのモダンなベストプラクティスを惜しみなく投入しています。

田尾航太郎

@cefc02f965b9bb53