半年前、これにはバックエンド開発者、DevOps エンジニア、そして 2 週間が必要でした。今日では、たった一文と Claude で済みます。これが完全なアーキテクチャです。そして、なぜほとんどの開発者がまだこれに気づいていないのか、その理由です。
ほとんどの人が持つ AI のメンタルモデルは間違っています。
彼らはこう考えます:AI アシスタント → 質問する → 答えが返ってくる。
2026 年の現実:AI エージェント → システムを説明する → それが構築、デプロイ、そしてそのシステムを環境に接続する。プロトタイプではありません。コードスニペットでもありません。動作するアプリケーションです。
この変化には名前があります:Generative App Architecture(生成型アプリケーションアーキテクチャ)。そして、それを実現するスタック、Claude + Obsidian + MCP は、今すぐ誰でも利用可能です。
1. Generative App Architecture の実際の意味
従来のソフトウェア開発:
1アイデア → 仕様 → 設計 → フロントエンド開発 → バックエンド開発2→ データベース構築 → API 統合 → テスト → デプロイ3期間:数週間。コスト:数十万円。
Generative App Architecture:
1アイデア → プロンプト → 動作するシステム2期間:数分。コスト:API トークン。
AI エージェントはコードを書くだけではありません。内部で完全な Agentic Loop(エージェントループ)を実行します:
ステップ 1 - 分解
あなたの抽象的なリクエスト(「洗車場向けの CRM を構築して」)は、数十のアトミックなサブタスクに分解されます:データベーススキーマ、UI コンポーネント、通知ロジック、認証フロー、API エンドポイント。
ステップ 2 - MCP による環境マッピング
Model Context Protocol を通じて、エージェントは利用可能なツール(ファイルシステム、インストール済みパッケージ、実行中のサービス、利用可能な API)を即座に把握します。
ステップ 3 - 反復的な構築とテスト
エージェントはコードを書き、実行し、コンパイルエラーをキャッチし、修正し、再テストします。これを自律的に、システムが正しく動作するまで繰り返します。
ステップ 4 - コンテキストに応じたデプロイ
出力はコードが書かれたテキストファイルではありません。動作するローカル環境、またはデプロイ可能な Web アプリケーションです。
これが、開発者を支援するツールと、ビルドパイプライン全体を置き換えるシステムの違いです。
2. エンジンとしての Claude - 3 つのデプロイモード
モード 1 - Claude Artifacts
プロンプトから動作するアプリケーションへの最速のパスです。Claude に何か構築するよう依頼すると、インタラクティブな Artifact ウィンドウが開き、完全な Web アプリケーション(React、HTML、JavaScript)をリアルタイムで組み立て、コンパイルし、実行します。その様子を見ていることができます。
Artifact 内で動作中のアプリを操作し、自然言語で反復的に改善し、完全なアーカイブをエクスポートできます。
本番利用可能なファイナンストラッカーを生成するプロンプト:
1個人財務管理アプリケーションを構築してください。23機能:4- 取引ログ(カテゴリ付きで追加/編集/削除)5- 進捗バー付きの月次予算ビュー6- CoinGecko API からリアルタイム価格を取得する暗号通貨ポートフォリオトラッカー7- リアルタイム更新される純資産計算8- ダークモード切り替え910技術要件:11- 単一ファイルの React アプリケーション12- useState + useEffect のみ使用(外部状態管理は不要)13- スタイリングに Tailwind CSS14- 公開 API からのフェッチ(認証不要)15- モバイル対応1617データ:18- セッション間の永続化は localStorage19- 取引を CSV としてエクスポート2021出力:デプロイ可能な完全な自己完結型アプリケーション。
Claude Artifacts が返すもの - 完全な React アプリケーション:
1import { useState, useEffect } from "react";23const CATEGORIES = ["Housing","Food","Transport","Entertainment","Health","Savings","Income","Crypto","Other"];4const CRYPTO_IDS = { BTC: "bitcoin", ETH: "ethereum", SOL: "solana" };56export default function FinanceTracker() {7 const [transactions, setTransactions] = useState(() =>8 JSON.parse(localStorage.getItem("transactions") || "[]")9 );10 const [cryptoPrices, setCryptoPrices] = useState({});11 const [form, setForm] = useState({ description:"", amount:"", category:"Other", type:"expense", date:"" });12 const [darkMode, setDarkMode] = useState(false);1314 useEffect(() => {15 const ids = Object.values(CRYPTO_IDS).join(",");16 fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${ids}&vs_currencies=usd`)17 .then(r => r.json())18 .then(data => {19 const prices = {};20 Object.entries(CRYPTO_IDS).forEach(([sym, id]) => { prices[sym] = data[id]?.usd || 0; });21 setCryptoPrices(prices);22 });23 }, []);2425 useEffect(() => {26 localStorage.setItem("transactions", JSON.stringify(transactions));27 }, [transactions]);2829 const addTransaction = () => {30 if (!form.description || !form.amount) return;31 setTransactions(prev => [...prev, { ...form, id: Date.now(), amount: parseFloat(form.amount),32 date: form.date || new Date().toISOString().split("T")[0] }]);33 setForm({ description:"", amount:"", category:"Other", type:"expense", date:"" });34 };3536 const totalIncome = transactions.filter(t => t.type === "income").reduce((s,t) => s + t.amount, 0);37 const totalExpenses = transactions.filter(t => t.type === "expense").reduce((s,t) => s + t.amount, 0);38 const netWorth = totalIncome - totalExpenses;3940 const bg = darkMode ? "#0D0D0D" : "#F9F7F4";41 const card = darkMode ? "#1A1A1A" : "#FFF";42 const text = darkMode ? "#F0F0F0" : "#1A1A1A";43 const border = darkMode ? "#2A2A2A" : "#E8E8E8";4445 return (46 <div style={{ minHeight:"100vh", background:bg, color:text, fontFamily:"system-ui, sans-serif" }}>47 <div style={{ maxWidth:800, margin:"0 auto", padding:"24px 16px" }}>4849 <div style={{ display:"flex", justifyContent:"space-between", marginBottom:24 }}>50 <div>51 <h1 style={{ fontSize:22, fontWeight:500, margin:0 }}>Finance Tracker</h1>52 <p style={{ margin:"4px 0 0", fontSize:13, color: netWorth >= 0 ? "#22C55E" : "#EF4444" }}>53 Net worth: ${netWorth.toFixed(2)}54 </p>55 </div>56 <button onClick={() => setDarkMode(!darkMode)}57 style={{ padding:"8px 14px", borderRadius:8, border:`1px solid ${border}`,58 background:card, color:text, cursor:"pointer" }}>59 {darkMode ? "Light" : "Dark"}60 </button>61 </div>6263 <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginBottom:20 }}>64 {[["Income","#22C55E",totalIncome],["Expenses","#EF4444",totalExpenses]].map(([label,color,val]) => (65 <div key={label} style={{ background:card, border:`1px solid ${border}`, borderRadius:10, padding:14 }}>66 <p style={{ margin:0, fontSize:12, color:"#999" }}>{label}</p>67 <p style={{ margin:"4px 0 0", fontSize:20, fontWeight:600, color }}>${val.toFixed(2)}</p>68 </div>69 ))}70 </div>7172 <div style={{ background:card, border:`1px solid ${border}`, borderRadius:10, padding:16, marginBottom:20 }}>73 <div style={{ display:"grid", gridTemplateColumns:"2fr 1fr 1fr", gap:8, marginBottom:8 }}>74 <input placeholder="Description" value={form.description}75 onChange={e => setForm(p => ({ ...p, description: e.target.value }))}76 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }} />77 <input type="number" placeholder="Amount" value={form.amount}78 onChange={e => setForm(p => ({ ...p, amount: e.target.value }))}79 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }} />80 <select value={form.type} onChange={e => setForm(p => ({ ...p, type: e.target.value }))}81 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }}>82 <option value="expense">Expense</option>83 <option value="income">Income</option>84 </select>85 </div>86 <div style={{ display:"grid", gridTemplateColumns:"2fr auto", gap:8 }}>87 <select value={form.category} onChange={e => setForm(p => ({ ...p, category: e.target.value }))}88 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }}>89 {CATEGORIES.map(c => <option key={c}>{c}</option>)}90 </select>91 <button onClick={addTransaction}92 style={{ padding:"9px 20px", borderRadius:8, background:"#E8692A",93 color:"#fff", border:"none", cursor:"pointer", fontSize:13, fontWeight:500 }}>94 Add95 </button>96 </div>97 </div>9899 <div style={{ background:card, border:`1px solid ${border}`, borderRadius:10, overflow:"hidden" }}>100 <p style={{ margin:0, padding:"12px 16px", borderBottom:`1px solid ${border}`, fontSize:13, fontWeight:500 }}>101 Transactions ({transactions.length})102 </p>103 {transactions.slice().reverse().map(t => (104 <div key={t.id} style={{ display:"flex", justifyContent:"space-between",105 alignItems:"center", padding:"11px 16px", borderBottom:`1px solid ${border}` }}>106 <div>107 <p style={{ margin:0, fontSize:13, fontWeight:500 }}>{t.description}</p>108 <p style={{ margin:"2px 0 0", fontSize:12, color:"#999" }}>{t.category} · {t.date}</p>109 </div>110 <span style={{ fontSize:14, fontWeight:600, color: t.type==="income" ? "#22C55E" : "#EF4444" }}>111 {t.type==="income" ? "+" : "-"}${t.amount.toFixed(2)}112 </span>113 </div>114 ))}115 </div>116 </div>117 </div>118 );119}
これが完全なアプリケーションです。ひとつのプロンプト。Claude Artifacts 内で即座に動作します。
モード 2 - Claude + MCP(ローカルデプロイ)
MCP(Model Context Protocol)は、Claude にあなたのローカル環境への直接アクセスを提供します。ひとつのプロンプトがコードを生成するだけでなく、ハードドライブ上にフォルダを作成し、ターミナル経由でパッケージをインストールし、設定ファイルを書き込み、ローカルサーバーを起動します。
Claude をファイルシステムに接続する MCP 設定:
1{2 "mcpServers": {3 "filesystem": {4 "command": "npx",5 "args": [6 "-y",7 "@modelcontextprotocol/server-filesystem",8 "/Users/yourname/Projects"9 ]10 },11 "terminal": {12 "command": "npx",13 "args": ["-y", "@modelcontextprotocol/server-terminal"]14 },15 "sqlite": {16 "command": "npx",17 "args": [18 "-y",19 "@modelcontextprotocol/server-sqlite",20 "--db-path",21 "/Users/yourname/Projects/app.db"22 ]23 }24 }25}
この設定がアクティブな状態で、たったひとつのプロンプト:
1洗車ビジネス向けのローカル CRM システムを構築してデプロイしてください。23プロジェクトを ~/Projects/carwash-crm/ に作成してください。4依存関係を自動的にインストールしてください。5以下のテーブルを持つ SQLite データベースをセットアップしてください:6- customers(名前、電話番号、メール、車両、メモ)7- visits(顧客 ID、日付、サービス、価格、ステータス)8- staff(名前、役割、スケジュール)910以下の機能を持つ Web インターフェースを構築してください:11- 顧客検索とプロフィール12- 顧客ごとの来店履歴13- 月別売上ダッシュボード14- SMS リマインダーシステム(Twilio 統合、設定のみ)1516完了したら開発サーバーを起動してください。17準備ができたら localhost URL を報告してください。
Claude はこれを MCP を通じてエンドツーエンドで実行します。ディレクトリ構造の作成、Node パッケージのインストール、データベーススキーマの作成、UI の構築、サーバーの起動まで。あなたは localhost URL を受け取ります。
モード 3 - 企業標準を組み込んだ Claude Projects
UI キット、デザイントークン、API ドキュメント、セキュリティ要件を一度 Claude Project にアップロードします。それ以降、Claude が生成するすべてのシステムは、自動的にあなたの内部スタックに準拠します。
1[Claude Project のコンテキストに含まれるもの:]2- design-system.md(色、タイポグラフィ、スペーシング)3- api-standards.md(認証パターン、エラーコード)4- security-policy.md(入力検証ルール、CORS 設定)5- stack.md(React 18、TypeScript、Tailwind、Prisma、PostgreSQL)67プロンプト:8「メール認証と、送信時の自動 Notion データベース入力機能を備えた9クライアントオンボーディングフォームを構築してください」1011出力:あなたのスタックに完全に一致する、12修正不要なプロダクション対応コード。
3. AI コマンドセンターとしての Obsidian
2026 年の Obsidian は、メモ作成アプリではありません。それは個人用の AI コマンドセンターであり、あなたの蓄積された知識ベースが、構築するすべてのシステムのコンテキストレイヤーとなります。
アーキテクチャの変化:あなたの Vault はもはやストレージではありません。それは RAG(Retrieval Augmented Generation、検索拡張生成)です。AI エージェントがタスクを実行する前に問い合わせる、生きた知識ベースです。
これを機能させるプラグインスタック:
Smart Connections - Vault 全体をインデックス化し、関連するノートを AI 呼び出しのたびにコンテキストとして送信します。
Obsidian Copilot - Vault を Claude API に直接接続します。一度設定するだけ:
12 "provider": "anthropic",3 "model": "claude-opus-4-8",4 "apiKey": "YOUR_ANTHROPIC_KEY",5 "systemPrompt": "あなたはシステムアーキテクトです。ユーザーの完全な知識 Vault をコンテキストとして利用できます。システムを構築する際は、既存のノート、過去の決定、確立されたパターンを参照してください。出力:動作するコード + Obsidian ファイル構造。",6 "contextWindow": {7 "includeActiveFile": true,8 "includeLinkedFiles": true,9 "includeRecentFiles": 10,10 "includeFolders": ["Projects", "Systems", "Decisions"]11 }12}
システムデザインインターフェースとしての Canvas
ひとつのプロンプトで、Claude がシステム全体のアーキテクチャを接続されたブロックとして配置する、インタラクティブな Obsidian Canvas を作成します。
1Obsidian Canvas でのプロンプト:2「私の Twitter アカウント向けのコンテンツ制作パイプラインを設計してください。3週に 3 本の記事を公開し、5 件のスポンサー案件を管理しています。4既存のコンテンツカレンダーノートを参照してください。」56出力:以下の接続されたブロックを持つ Canvas:7→ コンテンツアイデア出し(あなたの興味ノートから取得)8→ 下書き → レビュー → 公開のワークフロー9→ 期限アラート付きスポンサー管理10→ 分析ダッシュボード11→ 自動クロス投稿ロジック12→ 各ブロックは関連する Obsidian ファイルにリンク
Claude が生成する Canvas 出力(構造化ファイル):
1{2 "nodes": [3 {4 "id": "ideation",5 "type": "file",6 "file": "Systems/ContentPipeline/Ideation.md",7 "x": 0, "y": 0, "width": 300, "height": 200,8 "color": "1"9 },10 {11 "id": "draft",12 "type": "file",13 "file": "Systems/ContentPipeline/Draft.md",14 "x": 400, "y": 0, "width": 300, "height": 200,15 "color": "3"16 },17 {18 "id": "sponsors",19 "type": "file",20 "file": "Systems/ContentPipeline/SponsorTracker.md",21 "x": 0, "y": 300, "width": 300, "height": 200,22 "color": "5"23 },24 {25 "id": "analytics",26 "type": "file",27 "file": "Systems/ContentPipeline/Analytics.md",28 "x": 400, "y": 300, "width": 300, "height": 200,29 "color": "6"30 }31 ],32 "edges": [33 {34 "id": "e1",35 "fromNode": "ideation", "fromSide": "right",36 "toNode": "draft", "toSide": "left",37 "label": "承認されたコンセプト"38 },39 {40 "id": "e2",41 "fromNode": "sponsors", "fromSide": "right",42 "toNode": "draft", "toSide": "bottom",43 "label": "ブリーフィングの統合"44 }45 ]46}
4. 完全なプライバシーのためのローカル LLM
機密データ(クライアントシステム、金融ツール、内部ツール)の場合、クラウド API ではなくローカルモデルを経由します。データがマシンから出ることはありません。
1# Ollama をインストール2curl -fsSL https://ollama.com/install.sh | sh34# コーディング可能なモデルをプル5ollama pull llama3.2:latest6# または、より強力なコード生成のために:7ollama pull qwen2.5-coder:32b89# ローカルサーバーを起動10ollama serve11# localhost:11434 で実行
Obsidian Copilot をローカルエンドポイントを使用するように設定:
1{2 "provider": "ollama",3 "model": "qwen2.5-coder:32b",4 "baseUrl": "http://localhost:11434",5 "systemPrompt": "あなたは MCP を介してユーザーのファイルシステムにアクセスできるローカルシステムビルダーです。完全に動作するシステムを構築してください。明示的な指示がない限り、外部 API にデータを送信しないでください。"6}
ローカルモデル + MCP ブリッジ:
1import requests2import json3from pathlib import Path4from watchdog.observers import Observer5from watchdog.events import FileSystemEventHandler67OBSIDIAN_INBOX = Path.home() / "Obsidian" / "AI-Inbox"8PROJECTS_DIR = Path.home() / "Projects"9OLLAMA_URL = "http://localhost:11434/api/generate"1011class InboxWatcher(FileSystemEventHandler):12 """13 Obsidian の AI-Inbox フォルダを監視します。14 新しい .md ファイルが表示されたら、それをビルドプロンプトとして扱います。15 ローカル LLM に渡し -> MCP 経由で実行し -> 結果を報告します。16 """1718 def on_created(self, event):19 if not event.src_path.endswith(".md"):20 return2122 prompt_file = Path(event.src_path)23 prompt = prompt_file.read_text()2425 print(f"[Inbox] 新しいプロンプト: {prompt_file.name}")26 self.execute_prompt(prompt, prompt_file.stem)2728 def execute_prompt(self, prompt: str, project_name: str):29 response = requests.post(OLLAMA_URL, json={30 "model": "qwen2.5-coder:32b",31 "prompt": f"""あなたはシステムビルダーです。32 このシステムを構築してください:{prompt}3334 以下の JSON プランを出力してください:35 {{36 "project_dir": "相対パス",37 "files": [38 {{"path": "相対パス", "content": "ファイル内容"}}39 ],40 "commands": ["npm install", "など"],41 "summary": "構築された内容の概要"42 }}""",43 "stream": False44 })4546 plan = json.loads(response.json()["response"])47 project_dir = PROJECTS_DIR / plan["project_dir"]48 project_dir.mkdir(parents=True, exist_ok=True)4950 for file_spec in plan["files"]:51 file_path = project_dir / file_spec["path"]52 file_path.parent.mkdir(parents=True, exist_ok=True)53 file_path.write_text(file_spec["content"])54 print(f"[Build] 作成しました: {file_path}")5556 result_file = OBSIDIAN_INBOX / f"{project_name}-result.md"57 result_file.write_text(58 f"# ビルド完了: {project_name}\n\n"59 f"**場所:** {project_dir}\n\n"60 f"**概要:** {plan['summary']}\n\n"61 f"**作成されたファイル数:** {len(plan['files'])}\n"62 )63 print(f"[完了] 結果を Obsidian に書き込みました")6465if __name__ == "__main__":66 OBSIDIAN_INBOX.mkdir(exist_ok=True)67 observer = Observer()68 observer.schedule(InboxWatcher(), str(OBSIDIAN_INBOX), recursive=False)69 observer.start()70 print(f"[監視中] {OBSIDIAN_INBOX}")7172 try:73 while True:74 import time; time.sleep(1)75 except KeyboardInterrupt:76 observer.stop()77 observer.join()
ビルドプロンプトを書いた .md ファイルを Obsidian の AI-Inbox にドロップします。ブリッジがそれを拾い、ローカルモデルにルーティングし、Projects フォルダにシステムを構築し、完了通知を Obsidian に書き戻します。
5. 完全なワークフロー - アイデアからデプロイされたシステムへ
1ステップ 1 - 入力2Obsidian の AI パネルで、次のように書きます:3「暗号通貨統合と月次予算追跡機能を備えた4個人財務システム」5生成ボタンを押します。67ステップ 2 - コンテキストのアセンブル8Smart Connections プラグインが Vault をスキャンします。9過去 3 ヶ月分の財務関連ノートを見つけます。10それらをコンテキストとして Claude API に送信します。1112ステップ 3 - アーキテクチャ設計13Claude(Opus 4.8)がシステムを設計します:14- データベーススキーマ15- UI コンポーネント16- API 統合17- ファイル構造1819ステップ 4 - ビルド20Claude(Sonnet 5)が MCP 経由で実装します:21- ~/Projects/finance-tracker/ を作成22- 依存関係をインストール23- すべてのファイルを書き込み24- localhost:3000 で開発サーバーを起動2526ステップ 5 - 結果27Obsidian がフォルダを作成:Finance System/28内部:リンクされたダッシュボード、設定ノート、29そして動作中のアプリケーションへの直接リンク。
ステップ 1 から動作するアプリケーションまでの総時間:4 〜 12 分。
これが示す変化
これは、コードを書くためのより速い方法ではありません。
それは、アイデアと実行の間の、異なる関係です。
構築できるものの制約は、かつては技術的なスキルと時間でした。非開発者は CRM を構築できませんでした。ひとりの開発者が同時に 5 つのシステムを構築することはできませんでした。チームが数週間ではなく数時間でリリースすることはできませんでした。
これら 3 つの制約はすべてなくなりました。
新しい制約は思考の明瞭さです。つまり、自分が何を必要としているかを正確に記述し、良い出力とはどのようなものかを理解し、それを反復的に改善する能力です。それは技術スキルではなく、思考スキルです。
Generative App Architecture は開発者を不要にするものではありません。それは、システムとして考える能力、つまり構築する前に自分に何が必要かを推論する能力を、それを実装するコードを書く能力よりも、劇的に価値のあるものにします。
スタックはここにあります。モデルは能力を備えています。残された唯一の変数は、あなたがこれを使って構築しているのか、それを使っている人々について読んでいるだけなのか、ということです。
この記事は、2026 年 7 月時点の Claude、Obsidian、MCP で利用可能な機能について説明しています。具体的なプラグインのバージョンや API 設定は変更される可能性があります。実装前に必ず最新のドキュメントを確認してください。
お読みいただきありがとうございました。





