まず使うアプリを選んでください

ChatGPTの手順

ブラウザ版ChatGPTで、プラグインの「追加」に「カスタム MCP サーバーを追加」が表示されるアカウントをご用意ください。初回の接続はパソコンから設定します。

使えるプランについて（2026年10月21日確認）
OpenAI公式は、Proの読取用カスタムMCPと、Business・Enterprise/EduのMCP接続を案内しています。組織アカウントは管理者・作成権限の条件もあります。Plus・Free・Goでの追加可否は一律に保証できません。追加の項目が見つからない場合は、CodexまたはClaude Codeの手順をご確認ください。公式の利用条件を見る ↗

この案内とChatGPTを、別々のタブで開いて進めます。

1. 1ChatGPTを開いてログインする

   ChatGPTを開く ↗

   開いた画面で、ご自身のアカウントにログインします。この案内は閉じずに残してください。すでにログイン済みなら、次へ進みます。

   次へ進む目印会話を入力できる画面が表示されている。

2. 2MCPの追加画面を開く

   プラグイン画面を開く ↗

   画面右上の「追加」を押し、「カスタム MCP サーバーを追加」を選びます。

   次へ進む目印「カスタム MCP サーバーを追加」の画面が開き、名前・説明・接続タイプ・認証の欄が並んでいる。

3. 3入力して、作成する

   ChatGPTの入力欄と、下の表を見比べながら設定します。コピーした値は、表の左に書かれた欄へ貼り付けてください。

   名前	「名前」欄に貼り付ける値名前をコピー
   説明	「説明」欄に貼り付ける値スクリーンショットからUIを整理し、HTML・CSSと実装手順の作成を支援します。説明をコピー
   接続タイプ	「サーバーURL」を選びます（最初から選ばれています）。
   URL	「接続タイプ」のすぐ下の欄に貼り付ける値URLをコピー 末尾の /mcp まで、そのまま貼り付けます。
   認証	最初は「OAuth」になっています。押して「認証なし」に変えます。

   アイコンは任意です。空欄のまま進められます。

   画面の注意書きを確認し、「理解したうえで続けます」にチェックを入れて「プラグインとして作成」を押します。

   接続の確認画面が出たら、いちばん下の黒いボタン「ぞろ屋式 WebデザインサポートMCPを接続する」を押します。

   プラグイン画面の「個人用」タブに戻ります。「自分で作成」に並んだ「ぞろ屋式 WebデザインサポートMCP」を押します。

   「アプリ」の欄の名前を押すと、使えるツールが4つ表示されます（get_web_design_workflow など）。

   次へ進む目印「アプリ」の欄に、緑の点と「接続済み」が表示されている。

4. 4チャットで試す

   「接続済み」の画面の右上にある「チャットで試す」を押します。

   新しい会話が開き、入力欄に青い文字で「@ぞろ屋式 WebデザインサポートMCP」が入ります。

   次からは、新しいチャットの入力欄の「＋」を押し、「プラグイン」の一覧から選ぶこともできます。一覧に出てこないときは、プラグイン画面の「個人用」から開いて「チャットで試す」を押します。

   次へ進む目印入力欄に、青い文字で「@ぞろ屋式 WebデザインサポートMCP」が表示されている。

   接続を確かめる →

Codexの手順

パソコン用のCodexアプリがある方は、こちらへ進みます。ご自身のChatGPTアカウント、またはCodexで使える契約をご用意ください。利用できる機能と上限は契約に従います。

1. 1Codexアプリを開いてログインする

   パソコンのCodexアプリを開き、ChatGPTアカウントでログインします。

   アプリがまだない場合は、先にChatGPTの手順を利用してください。

   次へ進む目印Codexで新しいチャットを開ける画面が表示されている。

2. 2MCPサーバーの設定を開く

   Codexの「設定」を開きます。

   「MCPサーバー（MCP servers）」を選び、「サーバーを追加（Add server）」を押します。

   設定は、Windowsなら Ctrl＋,、Macなら Command＋, でも開けます。

   次へ進む目印名前・接続方式・URLを入力する画面が表示されている。

3. 3入力して、保存する

   下の内容をCodexに入力します。

   名前	「名前」欄に貼り付ける値名前をコピー
   接続方式	Streamable HTTPを選びます。
   URL	「URL」欄に貼り付ける値URLをコピー
   APIキー・トークン	空欄のままにします。

   保存します。「Restart（再起動）」が表示された場合は、そのボタンを押します。

   次へ進む目印MCPサーバー一覧に zoroya-web-design が表示されている。

4. 4新しいチャットで接続先を確かめる

   Codexで新しいチャットを開き、入力欄に /mcp と入力します。

   接続サーバー一覧に zoroya-web-design があることを確認します。

   次へ進む目印接続サーバー一覧で zoroya-web-design を確認できた。

   接続を確かめる →

Claude Codeの手順

パソコンで使うコマンド版のClaude Codeを、このMCPにつなぎます。Claude Codeを利用できる契約・認証方法をご用意ください。WindowsはPowerShell、Macはターミナルで進めます。

1. 1Claude Codeを準備する

   まだインストールしていない方は、Claude Codeの公式インストール手順を開く ↗

   Windowsの方は公式ページの「Windows PowerShell」、Macの方は「macOS」の項目に従ってインストールします。すでにClaude Codeを使っている方は次へ進みます。

   Claude Codeの利用には、対応するClaudeのプランまたはConsoleアカウントが必要です。無料プランではClaude Codeを利用できません。

   次へ進む目印PowerShellまたはターミナルで claude --version と入力すると、バージョン番号が表示される。

2. 2PowerShellまたはターミナルを開く

   Windowsはスタートボタンを押して「PowerShell」と検索し、表示されたWindows PowerShellを開きます。Macは「ターミナル」を開きます。

   次へ進む目印文字を入力できるPowerShellまたはターミナルの画面が開いている。

3. 3接続用コマンドを実行する

   下の「コマンドをコピー」を押し、PowerShellまたはターミナルに貼り付けてEnterを押します。コマンドは1行です。

   コピーするコマンド claude mcp add --transport http zoroya-web-design --scope user https://zoroya-web-design-mcp.pages.dev/mcp コマンドをコピー

   このMCPの接続にAPIキーは不要です。--scope user は、同じパソコンのClaude Codeで使えるようにする設定です。

   次へ進む目印Added から始まる追加完了のメッセージが表示される。

4. 4接続を確かめてClaude Codeを開く

   同じ画面で、下の確認コマンドを貼り付けてEnterを押します。

   コピーする確認コマンド 確認コマンドをコピー

   一覧に zoroya-web-design と Connected が表示されたら接続できています。

   続けて claude と入力してClaude Codeを開きます。初回は画面の案内に沿ってログインしてください。Claude Codeの中で /mcp と入力しても、接続状態を確認できます。

   次へ進む目印Claude Codeの会話画面を開けて、/mcp に zoroya-web-design が表示される。

   接続を確かめる →

接続できたか、会話で確かめる

公開の案内が届き、アプリの設定が終わったら、下のメッセージで接続を確認します。

1. 「メッセージをコピー」を押します。
2. 選んだアプリの会話へ貼り付けます。ChatGPTでは、選択したプラグインの名前の後ろに貼り付けます。
3. 送信し、ツールの実行と返ってくる内容を確認します。

制作を始める →

制作を始める

接続を確認できたら、同じ会話に次のメッセージを送ってください。

質問が来たら、一つずつ答えて進めてください。

困ったとき

止まったところに近い項目を開いてください。