[{"data":1,"prerenderedAt":4735},["ShallowReactive",2],{"category-data-AI活用":3},[4,596,2980],{"id":5,"title":6,"body":7,"description":581,"extension":582,"meta":583,"navigation":591,"ogImage":585,"path":592,"seo":593,"stem":594,"__hash__":595},"content/blogs/12-claude-skills-mcp-practical-guide.md","Claudeで動画とウェブを\"全自動\"にしたら制作時間が1/5になった話 | How Claude Cut My Video + Web Workflow to 1/5 the Time",{"type":8,"value":9,"toc":562},"minimark",[10,286,288],[11,12,14,19,28,31,36,43,65,72,79,81,85,92,95,115,122,129,131,135,138,143,165,169,191,198,200,204,207,228,235,242,245,247,252,272,274],"lang-block",{"lang":13},"ja",[15,16,18],"h1",{"id":17},"claudeで動画とウェブを全自動にしたら制作時間が15になった話","Claudeで動画とウェブを\"全自動\"にしたら制作時間が1/5になった話",[20,21,22,23,27],"p",{},"私はVCの仕事をしながらYouTube・X・このブログをひとりで回しているのですが、2026年4月にClaude Designが出て以降、",[24,25,26],"strong",{},"ひとつの動画とランディングページを作るのに毎週使っていた15時間が、3時間まで縮みました","。最初は「またAIの誇大広告か」と疑っていたのが正直なところです。でもSkills・MCP・Claude Designの3つを\"つなぎ方\"として使い始めた瞬間、見える景色が変わりました。今回はその\"つなぎ方\"を、実体験ベースでまるごと共有します。",[29,30],"hr",{},[32,33,35],"h2",{"id":34},"ツールが増えるほど時間が消えていくあるある","「ツールが増えるほど時間が消えていく」あるある",[20,37,38,39,42],{},"ぶっちゃけ、ここ2年で一番ストレスだったのは",[24,40,41],{},"ツールの数が増えれば増えるほど自分の作業時間が減らない","ことでした。",[44,45,46,50,53,56,59,62],"ul",{},[47,48,49],"li",{},"動画台本はChatGPT",[47,51,52],{},"編集はCapCutかDaVinci",[47,54,55],{},"サムネはCanva",[47,57,58],{},"ランディングはFigma → Webflow",[47,60,61],{},"投稿用文言はまた別のAI",[47,63,64],{},"リサーチはまた別のAI",[20,66,67,68,71],{},"これ、わかる人めちゃくちゃいると思うんですよね。「AIで時短！」と言いながら、実際には",[24,69,70],{},"ツール間のコピペとフォーマット直しに時間が溶ける","という状態。私自身、AI使い始めた頃は週20時間以上をクリエイティブ作業に使っていて、しかもクオリティは正直バラついていました。",[20,73,74,75,78],{},"ここを根本から変えたのが、Claudeの",[24,76,77],{},"Skills × MCP × Claude Design","の組み合わせです。",[29,80],{},[32,82,84],{"id":83},"つなぎ方の正体3点セットで何が変わるか","\"つなぎ方\"の正体：3点セットで何が変わるか",[20,86,87,88,91],{},"Skills・MCP・Claude Designはそれぞれ単体だと「便利な機能」止まりですが、組み合わせると",[24,89,90],{},"ひとつの作業フロー","になります。",[20,93,94],{},"ざっくり言うとこんな役割分担です。",[44,96,97,103,109],{},[47,98,99,102],{},[24,100,101],{},"Skills","：私のブログの書き方や動画台本のフォーマットを覚えさせるところ",[47,104,105,108],{},[24,106,107],{},"MCP","：Notion・Google Drive・YouTube・Figmaなど普段使うツールに繋ぐ\"USB-C\"",[47,110,111,114],{},[24,112,113],{},"Claude Design","：プロトタイプ・スライド・LP・サムネのモックアップを会話で作るところ",[20,116,117,118,121],{},"私の場合、ZYL0ブログ用の「zyl0-blog-writer」というSkillを作って、毎回フォーマットを説明する必要をなくしました。これだけで",[24,119,120],{},"1記事あたり40〜50分の時短","です。さらにMCPで自分のNotionと繋いでおくと、「先週のリサーチメモから今週の動画台本作って」と一言投げるだけで、台本のドラフトが返ってきます。",[20,123,124,125,128],{},"正直、最初の設定（Skill作成 + MCP接続）に半日かかります。",[24,126,127],{},"ここで多くの人が脱落するんですが、ここを越えるとリターンが桁違い","です。",[29,130],{},[32,132,134],{"id":133},"ひとり制作のリアル15時間3時間の中身","ひとり制作のリアル：15時間→3時間の中身",[20,136,137],{},"具体的に、私の毎週金曜の動画制作フローを公開します。",[139,140,142],"h3",{"id":141},"beforeaiを単体で使っていた頃","Before（AIを\"単体\"で使っていた頃）",[44,144,145,148,151,154,157,160],{},[47,146,147],{},"月：企画ブレスト（ChatGPT）2時間",[47,149,150],{},"火：台本作成（ChatGPT）3時間",[47,152,153],{},"水：サムネ・LP案（Figma + Canva）4時間",[47,155,156],{},"木：撮影＋編集（CapCut）5時間",[47,158,159],{},"金：投稿文・公開（複数ツール往復）1時間",[47,161,162],{},[24,163,164],{},"合計：約15時間／週",[139,166,168],{"id":167},"afterskills-mcp-claude-designをつないだ後","After（Skills + MCP + Claude Designをつないだ後）",[44,170,171,174,177,180,183,186],{},[47,172,173],{},"月：Notionにアイデアメモ（5分）→Skills経由で企画案3つ生成（10分）",[47,175,176],{},"火：Claudeに「Skills通りの台本作って」（30分）→自分で編集（30分）",[47,178,179],{},"水：Claude Designでサムネ・LPプロトタイプ生成（45分）",[47,181,182],{},"木：撮影は変わらず（90分）。編集はAIキャプションで30分短縮",[47,184,185],{},"金：MCP経由でX・YouTube・ブログに同時投稿用テキスト生成（10分）",[47,187,188],{},[24,189,190],{},"合計：約3時間／週（撮影90分含む）",[20,192,193,194,197],{},"「動画台本→サムネ→LP→投稿文」が",[24,195,196],{},"ひとつの会話で繋がる","のが何より大きいです。コピペ地獄から解放されました。",[29,199],{},[32,201,203],{"id":202},"で結局なにから始めれば","「で、結局なにから始めれば？」",[20,205,206],{},"ここまで読んで「やってみたい」と思った人へ、最短ルートはこの3ステップです。",[208,209,210,216,222],"ol",{},[47,211,212,215],{},[24,213,214],{},"Claude Pro（月20ドル）に契約する"," — Skills・Claude Designはここから使える",[47,217,218,221],{},[24,219,220],{},"自分の\"いつもの作業\"を1つだけSkillにする"," — 私の場合は「ブログ記事のフォーマット」だった。やりたい作業を箇条書きにしてClaudeに渡し、SKILL.mdとして保存してもらうだけ",[47,223,224,227],{},[24,225,226],{},"MCPサーバーを1つだけ繋ぐ"," — Notion、Google Drive、YouTubeのいずれか、自分が一番触るものを最初に",[20,229,230,231,234],{},"最初は完璧を狙わないでOKです。",[24,232,233],{},"ひとつのSkillとひとつのMCP接続","だけでも、作業時間は確実に減ります。私の場合は最初の1週間で「あ、これは戻れない」と確信しました。",[20,236,237,238,241],{},"クリエイターにとっての勝負は、ツールの種類ではなく**ツールの\"つなげ方\"**だと、この半年で本気で思うようになりました。AIに使われるのではなく、自分のワークフローに組み込んで使い倒す側に回れるかどうか。",[24,239,240],{},"今日Skillを1個作るだけで、来週の自分の時間がまるっと変わります","。",[20,243,244],{},"もし試したら、ぜひ感想を教えてください。私のXまでDMで送ってもらえると、めちゃくちゃ嬉しいです。",[29,246],{},[20,248,249],{},[24,250,251],{},"次号の記事案",[44,253,254,260,266],{},[47,255,256,259],{},[24,257,258],{},"案1：「私のSKILL.md全部見せます」"," — ZYL0ブログの実SKILL.mdをそのまま公開して、自作するときの叩き台として使えるようにする企画。",[47,261,262,265],{},[24,263,264],{},"案2：「MCP接続でいちばん\"効いた\"5つのサーバー」"," — 私が実際に毎日使っているMCPサーバーを5つ厳選して、設定手順と効果を共有する。",[47,267,268,271],{},[24,269,270],{},"案3：「Claude Designでサムネを30秒で作る最短プロンプト」"," — 動画クリエイター向けに、サムネ専用の\"型プロンプト\"だけを掘り下げる短編。",[29,273],{},[20,275,276],{},[277,278,279,280,285],"em",{},"免責事項：本記事は情報提供・教育目的のものであり、特定の銘柄推奨や投資助言を構成するものではありません。記載のツール・技術情報は執筆時点のものであり、最新情報は各公式ドキュメントをご確認ください。生成AIをリサーチ・翻訳・推敲の補助として用いていますが、最終内容はZYL0が人手で確認しています。詳細は",[281,282,284],"a",{"href":283},"/disclaimer","免責事項","をご覧ください。",[29,287],{},[11,289,291,295,306,308,312,319,339,346,356,358,362,365,368,385,392,399,401,405,408,412,434,438,460,467,469,473,476,500,507,521,524,526,531,551,553],{"lang":290},"en",[15,292,294],{"id":293},"how-claude-cut-my-video-web-workflow-to-15-the-time","How Claude Cut My Video + Web Workflow to 1/5 the Time",[20,296,297,298,301,302,305],{},"I run a VC day job and a one-person YouTube/X/blog operation on the side, and since Claude Design dropped in April 2026, ",[24,299,300],{},"the 15 hours I used to spend each week on a single video plus a landing page collapsed to three",". Honestly, my first reaction was \"another AI hype cycle.\" Then I started chaining ",[24,303,304],{},"Skills, MCP, and Claude Design"," as one workflow — and the picture changed completely. This is the actual chain I run, with the time numbers attached.",[29,307],{},[32,309,311],{"id":310},"the-more-tools-less-time-trap","The \"More Tools, Less Time\" Trap",[20,313,314,315,318],{},"The most frustrating thing of the last two years has been that ",[24,316,317],{},"adding more tools didn't free up any time",".",[44,320,321,324,327,330,333,336],{},[47,322,323],{},"Scripts in ChatGPT",[47,325,326],{},"Editing in CapCut or DaVinci",[47,328,329],{},"Thumbnails in Canva",[47,331,332],{},"Landing pages in Figma → Webflow",[47,334,335],{},"Social copy in yet another AI",[47,337,338],{},"Research in yet another AI",[20,340,341,342,345],{},"If you're a one-person creator, you know this pain. \"AI saves time!\" — except your time evaporates into ",[24,343,344],{},"copy-paste and format-fixing between tools",". Back when I was just bolting AIs onto my workflow, I was still spending 20+ hours a week on creative tasks, and quality was inconsistent.",[20,347,348,349,351,352,355],{},"The thing that finally broke that loop was Claude's ",[24,350,77],{}," combination — used as a ",[277,353,354],{},"workflow",", not as three features.",[29,357],{},[32,359,361],{"id":360},"what-chaining-them-actually-means","What \"Chaining Them\" Actually Means",[20,363,364],{},"Each piece on its own is just another feature. Together they become a single operating loop.",[20,366,367],{},"Roughly:",[44,369,370,375,380],{},[47,371,372,374],{},[24,373,101],{}," — where you teach Claude your blog format, video script template, brand voice",[47,376,377,379],{},[24,378,107],{}," — the \"USB-C\" connector to Notion, Google Drive, YouTube, Figma, etc.",[47,381,382,384],{},[24,383,113],{}," — generates prototypes, slides, landing pages, thumbnail mockups via conversation",[20,386,387,388,391],{},"For my blog (ZYL0), I built a Skill called \"zyl0-blog-writer\" that knows my structure, voice, and frontmatter. That alone saves ",[24,389,390],{},"40–50 minutes per article"," because I no longer re-explain rules. Then I pointed MCP at my Notion, so \"turn last week's research notes into this week's video script\" gives me a usable draft immediately.",[20,393,394,395,398],{},"To be honest, the first setup (building the Skill, wiring the MCP servers) takes half a day. ",[24,396,397],{},"Most people quit there."," But on the other side of that wall, the leverage is non-linear.",[29,400],{},[32,402,404],{"id":403},"the-15-3-hour-breakdown","The 15 → 3 Hour Breakdown",[20,406,407],{},"Here's my actual Friday-shipping workflow before and after.",[139,409,411],{"id":410},"before-using-ais-as-separate-tools","Before (using AIs as separate tools)",[44,413,414,417,420,423,426,429],{},[47,415,416],{},"Mon: brainstorm in ChatGPT (2 hr)",[47,418,419],{},"Tue: write script in ChatGPT (3 hr)",[47,421,422],{},"Wed: thumbnail + LP in Figma + Canva (4 hr)",[47,424,425],{},"Thu: shoot + edit in CapCut (5 hr)",[47,427,428],{},"Fri: write social copy across multiple tools (1 hr)",[47,430,431],{},[24,432,433],{},"Total: ~15 hours/week",[139,435,437],{"id":436},"after-chained-skills-mcp-claude-design","After (chained Skills + MCP + Claude Design)",[44,439,440,443,446,449,452,455],{},[47,441,442],{},"Mon: drop notes in Notion (5 min) → 3 episode angles via my Skill (10 min)",[47,444,445],{},"Tue: \"Write the script using the Skill\" (30 min) → human edit (30 min)",[47,447,448],{},"Wed: thumbnail + LP prototype via Claude Design (45 min)",[47,450,451],{},"Thu: shoot stays the same (90 min); editing saves ~30 min via AI captions",[47,453,454],{},"Fri: cross-platform social copy through MCP (10 min)",[47,456,457],{},[24,458,459],{},"Total: ~3 hours/week (including 90 min shoot)",[20,461,462,463,466],{},"The single biggest win is that ",[24,464,465],{},"script → thumbnail → LP → social"," all live in one conversation. The copy-paste hellscape goes away.",[29,468],{},[32,470,472],{"id":471},"ok-where-do-i-start","\"OK, Where Do I Start?\"",[20,474,475],{},"If you want to try this yourself, the shortest path is three steps.",[208,477,478,484,494],{},[47,479,480,483],{},[24,481,482],{},"Subscribe to Claude Pro ($20/month)"," — Skills and Claude Design unlock here.",[47,485,486,489,490,318],{},[24,487,488],{},"Convert one of your repeating tasks into a single Skill."," For me it was \"blog post format.\" Just bullet-point what you want and ask Claude to save it as ",[491,492,493],"code",{},"SKILL.md",[47,495,496,499],{},[24,497,498],{},"Connect one MCP server"," — Notion, Google Drive, or YouTube — whichever you touch most.",[20,501,502,503,506],{},"Don't aim for perfect on day one. ",[24,504,505],{},"Even one Skill + one MCP connection visibly reduces your time."," In my first week I knew there was no going back.",[20,508,509,510,513,514,517,518],{},"The competitive edge for a creator in 2026 isn't which tools you own — it's ",[24,511,512],{},"how you chain them",". Whether you stay a tool user, or move up to being someone who ",[277,515,516],{},"operates the chain",", is the question. ",[24,519,520],{},"Building one Skill today flips next week of your life.",[20,522,523],{},"If you try this, I'd genuinely love to hear how it goes. DM me on X.",[29,525],{},[20,527,528],{},[24,529,530],{},"Next Issue Ideas",[44,532,533,539,545],{},[47,534,535,538],{},[24,536,537],{},"Idea 1: \"My actual SKILL.md, fully public\""," — Publish the real SKILL.md I use for ZYL0 so other creators can copy it as a starting template.",[47,540,541,544],{},[24,542,543],{},"Idea 2: \"5 MCP servers that actually moved the needle\""," — A short, opinionated list of the MCP servers I run daily, with setup steps and the time-saving impact of each.",[47,546,547,550],{},[24,548,549],{},"Idea 3: \"The 30-second thumbnail prompt\""," — A focused micro-post for video creators, just on the prompt template that produces a usable thumbnail in Claude Design in 30 seconds.",[29,552],{},[20,554,555],{},[277,556,557,558,561],{},"Disclaimer: This article is for informational and educational purposes only and does not constitute a recommendation of any specific security or investment advice. Tool and technology details reflect the state at the time of writing — please consult each vendor's official documentation for current information. Generative AI is used to assist research, translation, and proofreading; final content is reviewed by ZYL0. See the ",[281,559,560],{"href":283},"disclaimer page"," for details.",{"title":563,"searchDepth":564,"depth":564,"links":565},"",2,[566,567,568,573,574,575,576,580],{"id":34,"depth":564,"text":35},{"id":83,"depth":564,"text":84},{"id":133,"depth":564,"text":134,"children":569},[570,572],{"id":141,"depth":571,"text":142},3,{"id":167,"depth":571,"text":168},{"id":202,"depth":564,"text":203},{"id":310,"depth":564,"text":311},{"id":360,"depth":564,"text":361},{"id":403,"depth":564,"text":404,"children":577},[578,579],{"id":410,"depth":571,"text":411},{"id":436,"depth":571,"text":437},{"id":471,"depth":564,"text":472},"Skills・MCP・Claude Designを組み合わせて、企画→デザイン→動画台本→公開までを一本の流れで回したら、制作時間が驚くほど縮んだ。クリエイターが今すぐ試せる\"つなぎ方\"を実体験で共有する。","md",{"date":584,"image":585,"alt":586,"tags":587,"tagsEn":589,"published":591},"3rd May 2026","/blogs-img/blog-claude-skills-mcp-practical-guide.png","Claude Skills・MCP・Claude Design・動画制作のクリエイター向け実践フロー",[588],"AI活用",[590],"AI Tools",true,"/blogs/12-claude-skills-mcp-practical-guide",{"title":6,"description":581},"blogs/12-claude-skills-mcp-practical-guide","Zpu4oCUAfR8RHaHtrNxOOwhJvb_nciIuKvoM-ippwa8",{"id":597,"title":598,"body":599,"description":2968,"extension":582,"meta":2969,"navigation":591,"ogImage":2970,"path":2976,"seo":2977,"stem":2978,"__hash__":2979},"content/blogs/13-claude-skills-mcp-web-video-engineer-guide.md","Claude Skills・MCP・ウェブ制作・動画生成を実務で使い倒す：エンジニア向け実践ガイド2026 | Claude Skills, MCP, Website Generation, and Programmatic Video in Production: A Practical Engineer's Guide 2026",{"type":8,"value":600,"toc":2914},[601,1807,1809,2910],[11,602,603,607,616,627,629,633,693,695,699,702,711,718,790,793,797,800,803,806,911,913,917,920,923,926,967,971,974,1127,1131,1240,1243,1285,1292,1294,1298,1301,1304,1308,1311,1388,1391,1395,1398,1429,1432,1434,1438,1445,1448,1497,1500,1503,1506,1514,1517,1561,1564,1633,1636,1638,1641,1644,1648,1661,1667,1673,1677,1683,1693,1696,1702,1708,1712,1718,1724,1730,1732,1735,1796,1799,1801],{"lang":13},[15,604,606],{"id":605},"claude-skillsmcpウェブ制作動画生成を実務で使い倒すエンジニア向け実践ガイド2026","Claude Skills・MCP・ウェブ制作・動画生成を実務で使い倒す：エンジニア向け実践ガイド2026",[608,609,610],"blockquote",{},[20,611,612,615],{},[24,613,614],{},"バージョン注記",": 本記事は2026年5月時点の情報を基に執筆している。mcp Python SDK 1.27.0、MCP仕様 2025-11-25リビジョン、Remotion最新版を参照している。MCPの仕様更新は活発なため、公式ドキュメント（modelcontextprotocol.io）で最新情報を確認することを推奨する。",[20,617,618,619,622,623,626],{},"私は半導体プロセス開発からCVCに転身し、AWS（IoT Core・Lambda・DynamoDB・API Gateway）でゼロから河川洪水検知システムを6ヶ月で立ち上げた経験があります。",[24,620,621],{},"「動かしてみないと本当の落とし穴は見えない」","——これがエンジニアリング現場で身に染みた感覚で、Skills・MCP・Remotionも同じでした。今回はドキュメントを読むだけでは見えない",[24,624,625],{},"ハマりどころと最短実装パス","を、実際に手を動かした上で書きます。",[29,628],{},[32,630,632],{"id":631},"tldrこの記事でわかること","TL;DR：この記事でわかること",[634,635,636,649],"table",{},[637,638,639],"thead",{},[640,641,642,646],"tr",{},[643,644,645],"th",{},"テーマ",[643,647,648],{},"学べること",[650,651,652,661,669,677,685],"tbody",{},[640,653,654,658],{},[655,656,657],"td",{},"Claude Skills",[655,659,660],{},"SKILL.mdの仕組み・MCP との役割分担・実務での使い方",[640,662,663,666],{},[655,664,665],{},"MCP サーバー構築",[655,667,668],{},"Python FastMCP で50行以下のサーバーを作る最短手順",[640,670,671,674],{},[655,672,673],{},"ウェブサイト生成",[655,675,676],{},"Claude Code + Next.js / Nuxt 4 でのサイト生成ワークフロー",[640,678,679,682],{},[655,680,681],{},"Remotion 動画制作",[655,683,684],{},"コードで動画を書いてClaude Codeでレンダリングする実践手順",[640,686,687,690],{},[655,688,689],{},"ハマりポイント",[655,691,692],{},"それぞれの罠と回避策",[29,694],{},[32,696,698],{"id":697},"skills-と-mcp-は何が違うのか役割を正確に理解する","Skills と MCP は何が違うのか——役割を正確に理解する",[20,700,701],{},"Claude CodeやClaude.aiを使い込んでいくと、必ずぶつかる疑問がある。「Skills と MCP って結局どう使い分けるの？」だ。ドキュメントを読んでもピンとこない場合、次のメンタルモデルが効く。",[20,703,704,707,708,241],{},[24,705,706],{},"Skills = エージェントの「手順書」","、",[24,709,710],{},"MCP = エージェントの「外部接続線」",[20,712,713,714,717],{},"Skillsは",[491,715,716],{},".claude/skills/","以下に置いたSKILL.mdファイルだ。Claudeがタスクの文脈を判断し、関連するSkillを自動でロードして指示に従う。コードを書かず、マークダウンを書くだけで動く。一方MCPはJSON-RPC 2.0で動くクライアント・サーバープロトコルで、ClaudeをGitHub・データベース・社内APIなどの外部システムに繋ぐ。",[634,719,720,731],{},[637,721,722],{},[640,723,724,727,729],{},[643,725,726],{},"比較軸",[643,728,101],{},[643,730,107],{},[650,732,733,744,755,766,777],{},[640,734,735,738,741],{},[655,736,737],{},"実装言語",[655,739,740],{},"Markdown（SKILL.md）",[655,742,743],{},"Python / TypeScript / Go など",[640,745,746,749,752],{},[655,747,748],{},"コンテキスト消費",[655,750,751],{},"30〜50トークン（必要時のみロード）",[655,753,754],{},"50,000トークン超になることも",[640,756,757,760,763],{},[655,758,759],{},"用途",[655,761,762],{},"手順・ベストプラクティスの埋め込み",[655,764,765],{},"外部システムとのリアルタイム連携",[640,767,768,771,774],{},[655,769,770],{},"横断性",[655,772,773],{},"Claude Code / Cursor / Gemini CLI で共通動作",[655,775,776],{},"MCP対応クライアント全般で動作",[640,778,779,782,787],{},[655,780,781],{},"設定方法",[655,783,784,786],{},[491,785,716],{}," にファイルを置くだけ",[655,788,789],{},"サーバーを立ててclaude_desktop_config.jsonに登録",[20,791,792],{},"重要な点は「SkillはMCPツールを呼べる」という非対称性だ。Skillで手順を定義し、MCPで外部ツールを接続する——両方組み合わせることで初めてフルオートのエージェントができる。",[139,794,796],{"id":795},"skills-の実務パターン","Skills の実務パターン",[20,798,799],{},"2026年3月時点のSkillsエコシステムは、公式Anthropicスキル・検証済みサードパーティ・コミュニティスキルの三層構造になっている。frontend-designスキルが27万インストール超、Remotionスキルが週11.7万インストール、gws（Google Workspace）が公開3日で4,900 GitHubスターを記録した。",[20,801,802],{},"実務でSkillが威力を発揮するのは「同じ手順を何度も説明するのが嫌な場面」全般だ。独自DBスキーマを理解するSQLアシスタントSkill・社内コーディング規約を埋め込んだレビューSkill・独自データ形式の変換Skillなどを一度書けば、以降はプロンプト一行で呼び出せる。",[20,804,805],{},"SKILL.mdを自分で書く場合の最小構成は以下だ：",[807,808,812],"pre",{"className":809,"code":810,"language":811,"meta":563,"style":563},"language-markdown shiki shiki-themes dracula","---\nname: my-skill\ndescription: >\n  説明。Claudeがこれを見てスキルをロードするかを判断する。\n  トリガー条件を具体的に書くこと。\n---\n\n# My Skill\n\n## 手順\n\n1. まず〇〇を確認する\n2. 次に△△を実行する\n\n## 落とし穴\n\n- □□の場合は××してはいけない\n","markdown",[491,813,814,822,827,832,838,844,849,855,861,866,872,877,883,889,894,900,905],{"__ignoreMap":563},[815,816,819],"span",{"class":817,"line":818},"line",1,[815,820,821],{},"---\n",[815,823,824],{"class":817,"line":564},[815,825,826],{},"name: my-skill\n",[815,828,829],{"class":817,"line":571},[815,830,831],{},"description: >\n",[815,833,835],{"class":817,"line":834},4,[815,836,837],{},"  説明。Claudeがこれを見てスキルをロードするかを判断する。\n",[815,839,841],{"class":817,"line":840},5,[815,842,843],{},"  トリガー条件を具体的に書くこと。\n",[815,845,847],{"class":817,"line":846},6,[815,848,821],{},[815,850,852],{"class":817,"line":851},7,[815,853,854],{"emptyLinePlaceholder":591},"\n",[815,856,858],{"class":817,"line":857},8,[815,859,860],{},"# My Skill\n",[815,862,864],{"class":817,"line":863},9,[815,865,854],{"emptyLinePlaceholder":591},[815,867,869],{"class":817,"line":868},10,[815,870,871],{},"## 手順\n",[815,873,875],{"class":817,"line":874},11,[815,876,854],{"emptyLinePlaceholder":591},[815,878,880],{"class":817,"line":879},12,[815,881,882],{},"1. まず〇〇を確認する\n",[815,884,886],{"class":817,"line":885},13,[815,887,888],{},"2. 次に△△を実行する\n",[815,890,892],{"class":817,"line":891},14,[815,893,854],{"emptyLinePlaceholder":591},[815,895,897],{"class":817,"line":896},15,[815,898,899],{},"## 落とし穴\n",[815,901,903],{"class":817,"line":902},16,[815,904,854],{"emptyLinePlaceholder":591},[815,906,908],{"class":817,"line":907},17,[815,909,910],{},"- □□の場合は××してはいけない\n",[29,912],{},[32,914,916],{"id":915},"mcpサーバーを50行で作るpython-fastmcp-最短実装","MCPサーバーを50行で作る——Python FastMCP 最短実装",[20,918,919],{},"MCPの普及速度は前例がない。2024年11月の公開時に月200万SDK DLだったものが、OpenAI採用（2025年3月）・Microsoft統合（7月）・AWS対応（11月）を経て、2026年3月には9,700万DL/月、公開サーバー1万超に達した。ReactはこのDL数に3年かかったが、MCPは16ヶ月でやってのけた。",[20,921,922],{},"MCPが解決する問題はシンプルだ。社内CRM・請求システム・機能フラグサービスをAIエージェントから叩くには、従来クライアントAIごとに別の統合コードを書く必要があった。MCP対応サーバーを一つ作れば、Claude・ChatGPT・Cursor・Gemini全クライアントで動く。",[139,924,925],{"id":925},"セットアップ",[807,927,931],{"className":928,"code":929,"language":930,"meta":563,"style":563},"language-bash shiki shiki-themes dracula","# uv 推奨（pip でも可）\nuv add mcp\n# または\npip install mcp\n","bash",[491,932,933,939,952,957],{"__ignoreMap":563},[815,934,935],{"class":817,"line":818},[815,936,938],{"class":937},"shSDL","# uv 推奨（pip でも可）\n",[815,940,941,945,949],{"class":817,"line":564},[815,942,944],{"class":943},"sAOxA","uv",[815,946,948],{"class":947},"s-mGx"," add",[815,950,951],{"class":947}," mcp\n",[815,953,954],{"class":817,"line":571},[815,955,956],{"class":937},"# または\n",[815,958,959,962,965],{"class":817,"line":834},[815,960,961],{"class":943},"pip",[815,963,964],{"class":947}," install",[815,966,951],{"class":947},[139,968,970],{"id":969},"最小構成サーバーpython-fastmcp","最小構成サーバー（Python FastMCP）",[20,972,973],{},"以下は実際に動くMCPサーバーの最小実装だ。Tools・Resources・Promptsの三要素を全て含む：",[807,975,979],{"className":976,"code":977,"language":978,"meta":563,"style":563},"language-python shiki shiki-themes dracula","from mcp.server.fastmcp import FastMCP\n\nmcp = FastMCP(\"my-service\", json_response=True)\n\n# Tool: 副作用のある操作（POSTに相当）\n@mcp.tool()\ndef check_stock(sku: str) -> dict:\n    \"\"\"指定SKUの在庫数を返す\"\"\"\n    # 実際はDBクエリ等に置き換える\n    return {\"sku\": sku, \"quantity\": 42, \"warehouse\": \"tokyo\"}\n\n# Resource: 読み取り専用データ（GETに相当）\n@mcp.resource(\"products://catalog\")\ndef get_catalog() -> str:\n    \"\"\"商品カタログの一覧を返す\"\"\"\n    return \"SKU-001: Widget A\\nSKU-002: Widget B\"\n\n# Prompt: 再利用可能なプロンプトテンプレート\n@mcp.prompt()\ndef stock_check_prompt(sku: str) -> str:\n    \"\"\"在庫確認のためのプロンプトを生成\"\"\"\n    return f\"SKU {sku} の在庫を確認し、少ない場合は補充を提案してください。\"\n\nif __name__ == \"__main__\":\n    # ローカル開発: stdio\n    # mcp.run()\n    # リモート/本番: Streamable HTTP\n    mcp.run(transport=\"streamable-http\", host=\"0.0.0.0\", port=3050)\n","python",[491,980,981,986,990,995,999,1004,1009,1014,1019,1024,1029,1033,1038,1043,1048,1053,1058,1062,1068,1074,1080,1086,1092,1097,1103,1109,1115,1121],{"__ignoreMap":563},[815,982,983],{"class":817,"line":818},[815,984,985],{},"from mcp.server.fastmcp import FastMCP\n",[815,987,988],{"class":817,"line":564},[815,989,854],{"emptyLinePlaceholder":591},[815,991,992],{"class":817,"line":571},[815,993,994],{},"mcp = FastMCP(\"my-service\", json_response=True)\n",[815,996,997],{"class":817,"line":834},[815,998,854],{"emptyLinePlaceholder":591},[815,1000,1001],{"class":817,"line":840},[815,1002,1003],{},"# Tool: 副作用のある操作（POSTに相当）\n",[815,1005,1006],{"class":817,"line":846},[815,1007,1008],{},"@mcp.tool()\n",[815,1010,1011],{"class":817,"line":851},[815,1012,1013],{},"def check_stock(sku: str) -> dict:\n",[815,1015,1016],{"class":817,"line":857},[815,1017,1018],{},"    \"\"\"指定SKUの在庫数を返す\"\"\"\n",[815,1020,1021],{"class":817,"line":863},[815,1022,1023],{},"    # 実際はDBクエリ等に置き換える\n",[815,1025,1026],{"class":817,"line":868},[815,1027,1028],{},"    return {\"sku\": sku, \"quantity\": 42, \"warehouse\": \"tokyo\"}\n",[815,1030,1031],{"class":817,"line":874},[815,1032,854],{"emptyLinePlaceholder":591},[815,1034,1035],{"class":817,"line":879},[815,1036,1037],{},"# Resource: 読み取り専用データ（GETに相当）\n",[815,1039,1040],{"class":817,"line":885},[815,1041,1042],{},"@mcp.resource(\"products://catalog\")\n",[815,1044,1045],{"class":817,"line":891},[815,1046,1047],{},"def get_catalog() -> str:\n",[815,1049,1050],{"class":817,"line":896},[815,1051,1052],{},"    \"\"\"商品カタログの一覧を返す\"\"\"\n",[815,1054,1055],{"class":817,"line":902},[815,1056,1057],{},"    return \"SKU-001: Widget A\\nSKU-002: Widget B\"\n",[815,1059,1060],{"class":817,"line":907},[815,1061,854],{"emptyLinePlaceholder":591},[815,1063,1065],{"class":817,"line":1064},18,[815,1066,1067],{},"# Prompt: 再利用可能なプロンプトテンプレート\n",[815,1069,1071],{"class":817,"line":1070},19,[815,1072,1073],{},"@mcp.prompt()\n",[815,1075,1077],{"class":817,"line":1076},20,[815,1078,1079],{},"def stock_check_prompt(sku: str) -> str:\n",[815,1081,1083],{"class":817,"line":1082},21,[815,1084,1085],{},"    \"\"\"在庫確認のためのプロンプトを生成\"\"\"\n",[815,1087,1089],{"class":817,"line":1088},22,[815,1090,1091],{},"    return f\"SKU {sku} の在庫を確認し、少ない場合は補充を提案してください。\"\n",[815,1093,1095],{"class":817,"line":1094},23,[815,1096,854],{"emptyLinePlaceholder":591},[815,1098,1100],{"class":817,"line":1099},24,[815,1101,1102],{},"if __name__ == \"__main__\":\n",[815,1104,1106],{"class":817,"line":1105},25,[815,1107,1108],{},"    # ローカル開発: stdio\n",[815,1110,1112],{"class":817,"line":1111},26,[815,1113,1114],{},"    # mcp.run()\n",[815,1116,1118],{"class":817,"line":1117},27,[815,1119,1120],{},"    # リモート/本番: Streamable HTTP\n",[815,1122,1124],{"class":817,"line":1123},28,[815,1125,1126],{},"    mcp.run(transport=\"streamable-http\", host=\"0.0.0.0\", port=3050)\n",[139,1128,1130],{"id":1129},"claude-desktop-への登録","Claude Desktop への登録",[807,1132,1136],{"className":1133,"code":1134,"language":1135,"meta":563,"style":563},"language-json shiki shiki-themes dracula","{\n  \"mcpServers\": {\n    \"my-service\": {\n      \"command\": \"python\",\n      \"args\": [\"/path/to/server.py\"]\n    }\n  }\n}\n","json",[491,1137,1138,1144,1164,1178,1201,1225,1230,1235],{"__ignoreMap":563},[815,1139,1140],{"class":817,"line":818},[815,1141,1143],{"class":1142},"sCdxs","{\n",[815,1145,1146,1150,1154,1157,1161],{"class":817,"line":564},[815,1147,1149],{"class":1148},"sY8FZ","  \"",[815,1151,1153],{"class":1152},"sLL85","mcpServers",[815,1155,1156],{"class":1148},"\"",[815,1158,1160],{"class":1159},"s0Tla",":",[815,1162,1163],{"class":1142}," {\n",[815,1165,1166,1169,1172,1174,1176],{"class":817,"line":571},[815,1167,1168],{"class":1148},"    \"",[815,1170,1171],{"class":1152},"my-service",[815,1173,1156],{"class":1148},[815,1175,1160],{"class":1159},[815,1177,1163],{"class":1142},[815,1179,1180,1183,1186,1188,1190,1194,1196,1198],{"class":817,"line":834},[815,1181,1182],{"class":1148},"      \"",[815,1184,1185],{"class":1152},"command",[815,1187,1156],{"class":1148},[815,1189,1160],{"class":1159},[815,1191,1193],{"class":1192},"seVfx"," \"",[815,1195,978],{"class":947},[815,1197,1156],{"class":1192},[815,1199,1200],{"class":1142},",\n",[815,1202,1203,1205,1208,1210,1212,1215,1217,1220,1222],{"class":817,"line":840},[815,1204,1182],{"class":1148},[815,1206,1207],{"class":1152},"args",[815,1209,1156],{"class":1148},[815,1211,1160],{"class":1159},[815,1213,1214],{"class":1142}," [",[815,1216,1156],{"class":1192},[815,1218,1219],{"class":947},"/path/to/server.py",[815,1221,1156],{"class":1192},[815,1223,1224],{"class":1142},"]\n",[815,1226,1227],{"class":817,"line":846},[815,1228,1229],{"class":1142},"    }\n",[815,1231,1232],{"class":817,"line":851},[815,1233,1234],{"class":1142},"  }\n",[815,1236,1237],{"class":817,"line":857},[815,1238,1239],{"class":1142},"}\n",[139,1241,1242],{"id":1242},"トランスポートの選び方",[634,1244,1245,1257],{},[637,1246,1247],{},[640,1248,1249,1252,1254],{},[643,1250,1251],{},"トランスポート",[643,1253,759],{},[643,1255,1256],{},"注意",[650,1258,1259,1272],{},[640,1260,1261,1266,1269],{},[655,1262,1263],{},[491,1264,1265],{},"stdio",[655,1267,1268],{},"ローカル・Claude Desktop連携・開発",[655,1270,1271],{},"ネットワーク設定不要",[640,1273,1274,1279,1282],{},[655,1275,1276],{},[491,1277,1278],{},"streamable-http",[655,1280,1281],{},"リモート・チーム共有・クラウドデプロイ",[655,1283,1284],{},"2025年3月仕様で標準化。SSE は非推奨",[20,1286,1287,1288,1291],{},"TypeScriptで書く場合は",[491,1289,1290],{},"@modelcontextprotocol/sdk","とZodを使う。Python FastMCPと同じ三要素（Tool / Resource / Prompt）をサポートし、型安全性が高い。どちらの言語でも「ワイヤプロトコルはJSON-RPC 2.0で共通」なので、PythonサーバーにTypeScriptクライアントを繋ぐことも普通に動く。",[29,1293],{},[32,1295,1297],{"id":1296},"claude-code-でウェブサイトを生成するclaudemdとskillの組み合わせ","Claude Code でウェブサイトを生成する——CLAUDE.mdとSkillの組み合わせ",[20,1299,1300],{},"2026年初頭時点でClaude Codeは全GitHubコミットの4%を生成しており、VS Codeへの日次インストールは2,900万に達した。「バイブコーディング」と呼ばれるこのワークフローは、エンジニア経験ゼロの人でもNext.jsアプリを作れるレベルに成熟している。",[20,1302,1303],{},"ただしClaudeに「サイト作って」と言うだけでは、Interフォント・パープルグラデーション・白背景というお約束の「AI生成デザイン」が出てくる。これを回避するのがCLAUDE.mdとSkillの組み合わせだ。",[139,1305,1307],{"id":1306},"claudemdの位置づけ","CLAUDE.mdの位置づけ",[20,1309,1310],{},"プロジェクトルートに置くCLAUDE.mdはClaude Codeがセッション開始時に自動読み込みする設定ファイルだ。ここに「プロジェクトのコンテキスト」を書く：",[807,1312,1314],{"className":809,"code":1313,"language":811,"meta":563,"style":563},"# Project: MyApp\n\n## スタック\n- Nuxt 4 (Nuxt Content 3, Vue 3 Composition API)\n- Tailwind CSS v4, shadcn/ui\n- Vercel デプロイ\n\n## ルール\n- コミット前に必ずビルドを通す\n- TypeScript strict モード必須\n- MDX コンポーネントは使わない（Nuxt Content の CommonMark のみ）\n\n## 禁止事項\n- console.log を残したままコミットしない\n- any 型の使用\n",[491,1315,1316,1321,1325,1330,1335,1340,1345,1349,1354,1359,1364,1369,1373,1378,1383],{"__ignoreMap":563},[815,1317,1318],{"class":817,"line":818},[815,1319,1320],{},"# Project: MyApp\n",[815,1322,1323],{"class":817,"line":564},[815,1324,854],{"emptyLinePlaceholder":591},[815,1326,1327],{"class":817,"line":571},[815,1328,1329],{},"## スタック\n",[815,1331,1332],{"class":817,"line":834},[815,1333,1334],{},"- Nuxt 4 (Nuxt Content 3, Vue 3 Composition API)\n",[815,1336,1337],{"class":817,"line":840},[815,1338,1339],{},"- Tailwind CSS v4, shadcn/ui\n",[815,1341,1342],{"class":817,"line":846},[815,1343,1344],{},"- Vercel デプロイ\n",[815,1346,1347],{"class":817,"line":851},[815,1348,854],{"emptyLinePlaceholder":591},[815,1350,1351],{"class":817,"line":857},[815,1352,1353],{},"## ルール\n",[815,1355,1356],{"class":817,"line":863},[815,1357,1358],{},"- コミット前に必ずビルドを通す\n",[815,1360,1361],{"class":817,"line":868},[815,1362,1363],{},"- TypeScript strict モード必須\n",[815,1365,1366],{"class":817,"line":874},[815,1367,1368],{},"- MDX コンポーネントは使わない（Nuxt Content の CommonMark のみ）\n",[815,1370,1371],{"class":817,"line":879},[815,1372,854],{"emptyLinePlaceholder":591},[815,1374,1375],{"class":817,"line":885},[815,1376,1377],{},"## 禁止事項\n",[815,1379,1380],{"class":817,"line":891},[815,1381,1382],{},"- console.log を残したままコミットしない\n",[815,1384,1385],{"class":817,"line":896},[815,1386,1387],{},"- any 型の使用\n",[20,1389,1390],{},"CLAUDE.mdとSkillの役割分担は明確だ。CLAUDE.mdは「このプロジェクトの文脈」、Skillは「このタスクのやり方」。両方あることで、プロジェクトを知りつつ特定作業を正しくこなすエージェントができる。",[139,1392,1394],{"id":1393},"nextjs-nuxt-でのサイト生成ワークフロー","Next.js / Nuxt でのサイト生成ワークフロー",[20,1396,1397],{},"実際に動くフローは以下になる：",[208,1399,1400,1406,1415,1423],{},[47,1401,1402,1405],{},[24,1403,1404],{},"CLAUDE.mdを作成",": スタック・命名規則・禁止事項を記述",[47,1407,1408,1411,1412],{},[24,1409,1410],{},"公式または自作Skillを追加",": ",[491,1413,1414],{},"npx skills add frontend-design",[47,1416,1417,1411,1420],{},[24,1418,1419],{},"プランモードで要件確認",[491,1421,1422],{},"claude --plan \"〇〇なランディングページを作りたい\"",[47,1424,1425,1428],{},[24,1426,1427],{},"イテレーティブに実装",": 一度に全部頼まず、セクション単位で進める",[20,1430,1431],{},"重要なのはステップ3のプランモードだ。いきなり実装させると「間違った問題を解くコード」が生成されることがある。まずClaudeに既存のコードベースを探索させ、変更箇所・影響範囲・エッジケースを特定したプランを出させる。プランを確認してからイエスと言うだけで、実装ミスの大半を防げる。",[29,1433],{},[32,1435,1437],{"id":1436},"claude-code-remotion-で動画をコードで書く","Claude Code + Remotion で動画をコードで書く",[20,1439,1440,1441,1444],{},"「動画をコードで管理する」という発想は、フロントエンドエンジニアには自然に受け入れられる。Remotionはまさにそれを実現するReactベースの動画フレームワークで、",[491,1442,1443],{},"useCurrentFrame()","でフレーム番号を取得しアニメーションをコードで記述する。Claude Codeとの組み合わせは「プロンプトで動画を書く」ワークフローを実現する。",[139,1446,925],{"id":1447},"セットアップ-1",[807,1449,1451],{"className":928,"code":1450,"language":930,"meta":563,"style":563},"# Remotionプロジェクトを作成\nnpx create-video@latest my-video-project\ncd my-video-project\n\n# Agent Skillsをインストール（Remotionチームが提供するベストプラクティス集）\nnpx skills add remotion-dev/skills\n",[491,1452,1453,1458,1469,1476,1480,1485],{"__ignoreMap":563},[815,1454,1455],{"class":817,"line":818},[815,1456,1457],{"class":937},"# Remotionプロジェクトを作成\n",[815,1459,1460,1463,1466],{"class":817,"line":564},[815,1461,1462],{"class":943},"npx",[815,1464,1465],{"class":947}," create-video@latest",[815,1467,1468],{"class":947}," my-video-project\n",[815,1470,1471,1474],{"class":817,"line":571},[815,1472,1473],{"class":1152},"cd",[815,1475,1468],{"class":947},[815,1477,1478],{"class":817,"line":834},[815,1479,854],{"emptyLinePlaceholder":591},[815,1481,1482],{"class":817,"line":840},[815,1483,1484],{"class":937},"# Agent Skillsをインストール（Remotionチームが提供するベストプラクティス集）\n",[815,1486,1487,1489,1492,1494],{"class":817,"line":846},[815,1488,1462],{"class":943},[815,1490,1491],{"class":947}," skills",[815,1493,948],{"class":947},[815,1495,1496],{"class":947}," remotion-dev/skills\n",[20,1498,1499],{},"SkillsをインストールするとClaude Codeがリモーションの規約を理解し、正しいコンポーネント構造でコードを生成できるようになる。38種類以上のカテゴリがあり、アニメーション・3D・字幕・音声・チャート・トランジションをカバーする。",[139,1501,1502],{"id":1502},"実際のプロンプト例",[20,1504,1505],{},"良いプロンプトの書き方にはコツがある。具体的な数字・解像度・秒数を最初に宣言し、シーンの境界を明示する：",[807,1507,1512],{"className":1508,"code":1510,"language":1511,"meta":563},[1509],"language-text","1920x1080px、30fps、10秒の動画を作って。\n\n0-2秒: ロゴフェードイン（中央配置、白背景）\n2-6秒: 3つの機能を順番にスライドイン（左から右）\n        - \"高速\" + 稲妻アイコン\n        - \"安全\" + シールドアイコン\n        - \"簡単\" + チェックアイコン\n6-9秒: CTAボタンが拡大して登場「今すぐ試す」\n9-10秒: フェードアウト\n\nカラー: bg #0a0a0a, accent #7c3aed, text white\n","text",[491,1513,1510],{"__ignoreMap":563},[20,1515,1516],{},"生成されたコードはRemotionスタジオでリアルタイムプレビューし、問題なければレンダリングする：",[807,1518,1520],{"className":928,"code":1519,"language":930,"meta":563,"style":563},"# プレビュー\nnpx remotion studio\n\n# レンダリング（MP4）\nnpx remotion render MyComposition out/video.mp4\n",[491,1521,1522,1527,1537,1541,1546],{"__ignoreMap":563},[815,1523,1524],{"class":817,"line":818},[815,1525,1526],{"class":937},"# プレビュー\n",[815,1528,1529,1531,1534],{"class":817,"line":564},[815,1530,1462],{"class":943},[815,1532,1533],{"class":947}," remotion",[815,1535,1536],{"class":947}," studio\n",[815,1538,1539],{"class":817,"line":571},[815,1540,854],{"emptyLinePlaceholder":591},[815,1542,1543],{"class":817,"line":834},[815,1544,1545],{"class":937},"# レンダリング（MP4）\n",[815,1547,1548,1550,1552,1555,1558],{"class":817,"line":840},[815,1549,1462],{"class":943},[815,1551,1533],{"class":947},[815,1553,1554],{"class":947}," render",[815,1556,1557],{"class":947}," MyComposition",[815,1559,1560],{"class":947}," out/video.mp4\n",[139,1562,1563],{"id":1563},"ユースケース別の向き不向き",[634,1565,1566,1579],{},[637,1567,1568],{},[640,1569,1570,1573,1576],{},[643,1571,1572],{},"ユースケース",[643,1574,1575],{},"向いている",[643,1577,1578],{},"向いていない",[650,1580,1581,1592,1602,1612,1623],{},[640,1582,1583,1586,1589],{},[655,1584,1585],{},"製品デモ動画",[655,1587,1588],{},"◎ データと連動した動的更新が容易",[655,1590,1591],{},"—",[640,1593,1594,1597,1600],{},[655,1595,1596],{},"データビジュアライゼーション",[655,1598,1599],{},"◎ コードで数値を動的に渡せる",[655,1601,1591],{},[640,1603,1604,1607,1610],{},[655,1605,1606],{},"SNS縦型クリップ",[655,1608,1609],{},"◎ 9:16を指定するだけ",[655,1611,1591],{},[640,1613,1614,1617,1620],{},[655,1615,1616],{},"人物が話す動画",[655,1618,1619],{},"△ HeyGen等の専用ツールが優勢",[655,1621,1622],{},"複雑なリップシンク",[640,1624,1625,1628,1631],{},[655,1626,1627],{},"長尺映像（10分超）",[655,1629,1630],{},"△ シーン管理が煩雑になる",[655,1632,1591],{},[20,1634,1635],{},"ローカルレンダリングをするのでクラウド動画生成ツールのウォーターマーク・クレジット制限は一切関係ない。「ビルドアーティファクトとしての動画」という考え方で、製品変更のたびに動画をCI/CDで自動更新するパイプラインを組む事例もすでに登場している。",[29,1637],{},[32,1639,1640],{"id":1640},"ハマりポイントと回避策",[20,1642,1643],{},"実際に試してハマった点を正直に書く。",[139,1645,1647],{"id":1646},"mcp-関連","MCP 関連",[20,1649,1650,1653,1654,1656,1657,1660],{},[24,1651,1652],{},"SSEトランスポートを使っていてエラーが出る",": 2025年3月のMCP仕様アップデートでSSE（Server-Sent Events）トランスポートは非推奨になった。リモート接続には必ず",[491,1655,1278],{},"を使う。FastMCPなら",[491,1658,1659],{},"mcp.run(transport=\"streamable-http\")","に変えるだけで移行できる。",[20,1662,1663,1666],{},[24,1664,1665],{},"MCP サーバーを複数入れたら起動が遅くなった",": 5サーバー・58ツール構成だとコンテキスト消費が55,000トークンを超えることがある。AnthropicのTool Search機能（オンデマンドロード）を有効にすると約85%削減できる。モノリシックなサーバーを避け、用途別に小さく分割すること。",[20,1668,1669,1672],{},[24,1670,1671],{},"セキュリティ",": OWASP MCP Top 10（2025年公開）に従いサーバーを審査する。特にプロンプトインジェクション（ツールのdescriptionに悪意ある指示を埋め込む攻撃）に注意。コミュニティのサーバーは使用前にコードレビュー必須。",[139,1674,1676],{"id":1675},"skills-関連","Skills 関連",[20,1678,1679,1682],{},[24,1680,1681],{},"スキルが期待通りにトリガーされない",": descriptionフィールドが曖昧だとClaudeがスキルをロードしない。「〇〇というキーワードが出たら必ずこのSkillを使え」という強い表現を入れること。",[20,1684,1685,1688,1689,1692],{},[24,1686,1687],{},"コンテキスト上限付近でSkillが無視される",": セッションが長くなりコンテキストの70〜85%超えると精度が落ちる。",[491,1690,1691],{},"/compact","でコンテキストを圧縮するか、新しいセッションで継続する。",[139,1694,1695],{"id":1695},"ウェブサイト生成関連",[20,1697,1698,1701],{},[24,1699,1700],{},"一度に全部作らせようとした",": 「ECサイトを全部作って」は失敗率が高い。コンポーネント単位・ページ単位でイテレーティブに進めること。プランモードで方向性を確認してから実装させる。",[20,1703,1704,1707],{},[24,1705,1706],{},"生成コードをそのままコミットした",": ACM 2025年の研究で、LLMのコードは人間比で論理エラーが1.75倍多い可能性が示されている。テストを通してからコミットを徹底する。",[139,1709,1711],{"id":1710},"remotion-関連","Remotion 関連",[20,1713,1714,1717],{},[24,1715,1716],{},"最初から複雑な動画を作ろうとした",": 5秒のサンプルから始め、背景色→テキスト→アニメーション→複数シーンの順に積み上げること。",[20,1719,1720,1723],{},[24,1721,1722],{},"曖昧な指示を出した",": 「80px」「30フレーム（1秒）」のように数値で指定するとClaude Codeの精度が上がる。「大きいフォント」「ゆっくりフェード」は精度が下がる。",[20,1725,1726,1729],{},[24,1727,1728],{},"シーン間でキャラクターの外見が変わる",": Remotionは静的アセットを直接コードで参照するため、画像ファイルを固定すれば解決する。複雑な人物動画はHeyGen等の専用ツールを併用する。",[29,1731],{},[32,1733,1734],{"id":1734},"まとめと次のステップ",[634,1736,1737,1750],{},[637,1738,1739],{},[640,1740,1741,1744,1747],{},[643,1742,1743],{},"やること",[643,1745,1746],{},"優先度",[643,1748,1749],{},"所要時間",[650,1751,1752,1763,1773,1786],{},[640,1753,1754,1757,1760],{},[655,1755,1756],{},"MCPサーバーを一つ作る（社内API連携）",[655,1758,1759],{},"高",[655,1761,1762],{},"1〜2時間",[640,1764,1765,1768,1770],{},[655,1766,1767],{},"プロジェクトにCLAUDE.mdを追加",[655,1769,1759],{},[655,1771,1772],{},"30分",[640,1774,1775,1780,1783],{},[655,1776,1777,1779],{},[491,1778,1414],{}," を試す",[655,1781,1782],{},"中",[655,1784,1785],{},"10分",[640,1787,1788,1791,1793],{},[655,1789,1790],{},"Remotionで30秒のデモ動画を作る",[655,1792,1782],{},[655,1794,1795],{},"2〜3時間",[20,1797,1798],{},"Claude Codeがコミット全体の4%を生成し、Spotifyのエンジニアが2025年12月以降手でコードを書いていないという現在、これらのツールへの習熟は「あると便利」から「ないと遅い」に変わりつつある。まず一つのMCPサーバーかSkillから始め、「毎回説明するのが面倒なこと」を自動化するところから入るのが最短距離だ。",[29,1800],{},[20,1802,1803],{},[277,1804,279,1805,285],{},[281,1806,284],{"href":283},[29,1808],{},[11,1810,1811,1815,1823,1834,1836,1840,1893,1895,1899,1902,1911,1917,1992,1999,2003,2006,2009,2012,2092,2094,2098,2101,2104,2107,2138,2142,2145,2272,2276,2358,2362,2403,2409,2411,2415,2418,2421,2425,2428,2502,2505,2509,2512,2541,2544,2546,2550,2556,2559,2602,2605,2609,2612,2618,2621,2660,2664,2731,2734,2736,2740,2743,2746,2757,2763,2773,2776,2785,2794,2798,2804,2810,2814,2820,2826,2832,2834,2838,2899,2902,2904],{"lang":290},[15,1812,1814],{"id":1813},"claude-skills-mcp-website-generation-and-programmatic-video-in-production-a-practical-engineers-guide-2026","Claude Skills, MCP, Website Generation, and Programmatic Video in Production: A Practical Engineer's Guide 2026",[608,1816,1817],{},[20,1818,1819,1822],{},[24,1820,1821],{},"Version note",": This article is based on information as of May 2026. It references mcp Python SDK 1.27.0, MCP spec revision 2025-11-25, and the latest Remotion release. The MCP spec evolves rapidly, so verify the latest information at modelcontextprotocol.io.",[20,1824,1825,1826,1829,1830,1833],{},"I came up through semiconductor process development before moving to corporate VC, and I built a flood-detection IoT system from scratch on AWS (IoT Core, Lambda, DynamoDB, API Gateway) in about six months. The single most reliable lesson from that work: ",[24,1827,1828],{},"the real gotchas only show up when you run the code",". Skills, MCP, and Remotion behave the same way. So this piece is the ",[24,1831,1832],{},"shortest implementation path plus the actual gotchas"," I hit running everything end-to-end.",[29,1835],{},[32,1837,1839],{"id":1838},"tldr-what-youll-learn","TL;DR — What You'll Learn",[634,1841,1842,1852],{},[637,1843,1844],{},[640,1845,1846,1849],{},[643,1847,1848],{},"Topic",[643,1850,1851],{},"What You'll Pick Up",[650,1853,1854,1861,1869,1877,1885],{},[640,1855,1856,1858],{},[655,1857,657],{},[655,1859,1860],{},"How SKILL.md works, its split with MCP, day-to-day patterns",[640,1862,1863,1866],{},[655,1864,1865],{},"Building MCP servers",[655,1867,1868],{},"The shortest path to a Python FastMCP server in under 50 lines",[640,1870,1871,1874],{},[655,1872,1873],{},"Website generation",[655,1875,1876],{},"Site generation workflow with Claude Code + Next.js / Nuxt 4",[640,1878,1879,1882],{},[655,1880,1881],{},"Remotion video",[655,1883,1884],{},"Writing video as code and rendering it through Claude Code",[640,1886,1887,1890],{},[655,1888,1889],{},"Pitfalls",[655,1891,1892],{},"The traps in each area and how to dodge them",[29,1894],{},[32,1896,1898],{"id":1897},"skills-vs-mcp-getting-the-mental-model-right","Skills vs MCP — Getting the Mental Model Right",[20,1900,1901],{},"If you spend any real time with Claude Code or Claude.ai, you'll hit the same question: \"How do I actually decide between Skills and MCP?\" Reading the docs doesn't always make it click. The mental model that does:",[20,1903,1904,1907,1908],{},[24,1905,1906],{},"Skills = the agent's \"playbook\"",", ",[24,1909,1910],{},"MCP = the agent's \"external connections.\"",[20,1912,1913,1914,1916],{},"Skills are SKILL.md files placed under ",[491,1915,716],{},". Claude reads the task context, automatically loads the relevant skill, and follows its instructions. You write Markdown — no code. MCP, in contrast, is a client-server protocol over JSON-RPC 2.0 that connects Claude to external systems like GitHub, databases, or internal APIs.",[634,1918,1919,1930],{},[637,1920,1921],{},[640,1922,1923,1926,1928],{},[643,1924,1925],{},"Dimension",[643,1927,101],{},[643,1929,107],{},[650,1931,1932,1943,1954,1965,1976],{},[640,1933,1934,1937,1940],{},[655,1935,1936],{},"Implementation language",[655,1938,1939],{},"Markdown (SKILL.md)",[655,1941,1942],{},"Python / TypeScript / Go, etc.",[640,1944,1945,1948,1951],{},[655,1946,1947],{},"Context consumption",[655,1949,1950],{},"30–50 tokens (loaded only when needed)",[655,1952,1953],{},"Can exceed 50,000 tokens",[640,1955,1956,1959,1962],{},[655,1957,1958],{},"Use case",[655,1960,1961],{},"Embedding procedures and best practices",[655,1963,1964],{},"Real-time integration with external systems",[640,1966,1967,1970,1973],{},[655,1968,1969],{},"Cross-tool",[655,1971,1972],{},"Works in Claude Code / Cursor / Gemini CLI",[655,1974,1975],{},"Works in any MCP-capable client",[640,1977,1978,1981,1986],{},[655,1979,1980],{},"Setup",[655,1982,1983,1984],{},"Drop a file under ",[491,1985,716],{},[655,1987,1988,1989],{},"Run a server and register it in ",[491,1990,1991],{},"claude_desktop_config.json",[20,1993,1994,1995,1998],{},"The key asymmetry is: ",[24,1996,1997],{},"a Skill can call MCP tools, but not the other way around."," Define procedures with Skills, connect external tools with MCP — putting them together is what unlocks fully automated agents.",[139,2000,2002],{"id":2001},"real-world-skills-patterns","Real-World Skills Patterns",[20,2004,2005],{},"As of March 2026, the Skills ecosystem is structured in three layers: official Anthropic skills, vetted third-party skills, and community skills. The frontend-design skill has crossed 270K installs, the Remotion skill is doing 117K installs per week, and gws (Google Workspace) hit 4,900 GitHub stars within three days of release.",[20,2007,2008],{},"Skills shine in any situation where \"I'm tired of explaining the same procedure over and over.\" Write a SQL assistant skill that knows your custom DB schema once, embed your team's coding conventions into a review skill, build a converter skill for your proprietary data format — after that, a single one-line prompt invokes them.",[20,2010,2011],{},"The minimum SKILL.md, when you write your own:",[807,2013,2015],{"className":809,"code":2014,"language":811,"meta":563,"style":563},"---\nname: my-skill\ndescription: >\n  Description here. Claude reads this to decide whether to load the skill.\n  Spell out the trigger conditions concretely.\n---\n\n# My Skill\n\n## Steps\n\n1. First, check X.\n2. Then, run Y.\n\n## Pitfalls\n\n- When Z, do not do W.\n",[491,2016,2017,2021,2025,2029,2034,2039,2043,2047,2051,2055,2060,2064,2069,2074,2078,2083,2087],{"__ignoreMap":563},[815,2018,2019],{"class":817,"line":818},[815,2020,821],{},[815,2022,2023],{"class":817,"line":564},[815,2024,826],{},[815,2026,2027],{"class":817,"line":571},[815,2028,831],{},[815,2030,2031],{"class":817,"line":834},[815,2032,2033],{},"  Description here. Claude reads this to decide whether to load the skill.\n",[815,2035,2036],{"class":817,"line":840},[815,2037,2038],{},"  Spell out the trigger conditions concretely.\n",[815,2040,2041],{"class":817,"line":846},[815,2042,821],{},[815,2044,2045],{"class":817,"line":851},[815,2046,854],{"emptyLinePlaceholder":591},[815,2048,2049],{"class":817,"line":857},[815,2050,860],{},[815,2052,2053],{"class":817,"line":863},[815,2054,854],{"emptyLinePlaceholder":591},[815,2056,2057],{"class":817,"line":868},[815,2058,2059],{},"## Steps\n",[815,2061,2062],{"class":817,"line":874},[815,2063,854],{"emptyLinePlaceholder":591},[815,2065,2066],{"class":817,"line":879},[815,2067,2068],{},"1. First, check X.\n",[815,2070,2071],{"class":817,"line":885},[815,2072,2073],{},"2. Then, run Y.\n",[815,2075,2076],{"class":817,"line":891},[815,2077,854],{"emptyLinePlaceholder":591},[815,2079,2080],{"class":817,"line":896},[815,2081,2082],{},"## Pitfalls\n",[815,2084,2085],{"class":817,"line":902},[815,2086,854],{"emptyLinePlaceholder":591},[815,2088,2089],{"class":817,"line":907},[815,2090,2091],{},"- When Z, do not do W.\n",[29,2093],{},[32,2095,2097],{"id":2096},"building-an-mcp-server-in-50-lines-the-python-fastmcp-shortcut","Building an MCP Server in 50 Lines — The Python FastMCP Shortcut",[20,2099,2100],{},"MCP's adoption curve is unprecedented. From 2 million SDK downloads/month at launch (November 2024), it crossed 22 million when OpenAI adopted (March 2025), 45 million when Microsoft integrated (July), 68 million when AWS came on (November), and reached 97 million per month with over 10,000 public servers by March 2026. React took three years to reach those download numbers; MCP did it in 16 months.",[20,2102,2103],{},"The problem MCP solves is simple: previously, hooking your internal CRM, billing system, or feature-flag service into AI agents meant writing separate integration code for every AI client. Build one MCP-compatible server, and it works from Claude, ChatGPT, Cursor, and Gemini.",[139,2105,1980],{"id":2106},"setup",[807,2108,2110],{"className":928,"code":2109,"language":930,"meta":563,"style":563},"# uv recommended (pip works too)\nuv add mcp\n# or\npip install mcp\n",[491,2111,2112,2117,2125,2130],{"__ignoreMap":563},[815,2113,2114],{"class":817,"line":818},[815,2115,2116],{"class":937},"# uv recommended (pip works too)\n",[815,2118,2119,2121,2123],{"class":817,"line":564},[815,2120,944],{"class":943},[815,2122,948],{"class":947},[815,2124,951],{"class":947},[815,2126,2127],{"class":817,"line":571},[815,2128,2129],{"class":937},"# or\n",[815,2131,2132,2134,2136],{"class":817,"line":834},[815,2133,961],{"class":943},[815,2135,964],{"class":947},[815,2137,951],{"class":947},[139,2139,2141],{"id":2140},"minimal-server-python-fastmcp","Minimal Server (Python FastMCP)",[20,2143,2144],{},"Below is a minimal MCP server that actually runs. It includes all three primitives — Tools, Resources, and Prompts:",[807,2146,2148],{"className":976,"code":2147,"language":978,"meta":563,"style":563},"from mcp.server.fastmcp import FastMCP\n\nmcp = FastMCP(\"my-service\", json_response=True)\n\n# Tool: side-effecting operations (analogous to POST)\n@mcp.tool()\ndef check_stock(sku: str) -> dict:\n    \"\"\"Return the inventory count for the given SKU.\"\"\"\n    # In practice, replace with a DB query, etc.\n    return {\"sku\": sku, \"quantity\": 42, \"warehouse\": \"tokyo\"}\n\n# Resource: read-only data (analogous to GET)\n@mcp.resource(\"products://catalog\")\ndef get_catalog() -> str:\n    \"\"\"Return the product catalog listing.\"\"\"\n    return \"SKU-001: Widget A\\nSKU-002: Widget B\"\n\n# Prompt: a reusable prompt template\n@mcp.prompt()\ndef stock_check_prompt(sku: str) -> str:\n    \"\"\"Generate a prompt for checking inventory.\"\"\"\n    return f\"Check the stock for SKU {sku} and propose a restock if it is low.\"\n\nif __name__ == \"__main__\":\n    # Local dev: stdio\n    # mcp.run()\n    # Remote/production: Streamable HTTP\n    mcp.run(transport=\"streamable-http\", host=\"0.0.0.0\", port=3050)\n",[491,2149,2150,2154,2158,2162,2166,2171,2175,2179,2184,2189,2193,2197,2202,2206,2210,2215,2219,2223,2228,2232,2236,2241,2246,2250,2254,2259,2263,2268],{"__ignoreMap":563},[815,2151,2152],{"class":817,"line":818},[815,2153,985],{},[815,2155,2156],{"class":817,"line":564},[815,2157,854],{"emptyLinePlaceholder":591},[815,2159,2160],{"class":817,"line":571},[815,2161,994],{},[815,2163,2164],{"class":817,"line":834},[815,2165,854],{"emptyLinePlaceholder":591},[815,2167,2168],{"class":817,"line":840},[815,2169,2170],{},"# Tool: side-effecting operations (analogous to POST)\n",[815,2172,2173],{"class":817,"line":846},[815,2174,1008],{},[815,2176,2177],{"class":817,"line":851},[815,2178,1013],{},[815,2180,2181],{"class":817,"line":857},[815,2182,2183],{},"    \"\"\"Return the inventory count for the given SKU.\"\"\"\n",[815,2185,2186],{"class":817,"line":863},[815,2187,2188],{},"    # In practice, replace with a DB query, etc.\n",[815,2190,2191],{"class":817,"line":868},[815,2192,1028],{},[815,2194,2195],{"class":817,"line":874},[815,2196,854],{"emptyLinePlaceholder":591},[815,2198,2199],{"class":817,"line":879},[815,2200,2201],{},"# Resource: read-only data (analogous to GET)\n",[815,2203,2204],{"class":817,"line":885},[815,2205,1042],{},[815,2207,2208],{"class":817,"line":891},[815,2209,1047],{},[815,2211,2212],{"class":817,"line":896},[815,2213,2214],{},"    \"\"\"Return the product catalog listing.\"\"\"\n",[815,2216,2217],{"class":817,"line":902},[815,2218,1057],{},[815,2220,2221],{"class":817,"line":907},[815,2222,854],{"emptyLinePlaceholder":591},[815,2224,2225],{"class":817,"line":1064},[815,2226,2227],{},"# Prompt: a reusable prompt template\n",[815,2229,2230],{"class":817,"line":1070},[815,2231,1073],{},[815,2233,2234],{"class":817,"line":1076},[815,2235,1079],{},[815,2237,2238],{"class":817,"line":1082},[815,2239,2240],{},"    \"\"\"Generate a prompt for checking inventory.\"\"\"\n",[815,2242,2243],{"class":817,"line":1088},[815,2244,2245],{},"    return f\"Check the stock for SKU {sku} and propose a restock if it is low.\"\n",[815,2247,2248],{"class":817,"line":1094},[815,2249,854],{"emptyLinePlaceholder":591},[815,2251,2252],{"class":817,"line":1099},[815,2253,1102],{},[815,2255,2256],{"class":817,"line":1105},[815,2257,2258],{},"    # Local dev: stdio\n",[815,2260,2261],{"class":817,"line":1111},[815,2262,1114],{},[815,2264,2265],{"class":817,"line":1117},[815,2266,2267],{},"    # Remote/production: Streamable HTTP\n",[815,2269,2270],{"class":817,"line":1123},[815,2271,1126],{},[139,2273,2275],{"id":2274},"registering-with-claude-desktop","Registering With Claude Desktop",[807,2277,2278],{"className":1133,"code":1134,"language":1135,"meta":563,"style":563},[491,2279,2280,2284,2296,2308,2326,2346,2350,2354],{"__ignoreMap":563},[815,2281,2282],{"class":817,"line":818},[815,2283,1143],{"class":1142},[815,2285,2286,2288,2290,2292,2294],{"class":817,"line":564},[815,2287,1149],{"class":1148},[815,2289,1153],{"class":1152},[815,2291,1156],{"class":1148},[815,2293,1160],{"class":1159},[815,2295,1163],{"class":1142},[815,2297,2298,2300,2302,2304,2306],{"class":817,"line":571},[815,2299,1168],{"class":1148},[815,2301,1171],{"class":1152},[815,2303,1156],{"class":1148},[815,2305,1160],{"class":1159},[815,2307,1163],{"class":1142},[815,2309,2310,2312,2314,2316,2318,2320,2322,2324],{"class":817,"line":834},[815,2311,1182],{"class":1148},[815,2313,1185],{"class":1152},[815,2315,1156],{"class":1148},[815,2317,1160],{"class":1159},[815,2319,1193],{"class":1192},[815,2321,978],{"class":947},[815,2323,1156],{"class":1192},[815,2325,1200],{"class":1142},[815,2327,2328,2330,2332,2334,2336,2338,2340,2342,2344],{"class":817,"line":840},[815,2329,1182],{"class":1148},[815,2331,1207],{"class":1152},[815,2333,1156],{"class":1148},[815,2335,1160],{"class":1159},[815,2337,1214],{"class":1142},[815,2339,1156],{"class":1192},[815,2341,1219],{"class":947},[815,2343,1156],{"class":1192},[815,2345,1224],{"class":1142},[815,2347,2348],{"class":817,"line":846},[815,2349,1229],{"class":1142},[815,2351,2352],{"class":817,"line":851},[815,2353,1234],{"class":1142},[815,2355,2356],{"class":817,"line":857},[815,2357,1239],{"class":1142},[139,2359,2361],{"id":2360},"choosing-a-transport","Choosing a Transport",[634,2363,2364,2377],{},[637,2365,2366],{},[640,2367,2368,2371,2374],{},[643,2369,2370],{},"Transport",[643,2372,2373],{},"Use Case",[643,2375,2376],{},"Notes",[650,2378,2379,2391],{},[640,2380,2381,2385,2388],{},[655,2382,2383],{},[491,2384,1265],{},[655,2386,2387],{},"Local, Claude Desktop integration, development",[655,2389,2390],{},"No network setup required",[640,2392,2393,2397,2400],{},[655,2394,2395],{},[491,2396,1278],{},[655,2398,2399],{},"Remote, team-shared, cloud-deployed",[655,2401,2402],{},"Standardized in the March 2025 spec. SSE is deprecated",[20,2404,2405,2406,2408],{},"For TypeScript, use ",[491,2407,1290],{}," with Zod. It supports the same three primitives (Tool / Resource / Prompt) as Python FastMCP, with strong type safety. In either language, \"the wire protocol is JSON-RPC 2.0,\" so connecting a TypeScript client to a Python server just works.",[29,2410],{},[32,2412,2414],{"id":2413},"generating-websites-with-claude-code-combining-claudemd-and-skills","Generating Websites With Claude Code — Combining CLAUDE.md and Skills",[20,2416,2417],{},"As of early 2026, Claude Code generates 4% of all GitHub commits, with daily VS Code installs reaching 29 million. The \"vibe coding\" workflow has matured to the point where someone with zero engineering experience can ship a Next.js app.",[20,2419,2420],{},"That said, telling Claude \"make me a site\" still produces the familiar AI-generated look — Inter font, purple gradient, white background. The way to escape that is the combination of CLAUDE.md and Skills.",[139,2422,2424],{"id":2423},"where-claudemd-fits","Where CLAUDE.md Fits",[20,2426,2427],{},"A CLAUDE.md placed at the project root is auto-loaded by Claude Code at session start. Use it to capture \"what this project is\":",[807,2429,2431],{"className":809,"code":2430,"language":811,"meta":563,"style":563},"# Project: MyApp\n\n## Stack\n- Nuxt 4 (Nuxt Content 3, Vue 3 Composition API)\n- Tailwind CSS v4, shadcn/ui\n- Deployed on Vercel\n\n## Rules\n- Always make sure the build passes before committing.\n- TypeScript strict mode is required.\n- Don't use MDX components (Nuxt Content's CommonMark only).\n\n## Don't\n- Leave console.log calls in committed code.\n- Use the any type.\n",[491,2432,2433,2437,2441,2446,2450,2454,2459,2463,2468,2473,2478,2483,2487,2492,2497],{"__ignoreMap":563},[815,2434,2435],{"class":817,"line":818},[815,2436,1320],{},[815,2438,2439],{"class":817,"line":564},[815,2440,854],{"emptyLinePlaceholder":591},[815,2442,2443],{"class":817,"line":571},[815,2444,2445],{},"## Stack\n",[815,2447,2448],{"class":817,"line":834},[815,2449,1334],{},[815,2451,2452],{"class":817,"line":840},[815,2453,1339],{},[815,2455,2456],{"class":817,"line":846},[815,2457,2458],{},"- Deployed on Vercel\n",[815,2460,2461],{"class":817,"line":851},[815,2462,854],{"emptyLinePlaceholder":591},[815,2464,2465],{"class":817,"line":857},[815,2466,2467],{},"## Rules\n",[815,2469,2470],{"class":817,"line":863},[815,2471,2472],{},"- Always make sure the build passes before committing.\n",[815,2474,2475],{"class":817,"line":868},[815,2476,2477],{},"- TypeScript strict mode is required.\n",[815,2479,2480],{"class":817,"line":874},[815,2481,2482],{},"- Don't use MDX components (Nuxt Content's CommonMark only).\n",[815,2484,2485],{"class":817,"line":879},[815,2486,854],{"emptyLinePlaceholder":591},[815,2488,2489],{"class":817,"line":885},[815,2490,2491],{},"## Don't\n",[815,2493,2494],{"class":817,"line":891},[815,2495,2496],{},"- Leave console.log calls in committed code.\n",[815,2498,2499],{"class":817,"line":896},[815,2500,2501],{},"- Use the any type.\n",[20,2503,2504],{},"The split between CLAUDE.md and Skills is clean: CLAUDE.md is \"the context of this project,\" Skills are \"how to do this task.\" Together, you get an agent that understands the project and executes specific tasks correctly.",[139,2506,2508],{"id":2507},"site-generation-workflow-with-nextjs-nuxt","Site Generation Workflow With Next.js / Nuxt",[20,2510,2511],{},"A workflow that actually works in practice:",[208,2513,2514,2520,2527,2535],{},[47,2515,2516,2519],{},[24,2517,2518],{},"Create CLAUDE.md",": stack, naming conventions, things to avoid",[47,2521,2522,1411,2525],{},[24,2523,2524],{},"Add an official or custom Skill",[491,2526,1414],{},[47,2528,2529,1411,2532],{},[24,2530,2531],{},"Sanity-check requirements in plan mode",[491,2533,2534],{},"claude --plan \"I want a landing page that looks like X\"",[47,2536,2537,2540],{},[24,2538,2539],{},"Implement iteratively",": don't ask for the whole thing at once — go section by section",[20,2542,2543],{},"Step 3 is the critical one. Asking for an implementation directly sometimes produces \"code that solves the wrong problem.\" Have Claude explore the existing codebase first, identify the change locations, impact range, and edge cases, and surface them as a plan. Once the plan looks right, just say yes — that alone prevents most implementation mistakes.",[29,2545],{},[32,2547,2549],{"id":2548},"writing-video-as-code-with-claude-code-remotion","Writing Video as Code With Claude Code + Remotion",[20,2551,2552,2553,2555],{},"The idea of \"managing video in code\" lands naturally for front-end engineers. Remotion is exactly that — a React-based video framework where ",[491,2554,1443],{}," returns the current frame number and you describe animation in code. Combined with Claude Code, it produces a \"write video by prompt\" workflow.",[139,2557,1980],{"id":2558},"setup-1",[807,2560,2562],{"className":928,"code":2561,"language":930,"meta":563,"style":563},"# Create a Remotion project\nnpx create-video@latest my-video-project\ncd my-video-project\n\n# Install Agent Skills (best-practices bundle from the Remotion team)\nnpx skills add remotion-dev/skills\n",[491,2563,2564,2569,2577,2583,2587,2592],{"__ignoreMap":563},[815,2565,2566],{"class":817,"line":818},[815,2567,2568],{"class":937},"# Create a Remotion project\n",[815,2570,2571,2573,2575],{"class":817,"line":564},[815,2572,1462],{"class":943},[815,2574,1465],{"class":947},[815,2576,1468],{"class":947},[815,2578,2579,2581],{"class":817,"line":571},[815,2580,1473],{"class":1152},[815,2582,1468],{"class":947},[815,2584,2585],{"class":817,"line":834},[815,2586,854],{"emptyLinePlaceholder":591},[815,2588,2589],{"class":817,"line":840},[815,2590,2591],{"class":937},"# Install Agent Skills (best-practices bundle from the Remotion team)\n",[815,2593,2594,2596,2598,2600],{"class":817,"line":846},[815,2595,1462],{"class":943},[815,2597,1491],{"class":947},[815,2599,948],{"class":947},[815,2601,1496],{"class":947},[20,2603,2604],{},"Once the skills are in place, Claude Code understands Remotion conventions and generates code with the right component structure. There are 38+ categories covering animation, 3D, captions, audio, charts, and transitions.",[139,2606,2608],{"id":2607},"example-prompt","Example Prompt",[20,2610,2611],{},"There's a knack to writing good prompts: declare the concrete numbers — resolution, duration — up front, and make scene boundaries explicit:",[807,2613,2616],{"className":2614,"code":2615,"language":1511,"meta":563},[1509],"Create a 1920x1080px, 30fps, 10-second video.\n\n0–2s: Logo fades in (centered, white background)\n2–6s: Three features slide in one by one (left to right)\n        - \"Fast\" + lightning icon\n        - \"Safe\" + shield icon\n        - \"Easy\" + check icon\n6–9s: CTA button scales up: \"Try it now\"\n9–10s: Fade out\n\nColors: bg #0a0a0a, accent #7c3aed, text white\n",[491,2617,2615],{"__ignoreMap":563},[20,2619,2620],{},"Preview the generated code live in Remotion Studio, and once it looks right, render:",[807,2622,2624],{"className":928,"code":2623,"language":930,"meta":563,"style":563},"# Preview\nnpx remotion studio\n\n# Render (MP4)\nnpx remotion render MyComposition out/video.mp4\n",[491,2625,2626,2631,2639,2643,2648],{"__ignoreMap":563},[815,2627,2628],{"class":817,"line":818},[815,2629,2630],{"class":937},"# Preview\n",[815,2632,2633,2635,2637],{"class":817,"line":564},[815,2634,1462],{"class":943},[815,2636,1533],{"class":947},[815,2638,1536],{"class":947},[815,2640,2641],{"class":817,"line":571},[815,2642,854],{"emptyLinePlaceholder":591},[815,2644,2645],{"class":817,"line":834},[815,2646,2647],{"class":937},"# Render (MP4)\n",[815,2649,2650,2652,2654,2656,2658],{"class":817,"line":840},[815,2651,1462],{"class":943},[815,2653,1533],{"class":947},[815,2655,1554],{"class":947},[815,2657,1557],{"class":947},[815,2659,1560],{"class":947},[139,2661,2663],{"id":2662},"what-remotion-is-and-isnt-good-at","What Remotion Is and Isn't Good At",[634,2665,2666,2678],{},[637,2667,2668],{},[640,2669,2670,2672,2675],{},[643,2671,2373],{},[643,2673,2674],{},"Good Fit",[643,2676,2677],{},"Not a Good Fit",[650,2679,2680,2690,2700,2710,2721],{},[640,2681,2682,2685,2688],{},[655,2683,2684],{},"Product demo videos",[655,2686,2687],{},"◎ Easy to wire up to data and update dynamically",[655,2689,1591],{},[640,2691,2692,2695,2698],{},[655,2693,2694],{},"Data visualization",[655,2696,2697],{},"◎ Pass numbers in dynamically through code",[655,2699,1591],{},[640,2701,2702,2705,2708],{},[655,2703,2704],{},"Vertical social clips",[655,2706,2707],{},"◎ Just specify 9:16",[655,2709,1591],{},[640,2711,2712,2715,2718],{},[655,2713,2714],{},"Talking-head videos",[655,2716,2717],{},"△ Specialized tools like HeyGen win",[655,2719,2720],{},"Complex lip-sync",[640,2722,2723,2726,2729],{},[655,2724,2725],{},"Long-form footage (10+ min)",[655,2727,2728],{},"△ Scene management gets unwieldy",[655,2730,1591],{},[20,2732,2733],{},"Because rendering happens locally, watermarks and credit caps from cloud video generators don't apply at all. Treating \"video as a build artifact\" — auto-rebuilding the video in CI/CD whenever the product changes — is already showing up in real-world pipelines.",[29,2735],{},[32,2737,2739],{"id":2738},"pitfalls-and-how-to-avoid-them","Pitfalls and How to Avoid Them",[20,2741,2742],{},"Here, honestly, are the things that tripped me up.",[139,2744,107],{"id":2745},"mcp",[20,2747,2748,2751,2752,2754,2755,318],{},[24,2749,2750],{},"Errors when using SSE transport."," The March 2025 MCP spec update deprecated SSE (Server-Sent Events). For remote connections, always use ",[491,2753,1278],{},". With FastMCP, switching is just ",[491,2756,1659],{},[20,2758,2759,2762],{},[24,2760,2761],{},"Multiple MCP servers slowing startup."," A 5-server, 58-tool setup can push context consumption past 55,000 tokens. Anthropic's Tool Search feature (on-demand loading) cuts that by about 85%. Avoid monolithic servers — split by purpose into smaller ones.",[20,2764,2765,2768,2769,2772],{},[24,2766,2767],{},"Security."," Audit your servers against the OWASP MCP Top 10 (published in 2025). Watch especially for prompt injection (malicious instructions hidden in a tool's ",[491,2770,2771],{},"description","). Code-review community servers before using them.",[139,2774,101],{"id":2775},"skills",[20,2777,2778,2781,2782,2784],{},[24,2779,2780],{},"The skill doesn't trigger when expected."," A vague ",[491,2783,2771],{}," field means Claude won't load the skill. Use strong language like \"whenever the user mentions X, use this skill.\"",[20,2786,2787,2790,2791,2793],{},[24,2788,2789],{},"Skills get ignored near the context limit."," Once a session crosses 70–85% of the context window, accuracy drops. Use ",[491,2792,1691],{}," to compress context, or continue in a fresh session.",[139,2795,2797],{"id":2796},"website-generation","Website Generation",[20,2799,2800,2803],{},[24,2801,2802],{},"\"Build the whole thing at once.\""," \"Build me an entire e-commerce site\" has a very high failure rate. Iterate component by component, page by page. Confirm direction in plan mode before implementation.",[20,2805,2806,2809],{},[24,2807,2808],{},"Committing generated code as-is."," A 2025 ACM study suggests LLM-written code has roughly 1.75× more logic errors than human-written code. Make sure tests pass before committing.",[139,2811,2813],{"id":2812},"remotion","Remotion",[20,2815,2816,2819],{},[24,2817,2818],{},"Trying to build something complex from the start."," Start with a 5-second sample, then layer up: background color → text → animation → multiple scenes.",[20,2821,2822,2825],{},[24,2823,2824],{},"Vague directions."," \"80px,\" \"30 frames (1s),\" and other concrete numbers boost Claude Code's accuracy. \"Big font\" and \"slow fade\" hurt it.",[20,2827,2828,2831],{},[24,2829,2830],{},"Character appearance changes between scenes."," Remotion references static assets directly in code, so pin the image files. For complex character video, pair with a specialized tool like HeyGen.",[29,2833],{},[32,2835,2837],{"id":2836},"wrap-up-and-next-steps","Wrap-up and Next Steps",[634,2839,2840,2853],{},[637,2841,2842],{},[640,2843,2844,2847,2850],{},[643,2845,2846],{},"Action",[643,2848,2849],{},"Priority",[643,2851,2852],{},"Time Required",[650,2854,2855,2866,2876,2889],{},[640,2856,2857,2860,2863],{},[655,2858,2859],{},"Build one MCP server (internal API integration)",[655,2861,2862],{},"High",[655,2864,2865],{},"1–2 hours",[640,2867,2868,2871,2873],{},[655,2869,2870],{},"Add CLAUDE.md to your project",[655,2872,2862],{},[655,2874,2875],{},"30 minutes",[640,2877,2878,2883,2886],{},[655,2879,2880,2881],{},"Try ",[491,2882,1414],{},[655,2884,2885],{},"Medium",[655,2887,2888],{},"10 minutes",[640,2890,2891,2894,2896],{},[655,2892,2893],{},"Build a 30-second demo video in Remotion",[655,2895,2885],{},[655,2897,2898],{},"2–3 hours",[20,2900,2901],{},"With Claude Code generating 4% of all commits and Spotify's engineers reportedly writing no code by hand since December 2025, fluency with these tools is shifting from \"nice to have\" to \"you'll fall behind without it.\" Start with one MCP server or one Skill — automating \"the thing I'm tired of explaining every time\" is the shortest path in.",[29,2903],{},[20,2905,2906],{},[277,2907,557,2908,561],{},[281,2909,560],{"href":283},[2911,2912,2913],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .shSDL, html code.shiki .shSDL{--shiki-default:#6272A4}html pre.shiki code .sAOxA, html code.shiki .sAOxA{--shiki-default:#50FA7B}html pre.shiki code .s-mGx, html code.shiki .s-mGx{--shiki-default:#F1FA8C}html pre.shiki code .sCdxs, html code.shiki .sCdxs{--shiki-default:#F8F8F2}html pre.shiki code .sY8FZ, html code.shiki .sY8FZ{--shiki-default:#8BE9FE}html pre.shiki code .sLL85, html code.shiki .sLL85{--shiki-default:#8BE9FD}html pre.shiki code .s0Tla, html code.shiki .s0Tla{--shiki-default:#FF79C6}html pre.shiki code .seVfx, html code.shiki .seVfx{--shiki-default:#E9F284}",{"title":563,"searchDepth":564,"depth":564,"links":2915},[2916,2917,2920,2926,2930,2935,2941,2942,2943,2946,2952,2956,2961,2967],{"id":631,"depth":564,"text":632},{"id":697,"depth":564,"text":698,"children":2918},[2919],{"id":795,"depth":571,"text":796},{"id":915,"depth":564,"text":916,"children":2921},[2922,2923,2924,2925],{"id":925,"depth":571,"text":925},{"id":969,"depth":571,"text":970},{"id":1129,"depth":571,"text":1130},{"id":1242,"depth":571,"text":1242},{"id":1296,"depth":564,"text":1297,"children":2927},[2928,2929],{"id":1306,"depth":571,"text":1307},{"id":1393,"depth":571,"text":1394},{"id":1436,"depth":564,"text":1437,"children":2931},[2932,2933,2934],{"id":1447,"depth":571,"text":925},{"id":1502,"depth":571,"text":1502},{"id":1563,"depth":571,"text":1563},{"id":1640,"depth":564,"text":1640,"children":2936},[2937,2938,2939,2940],{"id":1646,"depth":571,"text":1647},{"id":1675,"depth":571,"text":1676},{"id":1695,"depth":571,"text":1695},{"id":1710,"depth":571,"text":1711},{"id":1734,"depth":564,"text":1734},{"id":1838,"depth":564,"text":1839},{"id":1897,"depth":564,"text":1898,"children":2944},[2945],{"id":2001,"depth":571,"text":2002},{"id":2096,"depth":564,"text":2097,"children":2947},[2948,2949,2950,2951],{"id":2106,"depth":571,"text":1980},{"id":2140,"depth":571,"text":2141},{"id":2274,"depth":571,"text":2275},{"id":2360,"depth":571,"text":2361},{"id":2413,"depth":564,"text":2414,"children":2953},[2954,2955],{"id":2423,"depth":571,"text":2424},{"id":2507,"depth":571,"text":2508},{"id":2548,"depth":564,"text":2549,"children":2957},[2958,2959,2960],{"id":2558,"depth":571,"text":1980},{"id":2607,"depth":571,"text":2608},{"id":2662,"depth":571,"text":2663},{"id":2738,"depth":564,"text":2739,"children":2962},[2963,2964,2965,2966],{"id":2745,"depth":571,"text":107},{"id":2775,"depth":571,"text":101},{"id":2796,"depth":571,"text":2797},{"id":2812,"depth":571,"text":2813},{"id":2836,"depth":564,"text":2837},"Claude Codeのスキルシステム・MCPサーバー構築・ウェブサイト生成・Remotion動画制作まで、エンジニアが実際に業務で使える知識を一冊にまとめた。コードと具体的な数字で語る実践ガイド。",{"date":584,"image":2970,"alt":2971,"tags":2972,"tagsEn":2974,"published":591},"/blogs-img/blog-claude-skills-mcp-web-video-engineer-guide.png","Claude Skills・MCP・Remotionによるエンジニア向け実践ガイド",[2973,588],"テック解説",[2975,590],"Tech Deep Dive","/blogs/13-claude-skills-mcp-web-video-engineer-guide",{"title":598,"description":2968},"blogs/13-claude-skills-mcp-web-video-engineer-guide","vRupI5p-5tD_KqHxWD9NRCkGAYIsMUKnXqoTXnxJb14",{"id":2981,"title":2982,"body":2983,"description":4724,"extension":582,"meta":4725,"navigation":591,"ogImage":4727,"path":4731,"seo":4732,"stem":4733,"__hash__":4734},"content/blogs/9-claude-gemini-chatgpt-comparison.md","最新Claude・Gemini・ChatGPTを徹底比較｜VCの僕がたどり着いた使い分けの結論 | Claude vs Gemini vs ChatGPT: A VC's Guide to the Latest Models",{"type":8,"value":2984,"toc":4670},[2985,3836,3838],[11,2986,2987,2991,2993,2996,3011,3018,3021,3023,3026,3029,3033,3036,3047,3050,3054,3065,3068,3072,3075,3095,3101,3104,3106,3109,3112,3115,3327,3330,3335,3342,3345,3350,3356,3361,3370,3375,3382,3387,3394,3399,3402,3407,3414,3416,3419,3422,3426,3446,3461,3465,3490,3497,3501,3518,3521,3523,3526,3533,3537,3542,3559,3563,3568,3592,3596,3601,3622,3625,3631,3648,3655,3657,3661,3664,3667,3763,3774,3777,3788,3795,3798,3824,3827,3829],{"lang":13},[15,2988,2990],{"id":2989},"最新claudegeminichatgptを徹底比較vcの僕がたどり着いた使い分けの結論","最新Claude・Gemini・ChatGPTを徹底比較｜VCの僕がたどり着いた使い分けの結論",[29,2992],{},[32,2994,2995],{"id":2995},"概要",[20,2997,2998,2999,3006,3007,3010],{},"ここ1〜2ヶ月で3大AIラボのフラッグシップが立て続けにアップデートされました。OpenAIが2026年3月5日に",[24,3000,3001,3002,3005],{},"GPT-5.4（Pro / Thinking）",[24,3003,3004],{},"をリリースし、Anthropicは4月16日に","Claude Opus 4.7","を投入、GoogleもGemini 3から",[24,3008,3009],{},"Gemini 3.1 Pro","へと更新。この3モデルが現時点のトップ層です。",[20,3012,3013,3014,3017],{},"私はVCとしてスタートアップの評価書を書いたり、決算短信を要約したり、コードを読んだりと1日中AIを触っているわけですが、正直「1つで全部済ませる」時代はもう終わったと思っています。",[24,3015,3016],{},"モデルごとに「尖っている部分」と「鈍い部分」がハッキリ分かれてきている","というのが2026年4月時点の実感です。",[20,3019,3020],{},"この記事では、最新3モデルを公式ベンチマークとVC実務での使用感の両面からざっくばらんに比較して、最後に僕自身の使い分けまで公開します。数字マニアックな話というよりは、「で、結局どれをどう使えばいいの？」という実務寄りの話です。",[29,3022],{},[32,3024,3025],{"id":3025},"これまでのトレンド",[20,3027,3028],{},"まずはここ2年の流れをざっくり振り返ります。",[139,3030,3032],{"id":3031},"_2024年gpt-4時代の完成とclaudeの台頭","2024年：GPT-4時代の完成とClaudeの台頭",[20,3034,3035],{},"2024年はGPT-4oが事実上のデファクトスタンダードでしたよね。マルチモーダルも綺麗にまとまっていて、「とりあえずChatGPT Plus契約しとけ」が正解だった時代です。",[20,3037,3038,3039,3042,3043,3046],{},"そこにAnthropicが",[24,3040,3041],{},"Claude 3.5 Sonnet","で殴り込んできて、特に",[24,3044,3045],{},"コーディング性能","で「あれ、これGPT-4oより明らかに上手くない？」と業界がざわつき始めます。Cursor、Cline、Aider等のAIコーディングツールが一気にClaudeを標準モデルに据え始めたのがこの頃です。",[20,3048,3049],{},"Geminiは……正直、2024年前半は微妙でした。Gemini 1.5でコンテキスト100万トークンという「量で殴る」戦略は面白かったけど、肝心の回答品質がGPT-4やClaudeに一歩及ばない印象でした。",[139,3051,3053],{"id":3052},"_2025年推論モデルreasoningの時代","2025年：推論モデル（Reasoning）の時代",[20,3055,3056,3057,3060,3061,3064],{},"2025年はとにかく「推論」がキーワードでした。OpenAIが",[24,3058,3059],{},"o1 → o3 → o4","と推論モデルを連発し、「考えてから答える」パラダイムが定着。Anthropicも",[24,3062,3063],{},"Claude 3.7 Sonnet","で「Extended Thinking」を搭載、GoogleもGemini 2.5 Proで「Deep Think」モードを用意します。",[20,3066,3067],{},"この流れで、**数学・科学・コードといった「正解のある問題」**については、どのフラッグシップモデルも博士課程レベルに到達したと言っていい状況になりました。",[139,3069,3071],{"id":3070},"_2026年マルチモーダルとエージェントの統合","2026年：マルチモーダルとエージェントの統合",[20,3073,3074],{},"そして2026年、3社の最新フラッグシップが出揃いました。",[44,3076,3077,3083,3089],{},[47,3078,3079,3082],{},[24,3080,3081],{},"OpenAI",": GPT-5.4 Pro（2026年3月5日）",[47,3084,3085,3088],{},[24,3086,3087],{},"Anthropic",": Claude Opus 4.7（2026年4月16日）",[47,3090,3091,3094],{},[24,3092,3093],{},"Google",": Gemini 3.1 Pro（Deep Think搭載）",[20,3096,3097,3100],{},[24,3098,3099],{},"「推論するかどうかをユーザーが切り替える」時代は終わり、モデルが勝手に判断する","というのが大きな流れです。ユーザーは質問するだけ。簡単な質問は速く、難しい質問はじっくり——これが標準になりました。",[20,3102,3103],{},"もう一つの潮流は**「コンピュータ操作」の実用化**。GPT-5.4はOSWorldベンチで75%を記録し、人間の専門家（72.4%）を超えました。「AIがブラウザやPCを動かして仕事をする」段階に突入した年、というのが2026年です。",[29,3105],{},[32,3107,3108],{"id":3108},"最新モデルの性能比較",[20,3110,3111],{},"それでは本題。2026年4月時点の公開ベンチマークと実運用の感触を整理します。",[139,3113,3114],{"id":3114},"ざっくり比較表",[634,3116,3117,3131],{},[637,3118,3119],{},[640,3120,3121,3124,3126,3128],{},[643,3122,3123],{},"項目",[643,3125,3005],{},[643,3127,3009],{},[643,3129,3130],{},"GPT-5.4 Pro",[650,3132,3133,3147,3163,3179,3194,3206,3221,3235,3249,3265,3281,3297,3313],{},[640,3134,3135,3138,3141,3144],{},[655,3136,3137],{},"リリース",[655,3139,3140],{},"2026年4月16日",[655,3142,3143],{},"2026年前半（3.1世代）",[655,3145,3146],{},"2026年3月5日",[640,3148,3149,3152,3157,3160],{},[655,3150,3151],{},"SWE-bench Verified",[655,3153,3154],{},[24,3155,3156],{},"87.6%",[655,3158,3159],{},"80.6%",[655,3161,3162],{},"約82%",[640,3164,3165,3168,3173,3176],{},[655,3166,3167],{},"SWE-bench Pro",[655,3169,3170],{},[24,3171,3172],{},"64.3%",[655,3174,3175],{},"約53%",[655,3177,3178],{},"約55〜58%",[640,3180,3181,3184,3187,3192],{},[655,3182,3183],{},"GPQA Diamond（科学推論）",[655,3185,3186],{},"高水準",[655,3188,3189],{},[24,3190,3191],{},"94.3%",[655,3193,3186],{},[640,3195,3196,3199,3201,3204],{},[655,3197,3198],{},"Humanity's Last Exam",[655,3200,1591],{},[655,3202,3203],{},"44.4%",[655,3205,1591],{},[640,3207,3208,3211,3213,3216],{},[655,3209,3210],{},"ARC-AGI-2（抽象推論）",[655,3212,1591],{},[655,3214,3215],{},"77.1%",[655,3217,3218],{},[24,3219,3220],{},"83.3%",[640,3222,3223,3226,3228,3230],{},[655,3224,3225],{},"BrowseComp（Web操作）",[655,3227,1591],{},[655,3229,1591],{},[655,3231,3232],{},[24,3233,3234],{},"89.3%",[640,3236,3237,3240,3242,3244],{},[655,3238,3239],{},"OSWorld（PC操作）",[655,3241,1591],{},[655,3243,1591],{},[655,3245,3246],{},[24,3247,3248],{},"75%",[640,3250,3251,3254,3257,3262],{},[655,3252,3253],{},"MMMU-Pro（マルチモーダル）",[655,3255,3256],{},"◯",[655,3258,3259],{},[24,3260,3261],{},"80.5%",[655,3263,3264],{},"◎",[640,3266,3267,3270,3273,3278],{},[655,3268,3269],{},"コンテキスト長",[655,3271,3272],{},"200K（1M版あり）",[655,3274,3275],{},[24,3276,3277],{},"1M",[655,3279,3280],{},"1M〜1.1M",[640,3282,3283,3286,3289,3294],{},[655,3284,3285],{},"入力価格（$/1M tokens）",[655,3287,3288],{},"$5",[655,3290,3291],{},[24,3292,3293],{},"最安水準（約1/5）",[655,3295,3296],{},"$2.50",[640,3298,3299,3302,3305,3310],{},[655,3300,3301],{},"出力価格（$/1M tokens）",[655,3303,3304],{},"$25",[655,3306,3307],{},[24,3308,3309],{},"最安水準",[655,3311,3312],{},"$15",[640,3314,3315,3318,3321,3325],{},[655,3316,3317],{},"動画・音声ネイティブ",[655,3319,3320],{},"△",[655,3322,3323],{},[24,3324,3264],{},[655,3326,3256],{},[139,3328,3329],{"id":3329},"各軸の詳細",[20,3331,3332],{},[24,3333,3334],{},"① コーディング：Claudeが王座奪還",[20,3336,3337,3338,3341],{},"Opus 4.6→4.7で**SWE-bench Verifiedが80.8%→87.6%",[24,3339,3340],{},"と7ポイント近くジャンプし、Gemini 3.1 Pro（80.6%）とGPT-5.4（約82%）を抜き返しました。難度の高い","SWE-bench Proでは64.3%**と、GPT-5.4（約57.7%）・Gemini（約54.2%）を10ポイント以上引き離しています。",[20,3343,3344],{},"CursorBenchも58%→70%と大幅改善。実務で「このリポジトリ全体を読んで設計の問題点を指摘して」系のタスクをやると、体感でもClaudeが一段抜けているのが分かります。",[20,3346,3347],{},[24,3348,3349],{},"② 科学推論：Geminiが頭ひとつリード",[20,3351,3352,3355],{},[24,3353,3354],{},"GPQA Diamond 94.3%","、**MMMLU 92.6%**など、研究レベルの知識・推論ベンチでGemini 3.1 Proが最強クラス。Google Researchの基礎研究基盤が効いている印象で、数式や論文読解の厳密性で安定感があります。",[20,3357,3358],{},[24,3359,3360],{},"③ エージェント・PC操作：GPT-5.4が独走",[20,3362,3363,707,3366,3369],{},[24,3364,3365],{},"BrowseComp 89.3%",[24,3367,3368],{},"OSWorld 75%","（人間エキスパート72.4%を超える）と、「ブラウザやPCを自動操作する」系のベンチでGPT-5.4 Proが独走しています。ARC-AGI-2でも**83.3%**と、抽象推論のトップです。",[20,3371,3372],{},[24,3373,3374],{},"④ 長文コンテキスト：Geminiの1Mが実用性で先行",[20,3376,3377,3378,3381],{},"Claudeも1Mコンテキスト版を提供していますが、",[24,3379,3380],{},"ネイティブで1Mを全モデルに提供しているGemini","が量の面で有利。PDF数十本を一気読みさせるような用途では現時点でGeminiが最もコストパフォーマンスが良いです。",[20,3383,3384],{},[24,3385,3386],{},"⑤ マルチモーダル（動画・音声）：Geminiが設計思想で勝つ",[20,3388,3389,3390,3393],{},"Geminiは最初からテキスト・画像・動画・音声・コードを統合設計している強みが効いていて、YouTube動画を直接渡して要約させたり、長尺の会議録音を議事録化するといった用途では",[24,3391,3392],{},"Gemini一択","の状況です。",[20,3395,3396],{},[24,3397,3398],{},"⑥ 創作・文章表現：Claudeが依然として好まれる",[20,3400,3401],{},"ブラインドの人間評価で、創作系タスクはClaudeが47%、GPT-5.4が29%、Geminiが24%で選ばれるという結果が出ています。投資メモや編集系の下書きを任せるならClaudeが無難、というのが実感と一致します。",[20,3403,3404],{},[24,3405,3406],{},"⑦ コスト：Geminiが圧倒的",[20,3408,3409,3410,3413],{},"Gemini 3.1 Proは",[24,3411,3412],{},"Claude Opus 4.7のおよそ1/5、GPT-5.4の約1/4","の価格帯。バッチ処理や大量データを流すワークロードではGeminiが経済合理性で圧勝します。",[29,3415],{},[32,3417,3418],{"id":3418},"各サービスの特徴",[20,3420,3421],{},"性能の話だけだと見えてこない部分として、「サービスとしての使いやすさ・エコシステム」の違いが実はかなり大きいです。",[139,3423,3425],{"id":3424},"claude-opus-47anthropic","Claude Opus 4.7（Anthropic）",[44,3427,3428,3434,3440],{},[47,3429,3430,3433],{},[24,3431,3432],{},"強み",": コーディング・エージェント特化、創作力、Artifacts、MCP（Model Context Protocol）によるエコシステム拡張、Finance Agent評価トップ水準",[47,3435,3436,3439],{},[24,3437,3438],{},"弱み",": 画像生成なし、動画・音声理解はGeminiに劣る、API価格が最も高い（$5/$25）",[47,3441,3442,3445],{},[24,3443,3444],{},"プラットフォーム",": Claude.ai（Web）、Claude Code（CLI）、API、Amazon Bedrock、Google Cloud Vertex AI",[20,3447,3448,3449,3452,3453,3456,3457,3460],{},"Anthropicは明確に「",[24,3450,3451],{},"開発者・エンタープライズ特化","」に振り切っているのが特徴です。",[24,3454,3455],{},"Opus 4.7は「前モデルが緩く解釈していた指示を文字通り実行する」ように調整","されていて、プロンプトの設計力が以前より問われるようになりました。Claude Codeは2025年に登場して以降、",[24,3458,3459],{},"今では僕のメインIDE","になっています。",[139,3462,3464],{"id":3463},"gemini-31-progoogle","Gemini 3.1 Pro（Google）",[44,3466,3467,3476,3481],{},[47,3468,3469,3471,3472,3475],{},[24,3470,3432],{},": Google検索統合、Workspace連携（Gmail、Drive、Docs）、ネイティブマルチモーダル（動画・音声込み）、1Mコンテキスト標準、",[24,3473,3474],{},"圧倒的な低価格","、科学・数式ベンチの強さ",[47,3477,3478,3480],{},[24,3479,3438],{},": コーディングでの細かい詰めが依然として劣る、ブランド的に「とりあえず試す」のハードルが高い",[47,3482,3483,3485,3486,3489],{},[24,3484,3444],{},": gemini.google.com、AI Studio、Vertex AI、Googleアプリ内統合、",[24,3487,3488],{},"Gemini 3.1 Deep Think","（Google AI Ultra加入者向け）",[20,3491,3492,3493,3496],{},"Geminiの真骨頂は",[24,3494,3495],{},"Googleエコシステムとの統合","。会社メールを全部読んで要約してくれる、Driveのドキュメントを横断検索できる、といった「日常業務」での強さが圧倒的です。Deep Thinkは科学・エンジニアリングの高難度問題向けに別途用意されている専用推論モードで、高度な分析が必要な場面で切り替えて使えます。",[139,3498,3500],{"id":3499},"gpt-54-proopenai","GPT-5.4 Pro（OpenAI）",[44,3502,3503,3508,3513],{},[47,3504,3505,3507],{},[24,3506,3432],{},": エージェント（BrowseComp・OSWorld圧倒的）、抽象推論（ARC-AGI-2 83.3%）、プラグイン・GPTsエコシステム、DALL-E/Sora統合、Advanced Voice Mode、Canvas、知名度・ユーザー数",[47,3509,3510,3512],{},[24,3511,3438],{},": First-token時間が長い（推論モデルなので）、Knowledge cutoffが2025年8月",[47,3514,3515,3517],{},[24,3516,3444],{},": ChatGPT（Web/アプリ）、API、Microsoft Copilot統合、Pro・Enterpriseプラン限定",[20,3519,3520],{},"GPT-5.4 Proは**「コンピュータ操作エージェント」としての完成度が頭ひとつ抜けています**。OSWorldで人間エキスパートを超えたのは象徴的で、「ブラウザで調査→スプレッドシート作成→Slackで送信」みたいな複数ステップ業務の自動化はGPT-5.4 Proが最強候補です。音声対話の自然さも依然として業界トップクラス。",[29,3522],{},[32,3524,3525],{"id":3525},"記事作成者の使い分け",[20,3527,3528,3529,3532],{},"最後に、VCとしての僕自身のリアルな使い分けを公開します。",[24,3530,3531],{},"3つ全部有料プラン契約しています","（経費です）。",[139,3534,3536],{"id":3535},"claude-opus-47メイン50","Claude Opus 4.7（メイン50%）",[20,3538,3539,3541],{},[24,3540,759],{},": コーディング、決算書読解、投資メモ執筆、契約書レビュー、創作・編集系",[44,3543,3544,3547,3550,3553,3556],{},[47,3545,3546],{},"この記事もClaudeで下書きを作っています",[47,3548,3549],{},"Claude Code経由でこのブログのNuxt 3実装をメンテナンス",[47,3551,3552],{},"投資先のデューデリ資料（PDF100本超）を1Mコンテキスト版で一気読み",[47,3554,3555],{},"SWE-bench Pro 64.3%の地力は、大規模コードベースの読解でそのまま体感できる",[47,3557,3558],{},"「指示を文字通り実行する」方向の調整が自分のワークフローと相性が良い",[139,3560,3562],{"id":3561},"gemini-31-proサブ30","Gemini 3.1 Pro（サブ30%）",[20,3564,3565,3567],{},[24,3566,759],{},": リサーチ、Google Workspace連携、動画・音声処理、多言語翻訳、大量バッチ処理",[44,3569,3570,3573,3576,3579,3585],{},[47,3571,3572],{},"カンファレンスの録画動画を丸ごと渡して要点抽出",[47,3574,3575],{},"会社メールに届く大量のピッチメール（英語・日本語・中国語混在）の仕分け",[47,3577,3578],{},"Google検索グラウンディングによる「最新情報リサーチ」",[47,3580,3581,3582],{},"コスパが異常に良いので、",[24,3583,3584],{},"量で殴るタスクはGeminiで回す",[47,3586,3587,3588,3591],{},"科学系スタートアップのDDでは",[24,3589,3590],{},"Deep Think","に切り替え",[139,3593,3595],{"id":3594},"gpt-54-proサブ20","GPT-5.4 Pro（サブ20%）",[20,3597,3598,3600],{},[24,3599,759],{},": Web自動操作、画像生成、音声対話、ブレスト、GPTs定型業務",[44,3602,3603,3606,3613,3616,3619],{},[47,3604,3605],{},"BrowseCompの強さが効く**「10社のIRページを巡回して決算データを抽出」**系タスク",[47,3607,3608,3609,3612],{},"OSWorldが強いので",[24,3610,3611],{},"ExcelやGoogle Sheetsへの自動記入","も任せられる",[47,3614,3615],{},"投資先向けプレゼン用の画像生成（DALL-E/Sora統合）",[47,3617,3618],{},"散歩中の音声対話でアイデアの壁打ち",[47,3620,3621],{},"「ChatGPTで試したいから」という依頼者が多いので検証用にも必須",[139,3623,3624],{"id":3624},"僕の結論",[20,3626,3627,3630],{},[24,3628,3629],{},"「モデル戦争」はもう終わっていて、今は「得意分野の棲み分け」フェーズ","だと思います。2026年4月の状況を要約するとこうです。",[44,3632,3633,3638,3643],{},[47,3634,3635],{},[24,3636,3637],{},"コーディング・長文読解・創作 → Claude Opus 4.7",[47,3639,3640],{},[24,3641,3642],{},"科学・マルチモーダル・大量処理・コスト → Gemini 3.1 Pro",[47,3644,3645],{},[24,3646,3647],{},"Web/PC操作・抽象推論・エコシステム → GPT-5.4 Pro",[20,3649,3650,3651,3654],{},"VCとして1つアドバイスするなら、",[24,3652,3653],{},"「月20〜30ドル×3社」をケチらないこと","。ワークロードごとに最適モデルが違うので、使い分けた方が圧倒的に生産性が上がります。",[29,3656],{},[32,3658,3660],{"id":3659},"投資シナリオaiラボ三つ巴の今後","投資シナリオ：AIラボ三つ巴の今後",[20,3662,3663],{},"ここからが本記事の投資パートです。「どのモデルが勝つか」ではなく、**「3社の優劣の振れ方が、関連銘柄にどう波及するか」**が投資家にとっての論点です。",[139,3665,3666],{"id":3666},"シナリオ別の関連銘柄インパクト",[634,3668,3669,3691],{},[637,3670,3671],{},[640,3672,3673,3676,3679,3682,3685,3688],{},[643,3674,3675],{},"シナリオ",[643,3677,3678],{},"確率（私見）",[643,3680,3681],{},"OpenAI/MSFT",[643,3683,3684],{},"Anthropic/AMZN-GOOGL",[643,3686,3687],{},"Google/GOOGL",[643,3689,3690],{},"NVDA",[650,3692,3693,3712,3730,3747],{},[640,3694,3695,3698,3701,3704,3706,3709],{},[655,3696,3697],{},"A. 三つ巴継続（ベース）",[655,3699,3700],{},"50%",[655,3702,3703],{},"中立",[655,3705,3703],{},[655,3707,3708],{},"やや上方",[655,3710,3711],{},"コア配分",[640,3713,3714,3717,3720,3722,3725,3727],{},[655,3715,3716],{},"B. Anthropic先行（Claudeコーディング独走）",[655,3718,3719],{},"25%",[655,3721,3703],{},[655,3723,3724],{},"上方修正",[655,3726,3703],{},[655,3728,3729],{},"コア維持",[640,3731,3732,3735,3738,3741,3743,3745],{},[655,3733,3734],{},"C. Google逆転（Gemini統合勝ち）",[655,3736,3737],{},"15%",[655,3739,3740],{},"やや下方",[655,3742,3703],{},[655,3744,3724],{},[655,3746,3729],{},[640,3748,3749,3752,3755,3757,3759,3761],{},[655,3750,3751],{},"D. OpenAIエージェント独走",[655,3753,3754],{},"10%",[655,3756,3724],{},[655,3758,3703],{},[655,3760,3703],{},[655,3762,3729],{},[20,3764,3765,3766,3769,3770,3773],{},"私の現状の見立ては",[24,3767,3768],{},"シナリオA","で、向こう12ヶ月は3社が交互にリードを奪い合う展開が続くと見ています。CVCの感覚で言うと、",[24,3771,3772],{},"こういう時期にいちばん効くのは「三社いずれが勝っても恩恵を受ける銘柄」","——具体的にはNVDA（GPU）、ASML（露光装置）、TSMC（ファブ）、ARM（IP）です。",[139,3775,3776],{"id":3776},"投資判断と含意",[20,3778,3779,3780,3783,3784,3787],{},"スタートアップ投資の観点では——",[24,3781,3782],{},"アプリケーション層で「特定モデルに依存したビジネス」を作るのは危険","。2026年だけでもGPT-5.4→Opus 4.7と",[24,3785,3786],{},"2ヶ月で王座が入れ替わっている","わけで、複数モデルを抽象化して切り替えられる設計のスタートアップが長期では生き残る、というのが私の仮説です。",[20,3789,3790,3791,3794],{},"公開市場の観点では、",[24,3792,3793],{},"3社のラボ間競争が激化するほどNVDA・ASML・TSMCのGPU/ファブ系へのキャペックスは増える","——つまり「誰が勝つか」を当てにいくよりも、「全員が走り続ける限り恩恵を受けるレイヤー」に寄せる方が、リスク調整後リターンは高くなる構造です。",[139,3796,3797],{"id":3797},"ウォッチポイント",[44,3799,3800,3806,3812,3818],{},[47,3801,3802,3805],{},[24,3803,3804],{},"Claude/GPT/Geminiの次の主要バージョン"," — 王座交代が継続するか、誰かが固定的にリードを取るか",[47,3807,3808,3811],{},[24,3809,3810],{},"NVDA決算のデータセンター売上"," — モデル競争激化局面ではキャペックス連動性が高い",[47,3813,3814,3817],{},[24,3815,3816],{},"OpenAI/Anthropicの一次資金調達バリュエーション"," — シードからの倍率が市場心理の温度計",[47,3819,3820,3823],{},[24,3821,3822],{},"規制動向（EU AI Act、米AI Bill of Rights実装）"," — 大規模モデル開発のコスト構造を変える",[20,3825,3826],{},"それでは、今回はここまで。皆さんの使い分けも教えてもらえると嬉しいです。",[29,3828],{},[20,3830,3831],{},[277,3832,3833,3834,285],{},"免責事項：本記事は情報提供を目的としており、投資アドバイスを構成するものではありません。すべての投資判断はご自身の判断と、資格を有するファイナンシャルアドバイザーへの相談に基づいて行ってください。生成AIをリサーチ・翻訳・推敲の補助として用いていますが、最終内容はZYL0が人手で確認しています。詳細は",[281,3835,284],{"href":283},[29,3837],{},[11,3839,3840,3844,3846,3850,3863,3870,3873,3875,3879,3882,3886,3889,3895,3898,3902,3908,3915,3919,3922,3939,3946,3953,3955,3959,3962,3966,4155,4159,4164,4175,4178,4183,4192,4197,4208,4213,4220,4225,4231,4236,4239,4244,4251,4253,4257,4260,4264,4284,4299,4303,4327,4334,4338,4355,4362,4364,4368,4371,4375,4381,4398,4402,4407,4429,4433,4438,4461,4465,4471,4488,4495,4497,4501,4507,4511,4599,4610,4614,4621,4628,4632,4658,4661,4663],{"lang":290},[15,3841,3843],{"id":3842},"claude-vs-gemini-vs-chatgpt-a-vcs-guide-to-the-latest-models","Claude vs Gemini vs ChatGPT: A VC's Guide to the Latest Models",[29,3845],{},[32,3847,3849],{"id":3848},"overview","Overview",[20,3851,3852,3853,3856,3857,3859,3860,3862],{},"In the past two months, all three major AI labs have refreshed their flagships in rapid succession. OpenAI released ",[24,3854,3855],{},"GPT-5.4 (Pro / Thinking)"," on March 5, 2026. Anthropic shipped ",[24,3858,3005],{}," on April 16. Google updated Gemini 3 to ",[24,3861,3009],{},". These three are the current top tier.",[20,3864,3865,3866,3869],{},"As a VC who spends all day writing investment memos, summarizing earnings reports, and reading code with AI assistance, my honest take is: ",[24,3867,3868],{},"the era of \"just use one model for everything\" is over",". Each flagship has sharpened its edges, and the differences matter in practice.",[20,3871,3872],{},"This article compares the three flagships as of April 2026, blending public benchmarks with real working-VC usage, and ends with my personal usage split.",[29,3874],{},[32,3876,3878],{"id":3877},"recent-trends","Recent Trends",[20,3880,3881],{},"A quick look back at the last two years:",[139,3883,3885],{"id":3884},"_2024-gpt-4-era-peaks-claude-emerges","2024: GPT-4 Era Peaks, Claude Emerges",[20,3887,3888],{},"GPT-4o was effectively the default in 2024. Multimodal was polished; \"just subscribe to ChatGPT Plus\" was the right answer.",[20,3890,3891,3892,3894],{},"Then Anthropic's ",[24,3893,3041],{}," arrived with coding quality that clearly exceeded GPT-4o. Cursor, Cline, Aider — the AI coding tool ecosystem standardized on Claude almost overnight.",[20,3896,3897],{},"Gemini, frankly, was underwhelming in early 2024. Gemini 1.5's 1M-token context was interesting, but response quality lagged GPT-4 and Claude.",[139,3899,3901],{"id":3900},"_2025-the-reasoning-era","2025: The Reasoning Era",[20,3903,3904,3905,3907],{},"Reasoning was the 2025 theme. OpenAI shipped ",[24,3906,3059],{}," in rapid succession. Anthropic added \"Extended Thinking\" to Claude 3.7 Sonnet. Google countered with Gemini 2.5 Pro's \"Deep Think.\"",[20,3909,3910,3911,3914],{},"For ",[24,3912,3913],{},"math, science, and coding — problems with correct answers"," — every flagship reached PhD-level competence.",[139,3916,3918],{"id":3917},"_2026-multimodal-agent-integration","2026: Multimodal + Agent Integration",[20,3920,3921],{},"Now the current lineup:",[44,3923,3924,3929,3934],{},[47,3925,3926,3928],{},[24,3927,3081],{},": GPT-5.4 Pro (March 5, 2026)",[47,3930,3931,3933],{},[24,3932,3087],{},": Claude Opus 4.7 (April 16, 2026)",[47,3935,3936,3938],{},[24,3937,3093],{},": Gemini 3.1 Pro (with Deep Think)",[20,3940,3941,3942,3945],{},"The major shift: ",[24,3943,3944],{},"users no longer toggle \"reasoning mode\" — the model decides",". Simple questions are fast, hard ones take longer. That's the new normal.",[20,3947,3948,3949,3952],{},"Another trend: ",[24,3950,3951],{},"computer-use agents are now practical",". GPT-5.4 scored 75% on OSWorld, beating human experts (72.4%). 2026 is the year AI actually started driving browsers and PCs.",[29,3954],{},[32,3956,3958],{"id":3957},"performance-comparison","Performance Comparison",[20,3960,3961],{},"Key benchmarks and real-world feel as of April 2026:",[139,3963,3965],{"id":3964},"quick-comparison-table","Quick Comparison Table",[634,3967,3968,3980],{},[637,3969,3970],{},[640,3971,3972,3974,3976,3978],{},[643,3973,1925],{},[643,3975,3005],{},[643,3977,3009],{},[643,3979,3130],{},[650,3981,3982,3996,4009,4023,4037,4047,4060,4073,4086,4099,4114,4128,4142],{},[640,3983,3984,3987,3990,3993],{},[655,3985,3986],{},"Release date",[655,3988,3989],{},"April 16, 2026",[655,3991,3992],{},"Early 2026 (3.1 gen)",[655,3994,3995],{},"March 5, 2026",[640,3997,3998,4000,4004,4006],{},[655,3999,3151],{},[655,4001,4002],{},[24,4003,3156],{},[655,4005,3159],{},[655,4007,4008],{},"~82%",[640,4010,4011,4013,4017,4020],{},[655,4012,3167],{},[655,4014,4015],{},[24,4016,3172],{},[655,4018,4019],{},"~53%",[655,4021,4022],{},"~55–58%",[640,4024,4025,4028,4031,4035],{},[655,4026,4027],{},"GPQA Diamond (science)",[655,4029,4030],{},"high",[655,4032,4033],{},[24,4034,3191],{},[655,4036,4030],{},[640,4038,4039,4041,4043,4045],{},[655,4040,3198],{},[655,4042,1591],{},[655,4044,3203],{},[655,4046,1591],{},[640,4048,4049,4052,4054,4056],{},[655,4050,4051],{},"ARC-AGI-2 (abstract reasoning)",[655,4053,1591],{},[655,4055,3215],{},[655,4057,4058],{},[24,4059,3220],{},[640,4061,4062,4065,4067,4069],{},[655,4063,4064],{},"BrowseComp (web ops)",[655,4066,1591],{},[655,4068,1591],{},[655,4070,4071],{},[24,4072,3234],{},[640,4074,4075,4078,4080,4082],{},[655,4076,4077],{},"OSWorld (PC ops)",[655,4079,1591],{},[655,4081,1591],{},[655,4083,4084],{},[24,4085,3248],{},[640,4087,4088,4091,4093,4097],{},[655,4089,4090],{},"MMMU-Pro (multimodal)",[655,4092,3256],{},[655,4094,4095],{},[24,4096,3261],{},[655,4098,3264],{},[640,4100,4101,4104,4107,4111],{},[655,4102,4103],{},"Context length",[655,4105,4106],{},"200K (1M variant)",[655,4108,4109],{},[24,4110,3277],{},[655,4112,4113],{},"1M–1.1M",[640,4115,4116,4119,4121,4126],{},[655,4117,4118],{},"Input price ($/1M tokens)",[655,4120,3288],{},[655,4122,4123],{},[24,4124,4125],{},"~1/5 of Claude",[655,4127,3296],{},[640,4129,4130,4133,4135,4140],{},[655,4131,4132],{},"Output price ($/1M tokens)",[655,4134,3304],{},[655,4136,4137],{},[24,4138,4139],{},"lowest tier",[655,4141,3312],{},[640,4143,4144,4147,4149,4153],{},[655,4145,4146],{},"Native video/audio",[655,4148,3320],{},[655,4150,4151],{},[24,4152,3264],{},[655,4154,3256],{},[139,4156,4158],{"id":4157},"detail-per-axis","Detail Per Axis",[20,4160,4161],{},[24,4162,4163],{},"① Coding: Claude reclaims the crown",[20,4165,4166,4167,4170,4171,4174],{},"Opus 4.6 → 4.7 jumped ",[24,4168,4169],{},"SWE-bench Verified from 80.8% to 87.6%",", a ~7-point gain that leapfrogs Gemini 3.1 Pro (80.6%) and GPT-5.4 (~82%). On the harder ",[24,4172,4173],{},"SWE-bench Pro, Opus 4.7 scores 64.3%",", beating GPT-5.4 (~57.7%) and Gemini (~54.2%) by 10+ points.",[20,4176,4177],{},"CursorBench jumped 58% → 70%. In practice, \"read this entire repo and point out the design flaws\"-style prompts clearly land better on Claude.",[20,4179,4180],{},[24,4181,4182],{},"② Science Reasoning: Gemini leads",[20,4184,4185,4187,4188,4191],{},[24,4186,3354],{}," and ",[24,4189,4190],{},"MMMLU 92.6%"," put Gemini 3.1 Pro at the top of research-level knowledge and reasoning benchmarks. Google Research's foundational work shows up in rigor around symbolic math and paper comprehension.",[20,4193,4194],{},[24,4195,4196],{},"③ Agentic / PC Control: GPT-5.4 dominates",[20,4198,4199,4187,4201,4203,4204,4207],{},[24,4200,3365],{},[24,4202,3368],{}," (beats the 72.4% human expert baseline) make GPT-5.4 Pro the clear winner for \"drive a browser and a PC\" tasks. It also tops ",[24,4205,4206],{},"ARC-AGI-2 at 83.3%"," for abstract reasoning.",[20,4209,4210],{},[24,4211,4212],{},"④ Long Context: Gemini's 1M wins on practicality",[20,4214,4215,4216,4219],{},"Claude offers a 1M context variant, but ",[24,4217,4218],{},"Gemini ships 1M as standard",". For \"dump 50 PDFs in one context\" workloads, Gemini is the most cost-effective today.",[20,4221,4222],{},[24,4223,4224],{},"⑤ Multimodal (video/audio): Gemini by design",[20,4226,4227,4228,318],{},"Gemini was architected multimodal from day one — text, image, video, audio, code all unified. For summarizing a YouTube URL or turning long meeting recordings into minutes, ",[24,4229,4230],{},"Gemini is essentially the only choice",[20,4232,4233],{},[24,4234,4235],{},"⑥ Creative Writing: Claude still preferred",[20,4237,4238],{},"In blind human evaluations, Claude is picked 47% of the time vs. 29% for GPT-5.4 and 24% for Gemini. For investment memos and editorial drafts, Claude remains the safe choice.",[20,4240,4241],{},[24,4242,4243],{},"⑦ Cost: Gemini crushes it",[20,4245,4246,4247,4250],{},"Gemini 3.1 Pro is roughly ",[24,4248,4249],{},"1/5 of Claude Opus 4.7 and 1/4 of GPT-5.4",". For batch processing and high-volume workloads, Gemini wins on pure economics.",[29,4252],{},[32,4254,4256],{"id":4255},"service-characteristics","Service Characteristics",[20,4258,4259],{},"Performance alone misses the \"service + ecosystem\" dimension.",[139,4261,4263],{"id":4262},"claude-opus-47-anthropic","Claude Opus 4.7 (Anthropic)",[44,4265,4266,4272,4278],{},[47,4267,4268,4271],{},[24,4269,4270],{},"Strengths",": Coding/agentic focus, creative writing, Artifacts, MCP ecosystem, top-tier finance-agent performance",[47,4273,4274,4277],{},[24,4275,4276],{},"Weaknesses",": No image generation, weaker video/audio than Gemini, highest API price ($5/$25)",[47,4279,4280,4283],{},[24,4281,4282],{},"Platforms",": Claude.ai, Claude Code (CLI), API, AWS Bedrock, Google Vertex AI",[20,4285,4286,4287,4290,4291,4294,4295,4298],{},"Anthropic is clearly ",[24,4288,4289],{},"developer-and-enterprise-first",". Opus 4.7 is specifically tuned to ",[24,4292,4293],{},"\"execute instructions literally where prior models interpreted them loosely\""," — prompt craft now matters more. Claude Code has become ",[24,4296,4297],{},"my primary IDE"," since its 2025 launch.",[139,4300,4302],{"id":4301},"gemini-31-pro-google","Gemini 3.1 Pro (Google)",[44,4304,4305,4314,4319],{},[47,4306,4307,4309,4310,4313],{},[24,4308,4270],{},": Google Search integration, Workspace (Gmail/Drive/Docs), native multimodal including video/audio, 1M context as standard, ",[24,4311,4312],{},"aggressively low pricing",", strong science/math benchmarks",[47,4315,4316,4318],{},[24,4317,4276],{},": Coding polish still trails, less \"first try\" mindshare",[47,4320,4321,4323,4324,4326],{},[24,4322,4282],{},": gemini.google.com, AI Studio, Vertex AI, Google app integration, ",[24,4325,3488],{}," (Google AI Ultra subscribers)",[20,4328,4329,4330,4333],{},"Gemini's real advantage is ",[24,4331,4332],{},"Google ecosystem integration",". Reading an entire corporate email inbox, cross-searching Drive docs — it dominates \"daily work\" surface area. Deep Think is a separate high-reasoning mode for science and engineering problems, switchable when you need it.",[139,4335,4337],{"id":4336},"gpt-54-pro-openai","GPT-5.4 Pro (OpenAI)",[44,4339,4340,4345,4350],{},[47,4341,4342,4344],{},[24,4343,4270],{},": Agentic capability (BrowseComp/OSWorld dominant), abstract reasoning (ARC-AGI-2 83.3%), plugins/GPTs ecosystem, DALL-E/Sora integration, Advanced Voice Mode, Canvas, brand scale",[47,4346,4347,4349],{},[24,4348,4276],{},": Long time-to-first-token (reasoning model), knowledge cutoff August 2025",[47,4351,4352,4354],{},[24,4353,4282],{},": ChatGPT (web/app), API, Microsoft Copilot, Pro/Enterprise plans only",[20,4356,4357,4358,4361],{},"GPT-5.4 Pro is a class apart as a ",[24,4359,4360],{},"computer-use agent",". Beating human experts on OSWorld is symbolic — for multi-step workflows like \"research in browser → update spreadsheet → post to Slack,\" GPT-5.4 Pro is the top candidate. Voice mode remains best-in-class.",[29,4363],{},[32,4365,4367],{"id":4366},"my-personal-usage-split","My Personal Usage Split",[20,4369,4370],{},"Here's how I actually divide my time across all three (yes, I pay for all three — business expense).",[139,4372,4374],{"id":4373},"claude-opus-47-primary-50","Claude Opus 4.7 (Primary, ~50%)",[20,4376,4377,4380],{},[24,4378,4379],{},"Use cases",": Coding, earnings-report analysis, investment memos, contract review, creative/editorial drafts",[44,4382,4383,4386,4389,4392,4395],{},[47,4384,4385],{},"Drafted this article in Claude",[47,4387,4388],{},"Maintain this Nuxt 3 blog via Claude Code",[47,4390,4391],{},"Load 100+ PDFs in the 1M-context variant for due diligence",[47,4393,4394],{},"SWE-bench Pro 64.3% translates directly into superior large-codebase comprehension",[47,4396,4397],{},"\"Execute instructions literally\" tuning fits my workflow",[139,4399,4401],{"id":4400},"gemini-31-pro-secondary-30","Gemini 3.1 Pro (Secondary, ~30%)",[20,4403,4404,4406],{},[24,4405,4379],{},": Research, Google Workspace integration, video/audio, multilingual translation, high-volume batch",[44,4408,4409,4412,4415,4418,4424],{},[47,4410,4411],{},"Full conference recordings → key-point extraction",[47,4413,4414],{},"Sorting mixed EN/JA/ZH pitch emails from my corporate inbox",[47,4416,4417],{},"Latest-info research with Google Search grounding",[47,4419,4420,4421],{},"Absurdly cheap — my ",[24,4422,4423],{},"volume workhorse",[47,4425,4426,4428],{},[24,4427,3590],{}," for DD on science/deep-tech startups",[139,4430,4432],{"id":4431},"gpt-54-pro-secondary-20","GPT-5.4 Pro (Secondary, ~20%)",[20,4434,4435,4437],{},[24,4436,4379],{},": Web automation, image generation, voice, brainstorming, custom GPTs",[44,4439,4440,4446,4452,4455,4458],{},[47,4441,4442,4443],{},"BrowseComp strength shines on ",[24,4444,4445],{},"\"crawl 10 IR pages and extract earnings data\"",[47,4447,4448,4449],{},"OSWorld strength means I can trust it to ",[24,4450,4451],{},"fill Excel/Sheets automatically",[47,4453,4454],{},"Visuals for portfolio-company decks (DALL-E/Sora)",[47,4456,4457],{},"Voice brainstorming while walking",[47,4459,4460],{},"Founders still say \"I tried it on ChatGPT…\" — I need it for verification",[139,4462,4464],{"id":4463},"my-conclusion","My Conclusion",[20,4466,4467,4470],{},[24,4468,4469],{},"The \"model war\" is over. We're in the \"specialization\" phase."," April 2026 boils down to this:",[44,4472,4473,4478,4483],{},[47,4474,4475],{},[24,4476,4477],{},"Coding / long context / creative → Claude Opus 4.7",[47,4479,4480],{},[24,4481,4482],{},"Science / multimodal / volume / cost → Gemini 3.1 Pro",[47,4484,4485],{},[24,4486,4487],{},"Web+PC automation / abstract reasoning / ecosystem → GPT-5.4 Pro",[20,4489,4490,4491,4494],{},"One piece of VC advice: ",[24,4492,4493],{},"don't skimp on $20–30/month × 3 subscriptions",". Workloads differ, and using them appropriately massively improves productivity.",[29,4496],{},[32,4498,4500],{"id":4499},"investment-scenario-the-three-way-lab-race","Investment Scenario: The Three-Way Lab Race",[20,4502,4503,4504,318],{},"This is where the piece earns its VC framing. The investor question isn't \"which model wins?\" — it's ",[24,4505,4506],{},"\"how does the back-and-forth between the three labs ripple through related stocks?\"",[139,4508,4510],{"id":4509},"scenario-related-name-impact","Scenario × related-name impact",[634,4512,4513,4532],{},[637,4514,4515],{},[640,4516,4517,4520,4523,4525,4528,4530],{},[643,4518,4519],{},"Scenario",[643,4521,4522],{},"Probability",[643,4524,3681],{},[643,4526,4527],{},"Anthropic (AMZN/GOOGL bet)",[643,4529,3687],{},[643,4531,3690],{},[650,4533,4534,4552,4568,4584],{},[640,4535,4536,4539,4541,4544,4546,4549],{},[655,4537,4538],{},"A. Three-way continues (base)",[655,4540,3700],{},[655,4542,4543],{},"Neutral",[655,4545,4543],{},[655,4547,4548],{},"Slight upside",[655,4550,4551],{},"Core",[640,4553,4554,4557,4559,4561,4564,4566],{},[655,4555,4556],{},"B. Anthropic pulls ahead (Claude coding dominance)",[655,4558,3719],{},[655,4560,4543],{},[655,4562,4563],{},"Upgrade",[655,4565,4543],{},[655,4567,4551],{},[640,4569,4570,4573,4575,4578,4580,4582],{},[655,4571,4572],{},"C. Google reverses (Gemini ecosystem integration wins)",[655,4574,3737],{},[655,4576,4577],{},"Slight down",[655,4579,4543],{},[655,4581,4563],{},[655,4583,4551],{},[640,4585,4586,4589,4591,4593,4595,4597],{},[655,4587,4588],{},"D. OpenAI agentic dominance",[655,4590,3754],{},[655,4592,4563],{},[655,4594,4543],{},[655,4596,4543],{},[655,4598,4551],{},[20,4600,4601,4602,4605,4606,4609],{},"My current base case is ",[24,4603,4604],{},"A",": the next ~12 months stay competitive, with leadership flipping between the three. From the CVC seat, the most useful position in this kind of regime is ",[24,4607,4608],{},"\"benefits no matter who wins\""," — concretely NVDA (GPUs), ASML (lithography), TSMC (fab), ARM (IP).",[139,4611,4613],{"id":4612},"investment-call-implications","Investment call & implications",[20,4615,4616,4617,4620],{},"For startup investors: ",[24,4618,4619],{},"building application-layer businesses that depend on a single model is dangerous",". Just in 2026, the crown flipped from GPT-5.4 to Opus 4.7 in two months. Startups that abstract over multiple models and swap them transparently will be the ones that survive the next two crown flips.",[20,4622,4623,4624,4627],{},"For public markets: ",[24,4625,4626],{},"the more intense the competition between the three labs, the more capex flows into NVDA/ASML/TSMC",". Trying to pick which lab wins is a worse risk-adjusted bet than positioning across the layer that benefits while everyone keeps running.",[139,4629,4631],{"id":4630},"watch-items","Watch items",[44,4633,4634,4640,4646,4652],{},[47,4635,4636,4639],{},[24,4637,4638],{},"Next major versions of Claude / GPT / Gemini"," — does the crown keep flipping, or does someone consolidate the lead?",[47,4641,4642,4645],{},[24,4643,4644],{},"NVDA earnings, datacenter segment"," — high beta to lab competition intensity",[47,4647,4648,4651],{},[24,4649,4650],{},"OpenAI / Anthropic primary fundraising valuations"," — markup multiples are the temperature gauge",[47,4653,4654,4657],{},[24,4655,4656],{},"Regulation (EU AI Act, US AI Bill of Rights implementation)"," — changes the cost structure of frontier model development",[20,4659,4660],{},"That's all for today. I'd love to hear how you split your usage.",[29,4662],{},[20,4664,4665],{},[277,4666,4667,4668,561],{},"Disclaimer: This article is for informational purposes only and does not constitute investment advice. All investment decisions should be made based on your own judgment and in consultation with a qualified financial advisor. Generative AI is used to assist research, translation, and proofreading; final content is reviewed by ZYL0. See the ",[281,4669,560],{"href":283},{"title":563,"searchDepth":564,"depth":564,"links":4671},[4672,4673,4678,4682,4687,4693,4698,4699,4704,4708,4713,4719],{"id":2995,"depth":564,"text":2995},{"id":3025,"depth":564,"text":3025,"children":4674},[4675,4676,4677],{"id":3031,"depth":571,"text":3032},{"id":3052,"depth":571,"text":3053},{"id":3070,"depth":571,"text":3071},{"id":3108,"depth":564,"text":3108,"children":4679},[4680,4681],{"id":3114,"depth":571,"text":3114},{"id":3329,"depth":571,"text":3329},{"id":3418,"depth":564,"text":3418,"children":4683},[4684,4685,4686],{"id":3424,"depth":571,"text":3425},{"id":3463,"depth":571,"text":3464},{"id":3499,"depth":571,"text":3500},{"id":3525,"depth":564,"text":3525,"children":4688},[4689,4690,4691,4692],{"id":3535,"depth":571,"text":3536},{"id":3561,"depth":571,"text":3562},{"id":3594,"depth":571,"text":3595},{"id":3624,"depth":571,"text":3624},{"id":3659,"depth":564,"text":3660,"children":4694},[4695,4696,4697],{"id":3666,"depth":571,"text":3666},{"id":3776,"depth":571,"text":3776},{"id":3797,"depth":571,"text":3797},{"id":3848,"depth":564,"text":3849},{"id":3877,"depth":564,"text":3878,"children":4700},[4701,4702,4703],{"id":3884,"depth":571,"text":3885},{"id":3900,"depth":571,"text":3901},{"id":3917,"depth":571,"text":3918},{"id":3957,"depth":564,"text":3958,"children":4705},[4706,4707],{"id":3964,"depth":571,"text":3965},{"id":4157,"depth":571,"text":4158},{"id":4255,"depth":564,"text":4256,"children":4709},[4710,4711,4712],{"id":4262,"depth":571,"text":4263},{"id":4301,"depth":571,"text":4302},{"id":4336,"depth":571,"text":4337},{"id":4366,"depth":564,"text":4367,"children":4714},[4715,4716,4717,4718],{"id":4373,"depth":571,"text":4374},{"id":4400,"depth":571,"text":4401},{"id":4431,"depth":571,"text":4432},{"id":4463,"depth":571,"text":4464},{"id":4499,"depth":564,"text":4500,"children":4720},[4721,4722,4723],{"id":4509,"depth":571,"text":4510},{"id":4612,"depth":571,"text":4613},{"id":4630,"depth":571,"text":4631},"Claude Opus 4.7、Gemini 3.1 Pro、GPT-5.4 Pro——2026年4月時点の最新フラッグシップAIをVC実務で比較。使い分けに加え、AIラボ三つ巴の投資シナリオと関連株（NVDA/MSFT/GOOGL）への含意までを整理する。",{"date":4726,"image":4727,"alt":4728,"tags":4729,"tagsEn":4730,"published":591},"21st Apr 2026","/blogs-img/blog-ai-comparison.png","Claude・Gemini・ChatGPTの最新モデル比較",[588],[590],"/blogs/9-claude-gemini-chatgpt-comparison",{"title":2982,"description":4724},"blogs/9-claude-gemini-chatgpt-comparison","VR-rDx1huU7lOV3c5vi9W6m4rcW7aq-qIlNzXhp4Gd0",1778775884420]