既存の英語アプリがしっくりこない?GeminiとClaude Codeで「自分専用」を爆速で形にする方法

ブログ記事のアイキャッチ画像。タイトル「既存の英語アプリがしっくりこない?GeminiとClaudeで自分専用を爆速で形にする方法」の文字と、AIキャラクターが要件定義からコード生成までを行う開発フローのイラスト。

既存の英語アプリが「しっくりこない」なら、自分で作ればいい

英語学習アプリは星の数ほどある。

でも、「機能が多すぎて使いにくい」「興味のないコンテンツを強制される」といった小さなストレスを感じたことはないだろうか?

月額料金を払う価値はあっても、「これ、本当に俺に必要なのか?」と疑問を抱くこともあるだろう。

今の時代、AIを使いこなせば自分に最適な学習環境は作れる。

そこで俺は、最小限の機能に絞った自分専用ツール「Velocity English」の開発を決意。

全3回の連載で、その全記録を公開する。第1回は、開発環境の構築から「動くモック」ができるまで。

英語学習アプリ「Velocity English」の日本語版コンセプト図。マイク入力、AIモデル(Gemini, Claude Code)による文章構築、カタカナ発音生成、YAMLデータ保存のプロセスを示すフローチャート。

🛠️ 開発環境という名の最初のボス:VS Codeへの挑戦と「壁」

「よし、最新のClaude CodeをVS Codeで動かすぞ!」と意気込んで、まずは環境構築に挑む。

  1. Node.jsの導入: 公式サイトからLTS版をインストール。
  2. VS Codeターミナルの封印解除: Windowsのセキュリティ(実行ポリシー)に阻まれつつも、管理者権限で呪文を唱えて突破。

Technical Tip: PowerShellの実行許可

PowerShell

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

だが、ここでまさかの事態が発生。

いざClaude Codeを起動してみると、アカウント連携の画面で手が止まった。

「あれ?無料版ってなかったっけ?有料しかないぞ?」

調べてみると、どうやらClaude Code(CLIツール)は有料プラン専用の機能だったんだ。

⚠️ Claude Code 有料版と無料版の違い

俺が直面した現実を、わかりやすく表にまとめてみた。

特徴無料版 (Free)有料版 (Pro: $20/月)
Claude Code (CLI)利用不可利用可能 (ターミナルで動作)
利用上限1日約40通(目安)無料版の約5倍
モデルSonnet 4.5 / Haikuのみ最新・最高性能モデル全般
ローカル連携不可 (コピペのみ)ローカルファイルを直接解析
優先アクセスなし (混雑時制限あり)あり

「えっ、月額$20払わないとターミナルで動かせないのか……」と。

だが、ここで諦めるのが一番もったいない。

柔軟な方向転換:ブラウザ版Claudeを利用

エンジニアに大事なのは、ツールに固執せず「目的」を達成することだ。

VS Codeでの実行は一旦諦め、使い慣れたブラウザ版のClaudeに切り替えることにした。

無料版でも、Geminiで練り上げた「要件定義」と「完成予想図(画像)」を、そのままブラウザのClaudeに食わせれば、最低利用回数で完成度の高いコードを生成できる。

「ヘイ!Claude!この要件と画像をもとに、Streamlitで動くモックを作ってくれ!」

結果として、これが大正解だった。ターミナルで直接ファイルをいじれなくても、生成されたコードをコピペしてファイルを作るだけで、爆速開発は可能だったんだ。


(※この後の「AIリレー」や「成果報告」に続く)

設計はGemini、実装はClaude。2大AIによる最強リレー

開発の肝は、AIの使い分けにある。

まず、Geminiに俺の構想をぶつける。

原文としては「日本語の音声入力とテキスト入力があり、それを変換ボタンで英語テキストを生成して、生成した英語テキストに英語の『肉付け』構造を視覚化したい」

ものすごくざっくりしてるだろうけど、これでいい。これを投げかけることでGeminiは様々なアドバイスをくれる。

そうこうしているとGeminiはそれを見事に要件定義書に落とし込み、完成予想図(モックアップ)まで生成してくれた。

次に、その設計図をClaude Codeへパス。 「へいClaude!StreamlitとPyYAMLを使って、この要件のモックを作ってくれ」っと。

驚いたのは。1分かからず、アプリの骨格となる4つのファイルが吐き出してくれたこと。

Geminiを使ってのAIアプリ開発は今も絶賛着手中で、どのくらいの工数がかかるのはある程度把握しているつもりでいたけど、Claude Codeのあまりの爆速っぷりにドン引きした。

Geminiを使ってのアプリ開発は絶賛着手中で、これすらも相当速いと思っていたが、これじゃあまるでワープだ。

AI開発の連携フロー図。ユーザーがGeminiに構想を入力し、要件定義書とイメージ図を出力。それをブラウザ版Claudeにインプットして、Python(Streamlit)の実行コード一式を生成し、Velocity Englishのプロトタイプを完成させるまでの流れ。

成果報告:動くモック「Velocity English」爆誕!

試行錯誤の結果、ついに「動くプロトタイプ」が出来上がった。

  • UI: 黒を基調としたスタイリッシュなダークテーマ。
  • データ構造: 保存や削除ができるYAML形式を採用。
  • 現状: AI部分はまだダミーデータだが、ボタンを押せばちゃんと動き、データが保存される。

自分のアイデアが形になって動くこの瞬間こそ、プログラミングを学ぶ最大の醍醐味だ。

まとめ:AIがいれば、誰でも「創る側」の人間になれる

今回は「動くモック」まで辿り着いた。

AIがいれば、思いついたその日に「アプリの形」までは持っていける。

もしあなたが「こんなツールが欲しい」と思っているなら、今すぐ一歩踏み出してみてくれ。

エラーが出ても、AIと一緒に調べれば必ず答えに辿り着ける。

次回は、このモックに本物のAI APIを連携させ、「実用ツール」へと進化させます!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

コメントは日本語で入力してください。(スパム対策)