【Claude（無料）のみ】コードわからない私が、在宅ワーカー向けの案件管理アプリを作った記録

最近話題のClaude Code。AI界隈の発信を眺めて、なんとなくすごいことは知っていた。
何をしたらいいかわからないし、難しそうだしなぁ〜と思っていました。

しかし、こんな私でもClaudeと話し続けたら自分の業務にぴったり合ったアプリの機能とデザインを作ることができました。

わたしが使ったのはClaude CodeではなくClaude（無料）のみ。この機能やデザインの完成形まで、Claude Codeは一切使っていません。

この記事は、これをここまで作るまでの過程と考え方をまとめた制作記録です✨
(※いずれも案件名や金額は架空です)

作ったアプリの動きはこんな感じ

なんで作ろうと思ったの？

在宅ワークでお仕事をしていると、毎月の請求書発行という業務があります。

「あの案件の納品日いつだっけ」
「今何件進行中で、いつ納期だったかな」
「請求書の品目に気をつけよう」
「これはA案件と一緒に請求という話だったような」
「あ、請求書番号間違えて送るところだった、あぶない〜」

抱えてる案件はそんなに多くないのに、間違えそうになってました。笑
Notionやスプレッドシートで管理しようとしたけどめんどくさくて続かなかった。。

ちょうどClaude Codeを触ってみたいタイミングだったので、まずはClaude（無料）で遊ぶ気持ちではじめました。（その時、夜中の12時…）

最初から全部決めなくてよいというのは聞いていたので、「こういうものがほしい」をゆるく伝えたら、Claudeが確認しながら進めてくれます。

指示なしだとこんなデザインになるんだ…な経験

実はこのアプリを作る前に、Spirのような予約アプリを自作できないかな？と試してみたんです。その時に何の指示もせずに提案されたデザインがこちらです。

なんだろう、うまく言えないけどこれじゃない…
具体的に指示することの重要性をこのとき学びました。

今回のアプリの初期形態

おお！と感動したのも束の間、
単発案件と継続案件でなぜか売上分けてあるし、「次へ」を押すと進行中→納品済→..というようにステータスを手動で変えるしくみで使いにくい。
納品日登録してないのに、請求書作成ボタン押せるのがなんか落ち着かない。

色に関しては、多すぎて目が疲れると思いました。

↓次にできたのがこちらです。ボタンの配置とかまぁまぁ整ってきました。

使う頻度で場所を変えたり、できるだけボタンを減らす。ひとつひとつ指示してUIを整えました。
ぼーっとしてても押す場所に迷わないことを意識しました。

記録系のアプリの継続には、ある程度モチベーションが必要です。
「もっとかわいくしたい！」と思い、
ここからアプリ構築の戦いが始まります…

色について

今回のアプリもまずは色が大事だと思い、
「くすみカラーにして」と話しかけたら雰囲気は変わったけど、
出てきた色が自分のイメージと全然違ったんです。

そこであるサイトを使って指示したら、一発でイメージ通りになりました。後半で詳しく解説してます（ヒントは配色サイト）

案件管理アプリ、全5画面の考え方を解説します

Claudeと話しながら作った「JOB TRACKER」。
全部で5つの画面、こだわりの機能をつけました。
「このnoteを参考に作りたい」と投げれば、わりと最小限のやりとりでアプリ再現しやすいと思います！（こっそり）