Claude Codeでサブスク管理画面を作ってみた

動画、音楽、各種ツールなど、気づけばサブスクに色々入っているわりに、ちゃんと管理できていません。
金額もざっくりと認識していて、「月に何円使ってるんだろう」と細かく調べるのは面倒でそのまま放置、ということを繰り返していました。

管理サービスを探したこともありますが無駄に機能が多く煩雑で、自分の用途にちょうど合うものは見つかりません。

そこでふと、「自分で作ればいいのでは？」という考えに至りました。

今回Claudeを使って作ってみようと思ったのは、サブスク管理という目的だけでなく、いくつかの狙いが重なったからです。

• サブスクリプションをきちんと管理したい
• ブログのテーマを探していた
• Claudeを日常的な用途で試してみたい
• Webまわりの知識を学習したい

まさかの一石四鳥です。

環境

• OS：Windows 11
• 使用ツール：Claude（デスクトップ版）

Claude はブラウザやデスクトップアプリから使える AI アシスタントです。

今回はプログラムを一行も自分で書かず、会話だけで完成させることを目標にしたためデスクトップ版を採用しました。

制作過程

まずはざっくり指示を出してみる

難しいプロンプトは使いません。誰でも出せるレベルの一言から始めます。

「契約しているサブスクを管理するページを作りたい」

するとClaude側からいくつか質問が返ってきました。

「データはどこに保存しますか？」

個人利用で、自分のサブスクだけ管理。データはローカル管理でOK。

「どんな機能が欲しいですか？」

こちらはClaudeが選択肢を用意してくれたので、必要なものをそのまま選ぶだけでした。

• 一覧表示・追加・編集・削除
• 更新日・解約日のリマインダー
• 月額/年額の合計金額集計
• カテゴリ分け・タグ管理
• 月々の契約金の概算

全部選択します。

あっという間にプロトタイプが完成

回答するとClaudeから返ってきた提案はこうでした。

それならサーバー不要です！

HTML + JavaScript + LocalStorage だけでOK

• サーバー不要
• 無料
• .html ファイルをブラウザで開くだけ
• データは各自のブラウザに保存される

「今すぐここでプロトタイプを作れます。作りますか？」

「OK」と返すと、その場でアプリが動き始めました。

……ん？

えっ

なんともう出来ました。

ここまで5分もかかっていないと思います。

正直こんなに早く終わるとは思っていなかったので、時間を測定すらしていませんでした。

さらに追加機能を指示

最低限の機能は揃いましたが、せっかくなので使いやすくするため追加の指示を出しました。

• プリセットのサービス一覧から選択して登録できるようにしたい
• プランごとの料金を選択可能にしたい
• データのエクスポート機能（JSON）がほしい
• アイコンは各サービスの公式のものを使いたい
• 編集時にプラン変更だけできるようにしたい
• 登録できるサービスの選択肢をもっと増やしてほしい

これらを会話形式で伝えていくだけで、順次対応してもらえました。

完成したもの

サービスを適当に選択してみましたが、シンプル画面で見やすい。

---

月額、年額、契約数もわかりやすく、各種ボタンは右上にまとめられています。

ボタン配置や項目表示位置などに関しては指示を出してすらいません。

---

「追加」ボタンを押すと、サービス選択画面が表示されます。

各サービスのアイコンも表示されています。
※本記事は情報提供を目的としており、各社とは無関係です。
※本アプリは個人利用を目的としており、配布等の予定はありません。

---

Adobeのように、アプリケーションによって契約内容が異なるサービスにも対応しています。アプリと契約形態を順番に選ぶだけで登録できます。

---

編集時にはプランの変更も可能です。

---

簡単にブラウザ上で動くものにしたのですが、
入力データのインポート/エクスポートが出来るので環境変化にも対応しています。

感想

あっけないほど早く完成してしまったので、
「勉強になったか？」というと正直あまりなりませんでした。

コードを書く必要がなく、会話だけで完結するので、Web開発の知識はほぼ不要です。
仕組みを理解するという意味での学びは少ない一方、「こういうものを作りたい」を素早く形にする手段としては非常に優秀だと感じました。

次はもう少し難易度の高いものを作ってみたいと思います。

おまけ：映画サブスクで観られるおすすめ作品

せっかくサブスクの話題なので、アマプラで観れる個人的におすすめのホラー映画を紹介します。

人気作や有名作は省き、『誰かに勧められなかったら観る機会がなさそう』な作品を基準に選びました。

劇場版　ほんとうにあった怖い話～変な間取り～

https://www.amazon.co.jp/gp/video/detail/B0D8VYHLWQ/ref=atv_dp_share_cu_r

3部構成のオムニバスホラー作品です。
1部目が本当に怖かったので、ぜひ1部目だけでも観てください。
日本っぽいホラーで、こんなにゾワゾワしたのは久しぶりでした。

「変な家」や「事故物件　恐い間取り」などの類似タイトル作とは一切関係ないのでご注意を。

次何観ようかな、の参考になれば幸いです。