CodexへMCPを追加するとき、接続数を増やすことよりも「どの作業を任せるか」を決める方が大切でした。
2026年9月2日、ブログ運営に使う接続先をOpenAI Docs、Figma、GitHub、Chrome DevToolsの4つに絞って確認しました。
OpenAI Docsは公式情報の検索、Figmaはデザインの参照、GitHubは原稿と変更履歴の管理、Chrome DevToolsは公開ページの確認に使います。
4つをつなぐと、記事制作を次の順番で進められます。
- OpenAI Docsで仕様の根拠を確認する
- Figmaで画面や図解の基準を確認する
- GitHubへ原稿と変更履歴を残す
- Chrome DevToolsで公開ページを確認する
実際の接続確認では、OpenAI Docs、Figma、Chrome DevToolsはその場で応答しました。GitHubだけは最初、別アカウントのGitHub Appを参照しており、対象のPrivateリポジトリが404になりました。Appのインストール先とRepository accessを直し、ChatGPT側で再接続すると、リポジトリの名前・公開範囲・既定ブランチまで取得できました。
ブログ運営で選んだ4つのMCP
4つは同じことをする道具ではありません。記事制作の工程ごとに担当を分けます。
| 接続先 | 担当する作業 | ブログ運営で使う場面 |
|---|---|---|
| OpenAI Docs | 公式情報を探す | CodexやOpenAI APIの仕様確認 |
| Figma | デザインを読む | トップページ、図解、余白、色の確認 |
| GitHub | 原稿と変更履歴を読む・保存する | 別PCでの再開、差分確認、復元 |
| Chrome DevTools | 公開ページを調べる | スマホ表示、Console、Network、表示速度 |
MCPは、AIと外部の情報やToolをつなぐ共通の仕組みです。OpenAIの案内でも、ブラウザーやFigmaなどの開発ツールへCodexを接続する用途が紹介されています。
MCPの基本用語やstdioとHTTPの違いは、先に公開した記事で確認できます。
接続できたかは3段階に分けて確認する
設定一覧に名前が出ただけでは、実際に使えるとは限りません。
今回の確認は、次の3段階に分けました。
- 登録：Codexの一覧に接続先が表示される
- 応答：その接続先のToolを呼び出せる
- 目的達成：検索、画面取得、リポジトリ取得など必要な結果が返る
実測結果は次のとおりです。
| 接続先 | 登録 | 応答 | 目的達成 |
|---|---|---|---|
| OpenAI Docs | 確認済み | 確認済み | 公式ページを検索できた |
| Figma | 確認済み | 確認済み | 認証中のプラン情報を取得できた |
| Chrome DevTools | 確認済み | 確認済み | 公開ページのタイトルを取得できた |
| GitHub | 確認済み | 確認済み | 対象Privateリポジトリの情報を取得できた |
GitHubのようにTool自体が応答しても、目的のデータを取得できなければ接続完了とは判断しません。今回は404の解消後、対象リポジトリまで読めることを確認して完了としました。
OpenAI Docs MCPで仕様の根拠を確認する
OpenAI Docs MCPは、OpenAIの公開ドキュメントを検索・取得するための接続先です。
CodexやAPIの仕様は変わることがあります。記憶だけで設定記事を書くのではなく、公式ページを探し、URLと確認日を残す用途に向いています。
Codexへ追加するときは、OpenAIの公開エンドポイントを登録します。
codex mcp add openaiDeveloperDocs --url https://developers.openai.com/mcp2026年9月2日の確認では、「Codex MCP configuration」と検索し、OpenAI公式ドキュメントの候補が返りました。
接続後に使った指示は短いものです。
OpenAI公式Docs MCPを使い、CodexのMCP設定ページを探してください。
公式URLを添え、確認できない内容は推測しないでください。検索結果が返ったあとも、見出しと本文を直接照合します。検索結果があることと、回答の解釈が正しいことは別の確認です。
Figmaは見た目の基準を渡すために使う
Figmaをつなぐ目的は、Codexにデザインを丸投げすることではありません。
色、余白、カード幅、文字サイズなど、人の目で決めた基準をCodexが読める状態にするために使います。
2026年9月2日、CodexのFigma接続へアカウント確認を実行すると、認証中のアカウントと参加プランが返りました。個人名やメールアドレスは記事やスクリーンショットへ載せません。
接続確認には、既存デザインを変更しない読み取り操作を使います。Figmaのファイルを開けるか確認したい場合も、最初から新規ファイルを作らず、対象URLと閲覧権限を確認します。
ブログ制作では次のように使えます。
- トップページのPC版とスマホ版を比較する
- 記事内図解の色と余白をそろえる
- 既存デザインの画像やアイコンを確認する
- 実装後の画面とデザインの差を探す
Figma公式は、デスクトップ版とリモート版のMCPサーバーを案内しています。利用できる機能はプラン、シート、ファイル権限によって異なります。
GitHubは「ログイン済み」だけではPrivateリポジトリを読めなかった
GitHubは、原稿、画像計画、作業ログ、変更差分を残す場所として使います。
ナマズノートでは、WordPressだけに原稿を置かず、公開前の本文と作業記録をPrivateリポジトリへ保存しています。別PCでも同じブランチを取得でき、修正前後の差分を確認できます。
ただし、GitHub連携で最初につまずきました。
GitHubのプロフィール取得は成功したのに、ナマズノートのPrivateリポジトリを指定すると404が返りました。原因は、GitHub Appが対象リポジトリの所有者ではなく、別のアカウントにだけインストールされていたことです。
Privateリポジトリで404になったときは、URLの入力ミスだけでなく次も確認します。
- GitHub Appをインストールしたアカウント
- リポジトリの所有者
All repositoriesかOnly select repositoriesか- 選択式の場合、対象リポジトリが含まれているか
- 組織所有の場合、管理者の承認が必要か
GitHub公式の手順では、SettingsのInstalled GitHub Appsから対象AppのConfigureを開き、Repository accessを変更できます。必要なリポジトリだけを選ぶ方が、許可範囲を確認しやすくなります。
GitHub公式：インストール済みGitHub Appsの確認・変更
今回は次の順番で直しました。
- GitHub Appのインストール先を対象リポジトリの所有者へ変更する
Only select repositoriesを選び、namazunote-opsだけを許可する- ChatGPTのGitHubプラグインで
再接続を実行する - 接続アカウントとAppのインストール先が切り替わったことを確認する
- 対象リポジトリのメタデータをもう一度取得する
修正後は、リポジトリ名namazunote-ops、公開範囲private、既定ブランチmainが返りました。プロフィール取得だけで終わらせず、実際に使うPrivateリポジトリまで読めたことで、権限が反映されたと判断できます。
記事、スクリーンショット、GitHubにはアクセストークンや接続メールアドレスを残しません。
Chrome DevTools MCPは個人用Chromeと分けて使う
Chrome DevTools MCPは、ページ表示、DOM、Console、Network、PerformanceなどをCodexから確認できる接続先です。
今回は次の設定で追加しました。
codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest
--headless
--isolated
--redact-network-headers--headlessで画面を出さず、--isolatedで普段のChromeとは別の一時プロファイルを使います。--redact-network-headersはNetwork情報に含まれる機密性の高いヘッダーを伏せるための設定です。
2026年9月2日、Chrome DevTools MCP 1.8.0を新しいCodexセッションから起動し、https://example.com/を開きました。返ったページタイトルは「Example Domain」でした。
最初の確認は、WordPress管理画面ではなく公開ページで行います。隔離プロファイルには普段のログイン状態が入らないため、個人用ChromeのタブやCookieを誤って読む範囲を減らせます。
ブログ公開後は次を順番に確認できます。
- 375〜390pxで横スクロールがないか
- H1が1件か
- 画像が表示幅からはみ出していないか
- 404や500の通信がないか
- Consoleに新しいエラーがないか
- LCP画像やレイアウト移動に改善候補がないか
Chrome公式：Get started with Chrome DevTools for agents
4つを同じ記事制作で使う流れ
4つは同時に呼び出し続ける必要はありません。工程が変わるたびに担当を切り替えます。
現行仕様と公式URLを確認する
図解や画面の基準を確認する
原稿と変更履歴を保存する
公開後の表示とエラーを確認する
STEP 1 OpenAI Docsで確認項目を集める
CodexやMCPの記事なら、最初にOpenAI Docsで現行仕様を確認します。
URL、ページ見出し、確認日をメモし、事実と自分の操作結果を分けます。公式ページにない感想や実測値を、公式情報のように書かないためです。
STEP 2 Figmaで完成イメージを確認する
図解やトップページを直す場合は、Figmaの対象フレームを確認します。
PC幅だけでなく、スマートフォン用フレームの余白と文字量を先に確認します。画像がない記事では、無理にFigmaを呼び出しません。
STEP 3 GitHubへ原稿と記録を保存する
原稿、画像計画、確認ログをGitHubで管理します。
Codexが変更したファイルだけを差分で確認し、パスワード、アクセストークン、ASPの非公開情報が含まれていないことを確認してから保存します。
STEP 4 Chrome DevToolsで公開ページを確認する
WordPressへ反映したあと、公開URLをPC・タブレット・スマートフォン幅で確認します。
自動検査で問題がなくても、見出しが長すぎないか、CTAが押しやすいか、説明が詰まっていないかは画面を見て判断します。
同じ1記事を企画から公開まで進める流れは、次の記事でまとめています。
実際に使う指示は役割と禁止事項まで書く
「4つのMCPを使って」だけでは、必要のない接続先まで呼び出す可能性があります。
作業順と禁止事項を一緒に渡します。
OpenAI Docsで現行仕様を確認し、公式URLと確認日を整理してください。
Figmaは指定したフレームだけを読み、既存デザインを変更しないでください。
原稿と確認ログはGitHubの作業ブランチへ保存してください。
公開後はChrome DevToolsの隔離ブラウザーで390px表示、Console、404を確認してください。
トークン、Cookie、個人情報、非公開のASP情報は出力や画像へ含めないでください。
公開、削除、権限変更は確認なしに実行しないでください。接続先を指定するだけでなく、読み取り範囲と止める場所を明記します。
4つをつなぐ前に決めた安全ルール
便利なMCPほど、読める情報や実行できる操作が増えます。
ナマズノートでは次の順番で使います。
- 最初は公開情報と読み取り操作だけで試す
- GitHub Appは必要なリポジトリだけを許可する
- Figmaは対象ファイル・対象フレームを指定する
- Chromeは個人用プロファイルではなく隔離環境を使う
- トークン、Cookie、メールアドレスを画像へ入れない
- 書き込み、公開、削除、権限変更は別の操作として確認する
- 作業後はGit差分と公開URLを人が確認する
MCPは判断の代わりではありません。公式情報を探す、必要な画面を読む、差分を残す、公開結果を測るところまでを助ける道具です。
よくある質問
- 4つとも入れないとCodexは使えませんか？
-
いいえ。最初はOpenAI Docsのような公開情報を読む接続先1つで十分です。デザインを扱わないならFigmaは不要です。GitHubを使っていない記事や、公開画面を調べない作業では、対応する接続先を呼び出す必要はありません。
- GitHubで404になったらリポジトリが消えていますか？
-
削除とは限りません。Privateリポジトリでは、未ログイン、別アカウント、GitHub Appの未インストール、Repository accessの対象外でも404になることがあります。ブラウザーで存在を確認したうえで、Appのインストール先と許可対象を確認します。
- Figmaへ接続するとデザインが自動で書き換わりますか？
-
接続しただけでは書き換わりません。ただし、利用できるToolに編集操作が含まれる場合があります。最初はアカウント確認、メタデータ取得、スクリーンショット取得などの読み取りから試します。
- Chrome DevTools MCPは普段のChromeを読みますか？
-
接続方法によります。今回の設定は
--isolatedを使い、普段のChromeとは別の一時プロファイルを起動しました。既存Chromeへ接続する設定を使う場合は、開いているタブやログイン情報の扱いを先に確認します。 - OllamaのFreeモデルでも同じ4つを使えますか？
-
今回4つを確認したのは、通常のCodexセッションです。OllamaのFreeモデルを指定した軽量実行では、ユーザー設定を読み込まない条件を使っていたため、この4つを組み合わせた動作はまだ確認していません。未検証のまま同じ挙動とは断定できません。
まとめ
Codexへ接続した4つは、記事制作の別々の場所を担当します。
- OpenAI Docs：公式情報の根拠を探す
- Figma：デザインの基準を読む
- GitHub：原稿と変更履歴を残す
- Chrome DevTools：公開結果を確認する
2026年9月2日の実測では、OpenAI Docsの検索、Figmaの認証状態取得、Chrome DevToolsでの公開ページ表示、GitHubのPrivateリポジトリ取得まで確認できました。GitHubは最初に404となりましたが、Appのインストール先、Repository access、ChatGPT側の再接続を順番に直すと解消しました。
接続一覧に4件並べることがゴールではありません。「公式情報を確認した」「デザインの基準を読んだ」「差分を保存した」「公開画面を確認した」の4つがそろって、ブログ制作の流れとして使えるようになります。
コメント