「正直もうCMSいらなくない？」静的HTML × MCPで実現する、AI直接編集の爆速Web運用

たーさん

最終更新日時 : 2026.09.03

Webサイトのテキストを直したり、お知らせを1行追加したりするためだけに、WordPressの重い管理画面を開いてログインする。あるいはmicroCMSの管理画面を行き来してスキーマを調整する――。

日頃そうした作業にわずらわしさを感じているなら、「静的HTML ＋ MCP（Model Context Protocol）」の組み合わせをぜひ試してみてください。

結論から言うと、小〜中規模サイトやLP運用であれば、「もうCMSはいらない」と言えるレベルの快適さが手に入ります。本記事では、その仕組みと具体的な導入手順を解説します。

なぜ「静的HTML ＋ MCP」がCMSキラーなのか？

これまで「CMSを使わない静的サイト」の最大の弱点は、「HTML/CSSの知識がないと更新できない」「ちょっとした文言修正でもエディタを開いてタグを探すのが面倒」という点でした。

しかし、MCP（Model Context Protocol）の登場によって状況が一変しました。

フォルダを指定するだけでAIがサイト全体を把握

公式のFilesystem MCPサーバーを繋ぐだけで、AI（Claude Desktopなど）がローカルのHTML/CSS/JS構成を丸ごと読み取ります。

日本語で投げるだけでタグ構造を壊さず編集

「お知らせの先頭に新着情報を1件追加して」「ヘッダーのナビゲーション文言を変えて」とチャットで伝えるだけで、該当ファイルの該当箇所をAIが特定し、直接書き換えてくれます。

DBもサーバー管理も不要

WordPressのようにDBのバックアップやプラグインのセキュリティ更新に追われる心配がゼロ。静的ファイルなので表示速度も最速です。

5分で完了！ Filesystem MCP を使ったローカル直接編集の導入手順

Node.jsがインストールされている環境であれば、設定ファイルに数行追記するだけで今すぐ動かせます。

1. 設定ファイルを開く

Claude Desktopを使用する場合、画面左上のメニューまたは設定画面から設定ファイルを開きます。

メニュー: Settings ➔ Developer ➔ Edit Config
対象ファイル: claude_desktop_config.json

2. 対象のWebサイトフォルダへのアクセスを許可する

設定ファイル内の mcpServers に、公式の @modelcontextprotocol/server-filesystem を追加します。


{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/my-static-site"
      ]
    }
  }
}

※パス（/Users/username/my-static-site）は、ご自身のHTMLサイトが格納されているローカルディレクトリの絶対パスに変更してください。

Claude Desktopを再起動して指示を出す

アプリを再起動すると、チャット欄のツール一覧にハンマーのアイコン（またはfilesystemツール）が認識されます。あとはチャット欄から日本語で指示を出すだけです。

プロンプト指示の例:

「index.html のキャッチコピーを『次世代のWeb制作』に変えておいて」

「about.html の会社概要テーブルに、資本金の行を追加して」

「固定ページのスタイル調整として、メインのセクションを青背景・白文字のデザインに整えて」

AIがファイルの中身を読み取り、差分を計算してローカルのHTML/CSSを自動で上書き保存してくれます。ブラウザをリロードするだけで変更が反映されます。

実務・チーム運用なら「GitHub MCP」でPR作成まで自動化

ローカルファイルを直接書き換える運用は最速ですが、実務や複数人での運用では「AIがタグを壊してしまわないか」「本番反映前にレビューしたい」という懸念が出てきます。

そこで便利なのが GitHub MCP サーバー との連携です。


【編集指示】
   ↓ (チャットで依頼)
【AI (GitHub MCP)】
   ↓ 修正用ブランチを作成してコミット ＆ Pull Request作成
【人間 (GitHub / Cloudflare Pages等)】
   ↓ プレビューURLで確認して「マージ」ボタンをクリック
【本番自動デプロイ完了】

このフローを組むことで、「非エンジニアでもチャットだけで修正依頼が出せて、プレビュー確認を経て安全に本番公開される」という、実質的なノーコードCMS環境が無料で手に入ります。

メリット・デメリットの比較

従来のCMSと比較すると、向き・不向きは以下のようになります。

項目	従来のCMS（WordPress等）	静的HTML ＋ MCP
初期セットアップ	サーバー契約・DB設定が必要	フォルダを用意してJSON書くだけ
保守コスト	プラグイン更新・脆弱性対策が必要	ほぼゼロ（静的ファイルのみ）
表示速度	キャッシュ設計が必要	最速（静的ホスティング直配信）
編集の手間	管理画面にログインしてフォーム入力	チャットに「直して」と投げるだけ
適しているサイト	毎日何十本も投稿するメディアサイト	コーポレートサイト、LP、ポートフォリオ

まとめ：CMSの「管理画面」という概念が溶けていく

かつてWebサイトの更新にCMSが必須だったのは、「HTMLを直接編集できる人が限られていたから」に過ぎません。

自然言語を理解して的確にファイルを更新してくれるAIと、それをセキュアに仲介するMCPが登場したことで、「重い管理画面にログインしてフォームに打ち込む」という行為そのものが過去のものになりつつあります。

まずは手元のLPやポートフォリオサイトから、この「CMSレスなAI編集体験」を試してみてはいかがでしょうか。

投稿者プロフィール

たーさん代表者

東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。

その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。

開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。

現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。

見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。