🤖
お掃除サポートデモアプリを1日で作った話

2025/05/07に公開
 TL;DR写真をアップロードすると指示を出してくれるデモアプリを開発しました。
フロントエンドの知見がなくともChatGPTやCursorを使うことで1日で設計・開発できました
作業スペースをキレイにすることができました（コレが一番大事）

 アプリの概要と目的いきなり恥ずかしいですが、僕は掃除がとにかく苦手です。

部屋が汚くなっているという自覚はありますが、まず何をしたらいいのかよくわからない…という状況なのでいつもモチベーションが上がりません。

指示さえしてもらえればできるのでは？と思ったので、指示出ししてもらうアプリを作りました。（刃を研ぐのが先とか言いますしね！）
特に、最初のステップをとにかく踏み出しやすくしたかったので写真をアップロードするだけで何をするべきか指示が返ってくるようにしました。

 😣 主な課題僕が思う掃除へのハードルってこんな印象です。

着手のハードル：タスクが漠然としてスタートできない

時間の錯覚：片付け = 長時間という思い込み

成果の不可視：やってもすぐ散らかると感じ達成感が続かない

情報過多：お掃除動画などはYoutubeで見るが見て満足→実践せず

 📌 アプリ設計示唆具体的で明確な指示の提供機能
短時間で完了できるタスクへの分解機能
情報の簡素化と行動促進機能
アプリとしてはシンプルで簡単に掃除が始められるものがいいなと思いました。

 実際の様子（と掃除）もういきなり実際の（部屋と）動作画面です。

 BeforeBeforeの写真を載せようかと思いましたが、見せれるものではなかったのでアプリ越しに出しておきます（白目）

さて、有用な指示を出してくれるのでしょうか。
【STEP1】 画像の選択
カメラで撮影するかライブラリから写真を選択。散らかった机や棚など、掃除したい場所の写真です。
【STEP2】 指示生成
AIが写真を分析し、具体的な掃除手順を提案します。

「A4トレイを設置し「未処理」「保管」「破棄」で振り分け」「卓上トレーを配置し文具やカード類を仕切る」などの指示が生成されます。
以下が生成された指示です。
# 整理プラン

## 【STEP 0】 写真の分析  

このデスクはコンパクトなコーナーに設置された木製天板です。\
ノートPCと外部モニタ、キーボードが置かれていますが、ケーブルが絡まり視界を妨げています。\
書類や封筒が積み重なり、どこに何があるか分かりにくい状態です。\
文房具やカードケースなどの小物がバラバラに散在し探す手間が生じています。\
デスク下のスペースが未活用で、収納力に余地があります。\
作業エリアが狭く感じられ、集中力が途切れやすい環境です。\
整理整頓を進めることで作業効率や気分のリフレッシュが期待できます。\
まずは簡単な分類から始めると継続しやすくモチベーションが保てます。\

## 【STEP 1】 まずはざっくり分類  

- 書類（請求書・ノート・封筒）  
- デジタル機器（ノートPC・モニタ・キーボード）  
- ケーブル類（電源ケーブル・USBケーブル）  
- 文房具・小物（ペン・カードケース・充電器アダプタ）  
- 収納用品（トレイ・ケース類）  

## 【STEP 2】収納のための改善ポイントと提案  

1. ケーブルマネジメント  
 - デスク裏にケーブルクリップを貼り付けてまとめる  
 - ケーブルバンドで余長を結束しデスク下に収納する  
2. 書類の分類整頓  
 - A4トレイを設置し「未処理」「保管」「破棄」で振り分け  
 - 定期的に不要書類をシュレッダーへ廃棄する  
3. 小物のゾーニング  
 - 卓上トレーを配置し文具やカード類を仕切る  
 - 使用頻度に応じた位置に配置し取り出しやすくする  
4. スペース拡張＆活用  
 - モニターアームで天板スペースを確保する  
 - デスク下にスリム収納ラックを設置し空間利用  

## 【STEP 3】運用ルールの例（習慣化のコツ）  

 - 作業後5分で棚戻しルール  
 - 書類は1日1回必ず振り分け  
 - ケーブルは使ったらバンドで束ねる  
 - 使い切り文具は都度補充  
 - 毎週金曜に全体見直し  

## 【補助アイテム（おすすめ）】

| 目的                   | アイテム               | 備考                  |
| ---------------------- | ---------------------- | --------------------- |
| デスク上のケーブル整理 | ケーブルクリップ       | 100均で入手可、粘着式 |
| 書類の分類収納         | A4レタートレイ3段      | 無印良品、A4対応      |
| 小物整理               | 卓上仕切りトレイ       | ニトリ、仕切り調整可  |
| ディスプレイ台         | モニター台兼用スタンド | Amazon、木製          |
| デスク下収納           | スリムラック           | ニトリ、幅30cm以下    |

いい感じに指示と必要なアイテムができています。
（【Step3】 掃除）
指示に従って実際に掃除を行います。必要となる収納用具を買い、指示に従い整理していきます。
今回は書類が散らばっているのを収納するケースを買ってきました。

 After
Afterはまだキレイなので載せます（）

匠のAIの指示によってスペースをキレイにすることができました。

 使用した技術スタックシンプルにしたかったのでfastapi+uvicorn+openai apiでサクッと作成しました。

フロントエンドは全く知識がないのでCursorと相談しながら進めました。
バックエンド: FastAPI, Uvicorn
画像認識・アクション生成: OpenAI API (o4-mini)

フロントエンド: React Native (Expo)
デプロイ: ローカル環境のみ

 開発プロセスの説明要件定義: 「ライブラリから選択 or カメラから写真を撮影 → AIが掃除方法を指示 → 実行」という単純なフロー
API設計: 画像アップロード、AI分析、レスポンス表示の基本構造
バックエンド実装: FastAPIでエンドポイント作成
OpenAI API連携: o4-miniを使った画像分析機能
フロントエンド実装: 最小限のUIで操作性重視
テスト: 実際の部屋で使用してフィードバックを収集


Day
作業


0.5
Node / Python / Docker 環境セットアップ

1
FastAPI 実装 & コンテナ化

1
Expo UI

0.5
実機テスト & Prompt 微調整

0.5
バッファ

計 ≈ 4 営業日で MVP 動作確認完了の計画でしたが、実際には1日で基本機能を完成させることができました。

ChatGPTでインタラクティブにペルソナやエンパシーマップを作成し、MVPとなるプロジェクト生成。

残りをCursorを用いて修正していきました。

 リポジトリ構成repo/
├── backend/         # FastAPI + Uvicorn
│   ├── main.py
│   ├── requirements.txt
│   ├── pyproject.toml
│   └── Dockerfile
└── frontend/        # Expo
    ├── app/
    │   └── index.tsx
    └── ...

 バックエンドの実装サンプルimport base64
import json
import os

import uvicorn
from dotenv import load_dotenv
from fastapi import FastAPI, File, Form, UploadFile
from fastapi.middleware.cors import CORSMiddleware
from openai import OpenAI

load_dotenv()
client = OpenAI(api_key=os.environ.get("OPENAI_API_KEY"))


# ▼▼ 整理整頓アドバイザープロンプト ▼▼
SYSTEM_PROMPT = """
...  # 省略
"""

app = FastAPI()

# CORSミドルウェアの設定
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/api/organize")
async def analyze_room(image: UploadFile = File(...)) -> JSONResponse:
    """
    部屋の写真をアップロードし、AIによる掃除指示を取得する
    
    Args:
        image: アップロードされた画像ファイル
        
    Returns:
        JSONResponse: 掃除手順と優先度を含むレポート
    """
    try:
        # 画像データの読み込み
        contents = await image.read()
        encoded_image = base64.b64encode(contents).decode("utf-8")
        
        # OpenAI APIリクエスト
        response = openai.ChatCompletion.create(
            model="gpt-4o-mini",
            messages=[
                {
                    "role": "system",
                    "content": "あなたは掃除の専門家です。写真から部屋の状況を分析し、具体的な掃除手順を3つまで提案してください。手順は各5-10分で完了できるものにし、優先度順に並べてください。"
                },
                {
                    "role": "user",
                    "content": [
                        {"type": "text", "text": "この部屋の掃除方法を教えてください"},
                        {
                            "type": "image_url",
                            "image_url": {
                                "url": f"data:image/jpeg;base64,{encoded_image}"
                            }
                        }
                    ]
                }
            ],
            max_tokens=500
        )
        
        # レスポンスの整形
        cleaning_report = response.choices[0].message.content
        
        return JSONResponse(content={"report": cleaning_report})
        
    except Exception as e:
        return JSONResponse(
            status_code=500,
            content={"error": f"処理中にエラーが発生しました: {str(e)}"}
        )

if __name__ == "__main__":
    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

 フロントエンドの実装詳しくないため今回は割愛します:pray:

 気になる点少しアクションが具体的でないかも
「A4トレイを設置し「未処理」「保管」「破棄」で振り分け」の振り分け方など

指示生成の時間が体感少し長い
写真の解像度などにも依存する気がするので制限するとかありそう


 今後の展望MVPのみの実装でしたが、今後開発するならこんな感じになるのかな〜という想像です。
着手ハードル下げる
チェックリスト
5分タイマー
ローカルに履歴保存

習慣化
Push通知
週次レポート

コスト最適化
OSS VLM 切替

収益化
Amazonやニトリなどのアフィリエイトで収納グッズ提案


 まとめ簡単に掃除に取り組むためのデモアプリを開発しました。

机がきれいになったのでGW以降のしごとも気持ちよくできそうです。

また、fastapiもuvicornもexpoも初めて触りましたが、Cursorなどのおかげでデモはサクサク開発ができたのも良かったです。
Day	作業
0.5	Node / Python / Docker 環境セットアップ
1	FastAPI 実装 & コンテナ化
1	Expo UI
0.5	実機テスト & Prompt 微調整
0.5	バッファ
TL;DR

アプリの概要と目的

😣 主な課題

📌 アプリ設計示唆

実際の様子（と掃除）

Before

After

使用した技術スタック

開発プロセスの説明

リポジトリ構成

バックエンドの実装サンプル

フロントエンドの実装

気になる点

今後の展望

まとめ

Discussion
