こんにちは、AI事業部の森山です。
「AIに、実際のWordPressサイトや制作データを見せながら相談できたら便利なのに」 と感じたことはないでしょうか。
文章作成やアイデア出しに強いAIも、制作環境と切り離されたままでは、どうしても一般論になりがちです。そこで注目されているのが、AIと外部の情報やツールをつなぐ「MCPサーバー」です。
MCPとは「Model Context Protocol」の略で、AIアプリと外部ツール・データを共通の方法で連携させるためのルールです。今回は、MCPサーバーが何なのか、Webデザイナーの仕事でどのように役立つのかを、わかりやすく整理します。
MCPサーバーとは何か
MCPとは「Model Context Protocol」の略で、AIアプリと外部ツール・データを共通の方法で連携させるためのルールです。
MCPサーバーは、そのルールに沿って、AIアプリへ情報や機能を提供する仕組みを指します。
ひと言でいえば、AIが必要な情報を確認したり、許可された操作を行ったりするための窓口です。
ここで、「サーバー」という言葉から、Webサイトを公開するためのWebサーバーを思い浮かべる方もいるかもしれません。ですが、MCPサーバーとWebサーバーは役割が異なります。
Webサーバーは、ブラウザから「このページを見せて」と求められたときに、保存されているHTMLや画像などのWebページのデータを返す仕組みです。
一方、MCPサーバーは、AIから「このフォルダを検索して」「WordPressの投稿一覧を取得して」「GitHubのIssueを確認して」と求められたときに、許可された範囲で必要な保存先や外部サービスへ接続し、結果をAIへ渡す仕組みです。
つまり、MCPサーバー自体がデータを保管しているとは限りません。ローカルファイル、WordPress、GitHub、Google Driveなど、必要な場所を確認して、AIが使える形で情報や機能を返す「接続役」です。
| 種類 | 主な相手 | 主な役割 |
| Webサーバー | ブラウザ | Webページや画像などを返す |
| データベース | システム | データを保存・管理する |
| MCPサーバー | AIアプリ | 外部の情報や機能へ接続し、AIに渡す |
本屋さんに例えると
ここで、いつものように本屋さんに例えてみましょう。
AIは、お客さんに本を提案する賢いスタッフです。一般的な本の知識は持っていますが、その店にどんな本があるのか、どこに置かれているのかまでは、何もしなければわかりません。
Webサーバーは、店頭でお客さんに本を渡す店員さんです。お客さんから求められた本を、店頭へ届けます。
一方、MCPサーバーは、AIスタッフからの依頼を受けて、許可された範囲で在庫表や制作資料を確認するバックヤードの窓口です。
AIスタッフが「この店には初心者向けのWordPress本がありますか」と尋ねると、MCPサーバーが在庫表を確認し、必要な情報を返します。ただし、AIスタッフが倉庫全体や売上データを自由に見られるわけではありません。見せる棚や資料は、あらかじめ決めておく必要があります。
AI単体では、外部の情報を自由に扱えない
ChatGPTやClaudeのようなAIは、文章作成、要約、アイデア出し、コードの提案などが得意です。
しかし、実際の制作現場では、目の前の案件に合わせた支援が必要になります。
- ローカルPC内のファイルを確認する
- Figmaのデザインデータを参照する
- WordPressの投稿や固定ページを確認する
- GitHubのコードやIssueを見る
- Google Drive内の仕様書を探す
- 過去の修正履歴を読み取る
こうした情報をAIが参照できなければ、「このLPの改善案を出して」と依頼しても、一般的な提案になりやすいでしょう。
MCPサーバーを通じて、必要な情報への参照を許可しておけば、AIは実際のページ構成、コード、資料などを踏まえて支援しやすくなります。
ただし、MCPサーバーを追加すれば、すべてのサービスやデータを自動で読めるわけではありません。WordPress、Figma、GitHub、Google Driveなど、それぞれに対応した連携設定と権限の許可が必要です。
Webデザイナーにとって何が便利になるのか
MCPサーバーによって変わるのは、AIに相談できる内容の深さです。
これまでは、確認してほしいコードを貼り付けたり、ページの内容を文章で説明したり、仕様書の一部を手作業で共有したりする必要がありました。
必要な情報をAIに参照させられるようになると、制作物の文脈を踏まえた相談がしやすくなります。
たとえば、次のような依頼です。
- このLPのHTML構造とCSSを見て、見出し階層やCTA配置の改善点を出してほしい
- Figmaのデザインと実装済みページを比較して、違いを確認してほしい
- WordPressの固定ページを確認し、見出し構成が不自然なページを探してほしい
- このサイトのFAQ構成を見て、ユーザー導線の改善点を出してほしい
AIが「何について話しているのか」を理解したうえでサポートできることが、MCPサーバーの大きな価値です。
使い方の例1：デザインレビューの補助
デザインデータや実装済みページをAIが確認できるようにしておけば、次のような一次チェックを任せやすくなります。
- 見出しの階層は自然か
- CTAは適切な位置にあるか
- セクションごとの余白に大きなばらつきはないか
- ボタンやカードの表現が統一されているか
- PCとスマホで情報の優先順位が崩れていないか
最終的な判断は人間が行う必要がありますが、レビュー前の確認や見落とし防止には役立ちます。自分では見慣れてしまった箇所を、別の視点で確認する補助として使いやすいでしょう。
使い方の例2：コーディング補助
MCPサーバーは、コーディング補助とも相性がよい仕組みです。
AIに許可された範囲でソースコードやリポジトリを参照させれば、ファイル単体ではなく、プロジェクト全体の文脈を踏まえた提案を受けやすくなります。
- このCSSの重複を整理してほしい
- このコンポーネントがどこで使われているか調べてほしい
- 既存の命名ルールに合わせてクラス名を提案してほしい
- このJavaScriptがどこから呼ばれているか確認してほしい
- 修正による影響が出そうなファイルを洗い出してほしい
これは単なるコード生成ではなく、実際に動いている制作物を理解したうえで相談する使い方です。
使い方の例3：WordPress運用の補助
WordPressを扱う現場でも、MCPサーバーは役立ちます。
たとえば、投稿や固定ページを読み取り専用で参照できるようにしておけば、次のような確認を補助してもらえます。
- 古い記事や整理不足の記事を探す
- メタディスクリプション未設定のページを洗い出す
- ページタイトルとh1のズレを確認する
- FAQやCTAの配置に偏りがないかを見る
- カスタムHTMLブロックの記述を点検する
Webデザイナーは、デザインだけでなく、情報設計、更新しやすさ、ページ構成の整合性まで確認する場面があります。こうした運用面の確認をAIに補助してもらえると、改善の初動を早められます。
ただし、最初から本番サイトを自由に編集させるのは危険です。まずは読み取り専用で、確認や分析から始めるのが安全です。
使い方の例4：制作資料の検索と整理
Web制作では、デザインデータやコード以外にも、多くの資料を扱います。
- 仕様書
- ワイヤーフレーム
- 原稿
- ヒアリングシート
- 画像素材
- 過去の修正履歴
- クライアントからの依頼メモ
資料が複数の場所に分かれていると、必要な情報を探すだけでも時間がかかります。
MCPサーバーを使って参照範囲を設定すれば、AIに資料探しや要約を補助してもらえます。
- 1 この案件の最新仕様書を探してほしい
- 2 ブランドカラーの指定がどこに書かれているか確認してほしい
- 3 過去の修正依頼を要約してほしい
- 4 原稿とデザイン上の見出しが一致しているか確認してほしい
- 5 素材の使用条件が書かれている箇所を探してほしい
情報を探す時間が減るだけでも、制作全体を進めやすくなります。
MCPサーバーが提供できる代表的な機能
MCPサーバーは、主に次のようなものをAIアプリへ提供できます。
| 種類 | 内容 | Web制作での例 |
| ツール | AIが実行できる機能 | ファイル検索、HTML解析、投稿一覧の取得 |
| リソース | AIが参照できる情報 | 仕様書、CSS、サイトマップ、マニュアル |
| プロンプト | 定型化した依頼のひな型 | デザインレビュー、SEOチェック、アクセシビリティ確認 |
Web制作の実務で考えると、MCPサーバーは「どの情報を参照させるか」「何を実行させるか」「どの依頼を定型化するか」を整理する仕組みだといえます。
何でもAIに触らせてよいわけではない
MCPサーバーは便利ですが、AIに外部ツールやデータへの権限を与える仕組みでもあります。設計を誤ると、必要以上に強い権限を与えてしまうおそれがあります。
特に注意したいのは、次のような操作です。
- 本番サイトの更新
- ファイル削除
- データベースの書き換え
- メール送信
- 顧客情報の参照
- APIキーや認証情報の取り扱い
最初から何でもできる状態にするのではなく、制限を前提に設計することが重要です。
- 1 まずは読み取り専用で始める
- 2 対象フォルダや対象サービスを限定する
- 3 実行できる操作を絞る
- 4 APIキーやパスワードをAIへ返さない
- 5 連携には必要最小限の権限を持つアカウントを使う
- 6 操作ログを残す
- 7 公開、削除、送信などの重要操作には人間の確認を入れる
AIに任せる範囲を決めることも、これからのWeb制作では大切な設計の一部です。
まとめ
MCPサーバーは、AIと外部ツールやデータをつなぐための窓口です。
WebサーバーがブラウザへWebページを返すのに対し、MCPサーバーはAIアプリへ、許可された範囲の情報や機能を提供します。データを保存する場所そのものではなく、AIが必要な情報を確認したり、決められた作業を行ったりするための接続役です。
デザインレビュー、HTMLやCSSの確認、WordPressの構成チェック、制作資料の検索など、これまで手作業で行っていた確認の一部をAIに任せやすくなります。
ただし、便利だからといって強い権限を与えるのは危険です。まずは読み取り専用で小さく始め、確認や分析の補助から取り入れていきましょう。
MCPサーバーは、AIを単なる会話相手で終わらせず、制作環境につながったアシスタントとして活かすための土台です。仕組みを知ることで、AIをより安全に、実務に合わせて使えるようになります。
Webサーバーの仕組みについて、下記のコラムで詳しく解説していますのでご興味があればご覧ください。
ここまで読んでいただきありがとうございます。
今回のコラムはここまで、また次回のコラムでお会いしましょう。
執筆者/森山砂葵（GMOプライム・ストラテジー株式会社）
「プライム・ストラテジー株式会社」AIビジネス部所属
医療事務、Webディレクターを経て、現在はPythonを勉強中。趣味は画像生成や旅行を兼ねた聖地巡礼です。
