Update: Mermaid有効化 + 記事を図表リッチ・ですます調に改訂

docs/ai-terms-model-vs-agent-platform/index.md

@@ -8,86 +8,188 @@ image: /img/ai-terms-model-vs-agent-platform-banner.png
 
 # いま混線しがちなAI用語をほどく：モデル／エージェント基盤／UIの関係
 
-## はじめに：「AntigravityってClaudeより賢いの？」
+## はじめに：なぜ用語が混線するのか
 
-最近のAIツール界隈、名前がごちゃごちゃしてきてない？
+「AntigravityってClaudeより賢いんですか？」——こうした質問をSNSやコミュニティで見かける機会が増えました。
 
-「Antigravity使ってみたけど、Claudeより賢い気がする」「Claude CodeとAntigravityどっちがいい？」みたいな会話、SNSでもDiscordでも普通に飛び交ってる。
+一見すると自然な疑問ですが、実はこの問いには構造的な問題があります。**AntigravityとClaudeは同じカテゴリに属するものではない**からです。片方は「エンジン」、もう片方は「車体」に相当するもので、そもそも比較の軸が違います。
 
-でもちょっと待って。**それ、層が違うものを比べてる**んだよね。
+本記事では、こうした混乱を解消するために、AIツールを**3つの層**に分けて整理します。
 
-AntigravityとClaudeは「同じ棚に並ぶ商品」じゃない。片方はエンジンで、もう片方は車体みたいなもの。今日はその辺りを、ざっくり3層に分けて整理してみる。
+## 3層モデル：モデル／エージェント基盤／UI
 
-## 3層で整理すると迷子にならない
+AIツールの構造を理解するうえで、以下の3層に分けて考えると見通しがよくなります。
 
-AIツールを理解するとき、こんな感じで3つの層に分けて考えるとスッキリする。
+```mermaid
+graph TB
+    subgraph UI層["UI／インターフェース層"]
+        direction LR
+        CLI["CLI"]
+        IDE["IDE"]
+        WebChat["Web Chat"]
+        Bot["Discord Bot"]
+    end
 
-**モデル層 — 「頭脳」**
+    subgraph Agent層["エージェント基盤層"]
+        direction LR
+        AG["Antigravity"]
+        CC["Claude Code"]
+        CUR["Cursor"]
+        CDX["Codex CLI"]
+    end
 
-GPT、Claude、Geminiといった大規模言語モデル（LLM）そのもの。テキストを入れるとテキストが返ってくる、純粋な「考える部分」。APIとして提供されていて、単体ではファイルを読み書きしたりコマンドを実行したりはできない。
+    subgraph Model層["モデル層"]
+        direction LR
+        GPT["GPT"]
+        Claude["Claude"]
+        Gemini["Gemini"]
+    end
 
-**エージェント基盤層 — 「手足・実行環境」**
+    UI層 -->|操作・表示| Agent層
+    Agent層 -->|推論を依頼| Model層
 
-モデルに「手足」をつけて、実際にタスクを実行できるようにする層。ファイルを読む、コードを書く、ターミナルでコマンドを叩く、Webを検索する——こういった能力はモデル単体じゃなくて、この層が提供してる。Antigravity、Claude Code、Codex CLI、Cursor、OpenCodeなんかがここに属する。
+    style UI層 fill:#4a9eff,stroke:#2d7cd4,color:#fff
+    style Agent層 fill:#ff8c42,stroke:#d4712d,color:#fff
+    style Model層 fill:#51cf66,stroke:#3da54e,color:#fff
+```
 
-**UI/インターフェース層 — 「窓口」**
+各層の役割を整理します。
 
-ユーザーがAIとやり取りするための見た目や入口。CLI、IDE統合、Webチャット、Discord Botなど。同じエージェント基盤でも、CLIから使うのとVSCodeから使うのとでは体験がかなり変わる。
+| 層 | 役割 | 具体例 |
+|---|---|---|
+| **モデル層** | テキストの生成・推論を行う「頭脳」 | GPT、Claude、Gemini |
+| **エージェント基盤層** | モデルに「手足」を与え、タスクを実行する環境 | Antigravity、Claude Code、Cursor、Codex CLI |
+| **UI／インターフェース層** | ユーザーとの接点となる画面・操作手段 | CLI、IDE統合、Webチャット、Discord Bot |
 
-ポイントは、**同じモデルでも基盤が違えば体験と成果はまるで変わる**ということ。Claude Opus 4をAntigravity経由で使うのと、Claude Code経由で使うのとでは、できることも使い心地も違う。
+重要なのは、**同じモデルであっても、エージェント基盤が異なれば体験と成果は大きく変わる**という点です。Claude OpusをAntigravity経由で使う場合とClaude Code経由で使う場合とでは、利用できる機能も操作感もまったく異なります。
 
-## なぜAntigravityはモデル扱いされやすいのか
+## なぜAntigravityはモデルと混同されるのか
 
-Antigravityが「モデル」として語られがちな理由、わりと明確にある。
+Antigravityが「モデル」として語られやすい背景には、いくつかの構造的な理由があります。
 
-**マルチモデル対応が逆に混乱を生んでる。** AntigravityはGoogle AI Proサブスクリプション（$20/月）でGemini 3 Pro、Claude Opus 4.5/4.6、GPT 5.3といった複数モデルを切り替えて使える。でも、ユーザーからすると「Antigravityを開いてAIと話す」という一体の体験なので、中のモデルが何かはあんまり意識されない。
+```mermaid
+graph LR
+    User["ユーザー"] -->|"Antigravityを開く"| AG["Antigravity<br/>（エージェント基盤）"]
+    AG -->|切り替え可能| Gemini["Gemini 3 Pro"]
+    AG -->|切り替え可能| Claude["Claude Opus 4.5/4.6"]
+    AG -->|切り替え可能| GPT["GPT 5.3"]
 
-**体験の一体感がすごい。** モデルセレクターはあるけど、多くのユーザーはデフォルトのまま使ってる。結果として「Antigravityの回答」として認識される。中身がGeminiだろうがClaudeだろうが、体験としてはAntigravityなんだよね。
+    style AG fill:#ff8c42,stroke:#d4712d,color:#fff
+    style Gemini fill:#51cf66,stroke:#3da54e,color:#fff
+    style Claude fill:#51cf66,stroke:#3da54e,color:#fff
+    style GPT fill:#51cf66,stroke:#3da54e,color:#fff
+    style User fill:#4a9eff,stroke:#2d7cd4,color:#fff
+```
 
-**名前の力は侮れない。** 「Antigravity使ってる？」で会話が成立してしまう。いちいち「AntigravityでClaude Opus 4.6モデルを使ってコーディングしてる」なんて言わないでしょ。名前が体験を代表する。
+**マルチモデル対応による抽象化**
 
-## 実例で分解：主要ツールを3層に置いてみる
+AntigravityはGoogle AI Proサブスクリプション（$20/月）を通じて、Gemini 3 Pro、Claude Opus 4.5/4.6、GPT 5.3といった複数のモデルを切り替えて利用できます。しかし、ユーザーの視点では「Antigravityを開いてAIと対話する」という一貫した体験であり、内部でどのモデルが動いているかは意識されにくい構造になっています。
 
-じゃあ具体的に、今よく名前を聞くツールをこの3層に当てはめてみよう。
+**体験の一体感**
 
-- **Antigravity** → エージェント基盤層。モデルはGemini / Claude / GPT等を選択可能。Google AI Proサブスクに含まれる
+モデルセレクターは用意されているものの、多くのユーザーはデフォルト設定のまま利用しています。その結果、出力は「Antigravityの回答」として認識され、モデル固有の特性は基盤の体験に溶け込んでしまいます。
-- **Claude Code** → エージェント基盤層。モデルはClaude。Anthropic純正のコーディングエージェント
-- **Cursor** → エージェント基盤層 + UI層。IDE（VSCodeフォーク）の形でエージェント機能を提供。モデルはClaude / GPT等を選択可能
-- **ChatGPT** → UI層 + モデル層。OpenAIのGPTモデルに直接触れるチャットインターフェース
-- **Gemini（チャット版）** → UI層 + モデル層。Googleのモデルに直接触れるチャットインターフェース
-- **OpenClaw** → オーケストレーション基盤。エージェント基盤をDiscordやWebから統合操作する層。さらにメタな立ち位置
 
-こうして並べると、「AntigravityとClaude Codeどっちが賢い？」という質問がなぜ噛み合わないかわかるよね。どっちもエージェント基盤だけど、中のモデルが違う（しかもAntigravityは選べる）。比較するなら「基盤としてどっちが使いやすいか」が正しい問いになる。
+**名前が体験を代表する**
 
-ちなみにAntiCrow（antigravity-discord-bot）っていうプロジェクトがあって、DiscordからAntigravityをCDP経由で遠隔操作するBotなんだけど、これはまさにAntigravityを「エージェント基盤」として正しく位置づけてる好例。OpenClawがClaude Codeのブリッジになってるのと同じ構造だね。
+「Antigravity使ってますか？」という一言で会話が成立します。わざわざ「AntigravityでClaude Opus 4.6モデルを使ってコーディングしています」とは言いません。ブランド名が体験全体を代表する現象は、テクノロジー分野では珍しくありません。
 
-## 会話で使える言い換えテンプレ
+## 主要ツールの3層分類
 
-「いやいや理屈はわかったけど、実際の会話でどう言い換えればいいの？」って話だよね。
+主要なAIツールが3層のどこに位置するかを整理します。
 
-こんな感じ：
+```mermaid
+graph TB
+    subgraph ツール分類
+        direction TB
 
-- ❌「AntigravityとClaude Codeどっちが賢い？」→ ✅「AntigravityとClaude Code、基盤としてどっちが使いやすい？」
+        subgraph エージェント基盤
-- ❌「Antigravityのモデルは何？」→ ✅「Antigravityで今どのモデル使ってる？」
+            AG2["Antigravity<br/>モデル: Gemini/Claude/GPT"]
-- ❌「CursorとAntigravityどっちが強い？」→ ✅「CursorとAntigravity、開発体験としてどう違う？」
+            CC2["Claude Code<br/>モデル: Claude"]
+            CDX2["Codex CLI<br/>モデル: GPT"]
+        end
 
-カジュアルな場では「エージェント基盤」って言い方でOK。技術ドキュメントなら「runtime」とか「harness」って表現もある。要は「モデルそのものの話」と「モデルを動かす環境の話」を分けて考えよう、ってだけ。
+        subgraph "エージェント基盤 + UI"
+            CUR2["Cursor<br/>モデル: Claude/GPT等<br/>UI: IDE (VSCodeフォーク)"]
+        end
 
-## 締め：「ギガ」現象 — 名前が意味を飲み込む日
+        subgraph "UI + モデル"
+            ChatGPT["ChatGPT<br/>モデル: GPT<br/>UI: Web/アプリ"]
+            GemChat["Gemini チャット版<br/>モデル: Gemini<br/>UI: Web/アプリ"]
+        end
 
-「ギガ足りない」って言葉、もう誰も違和感を感じないよね。
+        subgraph オーケストレーション
+            OC["OpenClaw<br/>エージェント基盤を統合操作"]
+        end
+    end
 
-本来「ギガ」はギガバイト（GB）という単位の一部であって、「通信量」そのものじゃない。でも日常会話では「ギガ = モバイルデータ通信量」として完全に定着してる。技術的には不正確だけど、みんなわかるから問題ない。
+    style AG2 fill:#ff8c42,stroke:#d4712d,color:#fff
+    style CC2 fill:#ff8c42,stroke:#d4712d,color:#fff
+    style CDX2 fill:#ff8c42,stroke:#d4712d,color:#fff
+    style CUR2 fill:#e67e22,stroke:#c0651a,color:#fff
+    style ChatGPT fill:#3498db,stroke:#2980b9,color:#fff
+    style GemChat fill:#3498db,stroke:#2980b9,color:#fff
+    style OC fill:#9b59b6,stroke:#8e44ad,color:#fff
+```
 
-同じことがAI界隈でも起きつつある。
+| ツール | 層 | 利用可能なモデル | 備考 |
+|---|---|---|---|
+| **Antigravity** | エージェント基盤 | Gemini / Claude / GPT | Google AI Proサブスクに含まれる |
+| **Claude Code** | エージェント基盤 | Claude | Anthropic純正のコーディングエージェント |
+| **Codex CLI** | エージェント基盤 | GPT | OpenAI純正のCLIエージェント |
+| **Cursor** | エージェント基盤 + UI | Claude / GPT 等 | VSCodeフォークのIDE形式 |
+| **ChatGPT** | UI + モデル | GPT | OpenAIモデルへの直接インターフェース |
+| **Gemini（チャット版）** | UI + モデル | Gemini | Googleモデルへの直接インターフェース |
+| **OpenClaw** | オーケストレーション基盤 | — | エージェント基盤をDiscord等から統合操作 |
 
-「Antigravity使って書いた」「ChatGPTに聞いた」——これらの表現は技術的には「Antigravity基盤でClaude Opusモデルを使ってコードを生成した」「ChatGPT UIでGPT-5.3モデルに質問した」が正確だけど、誰もそんな言い方しない。
+この表を見ると、「AntigravityとClaude Codeどちらが賢いか？」という問いがなぜ噛み合わないかが明確になります。両者ともエージェント基盤層に属しますが、利用するモデルが異なります（しかもAntigravityは複数モデルを選択可能）。比較するのであれば、「基盤としてどちらが使いやすいか」が適切な問いです。
 
-そしてそれは悪いことじゃない。**体験が名前を飲み込んでいくのは、言葉の自然な進化**だから。
+なお、[AntiCrow（antigravity-discord-bot）](https://github.com/harunamitrader/antigravity-discord-bot)というプロジェクトがあります。DiscordからAntigravityをCDP経由で遠隔操作するBotで、Antigravityを「エージェント基盤」として正しく活用している好例です。OpenClawがClaude Codeのブリッジとして機能するのと同じ構造的発想といえます。
 
-でもね、**比較するときだけは、どの層の話をしてるか意識すると、会話がぐっとクリアになる**よ。
+## 正確な比較のための言い換え
 
-「Antigravityすごいよね」はそのままでいい。でも「AntigravityとClaudeどっちがいい？」と聞かれたら、「それ、車体とエンジンどっちがいい？って聞いてるのと同じだよ」と返せたら、ちょっとカッコよくない？
+層を意識した表現に置き換えることで、議論の精度が上がります。
+
+| よくある表現 | より正確な表現 |
+|---|---|
+| ❌ AntigravityとClaude Code、どっちが賢い？ | ✅ AntigravityとClaude Code、基盤としてどちらが使いやすい？ |
+| ❌ Antigravityのモデルは何？ | ✅ Antigravityで今どのモデルを使っている？ |
+| ❌ CursorとAntigravityどっちが強い？ | ✅ CursorとAntigravity、開発体験としてどう違う？ |
+
+文脈に応じた用語の使い分けも整理しておきます。
+
+| 場面 | 推奨表現 |
+|---|---|
+| カジュアルな会話 | 「エージェント基盤」「AI実行環境」 |
+| 技術ドキュメント | 「runtime」「harness」 |
+| 一般向けの説明 | 「AIを動かす土台」「AIの手足」 |
+
+## 「ギガ」現象：名前が意味を飲み込む
+
+「ギガが足りない」という表現に違和感を覚える人は、もうほとんどいないでしょう。
+
+本来「ギガ」はギガバイト（GB）という単位の接頭辞であり、「通信量」そのものを意味する言葉ではありません。しかし、日常会話では「ギガ＝モバイルデータ通信量」として完全に定着しています。
+
+```mermaid
+graph LR
+    subgraph 通信の世界
+        GB["ギガバイト（単位）"] -.->|"意味の拡張"| Giga["「ギガ」= 通信量"]
+    end
+
+    subgraph AIの世界
+        Model["モデル名・基盤名"] -.->|"意味の拡張"| AI["「○○」= AI体験そのもの"]
+    end
+
+    style GB fill:#95a5a6,stroke:#7f8c8d,color:#fff
+    style Giga fill:#3498db,stroke:#2980b9,color:#fff
+    style Model fill:#95a5a6,stroke:#7f8c8d,color:#fff
+    style AI fill:#e74c3c,stroke:#c0392b,color:#fff
+```
+
+同じ現象がAI分野でも進行しています。「Antigravityで書いた」「ChatGPTに聞いた」といった表現は、技術的に正確に言えば「Antigravity基盤でClaude Opusモデルを使ってコードを生成した」「ChatGPT UIでGPT-5.3モデルに質問した」となりますが、日常会話でそこまで分解する必要はありません。
+
+**体験が名前を飲み込んでいくのは、言葉の自然な進化です。** それ自体は問題ではありません。
+
+ただし、**ツールを比較・評価する場面では、どの層について話しているのかを意識すると、議論の質が大きく向上します。**「Antigravityすごいですよね」はそのままで構いません。しかし「AntigravityとClaudeどちらが優れていますか？」と聞かれたとき、「それは車体とエンジンのどちらが優れているかを問うのと同じ構造です」と整理できれば、より実りある議論につながるはずです。
 
 ---
 

docusaurus.config.ts

@@ -7,6 +7,12 @@ const config: Config = {
   tagline: '技術・思考・作ったもの',
   favicon: 'img/favicon.svg',
 
+  markdown: {
+    mermaid: true,
+  },
+
+  themes: ["@docusaurus/theme-mermaid"],
+
   future: {
     v4: true,
   },

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@docusaurus/core": "3.9.2",
     "@docusaurus/preset-classic": "3.9.2",
+    "@docusaurus/theme-mermaid": "^3.9.2",
     "@mdx-js/react": "^3.0.0",
     "canvas": "^3.2.1",
     "clsx": "^2.0.0",