はじめに

「Webアプリって、作るのはエンジニアの仕事だよね」——ほんの数日前まで、私はそう思い込んでいました。ところが今、私が作ったWebアプリが実際にインターネット上で動いています。私はハード設計者です。プログラミングはほぼ未経験です。それでも公開できました。その話を正直に書きます。

自己紹介

産業用機器メーカーに勤める電子・電気回路のハード設計者です。仕事は基板設計や回路解析が中心で、ソフトウェアはほとんど触りません。学生時代に授業の課題でC言語を少し触った程度で、それ以降はプログラミングとはほぼ無縁の生活。自分でゼロから書くのはほぼ不可能——そんな人間が、この記事の著者です。

きっかけ——「副業でアプリを作れないか」と思った

会社の給料だけでは将来が不安——正直、そう感じている方は多いと思います。私もその一人でした。副業を考えたとき、「自分の専門知識を活かした何かを作れないか」と思いついたのが出発点です。

私の専門は回路設計。回路設計者なら誰でも経験する「このパーツ選択、本当に合ってるかな」「この定数、見直した方がいいかな」という不安。そこに答えてくれるAIツールがあればいいのに——そう感じていました。

そんなとき、Claude Codeの存在を知りました。「AIにコードを書かせて、アプリを作れる」という話を見て、半信半疑で試してみることにしました。「どうせうまくいかないだろう」という気持ちもありましたが、とりあえずやってみました。それが、すべての始まりです。

実際にやってみて驚いたこと3つ

1. CLAUDE.mdを書くだけでAIが「役割」を持って動く

Claude Codeを使い始めて最初に驚いたのが、CLAUDE.mdというファイルの存在です。このファイルにAIへの「役割」や「ルール」を日本語で書いておくだけで、Claude Codeがそれを読んで、まるで社員のように動いてくれます。

私は「あなたはこのプロジェクトのPMです。ユーザーの依頼を受けてタスクを分解し、開発を進めてください」というような内容を日本語で書きました。すると、以降の会話でClaude Codeが「PMとして」振る舞い、自分からタスクを整理し、優先順位をつけて作業を提案してくれるようになりました。

コードを一切書かなくても、「どう動かすか」を設計できる。これがClaude Codeの最初の衝撃でした。プログラミングというより、「AI部下への指示書を書く」感覚に近いです。

2. エラーが出てもAIが自分で直す——私はほぼ見ているだけ

開発中、当然エラーは頻繁に発生します。普通ならここで詰まるはずです。ところがClaude Codeは、エラーが出るとそのエラーメッセージを自分で読み、原因を推測し、修正コードを書いて、また実行してみる——このサイクルを自動で回してくれます。

私がやることは、「エラーが直ったかどうか確認する」ことだけでした。修正の内容が理解できなくても大丈夫です。「動いた？」「動いてます」のやり取りだけで、開発が進んでいきます。

もちろん、すべてが自動で解決するわけではありません。何度試してもうまくいかないケースでは、私がClaude Codeに「何が問題か説明して」と聞き、素人なりに内容を理解してから次の指示を出しました。それでも、ひとりでやっていたらまず解決できなかったであろう問題が、AIとの対話で次々と解消されていきました。

3. 非エンジニアでもCloudflare Pagesにデプロイできた

「デプロイ」——この言葉を初めて聞いたとき、何のことかさっぱりわかりませんでした。ざっくり言えば「作ったアプリをインターネットで公開する作業」のことです。これが、ソフト開発で最もハードルが高い工程のひとつだと後から知りました。

ところが実際やってみると、Claude Codeが手順を丁寧に教えてくれました。Cloudflare Pagesというサービスを使い、GitHubにコードを置いて、ボタンをいくつかクリックするだけ。つまずいたときも「この画面でこのボタンを押してください」と指示してもらいながら進めました。

公開URLが生成された瞬間、スマートフォンでも、パソコンのブラウザからでも、そのURLを開いてみました。自分が作ったアプリが、どの端末からでもインターネット上で動いている——正直、信じられませんでした。

実際に作ったアプリ「かいろん」

私が作ったのは 「かいろん」 というWebアプリです。回路設計者向けの「AIセカンドオピニオン」ツールで、回路の不具合症状を入力するとAIが原因の候補・確認すべき箇所・対処法をレポート形式で返してくれます。

「電源を入れると特定の部品が異常発熱する」「動作が不安定で原因が絞り込めない」——そういった現場でよく直面する不具合調査に特化しています。私自身が「あったらいいな」と思って作ったツールです。

実際にアクセスして試せます：
https://kairon-egf.pages.dev

※かいろんの詳細・開発の背景は前回のQiita記事をご覧ください。

正直に言うと——大変だったこと

夢物語にするつもりはありません。大変だったことも書きます。

一番しんどかったのは「何がわからないのかもわからない」状態が続く時間です。AIに質問しようにも、そもそも何を聞けばいいのかわからない。用語がわからないから検索もできない。そういう場面が、開発初期には何度もありました。

また、AIの提案が必ずしも正しいわけではありません。自信満々に間違ったコードを提案してくることもあります。非エンジニアには「これが正しいのか間違っているのか」の判断が難しく、何度か同じエラーにはまり直したこともありました。

「AIに丸投げすれば全部やってくれる」は過剰な期待です。「AIを道具として使いこなす」ための、最低限の方向感覚は必要だと感じました。

まとめ・次回予告

Claude Codeは、非エンジニアがWebアプリを作るための「現実的な選択肢」になっていると感じています。全部自分でできるわけではないし、苦労もあります。それでも、「自分には絶対無理」と思っていた私が実際に公開できたのは事実です。

次回は、私が実際にClaude Codeに渡したCLAUDE.mdの具体的な書き方を紹介します。どんな指示を書けばAIが動いてくれるのか、非エンジニア目線でリアルな内容をお届けします。

また、私が使ったCLAUDE.mdのテンプレートをnoteで配布予定です。「自分でも作ってみたい」という方は、ぜひフォローしておいてください。

著者コメント

著者：Haneoka

産業用機器メーカー勤務のハード設計者。電子・電気回路が本業、AIアプリ開発は完全に独学の副業チャレンジ中。

関連リンク

作ったアプリ「かいろん」：https://kairon-egf.pages.dev
note（テンプレート配布予定）：準備中

この記事はClaude Codeを活用して執筆・開発した実体験をもとに書いています。