UI/UX デザイナーがコードを書かずに、Claude と2週間で家計簿 PWA をリリースした話🎨
私は大手企業のインハウス UI/UX デザイナーです。コードはほとんど書けません。
それでも先日、Claude のサブスクリプション（Pro プラン、月 $20）だけを武器に、約2週間でプライバシー特化の家計簿 PWA「NoTrace Assets」をリリースし、ライセンス課金の導線まで対応しました。
これはその全記録です。何ができて、何が無理で、何に時間を使ったかを、できるだけ正直に書きます。
以下のnoteにも書いていますが、こちらではもう少し技術寄りの話を取り上げたいと思います、
作ったもの: NoTrace Assets
NoTrace Assets は、「通信しない」設計のプライバシー特化型 個人資産管理 PWA です。
主な特徴は3つあります。
- 完全オフライン動作: データはすべて端末内（IndexedDB）に保存され、サーバーには一切送信されない
- 資産・負債・キャッシュフロー管理: 銀行口座、証券、暗号資産、不動産、ローンまで一元管理
- 多通貨・日英バイリンガル対応: 日本以外で資産を持つ人でも違和感なく使える
ビジネスモデルは無料ベース + Pro 機能のライセンス販売です。Pro 機能は Polar.sh で販売しており、購入後に発行されるライセンスキーはオフラインで検証されます（つまり、購入後のアプリ起動時もサーバー通信なしで Pro 機能がアンロックされます）。
プロダクトは notraceassets.com で公開しています。
なぜ作ったか
きっかけは単純で、自分が使いたい家計簿アプリが世の中になかったからです。
既存のアプリは便利ですが、自分の資産情報を他社のサーバーに置くことに、年々違和感が大きくなっていました。資産は自分の人生に直結する情報で、それをどこか分からない場所に預けたままにすることは、ちょっと嫌だなと思っていました。
そして今は、AI を使えばコードが書けなくても、その経験ができる時代になっていました。なら今やるしかない、というのが出発点です。
スタート時点の自分
正直に書きます。
- コード経験: HTML/CSS は触れる。JavaScript / TypeScript / React は概念は分かるが、自分で書いたことはほぼない
- 個人開発の経験: 副業として個人開発するのは今回がほぼ初めて
-
ターミナルとの距離感:
npm installを見て途方に暮れるレベル
デザイナーとしての仕事は、長期目線でプロダクトと向き合うことです。ユーザー理解、UX、IA、ブランド整合性。プロダクトの「内側」を磨くことには慣れていました。
でも「世に出す」という、外側の世界、特にリリースに必要な技術視点の話は縁遠い状況です。ホスティング、ドメイン、決済、ライセンス、PWA、Service Worker。最初の数日は、毎時間あたらしい単語と出会っていました。
それでも持っていたものは、以下です。
- UX 設計力
- 情報設計（IA）
- ブランディング・ビジュアルデザインの判断軸
- 「何を作らないか」を決める意思
- 「こういうものが作りたい」というイメージ感覚
これらは AI には代替されないものでした。今回作ったプロダクトは、ほぼこの5つから来ています。
ツール構成と費用
使ったものは驚くほど少ないです。
| 用途 | ツール | 月額 |
|---|---|---|
| 設計相談・ライティング | Claude（Web / Desktop アプリ） | サブスク内 |
| 実装 | Claude Code | サブスク内 |
| サブスクリプション | Claude Pro | $20 |
| UI 設計 | Figma | 無料プランで足りた |
| ホスティング | Cloudflare Pages | 無料 |
| 決済・ライセンス | Polar.sh | 売上連動の手数料のみ |
| ドメイン | （独自ドメイン） | 年間 1,000円台 |
合計の固定費は実質 Claude Pro の $20 だけです。Max ではなく Pro を選んだのは「とりあえず一番安いプランで試したい」という気持ちでした。これが後に大きな壁になるのですが、それは後述します。
1日のワークフロー
ワークフローはシンプルで、Claude チャットを「設計の相棒」、Claude Code を「実装のペアプログラマー」として完全に役割分担していました。
- 空き時間: 前日のアプリを自分の端末で触る → 「次に何を直したいか」を Claude チャット（Web / Desktop）で言語化
- 設計フェーズ: Claude と対話で仕様を詰める。「こういう機能と画面にしたいんだけど、技術的には可能？」「この場合のトレードオフは？」と相談
- 実装フェーズ: Claude Code を起動して「〇〇を実装してください」と指示。差分を確認し、ブラウザで動作確認
- ハマったら戻る: エラーが出たら Claude チャットにエラー文を貼って原因を聞く → 理解してから Claude Code に修正指示
このサイクルが回り始めたとき、確信に変わったことがあります。自分の役割は「コードを書くこと」ではなく「言語化すること」だ、と。
何を作りたいのか、なぜそうしたいのか、どういうトレードオフを選ぶのか。それが言語化できれば、コードは AI が書きます。逆に言語化できなければ、AI を使っても何も生まれません。
AI に任せられなかったこと
「AI でぜんぶできた」と書きたい気持ちもありますが、現実は逆でした。AI に任せられない部分の方が、後から考えるとプロダクト開発に重要な部分だと感じます。。
プロダクト判断
何を作って、何を作らないか。これは AI には決められません。AI は「全部できますよ」と言ってきます。
「家族共有」「銀行 API 連携」「AI による支出予測」。どれも実装できますが、入れるとプロダクトの輪郭がぼやけます。「入れない」決断は人間の仕事でした。
セキュリティ方針
NoTrace Assets の核は「通信しない」設計です。最初は「データを暗号化して送る」という普通のアプローチを考えていました。
でも考えて出した答えは、「暗号化して送る」ではなく「送らない・送れない」でした。具体的には、ブラウザの Content Security Policy で connect-src 'none' を指定し、サーバーへの通信を技術的に不可能にしています。
この判断は AI からは出てきませんでした。「プライバシーを守るならどうしますか？」と聞くと、AI は教科書的な暗号化の話を返してきます。「通信そのものを禁止する」という思い切った選択は、コンセプトを最後まで守りたかった人間の意志から出てきました。
UX 判断
数字の入力フローのタップ数。確認モーダルを出すか出さないか。エラー文の温度感。各機能の名称。アイコンのサイズ。
こういう細部はデザイナーとしてずっと考えてきた領域です。AI に投げると無難な答えは返ってきますが、プロダクトの「肌触り」は人間が決めるしかありません。
価格設計・コピーライティング
無料と Pro の境界をどこに引くか。価格はいくらにするか。LP の見出しの一言。
AI に書かせると平均点のコピーが出てきます。それを「自分の声」に書き直すのは、結局自分の仕事でした。
ブランド
色、フォント、ロゴ、ボイス＆トーン。AI に任せたら無難な SaaS テンプレートになります。それは作りたいものではありませんでした。
デザイナーとしての仕事
ツールによる画面デザインを行っていないため、デザインの実働時間は確かに減っています。しかし、それは画面イメージを考えなかったわけではありません。イメージを持ってAIに指示を出して具体化し、フィードバックで修正しています。
そのため、AI が来たから「デザイナーの仕事が減った」というより、判断する箇所が絞られ、得意領域に集中できたというのが正直な実感です。
ハマったこと
ここからは、2週間の中で実際に壁にぶつかった話を書きます。技術的なつまずきではなく、AI と人間の関係性そのものに起きた変化の話です。
「AI が止まっている時間がもったいない」病
これが一番強烈な体験でした。
Claude Code に指示さえ出しておけば、勝手にコードを書いて作業を進めてくれます。最初は感動しました。「自分が他のことをしている間に、もう一人の自分が働いてくれている」感覚です。
ところが、しばらくすると感覚が反転します。人間側の手が空いた瞬間に、「AI が止まっていないか」が気になり始めるのです。
設計を考えている最中、メモを書いている最中、コーヒーを淹れている最中にも、つい画面を見に行ってしまう。「あれ、もう作業終わってる？」「次の指示出さなきゃ」と、AI のペースに自分が引きずられていく感覚です。
僕は AI に 追われる側 になっていました。
そしてここで壁になったのが、Claude Pro プランの5時間制限でした。Max ではなく Pro を使っていたので利用上限があり、ちょこちょこそこに当たって止まることがあったのです。
「止まっている時間がもったいない」と思っていたら、「制限で止められる」というオチ。AI で開発する世界では、自分の集中力ではなく、AI のレート制限がボトルネックになるという、ちょっと笑える未来を体験しました。
「プロジェクトの全体設計を最初にやっておくべきだった」
これは反省です。
AI との会話で行き当たりばったりに進めた結果、手戻りが何度か発生しました。「あ、この機能を入れるならデータ構造をこう変えなきゃ」「Polar の申請、もっと早くしておけばよかった」と、後半に小さい後悔が積み上がりました。
最初に全体設計をしておけば、
- いつ・どの順番で何を作るかのロードマップが描けた
- AI に何を指示するかを先に整理できた
- 人間側で必要な準備（Polar の申請、ドメイン取得、ライセンスキー生成など）を先回りできた
手探りでAIを会話するところから、シームレスに開発に入ったため、全体設計をつい省略してしまいました。
AI と一緒に作るときこそ、人間側の設計力が問われる。AI は速く動くからこそ、人間が地図を持っていないと、速く間違った方向に進む、ということを経験しました。
コンセプトを優先したため、マネタイズと計測を半ば諦めた
NoTrace Assets のコンセプトは「通信なし」です。このコンセプトを守るために、手放したものがあります。
- 広告収益: 広告ライブラリは通信必須なので、入れられない
- サブスクリプション課金のリアルタイム検証: オフラインで通せるように Ed25519 ライセンス検証に切り替え
- DL 数・起動数・アクティブユーザー数の計測: Google Analytics や Mixpanel は通信必須なので、入れられない
結果として、リリース後も「いま何人が使っているのか」「どの機能がよく使われているのか」が自分にもわからないアプリになりました。
これは設計判断としては正しい選択だと思っています。でもビジネス的には、見えないものを育てる不安が残っています。
リリースと、自分のドメインで自分のものが動く感動
リリース当日、https://notraceassets.com を開いて、自分の作ったアプリが動いていることを確認した瞬間は、何度体験しても感慨深いものがあります。
これまで何度もプロダクトをリリースしてきました。でもそれは、エンジニアが書いたコードを、デザイナーやプロダクトマネージャーや QA や、たくさんの人が関わったプロダクトでした。
今回は違いました。ドメインも、デザインも、コードの方向も、ライセンスの売り方も、ぜんぶ自分の判断で動いている。間違いも自分の責任、うまくいったところも自分の手柄。この感覚は、今までのキャリアで味わったことのないものでした。
全部自分の責任というのは、プレッシャーがある一方で、楽しさもより大きく感じられました。
学び：デザイナーがコードを書けない問題は、もう問題ではない
2週間が終わって、いま思うことを書きます。
「デザイナーがコードを書けない」ことと、「デザイナーがプロダクトを作れない」ことは、別の問題でした。少なくとも2026年の今、もう同じではありません。
AI 時代に必要なのは、
- 何を作るかを決められる力
- なぜそれを作るのかを言語化する力
- どこで妥協してどこで妥協しないかを判断する力
これらは、デザイナーはもちろん、PdMや経営者など、人間が何年もかけて磨いてきた力そのものです。AI はコードを書けますが、プロダクトに思いを入れることはできません。
「コードを書けるデザイナーになろう」という言葉は、もう半分しか正しくないと思います。残り半分は、「自分が持っているデザイナーとしての判断力を、AI と組み合わせる練習をしよう」だと、いまは思っています。
プロダクト
NoTrace Assets はここで公開しています。
触ってもらえると嬉しいです。フィードバックも歓迎です。
ここまで読んでくださってありがとうございました。
同じようにコードが書けないけど、AI と一緒に何か作ってみたい人に届けば嬉しいです。
Discussion