赤丸で囲むだけ。AIネイティブな単語帳アプリを開発して気づいた「Vibe Coding」の真実と逆転の学習法

この記事は、ポート株式会社 サービス開発部 Advent Calendar 2025 14日目の記事です。

はじめに：なぜ「赤い丸」なのか

まずは自己紹介をさせてください。私は日本で働く中国出身のエンジニアです。 日本での生活も長くなりましたが、日本語の学習は今でも私の日常の一部です。しかし、その学習プロセスには常に「摩擦（Friction）」がありました。

スマホで記事を読んでいる時、知らない単語に出会うとどうしますか？ テキストを長押しして選択、コピー、辞書アプリへ切り替え、ペースト……。この一連の動作は、せっかくの読書体験を分断し、集中力を削いでしまいます。

「もっと直感的に、まるで先生に添削してもらうような感覚でできないか？」

そう考えた時、あるアイデアが浮かびました。「スクショを撮って、分からない単語を赤丸で囲む。それをアプリに投げるだけ」という体験です。

かつて、ある中国の著名なプロダクトマネージャーがこう語りました。

「人間にとって、指で『これ』と指し示すことこそが最も自然なインタラクションだ」

私たちは毎日、スマホという小さな窓を通じて世界を認識しています。この画面上で知識を収集・整理するには、この原初的な「指し示す（Pointing）」インターフェースこそが最適解だと確信しました。

作ったもの：AI Visionだからできること

現在はMVP（Minimum Viable Product）段階ですが、実際の動作はこのような感じです。

Core Feature: AIは「意図」を理解する

このアプリの核となるのは、 「赤い丸」の意味をAIが理解するという点です。 従来のOCR技術では、文字をテキスト化できても、「ユーザーがどこに注目しているか」までは理解できませんでした。

しかし、現在のマルチモーダルAI（GPT-5やClaude 4.5 Sonnetなど）は違います。 「画像のこのエリア（赤丸）にある単語の意味を教えて」と指示するだけで、座標計算も不要で私の意図を理解し、文脈に沿った解説を生成してくれます。これこそが、従来のロジックベースの開発とは異なる「AI Native」な体験です。

今後のロードマップ

• 1. 文脈ノートブック (Contextual Memory) 単語を点として記憶するのではなく、その単語が使われていたWebページやアプリの文脈（前後の文章やスクリーンショット）ごと保存します。「どこでその単語に出会ったか」というエピソード記憶とセットにすることで、定着率を高めます。

• 2. 文法と構文の「AI解剖」 (AI Syntax Analysis) 単語だけでなく、分からないセンテンスを赤丸で囲めば、AIがその構文を解析します。「なぜここでこの前置詞が使われるのか？」「この修飾関係はどうなっているのか？」といった文法的な解説を自動生成し、自分だけの参考書としてデータベース化します。

• 3. 言語学習を超えた「万能スクラップブック」へ この「赤丸で囲む」というUIは、語学学習に留まりません。 気になったデザインのUI、料理のレシピ、エラーが出たコードなど、画面上のあらゆる 「興味」 を赤丸で切り抜き、AIのコメント付きで保存できる「視覚的なブックマーク（Visual Collection）」機能へと進化させます。 最終的には、学習アプリの枠を超え、自分の興味関心をすべて放り込める「第二の脳」のような場所を目指しています。

• 4. 自動レベル判定 (Proactive Suggestion) ユーザーの語彙レベルや興味の傾向を学習し、赤丸を描かなくても「多分この表現は気になっているでしょう？」とAIが先回りしてハイライト・提案する機能を実装予定です。

開発環境と技術スタック (The Stack)

今回、私は「個人開発で収益化を目指す」という前提で、 「車輪の再発明」を徹底的に排除する構成を選びました。

• AI Developer: Claude Code (メインの実装担当)

• Planner: Gemini 3 Pro (初期のDB設計や要件定義)

• Backend: Supabase

• The Foundation: EasyApp (iOS有料テンプレート)

以前、SwiftUIをゼロから勉強したこともありましたが、認証・課金基盤・クラウド同期といった機能を個人で維持するのは非常に骨が折れます。 今回はテンプレートを採用し、さらにAI開発に最適化されたルール（Cursor Rulesなど）を活用することで、「Vibe Coding」の実践に集中しました。

開発プロセス：AIとの共創と「逆転の学習法」

実際の開発プロセスは、大きく2つのフェーズに分かれました。

Phase 1: Geminiとの壁打ちと爆速MVP

コードを書く前に、まずGeminiと徹底的に「壁打ち」を行いました。「こういうアプリを作りたい」「DB設計はどうすべきか」を相談し、詳細な開発ドキュメントと初期プロンプトを生成してもらいます。

そして、そのプロンプトをClaude Codeに渡すだけ。 「Supabaseのマイグレーションファイルを書いて」「Edge Functionを実装して」。数回のやり取りで、バックエンドからフロントエンドの基盤が一瞬で組み上がりました。

Phase 2: 壁にぶつかってからの「逆転学習」

しかし、機能を追加しコード量が増えてくると、AIに「盲目的に」書かせることの限界が訪れます。AIがバグ修正で新たなバグを生み、私自身もコードの全体像を見失い始めました。

そこで私は、学習のアプローチを逆転させました。 ドキュメントを読んでからコードを書くのではなく、 「AIに生成させたコードについて、AIにチュートリアルを書かせる」 ことにしたのです。

具体的には、「今のプロジェクト構成と、このSwiftコードのアーキテクチャについて、私に教えるための記事を書け」とClaude Codeに指示しました。 それはまるで、GitHubで見つけたOSSの作者が、隣で手取り足取り解説してくれるような体験でした。

1. AIにコードを書かせる（実装）

2. AIにそのコードの解説記事を書かせる（学習・理解）

3. 理解した上で、次の的確な指示を出す（修正）

このサイクルは、未知の言語やフレームワークを学ぶ上で、従来よりも遥かに効率的で強力な方法だと実感しています。

考察：AIネイティブ・エコノミーの到来

今回の開発を通じて、私は「AI時代の開発環境」について、ある確信めいた予測を持つに至りました。

1. 「人向け」から「AI向け」へ：フレームワークのパラダイムシフト

現在のフレームワーク（RailsやNext.jsなど）は、人間が理解しやすいように設計されています。しかし、コードを書く主体がAIになる未来、フレームワークの姿は劇的に変わるはずです。

例えば、Google Cloud ConsoleでのOAuth設定のような「外部プラットフォームでの認証・設定」は、現在もっとも摩擦が大きい領域です。 未来の「AIネイティブ・フレームワーク」は、こうした設定プロセスさえもAIが操作可能なインターフェースとして抽象化するでしょう。Supabaseがバックエンド構築を簡略化したように、 「AIが設定しやすい（AI-Friendly）」 ための新たなレイヤーが登場するはずです。

2. ドキュメントの終焉と「コンテキストの標準化」

かつて私たちは、ライブラリのReadmeを読み込んで学習していました。 しかしこれからは、 「人間がドキュメントを読む」時代から、「AIがコンテキストを読む」時代へと移行します。

現在は .cursorrules のような特定のツール向けのルールファイルが存在しますが、これはまだ過渡期です。 将来的には、どのAIエディタでも読み取れる**「標準化されたAIインストラクション規格（Standardized AI Context Protocol）」**が策定されるでしょう。ライブラリ開発者は、人間用のドキュメントではなく、この「規格化された指示書」をパッケージに同梱することが義務付けられるようになります。

3. 「WordPress化」するAIプラグイン市場

この流れは、巨大なマーケットを生み出します。 未来のVibe Coding市場では、機能（コード）と、それをAIに正しく扱わせるためのコンテキスト（指示書）がセットで販売されるようになるでしょう。

「このプラグインを買えば、あなたのAIエージェントは即座に複雑な決済機能を実装できる」。 私たちはコードを書くのではなく、こうした**「AIのためのスキルセット（プラグイン）」を購入し、自分のプロジェクトのAIにインストールする**。そんな開発スタイルが当たり前になる未来は、すぐそこまで来ています。

まとめ

このアプリは、年末年始のリリースを目指して現在ブラッシュアップ中です。

これからの個人開発へのアドバイスは一つです。 「ゼロから車輪を発明するな。AIに優しいコンテキストを構築せよ。」

そして、AIにコードを書かせるだけでなく、「AIにコードを解説させる」という逆転の学習法をぜひ試してみてください。それは、あなたのエンジニアリング能力を拡張する強力な武器になるはずです。