- 投稿日：2026/04/07
- 更新日：2026/04/08
挫折した経緯
CoworkやClaude Code、みんなが使ってて「すごくいい！」って言ってる。私も使いたい！
で、早速使ってみたんだけど…ダメだった💦
エラーは出るし、難しいことは聞かれるし、その都度チャットに内容をコピペして、解決したらまたCoworkやClaude Codeに戻って…。延々この繰り返し。
結局、私は挫折してしまいました。
ならいっそ、チャットだけで作ってしまえ！
自分専用のポモドーロが欲しい！
oViceのもくもくスペースを使ったことがある方なら、すでにご存知かもしれません☝️
『30分集中して5分休憩を繰り返す』という、より効率的に集中するために使うタイマーみたいなものなんですが…
個人的に50分じゃ短くて、90分は微妙💦
「好きな時間を設定したいんじゃ！！」という、なんともわがままな希望が炸裂した結果、Claudeが助けてくれました。
Claude「一緒に作ってみる？」
鶴の一声で、早速作成開始☝️
私の希望は
✅ 毎回違う時間を任意で変えられること
✅ 集中と休憩を延々繰り返すこと
✅ 集中と休憩は音で知らせること
✅ 何セットやったかわかるようにしたい
果たして、非エンジニアで英語ブワー恐怖症の私がどこまでやれるのか？
まずはHTML版から始まった
まだClaudeに課金する前のことです。
「ローカルで使えるタイマーアプリを作りたいんだけど、できる？」って聞いたら「もちろんできるよ！🎉」と即答。
ただ、私にはそもそもの疑問がありまして…
私「えっと…ネットに接続しなくても使えるものが欲しくて」
Claude「大丈夫だよ！HTMLファイル1つで作るやつは、完全オフラインで使えるよ！🎉」
私「ちょ、お待ちになって🖐️HTMLって、インターネットの言語じゃないの？！」
Claude「いい疑問だね！😄 確かにHTMLはウェブサイトを作る言語なんだけど、実はインターネットなしでも動くんだよ！WordファイルをWordで開くのと同じで、HTMLファイルをブラウザで開くだけで動くんだ！」
…なるほど！HTMLファイルって、ただの「文書ファイル」みたいなものなのか！なら
私「作って！」✨
そしてClaudeが何やら考え始めて、少し待つと…
こんな感じでファイルを提示してくれました。
早速ダウンロードして、作ってくれたタイマーを動かしてみると…ちゃんと動いた！！
ファイルをダブルクリックするだけで、ブラウザで開いてタイマーが使える！インストール不要！Wi-Fiなしで使える！素晴らしい😆✌️
…でもここから、私のこだわりが沸々と🤣
こだわりが止まらない！改良の嵐
「動いた！嬉しい！」で終わればよかったものの…使ってるうちに、次から次へと注文が出てくるんです💦
✅ 改良①「音が小さすぎる！」
タイマーの音が…聞こえない💦
「音量上げればいいじゃん」って思うでしょ？でもね、パソコンの音量を上げると他の音も一緒に大きくなっちゃうんです(T ^ T)
動画編集とかしてる時とか、タイマーの音がほとんど聞こえない。タイマーの音量に合わせると編集中の動画の音が爆音に…
そこでClaudeに「アプリの音量だけ変えられるようにして！」とお願い。さらに「使いたい音をまず聞かせて！」と。
すると、Claudeが5種類の音を用意してくれました🎵
A：電子ビープ（ピッピッピ！はっきり系）
B：アラーム風（ビービービー！繰り返し系）
C：チャイム風（ドーン…余韻ある落ち着き系）
D：上昇メロディ（ドレミファ〜上がる系）
E：ポップ通知音（ポン！短くかわいい系）
「ツリーチャイムみたいな音はない？」なんて聞いてみたんですが⬇️
複雑になっちゃうのは嫌なので、Eの音を連続で「ポン！ポン！ポン！」と3回鳴らすパターンが気に入って、休憩開始はBのアラーム音、集中再開はこのポン×3連続に決定！🎵
音量スライダーと音量テストボタンも追加してもらって、他の音に影響なくタイマーの音だけ調整できるようになりました✨
✅ 改良②「カウントダウン音が欲しい！」
しばらく使ってたんですが、集中してる時に「突然音が鳴る」のが…わりとビクッ！とするんですよね💦
そこで「カウントダウンみたいに3秒前からピ！ピ！ピ！ポーン！みたいなのってできない？」と聞いたら、Claudeがやわらかい音のバリエーションを用意してくれて、最終的に…
カウントダウン → やわらかピン♪（ふわっとした感じの音）
フェーズ切り替え → ハープっぽい和音🎶
残り3秒になるとカウンターの数字が赤くなる演出まで追加してくれました。
✅ 改良③「サイズをもっと小さく！」
「別ウィンドウで開く」機能をつけてもらったんですが、ウィンドウが大きすぎて画面を圧迫する💦
Claudeがコンパクトに調整してくれて…
こうやって、注文の多い私の要望に一つずつ付き合ってくれるClaudeチャット…ほんとにありがとう😭✨
Claude熱、急上昇！
プロプランへ課金するも…
この頃から、私の周囲で一気にClaude熱が上昇！
日本語の素晴らしさに感動して、制限かかりまくるほど使っていた私は、ついに有料プラン（プロプラン＄20/月額）へ課金しました✨
せっかくならあのポモドーロタイマー（以下：POMOちゃん）をグレードアップさせたい！！
CoworkやClaude Codeを使って爆速で仕上がるんじゃない？！（ワクワク）
で、早速相談。
…えっ。
もう、こうなったら制限の容量が増えたと思ってスクショ撮りまくって送りまくってガンガン聴きまくってやる(T ^ T)
やっぱり捨てられない想い
「常に最前面に表示したい」→ Electronアプリへの挑戦
使っていくと不満は出てくるもので、だからこそ改良したい！
💧 ブラウザのタブを切り替えると、時間がズレることがある
💧 常に最前面に表示ができない（他のウィンドウに隠れちゃう）
💧 アイコン作ってアプリにしたい
などなど…
Claudeに相談したら、正直にこう教えてくれました。
「HTMLファイルだとバックグラウンドに限界があるんだ💦 ちゃんと解決するにはElectronアプリが必要。」
「でもターミナル作業が少しだけあるよ。」
えれ…ターミ……？
「何それ🤣美味しいの？」
…はい、これが私のリアルな反応です😤
Claudeが「コピペするだけだよ！」と言うので、「まぁコピペならできるか…」くらいの軽い気持ちでトライ☝️
この時点で私、ターミナルが何なのか全くわかってません。後日、とんでもない事実を知ることになるんですが…それはまた後ほど
Claude曰く、Electronアプリにすると…
🖥️ ダブルクリックで起動できる本物の.appファイルになる
📌 常に最前面に表示できる（ピクチャインピクチャみたいに！）
🔄 バックグラウンドでも止まらない
ということで、「常に最前面に表示もできるの？！やったー！！やりたい！やりたい！」とウキウキで返信する私。
でもNode.js・npm・Electronアプリなんて初めて聞く言葉。やっぱり心配なのは「ヤバいやつじゃ無いよね？」ってこと💦
良くも悪くも、ビビリな私です。
作ったアプリはMacの中だけで動いて、外部にデータを送ったりは一切なし。完全オフラインです✅
…よし、やってみよう！
人生初のターミナル体験
正直に言うと、この時点で「ターミナル」が何なのか、全然理解してません🤣
Claudeが「ここにコピペしてね！」と言うから、その通りにしてるだけ。画面の意味？わかんない。でもコピペはできる。ならそれでよし！
Claudeが教えてくれた手順はこんな感じ👇
① Node.jsをダウンロードしてインストール（普通のアプリと同じ！）
② ターミナルでコマンドをコピペ
③ できた.appファイルをアプリケーションフォルダに移動
「やることはたったこれだけ！コードを書く必要は一切ないよ✨」
…本当に？ 本当にコピペだけ？
✅ エピソード①「もう泣きそう…」
まずはNode.jsのダウンロードから。
サイトにアクセスしたものの…画面に並ぶ英語と見慣れない用語の数々に、もうクラクラ💦もうすでに怖い💦
Claudeに「ダウンロードってどこ？」「LTSって何？」「最新版じゃないの？」と、聞きまくる私🤣
ちなみにLTS（Long Term Support）っていうのは「長期サポート版」のことで、安定してて不具合が少ないバージョンなんだそうです。普通に使う分にはこっちが安心☝️
だがしかし…
どういうこと？なんだかよくわからないページに飛んでない？本当にダウンロードページ？
混乱した私はスクショを撮ってすぐさまチャットに添付☝️日本語訳にしたところ⬇️
私「…ブログ記事に飛んでない？」
Claude「あれ？ちょっと確認するね！」
うん、Claudeだって間違える🤣
そしてようやくダウンロードできて、インストール画面に辿り着いたとき…
無駄な心配性がまた炸裂するも、Netflixはわかんないけど…NASAが使ってるなら大丈夫か😅（ちなみに、用心深い私はperplexity.aiでも聞いてみた☝️）そして謎の信頼のもとインストール完了！
そしていよいよターミナルを開く時が来ました。
Command＋スペースで「ターミナル」と入力して…
こんな画面が出てきた。
私「ふむふむ、ここにコピペするのね、了解！」
最初のコピペは node -v。これを貼り付けてEnterを押すと…
…おお、なんかちょっと嬉しい✨
こうしてClaude様の仰せの通りに、指示に従っていく私。
✅ エピソード②「なんか一気にバーっと出た(T ^ T)」
次の指示 npm init -y を実行したら、なんだかわからない英語がブワーッと表示されました。
「なんか一気にバーっとコードが出ちゃったよ？(T ^ T) 何これ(T ^ T) どうすんの？(T ^ T)」
英語とコードがブワーッと画面に並ぶ光景…。スプシの家計簿を作った時にも感じた、あの「さぶいぼ」が全身を駆け巡りました😱
この「大丈夫、正常だよ！」に、何度救われたことか😭
そしてClaudeが用意してくれた3つのファイル（package.json、main.js、index.html）を、ターミナルにコピペしていきます。
そして不安な私は、またも聞く！
はい！仰せのままに！！🙇
ただ…コードはどんどん長くなっていくし、指から血の気が引いてるのがわかる。でも、コピペはできる！（一番最後のコードはものすーごんく長かったため、私はエラーかと思いました😱）
いよいよ起動の瞬間！Claudeの指示通りに npm start と入力してEnterを押すと…
✅ エピソード③「ふお！！！動いた！！！」
「ふお！！！！！！！見て見て！！！！！いつものやつが出た！しかもちゃんと日本時間の現在時刻も表示されてる！！！！！！」
しかも、他のウィンドウを開いても、場所をずらしても、ちゃんと最前面に来る！
HTMLでは実現できなかったことが、できてる！！
この瞬間の感動は…ちょっと言葉にできないです😭✨
アプリは動いた！…でも終わりじゃなかったんです💦
他にも細々とお願いをして、ちょっとずつ改良して、いい感じに仕上がってきたところで最後のお願い🙏
アプリのアイコン、可愛くしたい！
アイコン設定＆真っ黒画面との戦い
アイコンを変えたくて…
まず、アプリアイコンがElectronのデフォルト（青い原子みたいなやつ）のまま。
せっかくなら自分好みのアイコンにしたい！
ということで、早速ChatGPTで「緑の芽吹き・発芽のイメージ」のアイコンを作って、Canvaで1024×1024のPNGに変換しました。
ポモドーロの「成長」のイメージで🌱
可愛いのできた✨
ところが！ このアイコン設定がめちゃくちゃ時間かかったんです💦
認識してくれない😱
Claudeが「あれやってみて！」「これはどう？」とコードを投げてくれるも、一向にアイコンが設定されない…
.appファイルとして書き出して、アプリケーションフォルダからダブルクリックすると…真っ黒。何も表示されない。
ちなみに、ターミナルから npm start で起動すると動くんです。
何度も試して、Claudeと一緒に原因を探って、最終的にわかった原因がこちら👇
主な原因
原因① Macのセキュリティが「コード署名なし」のアプリをブロックしていた → Claudeが「codesign」という専用のコードを書いてくれて、無事解決！
原因② 前に起動したアプリがまだ裏で動いていた → Dockから「終了」してから開き直すことで解決！
原因③ ファイル名に日本語と特殊文字（×）が入っていた → ファイル名を英語のシンプルなものに変更して解決！
⚠️ ターミナルでファイルを扱うときは、ファイル名は英数字だけにしましょう！日本語や記号が入ってるとトラブルの元です💦
ちなみにMacアプリは、ウィンドウ左上の赤い丸（×ボタン）を押しても、ウィンドウが閉じるだけでアプリ自体は裏で動き続けるんです。失念してました💦
こうしてようやく、アイコンもちゃんと設定できて…
ジャジャーン✨
かわいい🌱✨
こちらが最終成果です⬇️
長い長い道のりを経て、ついに完成した自分だけのポモドーロタイマーのアプリ「POMOちゃん」🌱
最終的にできあがったアプリの機能はこちら👇
✅ ダブルクリックで起動する本物の.appファイル
✅ 常に最前面に表示（他のウィンドウに隠れない！）
✅ バックグラウンド（仮想デスクトップ）でも止まらない
✅ 現在時刻＆次の休憩開始予定時刻を表示
✅ 集中時間・休憩時間を1秒刻みで自由に設定
✅ 3秒前カウントダウン音つき
✅ アプリ内の音量スライダーで音量調節
✅ 自作のPOMOアイコン🌱
✅ 合計勉強時間・休憩回数の表示
✅ 完全オフラインで動作（Claudeのトークン消費なし！）
正直な感想を言うと…
すごいぞClaude.ai！
CoworkやClaude Codeにこだわらなくてもできるんだ🎉
開発者用のツールだとも知らずターミナルに突っ込んでいった私が、本物のMacアプリを作れるなんて✨
ただ、正直に気をつけてほしいこともお伝えします。
⚠️ ターミナルでのコマンド入力は、コピペだけとはいえけっこうドキドキします💦 「正常だよ！」と言われても最初は不安です。
⚠️ エラーや予想外の挙動は普通に起こります。今回も真っ黒画面やアイコン問題で何度もつまずきました。
⚠️ Claudeも間違えることがあります。途中で「HTMLだと無理」→「Chrome設定で対処できる」→「やっぱりElectronが必要」と説明が変わった場面がありましたよね☝️でも「ごめん、説明が不正確だったね😣」と正直に訂正してくれたのは、むしろ信頼できるポイントでした。
そしてかかった費用💰
・HTML版だけなら → Claudeの無料プランでOK！
・Electronアプリ化まで → 有料プランが安心（やり取りが大量になるので、無料だとメッセージ？トークン？の制限に引っかかる可能性大）
・Node.jsやElectronは → すべて無料！
つまり、お金がかかったのはClaudeの有料プラン代だけです✨
ちなみにプランの種類はプロで、モデルはSonnet 4.6（有料プランのデフォルト）で全部完結しました。上位モデルのOpusじゃなくても、手順通りに進める作業なら十分作れました😊
後日談：あの場所の正体を知った日
アプリも完成して、日々POMOちゃんを愛用していたある日のこと。
oViceでClaude Codeの勉強会に参加した日のことです。
講師の方が「Claude Codeは、初心者の方だとターミナルのハードルが高くて＿＿」と仰っていたのです。
私「…ターミナル？」
何やらどこかで聞いたことのある単語が………あ！
あの、私がコピペしまくってた場所って…開発者用のツールだったの？！😱
いや、確かに思い返せば、あそこに英語のコードをバーっと貼り付けて、Enterを押して、アプリを作り上げたわけで…
そりゃ開発者用だわ🤣🤣🤣
でも逆に言えば、「開発者用」なんて自覚が一切なかったから、変に構えずにできたのかもしれない。
「ここは開発者が使う場所だよ」って最初に知ってたら、私たぶん、ビビって手を出せなかったと思う💦
無知って、たまに最強の武器になるんですね🤣あー楽しい✨
最後に
CoworkやClaude Codeに挫折した私。
「自分にはオーバースペックだったんだ」と周囲の賑わいとの差に、正直かなり凹んでいました。
けれど今回、開発者用のツールに無自覚で突っ込んでいったIT素人の私が、ポモドーロアプリを作れたんです！
効率が悪くたって泥臭くたって、自分の欲しいものが形になった！
動くものが作れた！まずはそれでいいじゃないですか✌️
もちろん、途中で何度もさぶいぼ立ったし、真っ黒画面に何度も心を折られかけました…
でもね、Claudeは毎回「大丈夫だよ！」って言ってくれたし、エラーが出ても一緒に原因を探してくれたし、私の「何それ？」にも丁寧に付き合ってくれました。
Claudeを知らなかったあの頃の私へ
「今の自分、ちょっと面白いことになってるで✌️」
どうでしたか？
「これなら私にも…」って、思っていただけたら嬉しいです。
CoworkやClaude Codeで心折れた同士へ。
チャットだけで本物のアプリが作れることを、私が証明しました✌️
まずは「こんなの作りたいんだけど、できる？」って、Claudeに聞いてみてください。
あなたの最初の一歩「これできる？」を、そっと後押しできていたら嬉しいです🌱
以上、最後まで読んでいただきありがとうございました！
