ChatGPTの力で「MacBookで使える無料翻訳アプリ」を作ってみた

ChatGPTのプログラミング能力がスゴいらしい。ざくっとしたプロンプトからちゃんとしたアプリを作れるらしい。

試してみたら、わりと本当でした。プログラミング言語に詳しくない人のオーダーからでも、ChatGPTはきちんと動作するアプリを作れます。

この記事では、非エンジニア・プログラマーの筆者がChatGPTで作った翻訳アプリを例に、どんなものができるのか、どうやって作ったのかを紹介します。

確かに「実用できるアプリ」が作れる

今回作ったのは、ブラウザで動くシンプルな翻訳アプリです。訳したい文章を入れると翻訳してくれます。特徴は以下の3つです。

・「ChatGPTがうまく訳せない長文」を訳し切れる

・オープンソースのAI（ローカルLLM）を利用するので、いくら訳しても料金がかからない

・機械翻訳よりも格段に読みやすい翻訳ができる

必要最小限ではある

できるのは翻訳だけですが、長文も訳せるという特徴があります。英Wikipediaの長めの記事なども訳せます。

その代わり、文章の整形などは一切できず、デザインもChatGPT任せです。詳しくは後述しますが、ノー知識で実用できるアプリを作る場合、必須でない機能は諦め、デザインは完全にお任せにしたほうがよかったです。

起動するとテキスト入力欄が表示されるので、そこに翻訳したい文章を入れます。

右上の方に「何語に訳すか」を指定する欄があるので、入力。その後、ローカルLLMを動作させるアプリも起動し（詳しくは後述）、「翻訳」ボタンを押すと翻訳がはじまります。

できた翻訳は入力欄の隣に表示されます。翻訳はテキストファイルに保存することもできます。

わざわざ作った理由

このアプリの存在意義は「無料で長文も訳せる」という点にあります。

翻訳はChatGPTでも可能ですが、「回答に文字数制限があり、それを超えると要約になったり、後半が省略される」という仕様があるのがネック。制限を超えるボリュームの文章だと全訳できないんです。

Pythonなどでスクリプトを書いてAPIを利用すれば対処できますが、訳した分だけ料金が発生します（機械翻訳ツールも長文を訳そうとすると課金が必要なケースが多いです）。

「具体的にどうやればいい？」をChatGPTで解決したパターン

実は「ローカルLLMを使った翻訳アプリ」があれば、これらの問題を解消できます。

ローカルLLMはざっくり言うと、無料公開されているAI（大規模言語モデル）で、自分のPCにダウンロードして使います。導入にひと手間かかり、ChatGPTほどの性能もありませんが、本当に無料で翻訳し放題です。

問題は「自分にはプログラミングの知識がなく、どうやったら作れるのかわからない」ということ。

ここでChatGPTの出番です。プログラミングが超得意なAIに作ってもらえばいいんです。今回のアプリは、そうして生まれました。

使い方とダウンロード先

以下、試してみたい方向けに導入・利用方法をまとめておきます。

※本アプリはあくまで筆者が自分自身のために作成したもので、「ChatGPTでこんなのが作れるよ」をお見せするために公開しています。動作確認や変なコードがないかなどはチェックしてはいますが、不利益を被ったとしても自己責任、でお願いいたします。また、生成した翻訳は私的に利用してください（原文著作者の許諾なく翻訳を公開すると、著作権侵害になる場合があります）。

準備するもの

1. ローカルLLMが動く性能のPC

動作確認はMacBook Pro（2025, M4, メモリ16GB）でとMacBook Air（2024, M3, メモリ16GB）で行っています。重要なのはメモリで、16GB必須です。

Windows PCでも動作します。こちらはゲーミングPCで動作確認を行っており、スタンダードなスペックのノートPCで動作するかは未確認です。Copilot+ PC（2024〜2025年に発売されたAI対応のWindows PC）であれば動く可能性があります。

2. ローカルLLMアプリ「LM Studio」＋ローカルLLM「Gemma 3n E4B」

ローカルLLMを動作させるアプリと、実際に動作させるローカルLLMが必要です。アプリをこちらからDL、起動したらメニューから虫眼鏡アイコンを選んで「Gemma 3n E4B」を検索・ダウンロードします。

その後、メニュー上から2番目の緑のコンソールアイコン（Developerモード）に入り、画面上部のモデルセレクターからダウンロードしたGemmaをロードします。

加えて、「Status」の横にある歯車マークをクリックして表示されるメニューの「Enable CORS」をオンにします。

あとはデフォルト設定で翻訳できると思いますが、場合によってはモデルのロードなどがうまくいかないこともありえます。そういった場合は、まずは余計なアプリをぜんぶ終了させてみてください。

それでも動かない場合は、筆者の設定（上掲）を参考にしてみてください。Context Lengthを小さくすると動きやすいと思います。

3. 翻訳アプリを開く

作成したWebアプリはこちらで公開しています。LM StudioでGemma 3n E4Bが起動していれば、そのまま実際に翻訳が行えます。ニュース記事など、一般的な水準の文章であれば高精度で訳せます（専門性が高い論文などでは、文字化けしたり訳せない部分が出たりします。使っているAIモデルの性能が原因です）。

もし本格的に利用される場合は、ダウンロードしてご自身のPC上で実行してください（Webから実行するには少々脆弱なコードです）。右上の「Edit with ChatGPT」を押すと、ソースコードが表示されます。コピーして拡張子.htmlで保存し、ブラウザで開いて使ってください。

ノー知識、ChatGPT頼みでアプリを作るときのコツ

そんなわけでプログラミングの知識がなくてもある程度実用的なアプリを作れるのですが、コツみたいなのがあります。試行錯誤と割り切りが必要です。

1. 気に食わないところがあったらプロンプトを修正して作り直し

ChatGPTが生成したコードに注文をつけて修正させると、泥沼になりやすいです。今のChatGPTはいきなり動くコードを書いてくるのですが、ユーザー側に知識がない場合、修正させればさせるほどエラーが出やすくなり、収拾がつかなくなりやすいです。

そこで、気に入らない点があってもChatGPTが出してきたコードは変更せず、プロンプトを修正して新しく生成させるようにしました（メモリー機能もオフにしたほうがいいです）。

自分のChatGPTには似たようなスレッドが並んでいます。今回のアプリはその中でいちばんうまくできたもの、プロンプト1発でChatGPTが出してきたままのものです。

2. 「大作アプリ」は作れない。単機能にしよう

あまりに複雑なプログラムは作れないと考えてください。大作RPGは作れませんし、Officeのような高機能で汎用性の高いアプリもうまくいきません。割り切って「1つのタスクをこなすアプリ」にしましょう。うまく生成できないときは、こちらのオーダーが複雑すぎる可能性があります。

最初はなるべくシンプルなプロンプトで始めて、「これは絶対盛り込みたい」という機能を少しずつ確定させていきます。エラーが出始めたら盛り込みすぎなので削りましょう。

参考までに、今回のアプリを生成したプロンプトを記事末に掲載しておきます。けっこう複雑に感じるかと思いますが、「エラーなしで動き、かつ自分が求めている機能が最低限揃っている」が生成されるギリギリがこれって感じです。

3. アイデアはChatGPTにもらおう

プロンプトを読むと「本当に知識ないんです？」って感想になる方もいるかもしれません。専門用語っぽいのがちょこちょこ入っていますよね。でもプログラミングの本を買ったり、初心者向けのサイトを巡って勉強したりとかは本当にしていなくて、全部ChatGPTに教えてもらった知識です。

大事なのはまずは自分の意向を伝えて作ってもらうことです。どういうものを作ったらいいか見当もつかなければ、まずは「こういう課題を解消したいんだけど、どういうアプリを作るといいと思う？」と聞いてみましょう。

それから実際に動くものを作ってもらい、「初心者にも何をどんな風に実装しているのか教えてください」と聞いてみましょう。「このアイデアや処理は必須だ」という部分が見つかるはずです。

で、それらをプロンプトに入れ、改めて生成。実用的なものを作ろうとすると、いくらかの根気と時間が必要ではある感じですね。でもちょっと慣れたら、ChatGPTのアウトプットの切り貼りでけっこう使えるものが作れます。

「やっぱりChatGPTすごいな」って思いました。今まではプログラミング言語の勉強なしにアプリを作ることはできませんでした。プログラミングという1つの専門分野の学習をショートカットできるようなところが、確かにあります。

今回使用したプロンプト

以下のようなWebアプリをHTMLで作ってください：

## 1. 機能

・入力したテキストを指定した言語にLLMで翻訳

・テキスト系ファイルの読み込みに対応

・テキストの直接入力にも対応

・入力テキストの改行コードを保持する

・テキストが概算で500トークンを超える場合、最大500トークンで分割する。最大トークン数以下の改行コードで分割するようにする（各チャンクが最低限の意味的まとまりをもつようにするためです）。

・分割を行った場合は、翻訳結果を結合する。

・最終出力は(1) 訳文を表示 (2) 訳文を元ファイル名_言語.txt というファイルを作成して保存 の2種

・テキストが直接入力された場合は、日時をファイル名にする

### 1-1. 翻訳を行うLLM

・LM StudioでローカルLLMを読み込み、サーバー起動。それにプロンプトを渡して翻訳を行わせる

・使用想定モデルは google/gemma-3n-e4b

・アドレスは :1234

## 2. 主なインターフェース

・入力テキスト表示欄：ファイルを読み込んだ場合は読み込みテキストを表示（編集可）。ファイルを読み込まない場合は、この欄に翻訳対象テキストを入力する（コピペする想定）。

・翻訳テキスト表示欄：入力不可で、翻訳結果を表示するのみ

・「翻訳する」と表示されたボタン。押すとLLMでの翻訳がはじまる

・「保存する」と表示されたボタン。押すと翻訳結果が保存される