フロントエンド未経験でもWebアプリが作れるのか
フリーランスSEとして10年以上サーバ・インフラをやってきた。
フロントエンドはReactの名前を知っている程度。TypeScriptはほぼ未経験。Next.jsに至っては「ネクストジェイエス？」レベルだった。
そんな自分が、Claude Codeとの会話だけでWebアプリを2本作ってGitHub Pagesに公開した。
作ったもの
① SE単価シミュレーター
- URL：https://ch-ragge.github.io/se-rate-simulator/
- 機能：工程・スキル・経験年数・商流を入力 → 市場単価の目安を算出
- 開発期間：実質3日（会話時間合計5時間程度）
- 技術スタック：Next.js 15 / TypeScript / Tailwind CSS / GitHub Pages
「フリーランスSEが案件提案前に使えるツール」というコンセプトで作った。自分が欲しかったものをそのまま形にした。
② CLAUDE.mdジェネレーター
- URL：https://ch-ragge.github.io/claudemd-generator/
- 機能：4ステップの入力でCLAUDE.md（Claude Codeの設定ファイル）を自動生成
- 開発期間：実質2日
- 技術スタック：Next.js 15 / TypeScript / Tailwind CSS / GitHub Pages
毎回CLAUDE.mdを手書きするのが面倒だったため、自分用ツールとして作った。
実際の開発の流れ
最初のプロンプトはシンプルだった。
フリーランスSEが案件提案前に使う単価シミュレーターを作りたい。
- 工程（運用保守・設計・構築・PM）で基準単価が変わる
- スキルに応じた加算
- 経験年数と商流で倍率変動
技術：Next.js / TypeScript / Tailwind CSS / GitHub Pagesデプロイ
30分後、動くWebアプリが手元にあった。
その後は「仕様確認→承認→修正」の繰り返しだった。プログラミングというより設計会議の連続だった。SEが一番得意な仕事だった。
詰まったポイントと突破方法
GitHub Pagesへのデプロイでエラー
初回デプロイでエラーが出た。
エラーメッセージをそのままClaude Codeに貼り付けたら、原因（next.config.jsにbasePath設定が必要）と修正方法を即返答。コピー→ペースト→再デプロイで完了した。
詰まったらそのまま貼る。これが最速だった。
モバイル表示の崩れ
スマホで確認したら横にはみ出していた。
「スマホで入力フォームが横スクロールになる」と伝えたら、Tailwindのレスポンシブ設定を修正してくれた。
インフラSEがClaude Codeを使う際のコツ
① 技術スタックを最初に固定する
「いい感じに作って」ではなく「Next.js / TypeScript / Tailwind CSS」と最初に指定する。一貫したコードが出続ける。
② UIの指示はユーザー体験で伝える
「青いボタンを右に」よりも「入力完了後すぐ目に入る位置にボタンを置いてほしい」の方が意図が伝わる。デザイン用語を知らなくても、使いやすさの言葉なら出てくる。
③ 動く最小版を先に作る
最初から全機能を詰め込むと迷子になる。「工程選択だけ動く版」→確認→「スキル加算を追加」のサイクルが速い。
④ CLAUDE.mdで前提を定義しておく
技術スタック・デプロイ先・コーディングスタイルをCLAUDE.mdに書いておくと、毎回説明しなくていい。
副業としての収益導線
Webアプリ単体では直接は稼いでいない。
ただし間接的な収益導線として機能し始めている：
- noteへの誘導：実録記事経由でフォロワーが増えた
- SNS拡散：シミュレーターをXで告知して同業SEからいいねが増えた
- ポートフォリオ：ココナラの技術相談サービスの実績として活用
- Amazonアフィリエイト：記事末尾のClaude Code関連書籍リンク
「Webアプリ→ブログ・記事→SNS→note有料記事」という流れで設計している。
SEの強みは「要件定義力」だった
Claude Codeを使って確信したのは、SEが一番得意なことがそのまま武器になるということだ。
何を作るか、どう動いてほしいか、誰のために作るか——これを言語化する力。
フロントエンドの技術知識がなくても、要件を具体的に言語化できれば動くものが作れる。
「コードが書けない」はもはやWebアプリ開発の障壁ではない。
SE単価シミュレーター・CLAUDE.mdジェネレーターは以下から使えます。