【2026年最新】PageAgent＋Qwen3 Coder完全解説｜Alibabaが放ったオープンソースAIの二刀流——ブラウザ自動化×コーディングエージェントで副業・マネタイズを加速する

━━━━━━━━━━━━━━━━━━━

第１章　はじめに：Alibabaが仕掛けた「AIの民主化」——完全無料で始まる自動化革命

〜有料AIへの依存を断ち切る、二つの武器が登場した〜
━━━━━━━━━━━━━━━━━━━

少し、想像してみてください。

毎月、AIツールのサブスクリプション費用がいくらかかっているか、把握していますか？

Claude Proに月3,000円。ChatGPT Plusに月3,000円。GitHub Copilotに月2,000円。業務自動化ツールに月5,000円——気がつけば、AIツールだけで月1〜2万円を支払っている人は珍しくなくなっています。

「もっと安く、あるいは無料で、同じことができないか」

その答えを、今回お伝えします。

━━━━━━━━━━━━━━━━━━━

この記事の主役は、Alibaba（アリババ）が放った二つのオープンソースツールです。

🔵 PageAgent（ページエージェント）

Webブラウザの中で動く、JavaScriptベースのAIエージェント。たった一行のコードを追加するだけで、どんなWebサイトにも「AIオペレーター」を常駐させられます。フォームへの自動入力・情報の抽出・複雑なナビゲーション——これらを自然言語の指示一つでこなします。完全無料・MITライセンスで商用利用も可能です。

🟢 Qwen3-Coder-Next（チウェン3コーダーネクスト）

2026年2月にリリースされた、コーディング専用のAIモデルです。自分のPCで動かせるのに、有料のClaude Sonnet 4.5と同等水準のコーディング性能を持つと評価されています。Apache 2.0ライセンスで完全無料・商用利用可能。コードを外部サーバーに送る必要がなく、プライバシーも守れます。

━━━━━━━━━━━━━━━━━━━

なぜ今、この二つを一つの記事で取り上げるのか。

理由はシンプルです。

「Web操作の自動化」と「コードの生成・修正」——この二つを組み合わせると、これまで有料ツールでしか実現できなかった業務自動化が、完全に無料で実現できるからです。

PageAgentがWebブラウザの操作を代行し、Qwen3-Coder-Nextがそのためのコードを書いて修正し続ける。この組み合わせを「Alibaba二刀流」と呼んで、この記事で丁寧に解説します。

━━━━━━━━━━━━━━━━━━━

改めまして、刹那はるかと申します。

IT業界に長年携わってきたエンジニアです。これまでClaude 5・Llama 4・Veo 4・Native Audio・Claude Coworkという5本のAI解説記事を書いてきました。今回はその第6弾として、「Alibaba発のオープンソースAI」という切り口で迫ります。

前作のClaude Cowork記事では「AIが業務を代行する時代が来た」という話をしました。でも正直に言えば、Claude Coworkには月額費用がかかります。「素晴らしいのはわかったけど、もっとコストを抑えたい」という声もいただきました。

この記事は、その問いへの答えです。

━━━━━━━━━━━━━━━━━━━

もう一つ、大きな文脈をお伝えします。

2026年、AI業界では静かな覇権争いが続いています。

OpenAI（ChatGPT）・Anthropic（Claude）という米国勢に対して、Alibaba（Qwen）・DeepSeekという中国勢が猛追しています。そしてこの競争が激化すればするほど、無料で使えるAIの性能が上がっていきます。

覇権争いの受益者は、最終的には「どのツールを使うかを選べる個人」です。

米国製の有料AIも、中国製の無料AIも、目的に応じて使い分けられる人が、この時代で最も強い立場に立てます。

━━━━━━━━━━━━━━━━━━━
⚠️ この記事を読む前に知っておくべき事実
━━━━━━━━━━━━━━━━━━━

PageAgentは「Alibaba社員が個人プロジェクトとして開発し、Alibabaのオープンソース組織の下に公開した」ものです。Alibabaの公式製品ではなく、MIT ライセンスで誰でも自由に使えます。

Qwen3-Coder-Nextは、Apache 2.0ライセンスのオープンウェイトモデルです。モデルの重みパラメータが公開されており、商用利用も可能ですが、訓練コードは非公開です。

どちらも高品質ですが、Anthropicや OpenAIのような企業サポートはありません。利用にあたっては、最新のライセンス条件を各自で確認してください。

━━━━━━━━━━━━━━━━━━━

この記事では、以下の内容をお伝えします。

🔵 PageAgentの仕組み——なぜ「一行のコード」でWebがAI化できるのか

🔵 Qwen3-Coder-Nextの衝撃——無料でClaude Sonnet 4.5レベルの性能を手に入れる意味

🔵 二刀流の組み合わせ——PageAgent×Qwen3で実現する完全自律ワークフロー

🔵 有料ツールとの正直な比較——どこで使い分けるべきか

🔵 今すぐ始めるマネタイズ戦略5選——完全無料ツールで副業収益を上げる具体的な方法

━━━━━━━━━━━━━━━━━━━

「AlibabaのAIなんて、あまり知らない」という方にこそ読んでほしい内容です。

知名度の低さが、先行者優位を生みます。多くの人が見ていないツールを使いこなしている人間が、競合の少ないポジションを取れます。

30年間IT業界にいて、この法則が外れたことは一度もありませんでした。

一緒に、Alibabaが仕掛けた「AIの民主化」の最前線を見ていきましょう。

━━━━━━━━━━━━━━━━━━━

第２章　PageAgentとは何か：一行のコードでWebをAI化する仕組みを理解する

〜なぜ「バックエンド不要・サーバー不要」で動くのか〜
━━━━━━━━━━━━━━━━━━━

「ブラウザ操作を自動化する」という話を聞いたことはありますか？

実は、ブラウザの自動化ツールはPageAgentが初めてではありません。PuppeteerやSeleniumといったツールが以前から存在しており、企業の開発チームはこれらを使ってテストの自動化やデータ収集をしてきました。

では、PageAgentは何が違うのでしょうか。

一言で言うなら、「これまでの自動化ツールが抱えていた『重さ』と『複雑さ』を、根本から解消した」ことです。

━━━━━━━━━━━━━━━━━━━

従来のブラウザ自動化がいかに大変だったかを、まず整理します。

Puppeteer・Seleniumなどの従来ツールを使ってブラウザを自動操作しようとすると、こういう手順が必要でした。

① サーバー側にPythonやNode.jsの環境を用意する

② ヘッドレスブラウザ（画面を表示しないブラウザ）をインストールする

③ 操作したいWebページのHTML構造を手動で調べて、CSSセレクタやXPathを書く

④ ページのデザインが変わるたびに、③のコードを書き直す

⑤ これらを動かすためのサーバーインフラを管理し続ける

プログラミングの経験があっても、このセットアップだけで半日〜1日かかることがあったようです。しかもページのデザインが少し変わるだけで、書いたコードが動かなくなります。

これが「ブラウザ自動化は難しい」という印象の正体です。

━━━━━━━━━━━━━━━━━━━

PageAgentは、この構造を根本から変えます。

動作するのは「ユーザーのブラウザの中」だけです。サーバーは不要。Pythonも不要。ヘッドレスブラウザも不要。

どうやって実現しているか——それが「DOM（ドム）の直接操作」という仕組みです。

━━━━━━━━━━━━━━━━━━━
🔵 DOMとは何か——Webページの「設計図」を直接読む
━━━━━━━━━━━━━━━━━━━

DOM（Document Object Model）とは、Webページの構造を表すデータのことです。

ブラウザがWebページを表示するとき、裏側では「このページにはボタンがいくつあって、フォームがどこにあって、テキストが何と書いてあるか」という構造情報（DOM）が管理されています。

従来のAI自動化ツールの多くは、この「構造情報」を直接読むのではなく、画面を「画像として見て」操作していました。人間が目でボタンを探すのと同じように、AIが画像を解析して「ここにボタンがあるから押す」という判断をしていたのです。

これは重くて遅い。そして精度が低い。

PageAgentは、画像解析を使いません。DOMという「設計図」を直接読み込んで、「このページの構造はこうなっている。ここにボタンがある。ここにフォームがある」と把握します。

画像を解析するより、テキストの構造を読む方が、はるかに速く・正確です。

━━━━━━━━━━━━━━━━━━━
🔵 「一行のコード」で何が起きるか
━━━━━━━━━━━━━━━━━━━

PageAgentをWebページに導入するには、HTMLファイルに一行のスクリプトタグを追加するだけです。

それだけで、そのWebページにAIエージェントが「常駐」します。エージェントは画面の下部に小さな入力フォームを表示し、ユーザーは日常の言葉で指示を入力できるようになります。

「この記事を140字以内に要約して」

「このフォームに以下の情報を入力して」

「このページから価格の一覧を抽出して」

指示を送ると、AIがDOMを読み取り、必要な操作を実行します。

━━━━━━━━━━━━━━━━━━━
🔵 「BYOL」——好きなAIを自由に選べる設計
━━━━━━━━━━━━━━━━━━━

PageAgentのもう一つの重要な特徴が「BYOL（Bring Your Own LLM）」という設計思想です。

「あなた自身のLLMを持ってきてください」——つまり、使うAIモデルを自分で選べるということです。

GPT-4・Claude・Qwen・Mistral——OpenAI互換のAPIを持つモデルであれば、どれでも接続できます。

第１章で紹介したQwen3-Coder-Nextを接続すれば、PageAgentの操作知能もQwen3-Coder-Nextが担います。完全にコストゼロの構成が実現します。

━━━━━━━━━━━━━━━━━━━

では、PageAgentは実際の業務でどう使えるのでしょうか。

GitHubの公式ドキュメントが示す代表的な3つのユースケースを紹介します。

━━━━━━━━━━━━━━━━━━━
🟢 ユースケース①　SaaS AIコパイロット
━━━━━━━━━━━━━━━━━━━

自社のSaaSプロダクトに、バックエンドを書き直すことなくAIコパイロット機能を追加できます。

これまでSaaSにAI機能を追加しようとすると、バックエンドの大幅な改修が必要でした。PageAgentなら、フロントエンドに一行追加するだけで、ユーザーが自然言語でプロダクトを操作できるようになります。

━━━━━━━━━━━━━━━━━━━
🟢 ユースケース②　スマートフォーム入力
━━━━━━━━━━━━━━━━━━━

ERP・CRM・社内管理システムなど、複雑なフォームへの入力を自動化します。

実際の測定結果として、30フィールドある注文作成フォームへの入力時間が、手作業の「3分」からPageAgentを使うと「35秒」に短縮されたという報告があります。「20回のクリック操作を1つの自然言語の指示に変える」というのは、誇張ではありません。

━━━━━━━━━━━━━━━━━━━
🟢 ユースケース③　アクセシビリティの向上
━━━━━━━━━━━━━━━━━━━

音声コマンドやスクリーンリーダーとの連携により、複雑なWebアプリを誰でも使えるようにします。

専門知識が必要なB2Bシステムで、AIがガイド役となることで、新入社員がマニュアルを読まなくても初日から複雑なシステムを操作できるようになります。

━━━━━━━━━━━━━━━━━━━

ここで、PageAgentの現時点での「正直な限界」もお伝えします。

PageAgentはブラウザの中だけで動きます。複数のタブをまたぐ操作や、ブラウザの外のアプリ操作は、単体ではできません（Chromeエクステンション版を使えばマルチタブ対応は可能です）。

また、操作の精度はあなたが選ぶLLMの性能に大きく依存します。無料の小規模モデルでは複雑な指示が通りにくい場面もあります。

これらを理解したうえで使うことが、PageAgentを「本当に使いこなす」ための出発点です。

━━━━━━━━━━━━━━━━━━━

整理します。

🔵 PageAgentはDOMを直接読むことで、画像解析不要・軽量・高速なブラウザ操作を実現する

🔵 サーバー不要・バックエンド不要。HTMLに一行追加するだけで導入完了

🔵 BYOLにより、使うAIモデルを自由に選択できる。Qwen3-Coder-Nextと組み合わせれば完全無料

🟢 主なユースケースはSaaS AIコパイロット・フォーム自動入力・アクセシビリティ向上

🔴 現時点ではブラウザ内のみ動作。複雑な指示は使用LLMの性能に依存する

━━━━━━━━━━━━━━━━━━━

ここまでが無料でお届けできる内容です。

「仕組みはわかった。では実際どう設定するのか？ Qwen3-Coder-Nextとは何者か？ 二つを組み合わせると何ができるのか？ 副業にどう繋げるのか？」——その答えが、ここから先の有料部分です。

━━━━━━━━━━━━━━━━━━━
【有料部分（第３章〜第７章）でわかること】
━━━━━━━━━━━━━━━━━━━

3章 🛠️ PageAgentの実践的な使い方
実際の設定手順・BYOL接続方法・Chromeエクステンションの使い方。「3分→35秒」を自分の業務で実現するための具体的な手順。

4章 🤖 Qwen3-Coder-Nextの衝撃
無料でClaude Sonnet 4.5レベルの性能を手に入れる意味。RTX 4090・MacBook Proでの動かし方。Claude Code・GitHub Copilotとの正直な比較。

5章 ⚔️ Alibaba二刀流の組み合わせ戦略
PageAgent×Qwen3-Coder-Nextで実現する完全自律ワークフローの設計。Claude 4.6+Coworkとの使い分け基準。

6章 💰 今すぐ始めるマネタイズ戦略5選
レガシーシステム操作代行・RPA代替コンサル・Webスクレイピング代行・SaaS AIコパイロット受託開発・プライベートコーディングサービスなど、完全無料ツールで収益を上げる5戦略。

7章 🌏 おわりに：AIの覇権争いが個人にもたらすもの

━━━━━━━━━━━━━━━━━━━

¥1,980（買い切り・何度でも読み返せます）

PageAgentとQwen3-Coder-Nextを組み合わせた副業・マネタイズの視点で書かれた日本語記事は、現時点でほとんど存在しません。

━━━━━━━━━━━━━━━━━━━