※本記事はプロモーション（広告）を含みます。
「AIに依頼するだけで、本当にアプリって作れるの？」。AIに指示を打つだけで動くものが出てくる——にわかには信じにくいですよね。
作れます。非エンジニアの会社員である私（さとし＠AI活用）が、Claude Codeに”依頼するだけ”で、BGM付きポモドーロタイマーを 3往復・約30分 で完成させました。コードは一行も書いていません。
ポモドーロタイマーとは、25分の作業と5分の休憩をくり返して集中を保つ時間管理術です。今回はそこに、作業中だけ流れるBGMを付けました。
Claude Code自体は有料プランが必要です（料金は記事後半で公式情報を案内します）。ただ、今回のアプリ作成に 追加費用はゼロ、デプロイ（公開作業）も不要で、自分のPCで動きます。
この記事で公開するのは、次の3つです。
- どう依頼したか（実際に打ち込んだ指示文をそのまま公開します）
- エラーで詰まったとき、AIがどう助けてくれたか
- あなたが自分で真似するための手順
非エンジニアにとって、Claude Codeでのアプリ作成がどこまで現実的か。この実録で確かめてください。
そもそもClaude Codeなら初心者・非エンジニアでもアプリを作れる
コードを書けなくても作れます。あなたが日本語で「こういうものを作って」と依頼し、実際のコードはClaude Codeが書くからです。
「自分にプログラミングは無理」と思っている人ほど、意外に思うかもしれません。
Claude Codeは「日本語の依頼」をコードに変えてくれる
Claude Codeは、ターミナル（文字で命令する黒い画面）で動くAIのコーディング支援ツールです。「こういうものを作って」と日本語で伝えると、必要なコードを自動で書いてくれます。
あなたがやることは、やりたいことを言葉で伝えることだけです。設計もコードもAIが担当します。
Claude Codeと通常のClaudeの違いを先に知りたい人は、別記事で解説しています。細かい違いはこの記事では扱いませんが、「日本語で頼めばコードになる道具」と考えれば十分です。
なお、Claude Codeの利用には有料プランが必要です。料金は2026年7月時点で変動する可能性があるため、金額はClaude Code公式ページで最新の情報を確認してください。
「どうせ最後はコードを触る」は本当か
今回は、設計からコードまですべてClaude Codeに任せました。エラーが出た場面すら、コードを読まずに乗り越えています。
ただし制約もあります。複雑な業務システムや大規模な開発は、依頼するだけとはいきません。まず非エンジニアが作れるのは、生活が少し良くなる「小物」です。
それでも、この「小物が作れる」という一歩は大きいです。できないと思い込んでいたことが、日本語の依頼だけで形になります。
もし「もっと体系的にAI・プログラミングを学びたい」と感じたら、独学以外の選択肢もあります。
実際に作ったもの｜BGM付きポモドーロタイマーの中身
作ったのは、作業用BGMが流れるポモドーロタイマーです。HTML1ファイル＋簡易サーバーだけの最小構成で、追加でお金はかかりませんでした。
ポモドーロタイマーとは、25分作業・5分休憩をくり返して集中力を保つ時間管理術のことです。それをBGM付きでアプリにしました。
タイマー機能とBGM機能
機能はシンプルながら実用的です。作業25分→休憩5分→4回ごとに長休憩15分、というサイクルを自動でくり返します。
画面は作業中と休憩中で配色が切り替わり、フェーズが変わるとチャイムが鳴ります。タブのタイトルにも残り時間が出るので、別のタブで作業していても時間が分かります。
BGMは14曲から選べて、作業中だけ再生され、休憩に入ると自動で止まります。この「休憩中は止まる」仕様が、思わぬ形で役立ちました。
チャイムを聞き逃しても、音がふっと消えることで「あ、休憩に入ったんだ」と気付けるのです。作る前は想定していなかった副次的なメリットでした。
非エンジニアの現実的ゴール＝自分のPCでダブルクリック起動
このアプリのファイルは、たった3つです。アプリ本体のHTML、簡易サーバー、そして起動用のbatファイルだけで動きます。
規模はHTML約530行・サーバー約50行・bat5行で、すべてAIが生成しました。ライブラリの追加やnpm install（部品のインストール作業）も一切不要です。
しかもVercelやGitHubへの公開（デプロイ）は不要です。自分のPCでダブルクリックすれば起動する、という現実的なゴールにしました。エンジニア向けの記事とは、あえて角度を変えています。
なお、直接開くと動かない仕組みが1つだけあります。その理由は、このあと「エラー153」の章で分かります。
非エンジニアにも分かるように、実装の要点だけ
技術的な工夫も、AIが勝手に入れてくれました。指示していないのに、こんな配慮まで入っていました。
- タイマーは「終了予定時刻−現在時刻」で計算する方式のため、時間がズレません
- チャイムはWeb Audio API（ブラウザが音を合成する機能）で作られ、音声ファイルが不要です
- ネットにつながっていなくても、タイマー単体は動くようにしてあります
こうした配慮を、私は一言も指示していません。すべてAIが判断して組み込みました。
どう依頼したか｜3往復・約40分の実際の指示文
依頼はたった3往復でした。しかも1回目は1行、最後はあいまいな一言でも、ちゃんと伝わりました。
実際に私が打ち込んだ指示文を、誤字も含めて原文のまま公開します。「完璧な仕様書がないと無理では」と身構えていた人も、読み終える頃には力が抜けると思います。
往復1｜最初の依頼は「1行」だけ
最初の依頼は、本当にこれだけでした。
集中して作業出来るように、音楽付きのポモロードタイマーを作って。曲はもっぴーさうんどが良い。
「ポモロード」と打ち間違えていますが、そのまま伝わりました。Claude Codeは作る計画を示したうえで、確認の質問を2つだけしてきました。音楽の再生方法と、ファイルの保存場所です。
私が答えると、AIはもっぴーさうんど公式の1時間耐久動画を自動でリサーチし、タイマーを作り上げました。完璧な仕様書はいりません。ざっくり伝えて、質問に答えるだけです。
往復2｜エラーはスクショ＋一言だけ
できたファイルを開くと、曲だけが流れませんでした。私が伝えたのは、この一言だけです。
ダウンロードフォルダに画像を保存しました。曲が流れない状態です。
エラー画面のスクリーンショットを保存し、それを見てもらっただけです。AIはスクショに写った「エラー153」という表記だけで原因を特定し、修正まで一気に進めました。
驚いたのは、エラーの意味を自分で調べる工程がそもそも発生しなかったことです。なぜそんなことが可能だったのか、次の章で中身を見ていきます。
往復3｜あいまいな依頼でも伝わった
最後の依頼は、かなりあいまいでした。それでも伝わりました。
再生されました。画面を上下にスクロールせず、1画面に収まるように配置したい。曲は両学長ライブのバックで再生されている曲が好きなのですが、わかれば追加したい
私は「両学長ライブのバックで流れている曲」の正確な曲名を知りませんでした。私がよく作業のお供にしているリベシティ（両学長）のライブBGMです。
するとAIは、そのあいまいな情報からWeb検索で曲名を特定しました。Escortや2:23 AMといった曲を割り出し、公式動画のIDまで調べて追加しました。同時に、指示どおり1画面に収まる2カラムのレイアウトへ変更してくれました。正確な名前を知らなくても、AIが調べて実装してくれます。
つまずきのヤマ場｜エラー153が出て曲が流れない
詰まっても大丈夫です。原因が分からなくても、AIに「エラー153が出た」と伝えるだけで、解決まで一気に進みました。
「初心者は詰まったら抜け出せないのでは」——そう不安に思うかもしれませんが、心配いりませんでした。
何が起きたか｜HTMLを直接開くと曲だけ鳴らない
症状はこうでした。タイマー自体はちゃんと動くのに、BGMだけが再生されません。
曲を選んで開始を押すと、動画の再生画面に「エラー153 動画プレーヤーの設定エラー」と表示されました。何が悪いのか、私にはまったく見当がつきませんでした。
原因｜file://ではYouTube埋め込みが再生できない
原因は、ファイルの開き方にありました。HTMLをダブルクリックで直接開く方式（file://）では、YouTubeの埋め込み再生が許可されないのです。
file://とは、ファイルを直接開いたときのアドレスの形式です。この開き方だと、埋め込み元のドメイン情報がYouTube側に届きません。そのためYouTubeが「どこから再生しようとしているか分からない」と判断し、再生を拒否します。
この理屈は、あとからAIに教わって理解しました。詰まった時点では、まったく知りませんでした。
解決｜localhost経由で開けばよい
解決策は、開き方を変えることでした。自分のPCの中にだけ立てる簡易サーバー（localhost）を経由して開けば、再生できます。
localhostとは、自分のPCの中だけで動く小さなサーバーのことです。AIはNode.jsの標準機能だけで約50行のサーバーを書き、「サーバー起動→ブラウザで開く」を1クリックにまとめたbatファイルまで用意しました。
私の心境はごく単純でした。「あれ、曲が流れない…」と思い、深く考えずに「AIに聞いてみよう」とスクショを一言添えて送っただけです。難しく構えずに投げること自体が、そのまま再現のコツになります。
この体験が示すこと｜非エンジニアでも詰まりから抜けられる
この一件で分かったことがあります。エラーの意味を調べる工程も、英語のメッセージを読む工程も、まったく発生しませんでした。
詰まったときにやることは、次の3つだけです。
- エラー画面のスクリーンショットを撮る
- エラー番号を含め、一言添えて送る
- 返ってきた指示に従う
この3つ以外に、原因を自分で調べる作業はいりません。「詰まったら終わり」ではありません。エラー番号をそのままAIに渡せば、抜け出せます。詰まりの怖さは、思っているよりずっと小さいのです。
作り方・再現手順｜あなたも真似できる4ステップ
手順は4つです。Node.jsを入れて、依頼して、エラーが出たら番号を伝えて、batで起動するだけです。
コードを書く工程は、この4ステップのどこにもありません。まず全体像を表で示します。
| STEP | やること | つまずいたら |
|---|---|---|
| STEP1 | Node.jsを用意する（AIに頼めば確認・導入まで） | 入っているか不明ならまずClaude Codeに聞く |
| STEP2 | 依頼プロンプトを送る | 足りない部分はAIが質問してくれる |
| STEP3 | エラーが出たら番号を伝える | 番号ごとAIに貼れば原因説明と修正が返る |
| STEP4 | 起動batをダブルクリック | MacはAIに.commandへの置き換えを頼む |
STEP1 Node.jsを用意する
まず、Node.jsという土台のソフトを用意します。今回のBGM再生に使う簡易サーバーを動かすために必要です。
一番ラクなのは、Claude Codeに任せる方法です。「Node.jsは入っている？なければ入れて」と頼めば、状態を確認して、必要なら導入まで進めてくれます。私自身、自分で入れた覚えがないほど、意識しないうちに用意できていました。途中で許可を求める画面が出たら、そこだけ自分で進めます。
自分で入れたい人は、Node.js公式サイトからLTS版（安定版）を選べば大丈夫です。エラーが出たら、その文言をそのままClaude Codeに貼れば直せます。
STEP2 依頼プロンプト例をそのまま使う
次に、Claude Codeへ依頼します。下の例をそのままコピペして使えます。
ブラウザで動くポモドーロタイマーを1つのHTMLファイルで作ってください。要件：(1)作業25分・休憩5分・4回ごとに長休憩15分、時間は変更可能 (2)YouTubeの公式BGM動画を埋め込み、作業中だけ再生し休憩中は止める (3)曲の切り替え・音量調整・設定の自動保存 (4)フェーズ切り替え時にチャイム (5)ダークテーマで1画面に収まるレイアウト
要件はざっくりで構いません。私自身、最初は1行だけの依頼から始めました。足りない部分はAIが質問してくれます。
STEP3 エラーが出たら「番号」を伝える
エラー153のようなコードが出たら、調べずにそのままAIへ貼ってください。原因の説明と修正を一気にやってくれます。
具体的には、簡易サーバー（server.jsと起動bat）を作ってもらう流れになります。あなたはコードの中身を理解する必要はありません。
STEP4 batをダブルクリックで起動
最後に、できた起動batをダブルクリックすれば完成です。ブラウザが開き、曲を選んで開始を押せば動きます。
なお、この起動batはWindows用です。Macを使っている人は「Mac用に起動できるようにして」と頼めば、AIが.commandファイルなどに置き換えてくれます。
曲を差し替えたくなったら、HTML内の動画IDを書き換えるだけです。ここもAIに頼めば書き換えてくれます。
著作権に配慮したBGMの扱い方｜YouTube公式を”埋め込み”で使う
音楽はダウンロードしません。公式動画を「埋め込み再生」する設計にすれば、著作権に配慮しつつBGMを流せます。
BGMの著作権は意外と見落とされがちです。真似するときにうっかり侵害しないよう、正しい設計を先に示しておきます。
なぜ埋め込みなのか｜DL・音声抽出はしない
このアプリは、作者公式チャンネルの動画を「埋め込み」で再生しています。動画のダウンロードや、音声だけを抜き出す「音声抽出」は一切していません。
埋め込み再生は、YouTube上の動画をそのまま自分の画面で流す方式です。手元にファイルをコピーするわけではないので、DLとは根本的に違います。真似するときも、DLや抽出はしないでください。
できること／できない・注意点
できることは、公式動画を流し、クレジットとチャンネルへのリンクをアプリ内に表示することです。作者へのリスペクトを示す設計にしています。
一方で、してはいけないこともあります。作ったアプリを配布したり、動画を再アップロードしたりするのはNGです。埋め込みの規約は各動画・各サービスで変わるため、利用前に必ず確認してください。
よくある質問（FAQ）
4つの疑問に絞って答えます。費用と再現性が中心です。
Q1. プログラミング初心者・非エンジニアでも本当にできる？
できます。コードを書くのはAIで、今回私は一行も書いていません。
ただし、大規模なシステム開発は別の話です。まず現実的に作れるのは、生活が少し良くなる小物です。今回のタイマーと同じやり方で、家計簿やタスク管理、別のタイマー系なども作れます。もっと体系的に学びたい人には、こんな選択肢もあります。
〔内部リンク：AIスクール 社会人記事（公開後にURL確定）／アンカー：社会人向けAIスクールの比較／文脈：「もっと体系的にAI・プログラミングを学ぶなら」。位置1と文面を変える。公開後にこの〔〕行ごと実URLのリンクへ置き換える〕
Q2. 無料でできる範囲は？費用は？
Claude Codeの利用には有料プラン（月3,000円台〜。2026年7月時点・公式で要確認）が必要です。一方で、今回のアプリ作成そのものに追加費用はゼロで、デプロイも不要でした。
料金の詳しい中身は、別記事にまとめています。
Q3. コードが読めなくても大丈夫？
読めなくても問題ありません。
実際、エラーが出たときも私はコードを読みませんでした。エラー番号ごとAIに渡すだけで、解決まで進みました。
Q4. 公開（デプロイ）は必要？
不要です。自分のPCで動けば、それで十分に実用できます。
もし「人にも使ってもらいたい」と思ったら、そこから公開を考えればいいだけです。まずは自分用に、気軽に作ってみてください。
まとめ
非エンジニアの会社員でも、Claude Codeに依頼するだけで、生活が良くなるアプリは作れます。しかも、途中で詰まってもAIに丸投げで抜け出せます。
今回のポモドーロタイマーは、わずか3往復・約40分で完成しました。最初の依頼は、たった1行です。
まずは1行の依頼から試してみてください。「こんなの作れないかな」を、そのまま日本語でClaude Codeに投げるだけです。もし独学に不安があれば、体系的に学ぶという選択肢も持っておくと安心です。
コメント