Development Period
5日
Responsibilities
企画/要件定義/UI設計/フロントエンド/バックエンドAPI/AI連携設計/デプロイ
概要
AIがメールを自動分類し、重要度に応じた優先順位付けや次のアクションを提案するメールアシスタント。契約書・利用規約のリスク分析にも対応し、日々の情報整理を支援する。
対象ユーザー
- 毎日大量のメールを処理するビジネスパーソン
- 契約書や利用規約のリスクを素早く把握したい方
- メール処理の時間を削減し、重要な業務に集中したい方
Demo / GitHub
スクリーンショット
開発背景
フリーランスとして活動する中で、毎日大量に届くメール（案件通知、セキュリティ通知、プロモーション等）の仕分けに時間を取られていた。「AIにまず読んでもらい、本当に自分が読む必要があるものだけに集中したい」という自分自身のニーズから企画・開発した。
解決した課題
- メールの重要度判断を自動化し、処理時間を大幅削減
- 「要処理」「参考」「不要」の3段階分類で、一目で優先度を把握可能に
- 契約書・利用規約のリスクポイントを自動検出し、見落としを防止
- 利用者の分類修正を記憶し、次回以降の分類精度を改善
主な機能
- メール自動分類（要処理 / 参考 / 不要）＋ 判断理由の表示
- 重要情報の抽出（期限、金額、対象など）
- AIによる次のアクション提案（返信、カレンダー追加、アーカイブ等）
- 分類修正の記録と学習（利用者の好みを反映）
- キーワード検索・ソート・一括操作
- 統計ページ（分類内訳、節約時間、差出人分析、学習状況）
- 契約書・利用規約のリスク分析（★5段階評価）
- ダークモード対応・レスポンシブデザイン
使用技術
- フロントエンド: React 19 / Next.js 16 / TypeScript / Tailwind CSS
- バックエンド: Next.js API Routes
- AI: Claude API (Anthropic)
- 認証: NextAuth.js / Google OAuth / Gmail API
- デプロイ: Vercel
AI活用の工夫
- AIの役割を限定: AIはメール分類と文書リスク分析のみを担当。AIが得意な判断処理のみをAIに任せ、検索・集計・画面操作などは通常のプログラムで実装する構成とした
- Demoモード設計: 環境変数（GOOGLE_CLIENT_ID）の有無で自動切替。APIキー不要でモックデータにより全機能を体験可能
- 学習フィードバック: ユーザーの分類修正をLocalStorageに蓄積し、差出人ルールを自動生成。再分類時に反映
- 文書リスク分析: 契約書を5段階でスコアリング。自動更新条項、解約制限、料金変更リスクなどを検出
アーキテクチャ
Gmail API ↓ メール取得 Next.js API Routes ↓ 分類リクエスト Claude API（分類 + リスク分析） ↓ 分類結果 React フロントエンド（表示・操作・検索・ソート） ↓ 学習データ保存 LocalStorage（分類修正履歴・差出人ルール）
開発周期
5日
担当範囲
企画 / 要件定義 / UI設計 / フロントエンド / バックエンドAPI / AI連携設計 / デプロイ
成果・実現したこと
- 大量のメールを優先度別に整理し、利用者が読むべきメールを効率よく判断できる仕組みを実現
- Demoモードで全機能が動作し、ポートフォリオとして即座にアクセス可能。Vercel無料枠で運用
想定導入効果
- メール確認時間の削減
- 重要メールの見落とし防止
- 契約書レビューの効率化
- 情報整理業務の自動化
開発で直面した課題と解決方法
- Google OAuthとGmail APIの連携: OAuth認証 + Gmail API + セッション管理の組み合わせ実装。Server Components内でのセッション取得方式を確立
- Demoモードの自然さ: リアルなモックデータ（Amazon、Google、ランサーズ等の通知）を作成し、実用感のあるDemoを実現
- 文書リスク分析のスコアリング: Claude APIのプロンプト設計で一貫したリスク評価基準を確立
このプロジェクトで学んだこと
- AIの分類精度はプロンプト設計で大きく変わる。「なぜそう判断したか」の理由を出力させることで、ユーザーが納得できるUXになった
- Demo用のモックデータは「それっぽさ」が重要。実在するサービスの通知形式を参考にすることで、初見でもアプリの価値がすぐ伝わる
- 継続的に利用されるAIアプリでは、利用者からのフィードバックを蓄積し改善に活かす仕組みが重要であることを学んだ