業務システム開発ポートフォリオ クラウドワークスで相談

受託開発ポートフォリオ / 業務システム 7 本

人の手を、
判断だけに残す。

毎日発生する手作業を機械に渡し、人が残る工程を意図的に決める。その考え方で作った 7 本は、すべてブラウザでそのまま動きます。

営業・案件管理Webアプリのダッシュボード画面。案件総額・受注見込・受注済み・勝率の指標が並び、その下に月別売上見込のグラフとステータス別案件数が表示されている。

プロダクト

7 つとも、実際に動きます。

要件定義から実装・テスト・ドキュメントまで一人で作りました。ブラウザからそのまま触れます。

kizuna-desk

AI問い合わせ管理システム

問い合わせの要約・分類・回答案を AI が用意し、送信は人が承認する。

AI問い合わせ管理システムのダッシュボード画面。問い合わせ総数・未対応・対応中・完了・承認待ちの集計と、平均対応時間、カテゴリ別問い合わせ、対応が必要な問い合わせの一覧が表示されている。
  • Next.js 15
  • TypeScript 5
  • Tailwind CSS v4
  • Supabase / RLS
  • Zod
  • Playwright

AI は提案者であり、決定者ではない。

未承認の送信は、アプリ層・サービス層・DB トリガーの 3 層で拒否する。

  • AI 要約つき問い合わせ一覧
  • 承認フロー(差し戻しは理由必須)
  • 顧客タイムラインの自動名寄せ
デモを見る
ID
demo@kizuna.local
PW
demo-password-2026

権限は viewer(閲覧のみ)。書き込みはサーバー側で拒否されます。

sales-crm

営業・案件管理Webアプリ

顧客・案件・活動を 1 か所に集め、集計と可視化を自動で回す。

営業・案件管理Webアプリのダッシュボード画面。案件総額・受注見込・受注済み・勝率の指標が並び、その下に月別売上見込のグラフとステータス別案件数が表示されている。
  • Next.js 15.5
  • React 19
  • TypeScript 5.7
  • Supabase / RLS
  • Recharts
  • Playwright

個人の Excel に散っていた案件を、1 か所へ。

受注見込は、表を組み直さなくても常に出ている。

  • テーブル / カンバン切替のパイプライン
  • 受注見込・月別・勝率の常時集計
  • 3 ロールの権限制御
デモを見る
ID
admin@example.com
PW
demo1234

パスワードは 5 アカウント共通。ログイン画面のカードをクリックすると自動入力されます。

gas-ads-report

広告レポート自動集計

毎朝 7:00、広告データを取得して集計し、ダッシュボードまで更新する。

広告レポート自動集計の Web ダッシュボード。直近 30 日の費用・表示回数・クリック数・CTR・コンバージョン・CPA・ROAS の指標と、日次の費用とコンバージョンのグラフが表示されている。
  • Google Apps Script
  • Spreadsheet
  • HtmlService
  • PropertiesService
  • LockService
  • clasp

毎朝の CSV ダウンロードと貼り付けを、そのまま消す。

月 10 時間 → 0 1 日 30 分 × 月 20 日 で試算した想定シナリオの目安です(実測値ではありません)。

  • 毎日 7:00 の自動実行と、失敗ステップからの再開
  • SHA-256 一意キーで二重登録を防止、集計は upsert
  • 三段階の検証と、失敗時のメール通知

自分のドライブにコピーを作成

ログイン不要。どちらも閲覧専用で、実データは含みません(接続先は Mock アダプタのままです)。

shiori-rag

社内文書AI検索(RAG)

社内規程やマニュアルに、出典つきで答える。根拠が無ければ「記載がありません」と返す。

社内文書AI検索のデモ画面。左に質問欄と例題、中央に出典番号つきの回答、右に引用元の規程原文が表を含めて表示され、画面下部に検索 6 段の実行トレースが各段の所要時間とともに並んでいる。
  • Next.js 15
  • TypeScript 5
  • ハイブリッド検索
  • BM25 + ベクトル
  • Claude API
  • Vitest

答えが資料に無いときは、答えない。

MRR 0.69 → 0.97 同梱の 44 文書・39 問での実測値です。固定長で切ってベクトル検索だけを行う一般的な構成との比較で、リポジトリの評価コマンドで再現できます。

  • 検索 6 段の内訳をミリ秒単位で可視化
  • 一般的な構成との左右同時比較
  • 39 問の精度を評価画面でそのまま公開
デモを見る

ログイン不要。対象は架空企業の社内文書 44 件で、実データは含みません。1 日の利用上限に達しても、検索とその可視化はそのまま動きます。

ai-doc-workflow

AI文書業務自動化

請求書や発注書を AI が読み取り、自信の無い項目だけを人が確認して承認する。

AI文書業務自動化のレビュー画面。左に請求書のプレビュー、右に AI が抽出した項目が並び、発行日は「93% 高」、請求書番号は「56% 要確認」、請求元は「61% 要確認」と項目ごとに信頼度が表示されている。画面下部には「承認できません」と、未確認の低信頼度項目の一覧が出ている。
  • Next.js 15
  • TypeScript 5
  • Tailwind CSS
  • Supabase / RLS
  • Zod
  • Playwright

AI が確信を持てなかった項目だけ、人が見る。

必須項目・金額の整合・未確認の低信頼度項目。3 つとも満たすまで承認ボタンは通らない。

  • 項目ごとの信頼度と、読み取り位置の可視化
  • 承認ゲート(小計・税・合計の整合まで検証)
  • 承認後の外部連携は二度押ししても二重登録されない
デモを見る
ID
reviewer@example.com
PW
demo1234

ログイン画面のカードを押すだけでも入れます。権限は承認担当(修正・承認・外部連携まで)。文書と取引先はすべて架空で、外部への送信は行いません。

ai-meeting-workflow

AI会議後業務自動化(n8n)

会議の文字起こしを AI が整理し、人が承認してから Slack・メール・予定・台帳へ同時に反映する。

AI会議後業務自動化のワークフロー実行結果画面。4 件の連携のうち 3 件が成功、1 件が失敗と表示され、「失敗した連携をまとめて再実行(1 件)」ボタンの横に「対象は Calendar 登録 のみです」と書かれている。画面下部には AI 解析・人間確認・承認と続くステップの進行が所要時間つきで並んでいる。
  • n8n
  • Next.js 15
  • React 19
  • TypeScript 5
  • Zod
  • Playwright

承認を通らなければ、外部へ 1 通も送信されない。

4 連携のうち 1 つが落ちても、成功した分は巻き戻さない。落ちたものだけを再実行する。

  • 「来週中に」「誰かやっといて」を AI が推測で埋めず、人に確認を求める
  • Slack・Gmail 下書き・Calendar・Spreadsheet を並列実行し、失敗したステップだけ再実行
  • 同じ承認を 2 回送っても、通知は 1 通・予定は 1 件のまま
デモを見る
ID
admin@example.com
PW
demo1234

ログイン画面のロールボタンを押すだけでも入れます。権限は管理者(承認・実行・再実行・監査ログまで)。会議・参加者・取引先はすべて架空で、Slack やメールへ実際に送信することはありません。

ai-browser-automation

AIブラウザ業務自動化

APIの無い既存Webシステムへ、AIが判断し人が承認した内容をブラウザ操作で自動登録する。

AIブラウザ業務自動化の実行画面。CSV 取込・AI Normalize・Human Review・Browser Automation・対象の既存システムという処理の流れが並び、その下に実行状況として登録できた行数・失敗した行数・実行したステップ数・所要時間が表示されている。
  • Next.js 15
  • TypeScript 5
  • Tailwind CSS
  • Playwright
  • Zod
  • Netlify Blobs

APIが無くても、止めない。

承認が通るまで、ブラウザは一度も起動しない。

  • 承認前に実行計画を全ステップ表示(ブラックボックスにしない)
  • 二重登録防止(連打しても同じ案件番号が返るだけ)
  • 部分失敗した行だけ原因を直して再実行、成功済みは触らない
デモを見る
ID
operator@example.com
PW
demo1234

ログイン画面のロールボタンを押すだけでも入れます。権限は実行担当(取込・修正・承認・実行・再実行)。操作対象もポートフォリオ専用の架空システムで、実在サイトへは一切アクセスしません。

設計方針

7 つとも、同じ考え方で作っています。

  • 抽象化

    差し替えを前提にする

    AI プロバイダもデータ層も API アダプタも実装が 2 つ以上あり、切り替えは設定 1 つです。

  • 防御

    アプリ層と DB 層の二重で守る

    権限を純粋関数として書き、同じ規則を Row Level Security とトリガーでも独立に表現します。

  • 可観測性

    壊れたときに、壊れたと分かる

    実行ログ・失敗通知・最後の実行状態。止まった場所が残り、そのステップから再開します。

進め方

コードを書く前に、決めることを決めます。

実装前にこの順序で設計ドキュメントを作り、各プロダクトの docs/ に全文を残しています。

  1. 01要件定義
  2. 02アーキテクチャ設計
  3. 03データベース設計
  4. 04画面設計
  5. 05実装計画
  6. 06実装とテスト

お問い合わせ

その作業、
まだ人がやっていますか。

くり返している作業の手順を箇条書きでお送りください。 自動化できる範囲と、人が残すべき工程を切り分けて返信します。

  • 業務の自動化(GAS / スプレッドシート連携)
  • 社内向け業務 Web アプリの新規開発
  • 手作業フローの棚卸しと置き換え設計

ご相談窓口

クラウドワークス

クラウドワークスで相談する

契約・仮払い・ご連絡はクラウドワークス上で承ります。現在の手順 / 頻度 / 使っているツール / 希望時期を、分かる範囲でお知らせください。