Claude Skills・MCP・ウェブ制作・動画生成を実務で使い倒す：エンジニア向け実践ガイド2026

バージョン注記: 本記事は2026年5月時点の情報を基に執筆している。mcp Python SDK 1.27.0、MCP仕様 2025-11-25リビジョン、Remotion最新版を参照している。MCPの仕様更新は活発なため、公式ドキュメント（modelcontextprotocol.io）で最新情報を確認することを推奨する。

私は半導体プロセス開発からCVCに転身し、AWS（IoT Core・Lambda・DynamoDB・API Gateway）でゼロから河川洪水検知システムを6ヶ月で立ち上げた経験があります。「動かしてみないと本当の落とし穴は見えない」——これがエンジニアリング現場で身に染みた感覚で、Skills・MCP・Remotionも同じでした。今回はドキュメントを読むだけでは見えないハマりどころと最短実装パスを、実際に手を動かした上で書きます。

TL;DR：この記事でわかること

Skills と MCP は何が違うのか——役割を正確に理解する

Claude CodeやClaude.aiを使い込んでいくと、必ずぶつかる疑問がある。「Skills と MCP って結局どう使い分けるの？」だ。ドキュメントを読んでもピンとこない場合、次のメンタルモデルが効く。

Skills = エージェントの「手順書」、MCP = エージェントの「外部接続線」。

Skillsは.claude/skills/以下に置いたSKILL.mdファイルだ。Claudeがタスクの文脈を判断し、関連するSkillを自動でロードして指示に従う。コードを書かず、マークダウンを書くだけで動く。一方MCPはJSON-RPC 2.0で動くクライアント・サーバープロトコルで、ClaudeをGitHub・データベース・社内APIなどの外部システムに繋ぐ。

重要な点は「SkillはMCPツールを呼べる」という非対称性だ。Skillで手順を定義し、MCPで外部ツールを接続する——両方組み合わせることで初めてフルオートのエージェントができる。

Skills の実務パターン

2026年3月時点のSkillsエコシステムは、公式Anthropicスキル・検証済みサードパーティ・コミュニティスキルの三層構造になっている。frontend-designスキルが27万インストール超、Remotionスキルが週11.7万インストール、gws（Google Workspace）が公開3日で4,900 GitHubスターを記録した。

実務でSkillが威力を発揮するのは「同じ手順を何度も説明するのが嫌な場面」全般だ。独自DBスキーマを理解するSQLアシスタントSkill・社内コーディング規約を埋め込んだレビューSkill・独自データ形式の変換Skillなどを一度書けば、以降はプロンプト一行で呼び出せる。

SKILL.mdを自分で書く場合の最小構成は以下だ：

---
name: my-skill
description: >
  説明。Claudeがこれを見てスキルをロードするかを判断する。
  トリガー条件を具体的に書くこと。
---

# My Skill

## 手順

1. まず〇〇を確認する
2. 次に△△を実行する

## 落とし穴

- □□の場合は××してはいけない

MCPサーバーを50行で作る——Python FastMCP 最短実装

MCPの普及速度は前例がない。2024年11月の公開時に月200万SDK DLだったものが、OpenAI採用（2025年3月）・Microsoft統合（7月）・AWS対応（11月）を経て、2026年3月には9,700万DL/月、公開サーバー1万超に達した。ReactはこのDL数に3年かかったが、MCPは16ヶ月でやってのけた。

MCPが解決する問題はシンプルだ。社内CRM・請求システム・機能フラグサービスをAIエージェントから叩くには、従来クライアントAIごとに別の統合コードを書く必要があった。MCP対応サーバーを一つ作れば、Claude・ChatGPT・Cursor・Gemini全クライアントで動く。

セットアップ

# uv 推奨（pip でも可）
uv add mcp
# または
pip install mcp

最小構成サーバー（Python FastMCP）

以下は実際に動くMCPサーバーの最小実装だ。Tools・Resources・Promptsの三要素を全て含む：

from mcp.server.fastmcp import FastMCP

mcp = FastMCP("my-service", json_response=True)

# Tool: 副作用のある操作（POSTに相当）
@mcp.tool()
def check_stock(sku: str) -> dict:
    """指定SKUの在庫数を返す"""
    # 実際はDBクエリ等に置き換える
    return {"sku": sku, "quantity": 42, "warehouse": "tokyo"}

# Resource: 読み取り専用データ（GETに相当）
@mcp.resource("products://catalog")
def get_catalog() -> str:
    """商品カタログの一覧を返す"""
    return "SKU-001: Widget A\nSKU-002: Widget B"

# Prompt: 再利用可能なプロンプトテンプレート
@mcp.prompt()
def stock_check_prompt(sku: str) -> str:
    """在庫確認のためのプロンプトを生成"""
    return f"SKU {sku} の在庫を確認し、少ない場合は補充を提案してください。"

if __name__ == "__main__":
    # ローカル開発: stdio
    # mcp.run()
    # リモート/本番: Streamable HTTP
    mcp.run(transport="streamable-http", host="0.0.0.0", port=3050)

Claude Desktop への登録

{
  "mcpServers": {
    "my-service": {
      "command": "python",
      "args": ["/path/to/server.py"]
    }
  }
}

トランスポートの選び方

TypeScriptで書く場合は@modelcontextprotocol/sdkとZodを使う。Python FastMCPと同じ三要素（Tool / Resource / Prompt）をサポートし、型安全性が高い。どちらの言語でも「ワイヤプロトコルはJSON-RPC 2.0で共通」なので、PythonサーバーにTypeScriptクライアントを繋ぐことも普通に動く。

Claude Code でウェブサイトを生成する——CLAUDE.mdとSkillの組み合わせ

2026年初頭時点でClaude Codeは全GitHubコミットの4%を生成しており、VS Codeへの日次インストールは2,900万に達した。「バイブコーディング」と呼ばれるこのワークフローは、エンジニア経験ゼロの人でもNext.jsアプリを作れるレベルに成熟している。

ただしClaudeに「サイト作って」と言うだけでは、Interフォント・パープルグラデーション・白背景というお約束の「AI生成デザイン」が出てくる。これを回避するのがCLAUDE.mdとSkillの組み合わせだ。

CLAUDE.mdの位置づけ

プロジェクトルートに置くCLAUDE.mdはClaude Codeがセッション開始時に自動読み込みする設定ファイルだ。ここに「プロジェクトのコンテキスト」を書く：

# Project: MyApp

## スタック

- Nuxt 4 (Nuxt Content 3, Vue 3 Composition API)
- Tailwind CSS v4, shadcn/ui
- Vercel デプロイ

## ルール

- コミット前に必ずビルドを通す
- TypeScript strict モード必須
- MDX コンポーネントは使わない（Nuxt Content の CommonMark のみ）

## 禁止事項

- console.log を残したままコミットしない
- any 型の使用

CLAUDE.mdとSkillの役割分担は明確だ。CLAUDE.mdは「このプロジェクトの文脈」、Skillは「このタスクのやり方」。両方あることで、プロジェクトを知りつつ特定作業を正しくこなすエージェントができる。

Next.js / Nuxt でのサイト生成ワークフロー

実際に動くフローは以下になる：

1. CLAUDE.mdを作成: スタック・命名規則・禁止事項を記述
2. 公式または自作Skillを追加: npx skills add frontend-design
3. プランモードで要件確認: claude --plan "〇〇なランディングページを作りたい"
4. イテレーティブに実装: 一度に全部頼まず、セクション単位で進める

重要なのはステップ3のプランモードだ。いきなり実装させると「間違った問題を解くコード」が生成されることがある。まずClaudeに既存のコードベースを探索させ、変更箇所・影響範囲・エッジケースを特定したプランを出させる。プランを確認してからイエスと言うだけで、実装ミスの大半を防げる。

Claude Code + Remotion で動画をコードで書く

「動画をコードで管理する」という発想は、フロントエンドエンジニアには自然に受け入れられる。Remotionはまさにそれを実現するReactベースの動画フレームワークで、useCurrentFrame()でフレーム番号を取得しアニメーションをコードで記述する。Claude Codeとの組み合わせは「プロンプトで動画を書く」ワークフローを実現する。

セットアップ

# Remotionプロジェクトを作成
npx create-video@latest my-video-project
cd my-video-project

# Agent Skillsをインストール（Remotionチームが提供するベストプラクティス集）
npx skills add remotion-dev/skills

SkillsをインストールするとClaude Codeがリモーションの規約を理解し、正しいコンポーネント構造でコードを生成できるようになる。38種類以上のカテゴリがあり、アニメーション・3D・字幕・音声・チャート・トランジションをカバーする。

実際のプロンプト例

良いプロンプトの書き方にはコツがある。具体的な数字・解像度・秒数を最初に宣言し、シーンの境界を明示する：

1920x1080px、30fps、10秒の動画を作って。

0-2秒: ロゴフェードイン（中央配置、白背景）
2-6秒: 3つの機能を順番にスライドイン（左から右）
        - "高速" + 稲妻アイコン
        - "安全" + シールドアイコン
        - "簡単" + チェックアイコン
6-9秒: CTAボタンが拡大して登場「今すぐ試す」
9-10秒: フェードアウト

カラー: bg #0a0a0a, accent #7c3aed, text white

生成されたコードはRemotionスタジオでリアルタイムプレビューし、問題なければレンダリングする：

# プレビュー
npx remotion studio

# レンダリング（MP4）
npx remotion render MyComposition out/video.mp4

ユースケース別の向き不向き

ローカルレンダリングをするのでクラウド動画生成ツールのウォーターマーク・クレジット制限は一切関係ない。「ビルドアーティファクトとしての動画」という考え方で、製品変更のたびに動画をCI/CDで自動更新するパイプラインを組む事例もすでに登場している。

ハマりポイントと回避策

実際に試してハマった点を正直に書く。

MCP 関連

SSEトランスポートを使っていてエラーが出る: 2025年3月のMCP仕様アップデートでSSE（Server-Sent Events）トランスポートは非推奨になった。リモート接続には必ずstreamable-httpを使う。FastMCPならmcp.run(transport="streamable-http")に変えるだけで移行できる。

MCP サーバーを複数入れたら起動が遅くなった: 5サーバー・58ツール構成だとコンテキスト消費が55,000トークンを超えることがある。AnthropicのTool Search機能（オンデマンドロード）を有効にすると約85%削減できる。モノリシックなサーバーを避け、用途別に小さく分割すること。

セキュリティ: OWASP MCP Top 10（2025年公開）に従いサーバーを審査する。特にプロンプトインジェクション（ツールのdescriptionに悪意ある指示を埋め込む攻撃）に注意。コミュニティのサーバーは使用前にコードレビュー必須。

Skills 関連

スキルが期待通りにトリガーされない: descriptionフィールドが曖昧だとClaudeがスキルをロードしない。「〇〇というキーワードが出たら必ずこのSkillを使え」という強い表現を入れること。

コンテキスト上限付近でSkillが無視される: セッションが長くなりコンテキストの70〜85%超えると精度が落ちる。/compactでコンテキストを圧縮するか、新しいセッションで継続する。

ウェブサイト生成関連

一度に全部作らせようとした: 「ECサイトを全部作って」は失敗率が高い。コンポーネント単位・ページ単位でイテレーティブに進めること。プランモードで方向性を確認してから実装させる。

生成コードをそのままコミットした: ACM 2025年の研究で、LLMのコードは人間比で論理エラーが1.75倍多い可能性が示されている。テストを通してからコミットを徹底する。

Remotion 関連

最初から複雑な動画を作ろうとした: 5秒のサンプルから始め、背景色→テキスト→アニメーション→複数シーンの順に積み上げること。

曖昧な指示を出した: 「80px」「30フレーム（1秒）」のように数値で指定するとClaude Codeの精度が上がる。「大きいフォント」「ゆっくりフェード」は精度が下がる。

シーン間でキャラクターの外見が変わる: Remotionは静的アセットを直接コードで参照するため、画像ファイルを固定すれば解決する。複雑な人物動画はHeyGen等の専用ツールを併用する。

まとめと次のステップ

Claude Codeがコミット全体の4%を生成し、Spotifyのエンジニアが2025年12月以降手でコードを書いていないという現在、これらのツールへの習熟は「あると便利」から「ないと遅い」に変わりつつある。まず一つのMCPサーバーかSkillから始め、「毎回説明するのが面倒なこと」を自動化するところから入るのが最短距離だ。

次号の記事案

• 案1：数字で追う続編 — 本記事の前提を最新データで更新し、何が強まり、何が崩れたかを再点検する。
• 案2：実務テンプレート編 — 読者が自分の投資判断、制作単価、または開発運用に転用できるチェックリストへ落とし込む。
• 案3：反対シナリオの検証 — 今回の見立てが外れる条件を先に定義し、次に見るべき指標と時間軸を整理する。

関連記事

• Claudeで動画とウェブを"全自動"にしたら制作時間が1/5になった話 — Skills・MCP・Claude Designを組み合わせて、企画→デザイン→動画台本→公開までを一本の流れで回したら、制作時間が…
• Claude Code Skill設計10パターン｜確実に発火するdescriptionと運用テンプレ — Claude CodeのSkillは便利だが、descriptionが曖昧だと発火しない。
• Subagentでブログリサーチを並列分業する型｜投資・技術・読者ニーズを3並列で走らせ1本に統合する — ブログ1本のリサーチを投資・技術・読者ニーズの3軸に分け、Claude Codeのsubagentで並列に走らせて1本のドラフトに統…

参考資料

本文の事実関係と数値前提は、再審査時にも読者が確認できる一次情報・公的資料を優先して見直しています。

• Anthropic Claude Code documentation
• Model Context Protocol documentation
• Vercel documentation

本記事は情報提供を目的としたものであり、特定の銘柄、サービス、契約条件の推奨や投資助言ではありません。執筆者は記事内で触れた銘柄やサービスにポジションまたは利害関係を持つ可能性があります。調査、翻訳、校正の一部に生成AIを利用していますが、最終的な内容はZYL0が確認しています。詳細は免責事項をご確認ください。