← All Projects

AI業務管理アシスタント（AI Work Manager）

フリーランス向けAI業務管理ツール。自然言語入力からタスクを構造化し、4ビューで案件を多角的に管理。

React 19 Next.js 16 TypeScript Tailwind CSS Claude API React Native Expo AsyncStorage
★ Live Demo GitHub
Development Period
Web版 4日 + Mobile版 5日
Responsibilities
企画 / 要件定義 / UI設計 / フロントエンド / バックエンドAPI / AI連携設計 / デプロイ

概要

フリーランス向けのAI業務管理ツール。自然言語でタスクを入力すると、AIが自然言語からタスク種別・優先度・期限などを解析し、構造化されたタスクとして登録する。ダッシュボード、タイムライン、カレンダー、顧客別の4ビューでタスクを多角的に把握でき、レコメンド機能や通知機能で対応漏れを防止する。

Web版（Next.js）に加え、React Native（Expo）によるモバイル版も開発。同一のドメインモデルとビジネスロジックを共有する構成とし、クロスプラットフォーム設計を実践した。

対象ユーザー

  • 複数プラットフォーム（CrowdWorks, ランサーズ, ココナラ等）で並行して案件を管理するフリーランサー
  • 面談・応募・開発・回復待ちなど、多様なタスク種別を一元管理したい方
  • 自然言語入力で素早くタスク登録し、作業効率を上げたい方
  • 移動中や外出先からスマホでタスク状況を確認・更新したい方

Demo / GitHub

🔗 Web版 Demo を試す　｜　GitHub

📱 Mobile版: Expo Go QRコード（実機デモ対応）

スクリーンショット

（撮影後に追加）

開発背景

フリーランスとして複数のプラットフォームで案件を受注する中で、応募・面談・開発・回復待ちといった異なるステータスのタスクが混在し、全体の把握が困難になっていた。「一つの画面で今日やるべきことがすぐ分かり、対応漏れを防げるツール」を目指して企画・開発した。

モバイル版は「同じプロダクトをモバイルでも使いたい」という実用ニーズと、「React Native実務経験をポートフォリオで証明する」という両面を動機として開発。Web版のロジックがプラットフォーム非依存で設計されていたため、UI実装に集中できた。

解決した課題

  • 複数プラットフォームの案件を一元管理し、状況を即座に把握可能に
  • 自然言語入力でタスク登録を簡素化し、入力の手間を削減
  • 期限切れ・長期未回復のタスクを自動検出し、対応漏れを防止
  • 顧客別・タイムライン別の表示で、優先順位を多角的に判断可能に
  • Webとモバイルの両方から同じ業務を管理できる環境を提供し、場所を問わないタスク管理を実現

主な機能

Web版・Mobile版 共通

  • 状態遷移管理（応募 → 面談 → 開発 → 回復待ち → 完了）
  • ダッシュボード（Today’s Focus / Upcoming / Waiting / Completed）
  • タイムラインビュー（期限切れ / 今日 / 明日 / 今週 / それ以降）
  • カレンダービュー（月間表示 + タスク一覧）
  • 顧客別ビュー（クライアントごとの案件集約）
  • 自然言語入力によるタスク自動登録（AI解析プレビュー付き）
  • レコメンド機能（期限・面談・長期未回復の自動提案）
  • 優先度の自動調整（期限接近時にlow→medium、medium→highへ自動昇格）
  • フィルタリング（タスク種別 / ステータス / キーワード検索）
  • ダークモード対応

Mobile版 固有機能

  • ローカルプッシュ通知（面談リマインダー24h前 / 期限当日朝 / 5日未回復フォローアップ）
  • スワイプアクション（左:削除 / 右:完了）+ 触覚フィードバック
  • FAB（Floating Action Button）で即座にタスク追加
  • OS設定連動のダーク/ライトモード + 手動切替

使用技術

Web版

  • フロントエンド: React 19 / Next.js 16 / TypeScript / Tailwind CSS
  • バックエンド: Next.js API Routes
  • AI: Claude API (Anthropic)（Demoモード時はRule-based Parser）
  • データ管理: localStorage
  • デプロイ: Vercel

Mobile版

  • フレームワーク: React Native 0.86 + Expo SDK 57（Managed workflow）
  • 言語: TypeScript 6.0
  • ルーティング: Expo Router（ファイルベース）
  • 状態管理: React Hooks + Context（useState / useMemo / useContext）
  • リスト描画: @shopify/flash-list
  • カレンダー: react-native-calendars
  • ストレージ: AsyncStorage
  • 通知: expo-notifications（ローカルプッシュ）
  • ジェスチャー: react-native-gesture-handler（Swipeable）
  • 触覚: expo-haptics
  • アニメーション: react-native-reanimated

AI設計上の工夫

  • AIの役割を限定: AIは自然言語の構造化（タスク種別・期限・優先度・プラットフォーム判定）のみを担当し、通知・集計・検索・表示は通常のプログラムで実装
  • Demoモード設計: 環境変数（ANTHROPIC_API_KEY）の有無で自動切替。APIキー不要でローカルのルールベース解析により全機能を体験可能
  • レコメンド機能: タスクの状態（期限・面談予定・未回復期間）をルールベースで分析し、今日の行動提案を自動生成
  • 自動優先度調整: 期限接近に応じて優先度を自動昇格させ、緊急タスクの見落としを防止

設計思想

Web版とモバイル版を別々のアプリとして開発するのではなく、「同じドメインモデルを異なるUIで利用する」という考え方で設計した。

ビジネスロジックはプラットフォーム非依存の純粋関数として実装し、UI層・ストレージ層・通知機能のみを各プラットフォーム固有とすることで、保守性と再利用性を高めた。

アーキテクチャ

          自然言語入力
               │
      ┌────────────────┐
      │  NL Parser     │
      │  Auto Priority │
      │  Recommend     │
      └────────────────┘
               │
         Domain Model
               │
    ┌──────────┴──────────┐
    │                     │
 Next.js            React Native
    │                     │
localStorage        AsyncStorage
    │                     │
Claude API        Notifications

開発周期

  • Web版: 4日
  • Mobile版: 5日

担当範囲

企画 / 要件定義 / UI設計 / フロントエンド（Web + Mobile）/ バックエンドAPI / AI連携設計 / デプロイ / Expo Go実機テスト

成果・実現したこと

  • クロスプラットフォーム: 同一ドメインモデル・ビジネスロジックをWeb（Next.js）とMobile（React Native）で共有し、9日間で2プラットフォームの完全なアプリを開発
  • 技術成果: Web版はVercelで公開中、Mobile版はExpo GoでQRコード経由の実機デモが可能。Demoモードにより全機能がAPIキー不要で体験可能
  • 業務フロー設計: 案件の応募から納品・回復待ちまで、フリーランス特有の業務フローを状態遷移として整理し、システムへ落とし込む設計を行った
  • 利用者価値: 複数プラットフォームの案件を一画面で把握でき、自然言語入力から構造化タスクを自動生成し、登録作業を効率化

想定導入効果

  • タスク登録時間の短縮
  • 対応漏れの防止（プッシュ通知による自動リマインド）
  • 案件全体の可視化
  • 優先順位判断の効率化
  • 移動中のタスク管理（モバイル版）

開発で直面した課題と解決方法

  • 自然言語解析のルール設計: 自然言語からタスク種別・期限・優先度を正確に抽出するルール設計が必要だった。日本語・英語・中国語が混在する入力にも対応できるよう、正規表現パターンを言語横断で設計。Claude API使用時はプロンプトで多言語対応を明示
  • タスク状態の整合性: ステータス変更時のwaitingSince/waitingType連動、優先度の自動調整タイミングなど、状態遷移の一貫性を確保する設計が必要だった
  • localStorage → AsyncStorage移行: APIがsync→asyncに変わるため、useTasks Hookで非同期処理をラップし、コンポーネント側からは同期的に扱えるよう設計
  • 通知スケジューリング: タスク更新時に既存通知をキャンセル→再スケジュールするライフサイクル管理。expo-notificationsのidentifierでタスクIDと通知を紐付けて管理

このプロジェクトで学んだこと

  • フリーランス業務は「開発」だけでなく「応募→面談→交渉→開発→納品→回復待ち」と多段階あり、それぞれに適した表示と通知が必要。汎用タスク管理ツールでは対応しきれない業務特有の要件を整理する力が身についた
  • AIの自然言語解析はDemoモードでも正規表現で実用レベルの精度を出せる。APIが使えない環境でも体験価値を落とさない設計が重要
  • プラットフォームに依存しない設計にしておくことで、Web版のロジックをほぼそのまま再利用でき、モバイル版への展開コストを大幅に削減できた
  • React Nativeでは、Reactの設計思想を活かしつつ、モバイル特有のレンダリングやリスト最適化、通知・ジェスチャーなどの設計が重要であることを学んだ
← AIメール整理アシスタント（AI Reading Assistant）
ポートフォリオサイト（yangyang-dev.com） →