--- title: "Claude Codeなら続く？総合健康アプリが続かないUIデザイナーの「自分専用アプリ」開発記" date: 2026-06-09 categories: column author: 長橋 canonical: https://www.liberogic.jp/topics/20260610-claudecode-health-app/ --- # Claude Codeなら続く？総合健康アプリが続かないUIデザイナーの「自分専用アプリ」開発記 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/c03b53e1199e4c3d8bf2c4016a9eef14/20260609-ai-claude-my-app-try-desginer.png) 皆さんにはこんな密かな悩みはありませんか？ 「よし、今日からやるぞ！」と意気込んでインストールしたはずの習慣化アプリが、全然続かないという悩みです。習慣トラッカー、お薬カレンダー、家計簿……と、項目ごとに別々のアプリを行き来するのは、面倒臭さに拍車をかける行為でした。おまけに有料サブスクも多岐に渡り、管理がずさんになって解約を忘れる始末。これでは本末転倒です。そこで、デザイナーのわがままな思いつきが爆発しました。 「だったら、自分に必要な機能だけを詰め込んだ、自分のためだけのアプリを自作しちゃえばいいのでは？」 こうして始まったのが、AI（Claude Code）との二人三脚による、僕の生活に特化した「オレオレ習慣化コックピット」の開発です！ こんにちは！リベロジック株式会社でUIデザイナーをしている、はっしーです。 突然ですが、皆さんにはこんな密かな悩みはありませんか？ 「よし、今日からやるぞ！」と意気込んでインストールしたはずの**習慣化アプリが、全然続かない**という悩みです。 始めることに関してはプロですが継続させたことがありません。 世の中には優秀で美しいアプリがたくさんあります。 最初は毎日しっかり記録をつけるんです。でも、仕事が忙しかったり飲み会があったりして、ふとした日に「連続記録」が途切れてしまうと、一気にやる気がゼロに……。 最初はあんなに気にしていたリマインド通知も、いつしかただの雑音に変わり、スマホの画面の端で化石化していくアプリたち。 あの瞬間に襲いかかってくる「あ、もういいや」っていう敗北感。味わったことがあるのは、きっと僕だけではないはずです。 > 何事も三日坊主な人生に救いの手を差し伸べてくれる人はいないのかな（いない さらに僕を苦しめていたのが、「アプリの分散」です。 習慣トラッカー、お薬カレンダー、家計簿……と、項目ごとに別々のアプリを行き来するのは、面倒臭さに拍車をかける行為でした。おまけに有料サブスクも多岐に渡り、管理がずさんになって解約を忘れる始末。これでは本末転倒です。 そこで、デザイナーのわがままな思いつきが爆発しました。 **「だったら、自分に必要な機能だけを詰め込んだ、自分のためだけのアプリを自作しちゃえばいいのでは？」** こうして始まったのが、AI（Claude Code）との二人三脚による、僕の生活に特化した「オレオレ習慣化コックピット」の開発です！ > とりあえず最適解はAIが教えてくれるはず ## 1. 【機能紹介】自分の「ズボラさ」をシステムで包み込む「サボり」をシステム化したこだわり機能 さて、ここからは実際にどんな機能を実装したのかをご紹介します。 既存アプリの「いいとこ取り」をしつつ、僕の生活に特化した究極の「ダッシュボード」を目指しました。 必要なアプリを一つにまとめるためにまずは習慣化アプリの作成を始めました。 また朝と夜で使い分けたいのでライトモードとダークモード両方用意しております。 ### 🌱 初期画面 初期画面は続けたい習慣の入力画面を表示自分で入力する形で進められます。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/27247b626fc346618e0c108f55680800/TinyWin_%E5%88%9D%E6%9C%9F%E7%94%BB%E9%9D%A2.png) スクロールすると下の方に回答して習慣を作ると言うリンクがあります。そちらをクリックすると質疑応答に答えるとあなたにあった習慣を提案してくれます。 #### 初期画面では習慣化診断を導入 また初期画面ではどんな習慣をつけたいかわからないユーザーのために質問を答えるだけであなたにあった習慣を選択できる習慣ナビゲーションも作成しました。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/4dd327e6ddff4e3895d23ef24fde5827/TinyWin_start_%E8%B3%AA%E5%95%8F%E4%BA%8B%E9%A0%85%E3%81%AB%E7%AD%94%E3%81%88%E3%81%A6%E8%87%AA%E5%88%86%E3%81%AB%E3%81%82%E3%81%A3%E3%81%9F%E7%BF%92%E6%85%A3%E3%81%A4%E3%82%99%E3%81%91%E3%82%92%E6%8F%90%E6%A1%88.png) ### 🌱 習慣トラッカー：0か100かの世界を卒業 まずは習慣化するためには小さなスモールステップでもいいのでコツコツと続けられるものがあると良いということで 「5段階評価」機能付きの習慣化アプリを作成。 今まで使っていたアプリは「できた」か「できなかった」の2択になりがちでした。でも、このアプリでは「完璧にできた日」だけでなく、「ちょっとだけ頑張った」Lv1の日でもカレンダーに色がつくようにしました。 例えば運動なら、「Lv1: 体重計に乗る」「Lv2: トイレ行ったときにスクワット」から、「Lv5: プールで１km泳ぐ・ヒットボクシング40分」まで、その日の頑張りに合わせて記録できます。 サボった日は空白になりますが、あとで説明するサボり税システムと合わせて続かなくても他の日にリカバリーすればなんとかなるのでサボった日があっても苦になりません。 翌日また始めればいい。その気軽さのおかげで毎日とりあえず体重計に乗ることだけはできてます！ カレンダーが緑色のグラデーションで少しずつ色づいていく「色の積み重ね」を視覚的に楽しめるようにして1ヶ月でみた時自分がどれだけ積み重ねてきたかがわかりやすくてモチベーションも上がります。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/1bb67bc1a508486ba36c767db5839967/%E7%BF%92%E6%85%A3%E5%8C%96_%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%88.png) #### カレンダー機能で見える化 カレンダーUIを見ると自分が実際に習慣を達成した時は色が変わります。レベルに応じて色の濃さや色が変わり、自分がどれだけ習慣を執行してきたかがわかるのでモチベーション維持に役立ちます。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/9fcb4c8327884964a4193effbbc8def3/%E7%BF%92%E6%85%A3%E5%8C%96_%E3%82%AB%E3%83%AC%E3%83%B3%E3%82%BF%E3%82%99%E3%83%BC.png) #### 習慣のアーカイブ機能と新規習慣作成機能も用意 そして習慣化はある程度の期日習慣化したら他の習慣に取り掛かるのも良いと思いまして、習慣のアーカイブ機能と新規習慣作成機能も用意してます！「習慣化達成」ボタンをクリックすると新しい習慣を追加できます。 ### 🏛️ サボり税：罪悪感を貯金に変える こちらは先ほどの習慣トラッカーに紐づくもう一つの機能です！ サボった日は自分に「税金（デフォルト300円）」を課すシステムです。 人間誰しも、どうしても継続できない時はありますよね。 だから自分を律するためのペナルティは必要なんですが、単なる罰金だと嫌になってしまいます。 > デブはなぜデブかわかりますか？楽な方、怠惰な方に逃げて食でドーパミンを満たし簡易的な幸せホルモンに頼った結果です。なのでどうせペナルティを強くしたって習慣化が苦手な我々には意味がない 「本来はサボった分を募金するとかが良いんだろうな…」とも考えたのですが、そこまで自分を厳しく締め付けると、絶対にアプリを開かなくなる自信がありました（笑）。 サボり税の支払い先は**「自分のインデックス投資口座に入金する」にしました**。 つまり、**罰金だけど罰金じゃない。自分のための罰金**です。 サボってしまった罪悪感すらも、未来の自分への資産運用に変わるようにしました。 さらにこだわったのが、月間の達成率に応じた「減税制度」です。 - 「達成率90%以上なら50%免税」 - 「80%以上なら25%免税」 になる仕組みを取り入れています。 画面には「あと1%で25%減免！」と表示されるので、これを見ると「今日はLv2でもいいから頑張ろう」と謎のモチベーションが湧いてきます。 習慣化の最大の敵は「1日サボって連続記録が途切れた瞬間に、すべてを投げ出したくなること」です。 でも、この減税制度があるおかげで、「1日サボったけど、まだ減税のチャンスがある！」と踏みとどまることができます。 一度の失敗で諦めさせない、ズボラな自分に徹底的に寄り添った優しい設計です。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/3774dc30b2fa459b8172fe77da06d4b5/%E7%BF%92%E6%85%A3%E5%8C%96_%E3%82%B5%E3%83%9B%E3%82%99%E3%82%8A%E7%A8%8E.png) ### ✨ スキンケアトラッカー ＆ 💊 お薬管理：アプリの反復横跳びをゼロに **✨ スキンケアチェックツールは欲しかった** 習慣、お薬、家計簿……これらを別々のアプリで管理するのは、ズボラな人間にとって「面倒臭さ」の極みでした。この「アプリの反復横跳び」をなくすため、日々のケアも健康管理もこのコックピットに完全統合しています。 機能としては習慣化アプリの機能をそのまま流用できたので実装は簡単でした。 **🧴 頑張れない日も許容する「スキンケアトラッカー」** 肌のケアも立派な習慣の一つです。画面を開くと「どこまでできた？」と問いかけてくれる、5段階のステップを用意しました。 ヘトヘトで帰った日は「Lv1: 洗顔のみ（水洗顔 or 洗顔料で顔を洗う）」でOK。少し余力があれば「Lv2: 最低限ケア（洗顔＋化粧水）」「Lv3: 基本ケア（＋乳液）」、そして特別な日は美容液まで追加した「Lv4: 丁寧ケア」…というように、その日の自分のHPに合わせて記録できます。 さらに、この各レベルの名前やケア内容（説明文）は「ステップ設定」から自分好みにカスタマイズ可能にしました。画面上部には「今月平均Lv」や「Lv3以上継続日数」なども可視化されるため、「最近疲れてLv1ばかりだったから、今日はLv3まで頑張ろう」と、無理のない範囲でモチベーションを保てます。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/895658a8c411423f84c0091e47d2e31e/%E3%82%B9%E3%82%AD%E3%83%B3%E3%82%B1%E3%82%A2_%E3%82%AB%E3%83%AC%E3%83%B3%E3%82%BF%E3%82%99%E3%83%BC.png) #### 💊 ズボラを徹底アシストする「お薬管理」 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/e4ef82727d2248a993af9f62befe3a9d/%E3%81%8A%E8%96%AC%E7%AE%A1%E7%90%86_%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%AA%E3%82%B9%E3%83%88.png) そして、個人的に一番挫折しがちなのがお薬の管理です。 このアプリでは、単に薬の名前を入れるだけでなく、「朝・昼・夜」の飲むタイミング、「食前・食後・任意」といった指定、各タイミングでの錠数、さらには「毎日・隔日・曜日指定」といった複雑な頻度まで、かなり細かく柔軟に登録できるようにしました。 未完了の薬がある時は、画面上部に「⚠️飲み忘れの薬があります。確認してください。」と目立つ赤いアラートが表示され、自分にハッパをかけてくれます。 画面下部には「今月の服薬達成率」や「飲み忘れ回数」といったリアルな数字も突きつけられます（開発中のテスト画面では服薬達成率5%というズボラぶりを晒していますが……笑）。 それでも安心してください。 飲み忘れた日があっても、カレンダーから遡って後から記録できる「後出しOK」な設計は健在なので、完璧主義に陥らず自分のペースで続けられます。 歳を重ねると薬の服用も増えてくるのでこの機能はとっても便利ですし、医者にかかる時に過去飲んだ薬の情報も共有できるのでとても助かってます（お薬手帳すぐ忘れてしまう民なので）。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/84ba2f0d61f54eb382632804b8ab6d3e/%E3%81%8A%E8%96%AC%E7%AE%A1%E7%90%86_%E8%96%AC%E7%99%BB%E9%8C%B2%E3%83%9B%E3%82%99%E3%82%BF%E3%83%B3.png) ### 🍺 飲み会管理：**健康と節約のモチベーションが爆上がりする神機能** そして、個人的に僕の生活を一番変えたのが、この「飲み会管理」機能です。 ただ飲んだ記録をつけるだけではなく、月の飲み会回数の上限（例えば「月4回まで」など）と予算を管理しつつ、日々の「ちょっとした我慢」を視覚的なご褒美に変える工夫を詰め込みました。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/aa303dcfd57d4be99f4c9117094d35c5/%E7%AF%80%E9%85%92%E3%83%BB%E9%A3%B2%E3%81%BF%E4%BC%9A%E3%81%AE%E8%A8%AD%E5%AE%9A.png) **🍵 ワンタップでチャリン！「節酒貯金」** 日々の生活で 「今日は家で飲むのをやめておこう」 と我慢できた日は、ホーム画面の「今日は晩酌しなかった」のトグルをワンタップするだけ。 それだけで、カレンダーに緑色のマークがつき、500円が「節酒貯金」としてチャリンと加算されます。 毎日の何気ない我慢が金額として積み上がっていくので、月末に近づくにつれて「今月はもう3,000円（6日間）も節酒できた！」という謎の達成感とドーパミンが得られます。 この浮いたお金を投資に回したり貯金に回したり。 欲しいもの箱の浮いたお金から出すようにするなど節酒したことによって他の対価が得られたことを実感できればより禁酒や節酒が続くと思います。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/cff9885ecc4c42daa57de565e6767186/%E9%A3%B2%E3%81%BF%E4%BC%9A%E3%83%BB%E7%AF%80%E9%85%92%E8%A8%98%E9%8C%B2_TOP.png) **🛡️ 飲み会中の自分を律する「悪酔い防止モード」** このアプリの隠し玉とも言えるのが「悪酔い防止モード」です。 飲み会がスタートしたらこのモードをオン。すると、あらかじめ設定した「目標帰宅時刻」までのカウントダウンが画面中央にドーンと表示されます。もちろん、「今日は楽しいからもう少し！」という時は、「帰宅時刻を変更」や「🎉2次会も余裕あり！」ボタンで柔軟に時間を延長できる、ズボラな自分に優しい設計です。 さらに、画面には「🍺アルコール」「🥤ソフト」「💧お水」の杯数カウンターを設置。「アルコール2杯ごとにソフト1杯」といったペース配分をリアルタイムで判定し、ゲージが「OK」と緑色で教えてくれます。これで、翌日の二日酔いと「なんであんなに飲んじゃったんだ…」という後悔を劇的に減らすことができます。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/1fcf57722e5c4553b9eb4974a1edb163/%E9%A3%B2%E3%81%BF%E4%BC%9A%E3%83%BB%E7%AF%80%E9%85%92%E8%A8%98%E9%8C%B2_%E6%82%AA%E9%85%94%E3%81%84%E9%98%B2%E6%AD%A2%E3%83%A2%E3%83%BC%E3%83%88%E3%82%99.png) **📊 その他にも飲み会の時に便利な機能をたくさん追加** 飲み会が終わったら、「鳥貴族 渋谷店」のような店名や実際の支払い金額、一緒に行った人とのメモなどを記載できます。さらにはGoogle MapsのURLを入れると自動的に情報を入れてくれる機能も追加しました。月に数回の作業なのでAPI連携してもお金がかかることはないとAIに言われたので実装しました。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/e6f0624820944f2da0512b64e1a8719e/%E9%A3%B2%E3%81%BF%E4%BC%9A%E3%81%AE%E8%A8%AD%E5%AE%9A.png) また飲み会の時の精算を忘れることもあるのでそのメモとして機能を追加しました。 払った払わないがなくなりとても良いです。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/ef5f78b0e11e46609ec71142feac61ce/%E7%B2%BE%E7%AE%97%E6%A9%9F%E8%83%BD.png) そして月末の「月次レポート」では、晩酌を回避した日数による「節酒貯金」と、飲み会予算より安く済んだ差額（飲み会で浮いた金額）が合算され、「総節約額」としてドヤ顔で可視化されます。 例えば「今月は合計9,000円も浮いた！」と一目でわかるので、「このお金で欲しかったあのガジェットを買おうかな」とワクワクできる、健康とお金の両方が手に入るお気に入り機能です。 ## 2. 開発を終えて：Claudeはデザイナーにとって最高の「翻訳機」だった こうして僕のズボラさとわがままをすべて詰め込んだアプリが形になったわけですが、開発未経験の僕がここまで来られたのは、ひとえに相棒のClaudeのおかげです。 エンジニアの方が見たら「正気か？」と怒られてしまうかもしれませんが、今回は「HTML・CSS・JavaScriptをすべてindex.htmlの1枚に詰め込む」という、超脳筋な単一ファイル構成で進めました。 でも、これが僕たち（僕とClaude）にとっては大正解。 ファイルが複数に分かれると「どのファイルのどこを直して」と伝えるだけで一苦労ですが、1枚ならコードを丸ごとチャットに投げるだけで、Claudeがすべてを瞬時に把握してくれます。 「こういう挙動にしたい」という僕の抽象的なイメージを、Claudeが美しいコードへと翻訳してくれる。時に閉じタグのミスやJavaScriptの読み込み順でアプリ全体がクラッシュし、夜中に2人でエラーログを追いかけるトラブルもありましたが、それすらもバディものの映画のようで楽しかったです（笑）。 GitHubとの連携やcloudflareとの連携などもチャットのやり取りをするとアカウントの登録方法を教えてくれますし公式サイトのリンクをそのまま載せてくれるのでAIとチャットしているとあっという間に連携できました。 ## 3. 次なる高い壁：デザイナー、セキュリティの深淵へ Claudeの手を借りて、見た目も動きも「僕の理想」が詰まった最高のおもちゃ（アプリ）を手に入れることができました。 **……が、ここで新たな問題が発生します。** 実際にこのコックピットを毎日使い込んでいくうちに、ふと我に返ったのです。 「待って、このアプリには僕のリアルな健康状態、毎日の服薬データ、直近の家計簿、そしてサボった履歴という、**剥き出しのプライバシーが詰まりまくっている**ぞ」と。 現在は、とりあえず気休め程度に簡易的なPINコード（暗証番号）で画面ロックをかけていますが、正直なところセキュリティに関しては完全に素人。自分とAIだけの知識で作った今の状態では、大切なデータを預けるには一抹の不安が拭えません。 デザイナーとして「心地よい体験」を作るからこそ、その裏側にある「絶対に漏れない・破られない」という**安心感も重要な一部**であるはず。 「やっぱり、スマホのFace IDや、最新のパスキー（Passkeys）を使って、自分だけが安全かつスマートにシュッと開けられるようにしたい！」 そう思い立ちましたが、セキュリティは一筋縄ではいかない超・専門領域です。 これはもう、僕の手には負えない……。 ここはエンジニアの人と話して慎重に進めていきたいと思います。 いずれ家計簿管理ツールも導入し、クレジットカードの利用履歴をアップロードするだけで勝手に記録をつけてくれるような機能も追加していきたいのですがセキュリティ周りが不安なので一旦保留です。 ## まとめ ### 道具は揃った。次は「安心」を作りたい！ 「開発の知識がないから」と頭の中で温めるだけで終わっていたアイデアが、AIという最高の相棒のおかげで、こうして息をして、僕の生活を実際に変えるツールになりました。 完璧にできない自分を責めるのをやめて、少しの「サボり税」を払うことで何度でもやり直せる。この優しいシステムのおかげで、三日坊主のプロだった僕も、今では毎日楽しく習慣化できています。 でも、便利になればなるほど、それを守る責任もセットでついてくる。 この記事には書いてないですが通知機能や家計簿管理機能なども少しずつ追加しております。 ただ家計簿管理などはセキュリティの観点から慎重に行わなければいけないのでまだ機能としては開発環境で頑張ってます。 というわけで、次回の更新をぜひお楽しみに！